Mar 1: HTML +CSS

3-page web site due today, with images (1 per page, at least) of your work from this class. Bring it in on your flash drive.

Assignment

Add CSS to your web site. Basic text styles are essential; CSS positioning is suggested. Validate and check carefully, and bring in on flash drive.

Due in class, Mar 8

Resources

MDN: Reference and tutorials on CSS

W3Schools: More reference and tutorials on CSS

CSS Training Videos Available with the Halifax Public Library free Lynda.com subscription.

An online tool for previewing text styles.

A bit advanced, but a useful framework for building CSS-based grids.

The W3C's CSS validator, similar to its HTML validator.

Bootstrap, the most popular CSS+HTML framework.

Template

Handout

Basic CSS Handout.

Resources

CSS Selectors

selector selector name matches
* universal everything
h1 type all h1 tags
li a descendant every a tag within an li element
.warning class every element with class="warning"
div.warning class every div with class="warning"
#temporary id every element with class="warning"
div#temporary id every div with id="warning"
a#active pseudo-class every a tag in the "active" state - that is, the mouse is hovering over it.

Positioning Example

Due in class, Mar 8

Written Assignment

Write a usability review of a web site.

The web site should be one that offers more than just content. E-commerce sites, social networking sites, etc are ideal. Fill in your topic in this form before starting; I must approve each topic. Sign up for a topic here.

  • Make sure to review the main functions of the site from the perspective of a user.
  • Think about what happens when things go wrong.
  • What's good?
  • What can be improved?
  • Find someone to act as a test subject and observe them. Give them a specific task.
  • Minimum length: 500 words.

Assignment resources

A good CSS tutorial for beginners

Lots of CSS examples.

Centering

Centering in CSS is, well, odd. You can center text easily enough, but how do you center a div? Here's how:

#divname {
width: 800px;
margin-left: auto;
margin-right: auto;
}

In the example above, the div is given a width of 800px. If you want to center the whole page, wrap all your content in a div and center that.

Bootstrap

The Bootstrap framework is a set of CSS components to speed the building of responsive web sites.

CSS Resets

CSS Resets. Getting rid of the built-in styles your browser applies.

Fonts

Typekit. A service for managing CSS fonts. A free option is available.

Google Fonts. A free service for embedding fonts - but the range of options and quality is not as good as commercial services.

CSS Frameworks

The Pure CSS Framework. Pre-built components for web projects.