This workshop will cover more advanced aspects of CSS such as positioning and a handful of other details. We will specifically focus on the CSS property "display" and then "position". By the end of the workshop, you’ll be able to make a practical web layout complete with header and content blocks.
After I explain some CSS positioning, go through Learn Layout. There are many specific nuances that I won’t be able to explain in depth. CSS positioning is not intuitive so please take time to learn it. It will get easier with practice.
Make your own site that has links to each student's Styled WikiHow page from last week. In total you should have 10 links — students and Laurel's page — here is a list of links. You can think of this page as a "Table of Contents" to a book or guide, so style it accordingly.
To start, create a new folder in your class homepage. Call it "workshop04". Create a new file called "index.html". This is where you'll do your work. This page must:
Contain an h1 title element that says "How-To Guide". Display this title in a Google Font.
Contain 10 links that have CSS display: inline-block so that they appear in a grid. Each link must have one thing about it that makes it different from the others (such as color, font, border, etc.) Create a hover style for them. Do not use images.
This assignment is designed to be straightforward and easy to complete. Use the rest of your time on
P1 25 Variations.