10: Simple Layouts with Blockstart

This is a rough draft of a rewrite to introduce a simple layout system that is HTML only. The video hasn't been updated yet, and I need to test this with students. Feel free to try it and report back to me on Discord if it makes sense. Otherwise, go ahead and skip it for now.

Your studies so far have covered a very linear and boring style of HTML. Your documents start at the top and go to the bottom. There's no 2-dimensional layout, no color, no font differences, just straight line HTML. When you look around the internet you don't see too many websites like this. Maybe a few blogs here and there--but for the most part--every site has complex 2d layouts that have multiple rows with columns.

To create one of these "fancy" layouts you need to use CSS, but going from plain HTML to HTML+CSS is a major jump. After working with many students who struggled with this jump I came up with something called blockstart.css. The blockstart.css is a simple CSS file you can add to your HTML which gives you some basic layout blocks entirely in HTML. I actually use it to get started with my designs so I don't have to deal with CSS until I'm ready to make my pages "perty." For you, it will let you practice creating layouts before you've fully learned about CSS.

By practicing 2d layout with blockstart.css you'll be able to transition to CSS more easily. You'll already have studied the HTML needed to position elements where you want on the page and only need to learn how to do that with CSS later. This exercise will teach you how to use blockstart.css quickly, and then the next module will explain it more fully toward the end.