Read and review CSS Mastery, Chapter 2.
Take careful note of the sections Common Selectors, Pseudo-classes, The Cascade and Specificity.
Continued…Developing a website is a complex endeavor, and it’s important to have a plan from the very beginning. One of the most important rules for developing a useful CSS system is this:
Create general styles first and specific styles last.
Styling your website is like creating a pyramid: create a good set of general styles as a [...]
Continued…Your readings for this class are from webtypography.net, an excellent resource that takes suggestions from Binghursts’ classic Elements of Typographic Style and shows you how to accomplish them with CSS.
Set ragged if ragged setting suits the text and page Choose a comfortable measure Choose a basic leading that suits the typeface, text and measure
Continued…Interactive 1 Midterm Project
Remember those Choose Your Own Adventure books from when you were a kid? The basic idea is this: You start on page one with some background story, and are confronted with a choice—do you pick up the dagger, or not?. Depending on your choice, you turn to a different page, and the [...]
Continued…Download buttons-stub.zip
Cool Button Techniques
Zurb makes cool buttons with CSS More cool (radioactive) buttons from Zurb Sliding-door CSS buttons One of the most useful techniques to learn. Sagmeister.com. This website is just wacky and cool.
Validate your code.
Continued…Turn-in Instructions
Send the assignment to my email address Use the subject line:
“What’s Wrong with This Picture – Doe, John”
where “Doe” is replaced by your last name and “John” is replaced by your first name. Attach a .doc or .txt file containing the assignment, or paste it in.
Make sure that it’s clear which paragraph applies [...]
Continued…Keep your code clean and error-free: validators for HTML5. You can also validate your CSS.
Continued…You’ve designed wireframes, now it’s time to move on to the design phase.
In this phase you’ll be designing the website as it will actually appear. You’ll create static design files, or comps in Photoshop. A note to all you Illustrator folks: Photoshop is generally a better tool and the de facto standard for designing comps, [...]
Continued…Take a look at these websites:
http://www.homestarrunner.com/sbsite/ http://www.colorado.gov/ http://disney.go.com/index http://lesailes.hermes.com/us/en/
Your Assignment
Write one paragraph of critique for each website above (4 total), describing problems you find with the design and interaction. Look at it from a design standpoint, examining balance, color, hierarchy and focus. Also examine it from an interaction standpoint:
Did anything behave in an unexpected way? Why? How would you [...]
Continued…