Mon, Nov 15

HTML+CSS

Today's objectives

  • Review HTML assignment
  • Update on Usability assignment
  • CSS
    • CSS - basic concepts
    • Rules and syntax
    • Selectors
    • Getting help and reference documents

Preparation

  • Have an approved Usability Review topic
  • Uploaded your HTML assignment
  • Have CSS handout open
  • Have viewed basic CSS video

Presentation

usability testing basics

Assignment 6

Add CSS to your web site. Basic text styles are essential; CSS positioning is suggested. Validate and check carefully, and upload to class web server using FTP, overwriting any previous files.

Due Sun, Nov 21, 6:00 PM.

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, Sun, Nov 21

  • 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.

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.

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

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.

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

Adobe web fonts. A service for managing CSS fonts.

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.

Learning more

A complete, free course on front end web development.