Exercise: Pulling it all together

Alright, our final exercise is to upgrade all our test site pages (index.html, privacy.html, about.html, contact.html) to use CSS layouts.  To give you an idea of what we expect, we’ve provided a sample index.html and style.css that you can copy or build on below.

Once again we start with our sketch: You will notice we’ve made some refinements to our last layout and added some actual content.

testpage

It may be a valuable experience for you to try to spend some time to recreate this on your own. But if you’d like to skip ahead, you can just read over our example files below:

The final html page can be seen here. Just view source to see the html.

The CSS file can be downloaded from here. Drag it into your text editor to take a look at it.

Notes:

Congratulations! You’ve made it to the end of this lesson.  CSS is a very deep topic, and we glossed over many of the details, but we believe we’ve given you enough tools to accomplish most if not all of what you’ll want to do. Once you upgrade your test site, give your coach a shout, and she’ll be glad to look over your work!