Lab 6 - Tiny Grid

Responsive mode: TINY! 🄹

Tiny Grid

In this week’s prep, you completed a responsive grid design that uses two ā€œbreakpointsā€ to distinguish three layouts for a page. In this lab, you will continue with the same code base (but you should start from our version…), and will add in a 3rd breakpoint to now have a 4th layout for the page: a ā€œtinyā€ layout.

  1. accept the github classroom assignment linked from your canvas course
    • in doing so, tell github classroom that you’re in a group with your neighbor
  2. both you and your neighbor: clone the repository to your local machines
  3. Replace the fake name in the README.md’s Acknowledgements with your own name.
  4. add the README.md changes to the staging area, commit the changes, and push the changes to the remote repository.
  5. edit the tiny.css such that when the viewport width is less than 375px, the layout changes such that only the ā€œmain article areaā€ is displayed.
  6. add the tiny.css changes to the staging area, commit the changes, and push the changes to the remote repository.

Acknowledgements

Developers:

  1. Nay Bored

With huge thanks to the CS 343 cheat code Mozilla Developer Network.