Monday

Day 01 - Intro to CSS Grids

Imagine your computer display as a grid - like graph paper - made up of columns and rows. Any Web page you visit is built from block shapes, even if they've overlayed it with curved imagery. HTML is written such that other systems would not work. So since we have to work in blocks anyhow, we should find a simple, straightforward way to do that, right?

Welcome to CSS Grid. With this approach, we can sketch our page layout to see how many rows and columns we will need, and then we can code our HTML to allow for those grids. In CSS, we can map styles to each grid section and our Web pages will have great structure. The Week 7 Challenge shows a cartoonish version of this structure to help you visualize what we will be doing with CSS Grid.

You will also see reference to Flexbox. Flexbox is an alternative layout structuring strategy. I do not anticipate teaching it as part of this class but if you wish to use it you are welcome to do so. I will, however, still require you to use CSS Grid for the coding challenges.