RANCH!

Overview

This project was completed in week 9 of Turing School of Software and Design. The goal of this weekend-long solo project was to replicate a static comp using HTML and CSS.

Given the comp below, we were to recreate the layout, while having creative license with the color palette, icons, images, and copy. As a ranch connoiseur, I chose to rank some of my favorite ranch brands. You can view the deployed site here!

Learning Goals

To solidify and demonstrate the understanding of:

  • Utlizing a grid layout
  • Writing clean and DRY HTML and CSS
  • Making the site responsive to different screen sizes and across different browsers such as Firefox, Safari, and Chrome
  • Using a reset or normalize. I chose to use Eric Meyer's Reset CSS file because I wanted the most consistency across all browsers.

The Provided Comp:

Provided Comp

Several breakpoints were utilized for various screen sizes including...

Desktop:

Desktop View

Tablet:

Tablet View

Mobile:

Mobile View

Technologies Used

  • HTML
  • CSS
  • VSCODE

Contributors

Author:

Reviewer: