6.813/6.831 — User Interface Design & Implementation
Spring 2017

Lab 1: HTML and CSS

This lab is on Wednesday, February 15, 2017 at 7:30 P.M. in 32-082.
This is a non-compulsory programming lab to introduce students to webpage building with HTML and CSS.
View the source of this page to see a nicely documented solution to the exercises below.

Last Updated: Sun, Jan 31 2015 at 10:30 P.M.


In this programming lab, you will be completing a series of exercises that will help you structure and style web pages.

Required Resources

  • You will need a a text editor, preferably with syntax highlighting. We recommend using Sublime Text, available on OS X, Windows and Linux.

  • Bootstrap


Learning HTML

At the end, your webpage should look like:

Exercise 0: Set up the barebones of Doggo's website

For this exercise, open up your text editor and follow along with what we do on the projector.
  • Learn about HTML tags.
  • Set up the header and body of your HTML file.
  • Link Bootstrap.

Exercise 1: Set up the "About Me" section

For this exercise, open up your text editor and follow along with what we do on the projector.

Exercise 2: Finish setting up the other sections yourself.

  • Add a table with your classes.
  • Add a list with your extracurriculars.
  • Add a form that people can use to contact you with.

Learning CSS

Exercise 3: Add and style a table of courses

Modify the page to include a table of courses you are taking and have taken. Here are some examples of simple tables. Your table should have:

  • three columns: course number, course title, and semester taken
  • two vertical sections, with headers for courses taken 'For Credit' and as 'Listener'
  • alternating row background colors, so it's easy to read
  • green colored text if the class is currently being taken

It should look something like this:

Exercise 4: Make it your own

Try out adding:

  • different fonts
  • a cool background
  • anything your creative mind can think of!

Exercise 5: Codecademy Exercises

Do the projects on the Codecademy website.