Tue, Mar 05

HTML+CSS


Today's objectives

  • Update on Usability assignment

Preparation

Presentation

usability testing basics

essay-construction-DSGN1000

Assignment 9: Usability assignment draft

Write a first draft based on your approved topic.

Submit: digital file in .PDF format, uploaded to Brightspace by 6 pm, Mon, Mar 18

  • Analysis of what usability problems the web site has is the main task. Detailed description of the web site, or a critique of purely visual design aspects (colours, fonts, layout, etc, is not needed)
  • Double-space your draft
  • Back up your observations with specific examples
  • Follow standard essay construction: introduction, body, conclusion.
  • Title pages, works cited, etc not needed for the draft, but will be needed for the final version
  • Length should be 500-1000 words
  • You can find discussion of the typical essay structure here.
  • The NSCAD Writing Centre is your best resource. It's free, and you can book online.

Handout

Basic CSS PDF Handout.

Resources

A good CSS tutorial for beginners

Lots of CSS examples at W3Schools.

Detailed CSS standards, tutorials and courses at MDN

An online tool for previewing text styles.

Responsive web design is web design that adapts to screen sizes, from phones to desktops.

https://getbootstrap.com is a framework (like a kit of parts) for building responsive web sites easily.

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

Important The W3C's CSS validator, similar to its HTML validator. Use the "by upload" option to upload a file from your computer for validating.

Way too many CSS resources.

CSS Selectors

selector selector name matches
h1 type all h1 tags
.warning class every element with class="warning"
#temporary id every element with id="warning"
li a descendant every "a" tag within an "li" element
* universal everything
div.warning class every div 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.

Examples

1) Basic CSS

See the Pen CSS Scratchpad by Robert Currie (@rcurrie) on CodePen.



2) CSS Classes

See the Pen Class selector example by Robert Currie (@rcurrie) on CodePen.



3) CSS IDs and positioning

See the Pen Divs and positioning by Robert Currie (@rcurrie) on CodePen.

4) Center your content

See the Pen CSS Centering by Robert Currie (@rcurrie) on CodePen.

HTML Frameworks

The Bootstrap framework is a good starting point for building more complex web sites.

Domain Registration

Hover.com is a reasonably priced, easy-to-use registry.

Web hosting

There are tens of thousands of options.

  • Websavers is a local company - cheap and good. I recommend them.

Want to skip the whole "do-it-yourself thing" but still want a web site you can change the appearance of? Try: