CSS Fundamentals
As you come in to class today visit this post and start trying to play the CSS game it links to. We will play a little in class and talk about CSS basics.
Files at the END of class: Here is a zip of the HTML and CSS we used to make our basic Grid in class.
UPDATE: the original link to the files didn’t have any css in the main.css file. That has been changed and the link updated.
Files at start of class: We will use these files throughout the day. Download from Dropbox
The files include a presentation on CSS Grid Basics, another basic reference file for the CSS Grid and the files from last class. We will cover the grid in more detail in later classes. Today the idea is to get you started and to think about your grid and layout as one of the first items of CSS that you write.
CSS Grid Basics
If there is time at the end of class we will learn the very basic elements of the CSS grid to do some layout on the elements of https://bonobos.com/ that we turned into HTML earlier in the class. We will give a basic layout like they have on the site.
We will go over the presentation and then get hands on in giving a grid layout to the Bonobos files.
Further CSS Grid Resources
If you’re into the Grid and want to know more now, here are two great places to start:
- Rachel Andrew’s Grid by Example https://gridbyexample.com/learn/
- Mozilla Developer’s Network Reference Documentation
I have also created a post on CSS Grid that has more examples and resources. https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/11/css-grid/
One thought on “Class 5: CSS Grid and Layout Basics”