Module | Outcomes | Demos | Assignments | Projects | Notes |
1 | Welcome to the Web Cover:
Review:
Content:
|
Demos:
Concepts covered:
|
|
Partial re-write | |
2 | Structure & Directories
|
Color Site: traversing directories Nested directories with an assets folder
Make it look a bit better: CSS
div h tags lists: ul & ol img in detail |
Mini site: Resources page, images & color?? |
|
partial |
3 | The Cascade & Web Typography
|
Recipe Site Outline div & span header, hgroup, figure and fig caption color strong, em, pre...
More about links
|
Recipe: as text | Gather recipes | partial |
4 | CSS & Page Layout
|
Single column Radius corners background images list styles: custom bullets font styles type styles styling links with psuedo classes widths & measurements in CSS |
Recipe: design treatment Lincoln's Second Inaugural Speech |
Design recipe site | partial |
5 | Float Theory
|
Blocks vs inline styles two column layouts overflow: hidden, clear: left, etc... How big is my page? Resolution |
Recipe: full layout | code and production demonstration library |
Total re-write |
6 | Data Tables
|
border collapse zebra striping with CSS (nth-child) css & tables |
table of measurements or herbs | code and production demonstration library |
partial re-write |
7 | Site Structure, Page Types & Navigation | Lecture only | Recipe site due Library due |
partial re-write | |
8 | Advanced Topics in CSS
|
absolut vs relative gradients parallax backgrounds CSS transitions |
3 col layout with animated pill buttons
|
Personal portfolio | Total re-write |
9 | Forms
|
|
Fancy form page with lots of style! | Gather & wireframe | Partial re-write |
10 | JS: Review Basics
|
Resize Exquisite Corpse Timer Toggle buttons |
Re-wireframe Begin design |
Done. | |
11 | Walking the DOM
|
Style changer (Readability knock off) Text Scroller? pop over tool tip?
|
refine design | Partial re-write | |
12 | Intro to jQuery
|
Image sorter Content Expanders |
code & production | Partial re-write | |
13 | jQuery unleashed
|
Image gallery | code & production update library |
Done. | |
14 | jQuery UI
|
Scrollers & carousels Accordions Slider |
True color mixer Scrolling page |
code & production update library |
Total rewrite. |
15 | Next Steps: future proof! | Learn to learn self assessment of mastery |
Personal portfolio due Library due |
Total re-write |