Assignment 1: Introduction to HTML and CSS
For your first assignment, you will design and build a website with a single set of content but at least two different styles. This will be due by the beginning of class next Tues, Jan 14. But there will also be some deliverables along the way.
The content of your website is up to you (as long as you stay within the bounds of good taste and appropriateness, of course). If you're on the cross country ski team, for example, you might find it fun to create a web site with information about workouts, good places to ski, recommended places to buy gear, etc. If you're an international student, you might find it enjoyable to create a web site with useful information for students navigating the process of moving to Williamstown and getting settled at the College. If you're into cooking, you might create a website with interesting recipes, restaurant recommendations, and places to find cool kitchen gadgets. These are just a few ideas. I'm sure you'll come up with many (even better ones) on your own.
As you work on this project, be sure to follow the design principles in the readings and that we will discuss in class. Decide on the content before you do anything else. Keep the structure (HTML) of the pages separate from the style (CSS). Use a variety of HTML tags, and use them wisely. (Don't include every possible tag simply to show that you can.) Think about the aesthetics of your designs. Use color and images where appropriate, but also take into account issues of efficiency and accessibility.
In order to guide you through the process, each day I'll set a new milestone for you. Today (Tues, Jan 7), your goal will be to begin learning about HTML and CSS through two tutorials, by perusing HTML and CSS documentation, and also beginning to plan the high-level concept for your website as well as the content.
"Hands on" HTML and CSS
Tutorials are a great way to get started with HTML and CSS. So your task for today, Tues, Jan 7 is to complete two tutorials. I acknowledge upfront that they're very similar, but they have some differences that I think you'll find useful in rounding out your HTML knowledge in particular. One goes through an HTML4.1 example; the other is HTML5. They both include different types of elements, which will give you additional practice as well.
Begin by completing this tutorial. You can use Emacs as your text editor, rather than TextEdit. If you're using TextEdit and need help setting up the preferences, let me know.
After you've completed that tutorial, go on to do the reading and tutorial here. You can find the image for the webpage here and the raw text for the website here (so that you can avoid having to type everything from scratch.
After you've completed the tutorials, let me know, so that I can do a quick check of them.
Exploring HTML and CSS
Before you begin planning the content for your website, it's good to get a slightly fuller sense of the kinds of things you can do with HTML and CSS. So explore (as much or as little as you'd like) the various resources I've made available on the Resources page.
Plan your website content
Just as you should design your programs before sitting at a screen and typing, you should draw and lay out the content and structure of your website. By the beginning of class tomorrow, you should have an overall concept as well as the basic content of several website pages. I recommend writing these up in text files, so that you can work with them as you introduce HTML markup and create your CSS files.