Today’s goals:

• Continue practicing CSS media queries to create a responsively designed webpage
• Preview another approach to responsive web design, CSS grid layout

 Today’s featured site:

• http://khaledipsum.com/ – The world’s most entertaining random text generator!

 CSS Media Queries

• About
  • CSS media queries are used to change CSS styles when the screen (or view port) is a certain width. Screen/view port sizes are selected by determining when a design “breaks.” For example, in the Dallas Art Fair site we looked at, a video was used as a background for larger view ports, such as computer screens, and an image was used for smaller view ports. Media queries can be used to change a background image, page layout, or menu design (among many other things) when these things don’t look right at certain view ports (such as a video background image on a small screen such as a phone).
  • What we are doing to our page: We are going to change up our original DJ Khaled page by adding a header, footer, and sidebar menu. We are going to add new CSS for different media queries to change how our page looks on different screen sizes.
    header– located at top of page, width 100% for each screen
    footer– located at bottom of page, width 100% for each screen
    nav– contains the Major Keys and is the page menu. Nav is 100% width on the smallest screen and is a horizontal menu across the top below the header and above the section. Nav then becomes a sidebar for larger screens, so its width changes to a smaller percentage and it is floated to the left so it will be next to section. The nav’s menu items go from being horizontally displayed to vertically displayed on the larger screens.
    section– contains picture and text. Section is 100% width on the smallest screen and then floats to the right so the nav can fit next to it on the larger screens.
• Today’s practice code
  1. First, let’s download new code  to replace the code I gave you yesterday (sorry, mistakes were found!). Just copy and paste it into your existing page and save it; you don’t have to create a new page.
  2. Let’s fix the ???? in our media query
  3. We have a media query for small screen sizes but 320px isn’t a good break point. Let’s launch the page in Firefox and open responsive design mode to determine what would be a better (higher) number to use based upon how our page looks. Let’s look at page on different devices.
  4. Let’s see how nav looks at 401px and up. How can we fix the text so it doesn’t wrap to two lines? Let’s create a new media query by copying and pasting the old one and fixing the code (and adding a new background-color to nav).
  5. Let’s see how the nav looks as the screen gets bigger. How can we fix it so the nav doesn’t seem too large for the text? Let’s create a new media query by copying and pasting the old one and fixing the code (and adding a new background-color to nav). Maybe instead of using percentage values, what value can we use that will “automatically” adjust to fit the content? Let’s also add some padding.
  6. What are the new break points (where the style changes happen?)
  7. Why does our page look the way it does between 441px and 534px? Where are the styles coming from?

CSS Grid Layout

• CSS grid layout is another way to create a responsive webpage layout by using columns and rows
• Play this Grid Garden game to see CSS grid in action