Lessons > Tutorial 3. CSS Grid & Media Queries

Download Tutorial Files Solutions

CSS is notoriously a nightmare – particularly when it comes to layouts. As an effort to provide some guidance re: using some more modern techniques for layout, the course staff and I have created a basic CSS tutorial, where multiple layouts can be easily supported using CSS Grid – the latest in a long line of strategies for simplifying layouts.

Instructions

Please download the tutorial files and implement the three layouts below using CSS Grid. You should use the same stylesheet for all three views. Your TA will help you get started and walk you through one way of defining CSS Grids. The tutorial will essentially walk you through the CSS Tricks: “A Complete Guide to Grid” tutorial.

References

• CSS Grid
• Media Queries

What to turn in

To submit this week’s Tutorial assignment (encouraged but not required if you attended Tutorial), please do the following:

1. Save all of your Tutorial 3 files in a folder called tutorial03
2. Add your tutorial03 folder to your git repository, commit them, and push them to github. Your commands should look something like this:

$ git add tutorial03
$ git commit -am "Checking in my tutorial03 folder"
$ git push

When you’re done, paste a link to your tutorial03 GitHub pages on Canvas under the Tutorial 3 assignment.