Tue, Nov 01
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
Assignment 6
•Add CSS to your web site. Basic text styles are essential; CSS positioning is suggested. Validate and check carefully. Name the folder containing all your files for this assignment YOUURLASTNAME_Assignment6b. Compress (make archive on Mac OS) the folder and upload the .zip file to Brightspace.
Due Mon, Nov 07, 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, Mon, 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.
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.
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.