Written Portion (20%)
Complete the CSS lessons and complete the CSS test at wc3schools.org while being observed. The test should take about 3-20 minutes to complete. Print your “Check Answers” results page to hand in.
Design Portion (70%)
2013 UPDATE:
Add your own EditCSS stylesheet to TwentyTwelve: try changes to font colors, background and header images. Example 1
Do this: Header Image Help
Do not do this: Whining in the wrong forum about CSS
Familiarize yourself with the “Basic” iblog themes. Activate one of the “Basic” themes: Basic 201, Basic 202, Basic 301, Basic 302, Basic 303.
[gview file=”https://comtech.snowotherway.org/files/2010/09/Navigating-StyleCSS.pdf” force=”1″]
Activate and familiarize yourself with the WordPress.com Custom CSS plugin. Dashboard->Appearance->Edit CSS.
WordPress Edit CSS Customization Forum
Troll the 100s of CSS designs at the ZenGarden and WC3 Core Style Sampler.
Complete one of the following options:
Option 1 Design Task:
Create a unique “Basic” theme design based on a mono/complement/triad/tetrad/analogic or accented analogic color scheme(light page or dark page). Add/create new images (header/background etc) but stay true to your chosen color palette. Go to Export HTML+CSS to view the html source for the list of colors in the palette.
Option 2 Design Task:
Choose one design from the ZenGarden and transform your blog’s Basic theme into that design – especially colors and images. Reproduce the CSS as accurately as possible. Create new images(may be needed) but stay true to the original color schemes.
Option 3 Design Task:
Choose one design from the WC3 Core Style Sampler and transform your blog’s Basic theme with that design – especially colors and images. Reproduce the CSS as accurately as possible.(or try a stylesheet from here)
Tips:
Pay particular attention to the html element names in the Basic Theme. You won’t be able to edit names(only the property: value pairs), so you’ll need to be careful what styles you paste in from the ZenGarden as the names for each html element won’t correspond for all elements (but many/most do so you’ll have a good starting point).
Example, if ZenGarden css(look for the link to “View This Design’s CSS” while trolling designs at the ZenGarden) has a property named “pageHeader”, Basic’s equivalent html element is named simply “header”.
Find this from the ZenGarden css
#pageHeader {
margin-top: 0px;
margin-bottom: 0px;
}
But copy this into your (Appearance->Edit CSS) stylesheet:
#header {
margin-top: 0px;
margin-bottom: 0px;
}
Any images you link to in your custom stylesheet should be stored in your blog’s media library.
Presentation Portion (10%)
Present your transformation to the class. Identify your challenges and achievements.
Support:
STJ Forum for Basic CSS Editing
Resources:
Navigating_StyleCSS
Download Source files of “Basic Themes”
Edit CSS in your blog
Intro to CSS tutorials
CSS Example exercises
CSS Quiz
W3C CSS Validator
CSS Zen Garden
CSS Bloom
WP Themes
WP Theme Generator
Color Blender
Stripe Generator
Button Generator
960 Grid Generator
Kameleoon
Stylebot for Google Chrome
http://www.csszengarden.com/
http://www.mezzoblue.com/zengarden/book/links/
http://www.cleancss.com/
http://jigsaw.w3.org/css-validator/
http://www.cssplay.co.uk/menu/
http://www.w3.org/StyleSheets/Core/preview
[slideshare id=1658158&doc=cascade4-090629163004-phpapp01]
http://www.slideshare.net/maxdesign/presentations
[slideshare id=2622472&doc=2622472]
[slideshare id=2626079&doc=changingthecssiseasy-091201142153-phpapp02]
[slideshare id=4822679&doc=rockstarwordpress-100723062228-phpapp01&type=d]
What NOT to do:
[youtube video=”WkjjxLPcMj0″]
Warning these site designs are hard on the eyes: Worst web sites of 2010
http://www.20thingsilearned.com/
Inspiration for a design:
http://en.wikipedia.org/wiki/List_of_works_in_Museum_of_Modern_Art_Department_of_Painting_and_Sculpture