Add CSS to your web site. Basic text styles are essential; CSS positioning is suggested. Validate and check carefully.
Compress (make archive on Mac OS) the folder and upload the .zip file to the Brightspace by 6 pm, Due Tue, Nov 02, 6:00 PM.
You will will play two roles in this assignment - facilitator and participant.
You will facilitate a usability review of your the web site you chose (and was approved by me). A participant (another student) will be assigned to you. The participant will be the one who actually performs the task. The facilitator will monitor, prompt, make notes and record observations, and then use that information to write the usability report.
In a real usability study you would have many test users, but in this assignment there will only be one.
The study will be performed remotely. As a facilitator, you want to make sure that you can see the participant's screen, and ideally, their face. You can use Zoom (the free version is fine), or any other screen-sharing tool.
Complete this form: https://forms.gle/VpaqB4tWE3ZMQm186
Here is a good article about the basics of remote user testing: Remote user testing basics
Complete by Tue, Nov 09, 6:00 PM.
Basic CSS PDF Handout.
See the Pen CSS Scratchpad by Robert Currie (@rcurrie) on CodePen.
See the Pen Class selector example by Robert Currie (@rcurrie) on CodePen.
See the Pen Divs and positioning by Robert Currie (@rcurrie) on CodePen.
A good CSS tutorial for beginners
Lots of CSS examples.
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.
The W3C's CSS validator, similar to its HTML validator.
Way too many CSS resources.
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. |
A good CSS tutorial for beginners
Lots of CSS examples.
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.
The Bootstrap framework is a set of CSS components to speed the building of responsive web sites.
CSS Resets. Getting rid of the built-in styles your browser applies.
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.
The Pure CSS Framework. Pre-built components for web projects.
A complete, free course on front end web development.