Today’s Goals:

• Finish the CSS media queries to make our DJ Khaled page responsive
• Begin looking at responsive tables

 Today’s Featured Site:

• http://celebrateimmigrants.us/– This site provides a listing of immigrants who have founded companies in America. Is it responsive? How can you tell? How does the site change on smaller screens?

 Happy February!

• 3rd quarter has begun- make it YOUR BEST! You are learning skills now in this class for FREE; many people pay thousands of dollars to learn web development skills.
• Smashing Magazine is once again offering free monthly-themed desktop wallpaper (with or without a calendar). Check out your options here. To find out your screen resolution, right click anywhere in the empty space on your computer desktop and choose screen resolution from the menu.

 CSS Media Query Practice

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.

Important new code:
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 (320px) and is a horizontal menu across the top below the header and above the section. Nav then becomes a sidebar for the 600 and 1100 pixels 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 (320px) and then floats to the right so the nav can fit next to it on the larger screens.

Create new CSS for each media query. Work at your own pace and please help each other out! Here is the starter code in case you make a mistake and need to go back.

1. Let’s look at the page in Firefox with Responsive Design Mode and see what happens at our different break points of 320px, 600px, and 1100px. Does this page look good at each size? Why or why not?
2. What do we have to change for each media query? Why?
3. Let’s begin with the smallest screen, 320px. Let’s change nav, li, and section for this media query. Our nav should have width: 100%;, background-color: purple; box-sizing: border-box; float: none; and clear: right;. Our li should have display: inline; (why?). Our section should have width: 100%; background-color: pink; and float: none;. Why are we changing the CSS in this way?
   
4. Now let’s change the rest of our CSS. As our screen size grows, we can have our menu (nav) move from the top of our page to a sidebar. Let’s begin with the next screen, 600px. Our nav should have background-color: yellow; and width: 35%; (why?). If we want our nav to appear in a sidebar on the left, how should we float it? Let’s add background-color: blue; to section and width: 55%;. How should we float section if we want it next to nav? Finally, we need our Major Keys to display vertically, not horizontally. What should we change the display of li to?
   
5. Time to finish with the 1100px media query. Let’s change the background color of nav to green and the width to 40%. Let’s change the background color of section to pink and the width to 50%. Why don’t we have to float these sections? Why don’t we have to do anything with li?
   
6. Finally, let’s look at this updated page in Firefox’s Responsive Design Mode.
7. Why did we keep our header and footer the same for each screen size?
8. Look at what happens to our webpage when we go below 320px. How could we fix this?
9. Here is the answer code to check your code against if you’re having issues. Hints: check your curly brackets { }. Do you have enough? Too many? Check your semi-colons ; and colons :. Colons go in between properties and values in CSS like background-color: blue and semi-colons are at the end of every line like background-color: blue;.

 Responsive Tables

• Write down answers to the following questions:
  1. When is it a good idea to use a table on a webpage? What types of content would you use a table to display? Why?
  2. Did you use a table in your webpage project? Is it responsive?
  3. What issues do tables have when going from a large screen to a small screen?
  4. How could we use CSS media queries to change how tables look on small screens? What would you change? Why? (hint: think about how much space a screen has for displaying content either vertically or horizontally).
• Find a couple examples of tables on a webpage. See if you can find one that is responsive. If you’re stumped, just begin by checking out the webpages of sites you like or well-known sites. Write down these sites somewhere so we can refer to them later.