View on GitHub

LIS 861: Information Architecture

Assignment 1: Web site version 1.0; due February 23

Overview

Create a responsive web page with handcoded HTML & CSS.

The page may have whatever topic and design you like. You may use Bootstrap or another framework as a base for your design (in fact, you are encouraged to), but you must also include a hand-coded custom stylesheet (typically named custom.css) which overrides your base framework to individualize your design. Make sure you link to this page after linking to your base framework so the styles will cascade properly.

You do not need to demonstrate artistic talent, but your page does need to have a neat, professional appearance. Think of dressing for a job interview: not everyone has a great fashion sense, but everyone can put on a clean, well-ironed suit. If you have a flair for design, feel free to show it! If you don't, override an existing framework with a light hand, taking advantage of the design resources we discuss in this course.

Why do we do this?

Knowing HTML and CSS will enable you to make small overrides to your web sites, social media themes, catalogs, etc. without needing to ask for help. It will also give you an understanding of what's possible (useful in advocating for your organization's tech goals!) and why we use higher-level frameworks (CMSes, Bootstrap, etc.) to let us get more and higher-quality work done in less time.

Having these skills will give you the context for understanding the rest of this course. In addition, we will use this page as a base to iterate on for the web site version 2 assignment. In the real world, tech projects often start with a minimum viable product and then iterate as we discover bugs and our users' actual needs, so we're going to follow the spirit of iteration here, too.

Deliverables

  1. Your HTML file (one page is sufficient);
  2. Your custom stylesheet(s);
  3. Any images, scripts, or other assets your page needs to work.

Turn these in as a zip archive (make sure when I unzip it, the links from your HTML file to your stylesheet and assets will still work!). Turn your zip file in to the appropriate Learn@UW dropbox.

Grading criteria

Your page must...

If you are using Bootstrap or another framework, you must...

Your custom stylesheet must...

If you are looking for additional challenge, try one of the following: pin your footer to the bottom of the page, so that the page always stretches to at least the height of the browser; do a 2-column layout where both columns stretch the full height of the page (use different backgrounds so you can see that they have); apply CSS transitions; use the Bootstrap Javascript components.

I take for granted that all work in this course will show solid English writing mechanics, and will penalize if it does not.

( Back to syllabus )