📝Lab Assignment #5 - CSS Grid Layouts

Due 5/18

Using your lab assignment from week 5, touch up your mapplication by creating a layout with CSS Grid and making a cohesive webpage.

The requirements are:

• A title for the webpage describing what is being shown
• Design a responsive-layout using CSS Grid
• Use a sub-grid (grid-within-a-grid)
• Utilize buttons or divs to interact with your map (Revisit Lab #3 for more info)

Submission

Post your link as a comment in the Discussion forum for Lab Assignment #5

Extra Credit

Any of the following can be done for extra credit:

• Create a completely different responsive layout using CSS grid
• Add multiple CSS grids
• Move the survey into a button, rather than an iframe!
• Utilize circleMarkers instead of regular markers
• Use CSS to style the marker pop-up window!
• Try a sticky header

Recommended Reading

Formerly the pre-lab:

• MDN CSS Basics

• MDN CSS Grid

Extra Resources

• MDN CSS Grid Guides

• CSS Grid Starter Layouts

• CSS Grid Styling