CSS Layout, part 2. Exercise

For this exercise, you won't need to come up with any new content. We'll be using everyone's writings from exercise2.

You can download the starter kit here: exercise3.zip. When you open this, you'll find an index.html (homepage) that links to everyone's raw HTML writings.

In this exercise, I'd like you to edit style.css (which is connected to every page on this site) to play around with positioning elements using CSS. If you need to edit the HTML of each page for some reason (to add a helpful class or id in order to better select it with CSS), you can go ahead.

Experiment with the following CSS properties (which are specific to layout):

display
position
top, right, bottom, left
z-index
float

And feel free to use some properties from last time, including:

width, max-width, height
margin, padding
border

And if you're feeling adventurous / modern, try playing with more recent approaches to layout:

Flexbox (since 2013)
CSS Grid (since 2017)

Also, you might want to check out what others experimented with last time with CSS. To do that, go to the portal, into the participants/ folder, and check out everyone's exercise2.

When you're done, upload your files to the portal in: participants / your-name / exercise3.

(You can see my demo here. And remember you can download it from the portal too.)

Reminder: Maybe you noticed last time that we styled some writing with CSS. But what we didn't get to was how to position things side-by-side. Use this exercise to try some layouts using CSS -- maybe ones you could see yourself using in your series.