Shape of the Day:

• Flexbox is back – with Media Queries
• Responsive Webpage Design Challenges

Website of the Day:

https://www.webdesignerdepot.com/ – A cool site for tips and resources for web development.

1. The return of Flexbox – now with the use of Media Queries

• See what you remember with flexbox by downloading this code and noticing the differences between CSS Grids and Flexbox.
• Here’s a helpful guide for Flexbox code – https://codepen.io/enxaneta/full/adLPwv/
• What’s the major difference between grid and flexbox?

2. Responsive Webpage Design Challenges

• Use what you’ve recently learned about responsive web design to create mobile-friendly webpages. Practice using media queries, CSS grid and flexbox.
• Download the code for each of the challenges below (four) and read the instructions in the comments.
  • Perfectly center an element using flexbox – download code here
  • Make the table with a partial Vancouver Canucks Roster responsive by using a media query – download code here
  • Use a media query and flex box to change a large background image and font size for a small screen – download code here
  • Use CSS grid and a media query to make this student schedule look good on all screen sizes – download code here
• Other Challenges (Pick 1)
  • Create a responsive photo gallery using CSS grid or flexbox
  • Re-design an entire page or a section (like a menu or another floating piece) of your personal webpage project to make it more responsive using media queries, flexbox, and/or grid.
  • Use Word, Powerpoint or create a new webpage that teaches someone about media queries, flexbox and CSS grid. Explain what they are, why they are, why they are used, how to use them, when to use them, and add images or screenshots to go along with your explanations.