Lab 1: HTML and CSS 6.813/6.831 — User Interface Design & Implementation Spring 2017 Lab 1: HTML and CSS Overview Required Resources References Learning HTML Exercise 0: Set up the barebones of Doggo's website Exercise 1: Set up the "About Me" section Exercise 2: Finish setting up the other sections yourself. Learning CSS Exercise 3: Add and style a table of courses Exercise 4: Make it your own Exercise 5: Codecademy Exercises 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 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. 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 Featured videos: HTML Website Tables & Layouts Tutorial 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. MIT EECS accessibility
