Web Design Tutorial
Home > Syllabus > Web design tutorial

Web Design Introduction

These examples were used during lecture to explain the basics of HTML and CSS. You can find the slides from lecture in the class notes.

Download the in-class examples.

2.744 Zen Garden

In this activity, students were given an HTML page and asked to write their own CSS to style the webpage. The activity is based on the CSS Zen Garden created by Dave Shea.

Download the 2.744 Zen Garden Template.

Check out the students' zen gardens!

Wireframe to Website: building a storyboard site

In this tutorial, we took an existing wireframe for a storyboard website and wrote the HTML and CSS to translate the storyboard into a fully-functional website.

Download the Storyboard Template.
This is the rough skeleton that we started developing the storyboard site from in class.

Download the In-Class Storyboard Site.
This is where we got to in class.

Download the Final Version.
This is the final version of the site, which was shown at the beginning of class.