Shape of the Day:

• CSS Grid
• Create a Photo Gallery with CSS Grid

Website of the Day:

https://orangeyouglad.com/ – a well designed website that is responsive too!

1. CSS Grid

• Used to create responsive webpage layouts by using columns and rows to organize content.
• For a quick overview, check out https://www.w3schools.com/css/css_grid.asp
• Here are some examples of CSS Grid Layout websites
  • https://www.niagarafallsusa.com/ 
    
  • https://gridbyexample.com/ 
    
  • https://www.cssdesignawards.com/website-gallery?feature=grid (collection) 
    
  • https://codepen.io/collection/DQvYpQ/ (collection)
  • NOTE: Not all the above websites LOOK like an actual grid, thus CSS Grid Layouts can look different!
• Complete the exercises on Free Code Camp through “Use grid-area Without Creating an Areas Template”
• After you have completed this exercise, take a screen shot showing they have been completed.
• Look at a basic grid layout with a header, footer, menu, and main section. Download the code here and review it. Keep the code for your future reference – notice how there are two different ways to set up the same basic layout in this example. Check out all the comments in the code!

2. Photo Gallery with CSS Grid

• Practice creating a responsive layout for a web photo gallery on space! You will use CSS Grid and Media query. There is more than one way to create a responsive photo gallery using CSS grid so the following broken codes will show how to use two different ways. Download the code and fill in the ???? with the correct code.
• Download the first broken code here
• If you need some extra help you can use this grid cheat sheet and the Free Code Camp exercises from earlier
• Download the second broken code here