Before starting the workshop, download the repository. You will find an html file (css-workshop.html), an images folder containing all the images you'll need along with mock-ups and a spec image of the page we're building. In the css folder you'll find the css file (css-workshop.css), where you'll do most of the work. In the HTML file, feel free to add or remove classes as necessary, but you don't need to alter the markup in any other way.

Since all of this is on the front-end, there is no reason to spin up a server. You should be able to view all your changes locally. file:///Users/[user]/path/to/css-workshop.html (On a Mac) file:///C:/Documents%20and%20Settings/[user]/path/to/css-workshop.html (On Windows) You can also drag the file into your browser.

There is one complex, difficult css trick in the aside at the bottom. It has to do with the box-shadows on the round images and round background "Learn More" link, and their being responsive. You'll notice that there is an extra nested div. For an explanation and a hint look at https://css-tricks.com/aspect-ratio-boxes/

You may have noticed that there is a solution folder. But keep in mind that there are as many right answers as there are people in this workshop,^* and even more wrong answers. Try not to look at the potential solution until you're done, or really stuck.

Validate your answer.

Review each other's work.