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.
Overview
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
References
- HTML reference
- CSS reference
- A condensed CSS primer by 6.831 staff (It is a Google Presentation, and comments are allowed.)
Learning HTML
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.- Learn about divs and classes.
- Learn about Bootstrap's grid system
- Add a header, image, and link.
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
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.