Today’s goal:

• Continuing practicing with CSS media queries to design webpage for different screen sizes

 Today’s featured website:

• http://kylereadsays.com/– Check out this designer’s very creative webpage. View the code and click on the images. What are they?

   From Monday- CSS media queries

• Divide a blank piece of paper into four sections. Label the top of each section 0 – 650px, 651 – 800px, 801 – 1300px, and 1300px +. These represent our media queries.
• We’re going to sketch and label our paper for each media query. Let’s start with the smallest screen size, which is the more complicated one. For this, our vertical menu becomes horizontal and is displayed above the rest of the page rather than on the left.
• For 0 – 650px, the nav and section width are 100% each and the background colors are purple and pink, respectively. Let’s quickly sketch that out.
• Once our screen hits 651px, the nav goes back to the left and will take up a smaller percentage of the screen. Here our nav is 15% and yellow and the section is 80% and blue.
• For 801 – 1300px, our nav is 10% and green while the section is 85% and orange. Why is our nav a bit smaller here than in the previous media query? What is happening to the screen size, and as a result, our content?
• Finally, for 1300px +, the nav is 10% and turquoise while the section is 85% and goldenrod.
• Now, use these sketches as a guide to make sure your code is correct. Fix any mistakes you find.
• Still stuck? Check your code against this code here. Don’t simply copy and paste because that prevents you from actually learning what went wrong and how to fix it!