3 screens

Class Wednesday, March 9, 2016

 Today’s goal:

  • Practice CSS media queries to design webpage for different screen sizes
  • Watch a funny video

 Today’s featured website:

   CSS media queries (from yesterday)

  • We watched this video.
  • Before we work with the code based off of the video, let’s do a quick sketch. In the video, we saw four boxes containing an image and some text shift around as the screen size grew and shrunk. Think about the four boxes and how much space they take up percentage-wise as the screen gets bigger or smaller. Let’s draw them at 100%, 50%, and 25%.
  • Let’s work with some code based off of the video. Click here to download your code.
  • Wait, what’s box-sizing: border-box?
  • Open a new Notepad++ page, copy and paste the code, save it as khaled.html, and then launch it in the browser. What happens when you resize the browser window? What do the media queries say?
  • If we add more media queries, what should happen if we design for a smaller screen? What about a larger one?
  • Can you add other CSS style properties to the separate media queries? Try adding background-color: red to the 900px box and see what happens.
  • Add a media query for 1000px and make the background-color pink. Keep the width the same percentage.
  • Add a yellow background-color to the 500px box. What happens when we shrink our screen to a size smaller than 500px? Why? Where is that grey background color coming from? What percentage are the boxes taking up when the screen size is smaller than 500px?
  • What happens if you add four more boxes below the ones you already have? Try it; just copy and paste the code.
  • What is happening to our box at 500, 900, and 1000 pixels? Why did we start with 500px first?
  • How do we know what size screens to design for? How do you choose pixel values?
  • Practice now:
    • Create media queries for 300, 600, 900, and 1200 pixels with the following styles.
    • 300 pixels, 100% width, yellow background color
    • 600 pixels, 50% width, pink background color
    • 900 pixels, 25% width, green background color
    • 1200 pixels, 25% width, red background color