TIY Week 2, Day 1: Responsive CSS layouts using flexbox and media queries
TIY Week 2, Day 1: Responsive CSS layouts using flexbox and media queries
The downloaded zip contains two subfolders, resources and starter_files. The resources folder contains screenshots of the final website at three sizes: mobile, tablet, and desktop. The starter_files folder contains the index.html and style.css pages. Don’t edit the HTML page. You can match the mockups with nothing more than CSS, so you have no reason to edit the HTML. Because this assignment is about responsive layout, some of the more basic visual styles are already in place in the CSS document.
Your job is to finish the CSS to match the HTML page to the 3 responsive layouts.
Step 1: Review the provided layouts and compare them with the current state of the HTML page
Open mobile.png, tablet.png, and desktop.png with Preview.
Open the starter_files folder in your text editor.
Open index.html in Chrome.
Comparing the website with the layout, taking note of which styles have been applied and which have not.
Use Chrome DevTools to examine the code.
Step 2: Complete the CSS to match the appropriate layout at each breakpoint size
Add styles and media queries to the CSS to match the layout.
Use Chrome DevTools to check your refactored code against the output.