| Module |
Outcomes |
Demos |
Assignments |
Projects |
Notes |
| 1 |
Welcome to the Web
Cover:
- About this course
- Grading: demo files & projects explained
Review:
- Domaine name, ISP and FTP
- Tag based languages
- Code styles
- Tool set up
Content:
- file names & code style
- Introduction to HTML5
- Code a template page
- Two page site
- Validation
|
Demos:
- First template page
- Mini site: two pages
Concepts covered:
- Doctype
- tags: html, head, meta, title, body, h, p, a and img, style
- validation
|
- Template page & two page site
- Upload to server
- Screen shots of: FireFTP, Firebug, text editor, validation badge
|
|
Partial re-write |
| 2 |
Structure & Directories
- HTML5: The Outline Algorithm
- block level vs inline
- Absolute paths vs relative
- Navigating directory structures
- What is color?
- Base 16
- VRam
- Web safe color
- There are no secrets on the web
- Firebug & exploring other people's code
|
Color Site: traversing directories
Nested directories with an assets folder
Make it look a bit better: CSS
- border (turn off for images)
- text-decoration (a tags)
div
h tags
lists: ul & ol
img in detail |
Mini site: Resources page, images & color?? |
- Describe Recipe site
- Describe library
|
partial |
| 3 |
The Cascade & Web Typography
- Structure -- High school English -- outlining for structure
- What can you control? (Serenity Prayer) -- when to impose your will as a designer when to leave the user in control!
- Gama Settings
- Resolution
- Browser differences (how browsers display type)
- Simplicity to display best across a variety of platforms. Web Standards.
- Introduction to web typography
- System fonts
- Fonts & Browsers & Platforms
- Browsers and type
- Platform difference -- Web Kit type vs PC type
- Character entities
- Firebug!!!
|
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
- Introduction to CSS (explain the mechanics that they've been using)
- Selectors, Classes & IDs
- where do I put my code? Inline, head, external
- The Cascade: inheritance
- Styling tags
- Pseudo-selectors and modifiying the behavior of tags: Love, HA! (links)
- Color
- Philosophy: Jurassic Park -- just because you can doesn't mean you should
- What size is my font? (to control or not control?) -- Sizes in CSS
- CSS -- pt, px, percents, em, cm, inches
- When should you control it?
- Relative solution.
|
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
- ids, classes & psuedo classes
- inheritance
- Page layouts
- Float
- Escaping floats
- Multicolumn layouts
- Liquid pages
- Introduction to positioning
|
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
- use and misuse of tables
- constructing tables, breaking tables
- styling tables
- images in tables
- more psuedo classes
|
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
- Position is everything
- Multiple background images
- CSS3 effects
- liquid layouts
|
absolut vs relative
gradients
parallax backgrounds
CSS transitions |
3 col layout with animated pill buttons
|
Personal portfolio |
Total re-write |
| 9 |
Forms
- Design considerations for forms
- Diferences between forms for desktops and for mobile
- Scripts and alternatives
- Get/Post
|
- form
- action
- input
- password
- text area
- check boxes
- radio
- submit
- options list
|
Fancy form page with lots of style! |
Gather & wireframe |
Partial re-write |
| 10 |
JS: Review Basics
- DOM
- variables, function & conditionals
- events & event handlers
- Javascript objects: methods & properties
- getElementById(), setInterval()
|
|
Resize
Exquisite Corpse
Timer
Toggle buttons |
Re-wireframe
Begin design |
Done. |
| 11 |
Walking the DOM
- Deeper understanding of Javascript objects
- Deeper review of user events
- Complex descision making: nested conditionals
- Controlling movement
|
|
Style changer (Readability knock off)
Text Scroller?
pop over tool tip?
|
refine design |
Partial re-write |
| 12 |
Intro to jQuery
- selectors & wrappers
- toggling
- show/hide transitions
- working with css
- adding and subtracting classes
- this
|
|
Image sorter
Content Expanders |
code & production |
Partial re-write |
| 13 |
jQuery unleashed
- manipulating the DOM
- attr()
- fadeIn/fadeOut
- review string parsing
- Building up logic using trace statements
- appendTo() -- adding nodes in trace statements
- wildcard selectors
- wrapped sets as arrays: length property
|
|
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 |