This is a work in progress. Things will be ugly. Things will change. Things might explode. Don't worry.
The goal of this project is to build a curriculum with hands-on exercises to make learning HTML/CSS easy and fun. Our hope is to also incorporate the teaching of typographic principles alongside HTML/CSS. So a more appropriate class name in the future might be You Can Do It: Typography + Front-End Development
This is not a class about making web pages. It is about forming opinions, having a backbone, and making arguments. In this class you will learn how to express and communicate opinions in the form of typography via HTML and CSS.
**Assignment 1: Hello World **
- !doctype html
- html
- head
- title
- body
** Assignment 2: A paragraph and a bit more **
- p
- h1
- h2
- em
- strong
- &
- &em;
- a
** Assignment 3: **
- <! -- -->
- ol
- ul
- li
- br
** Assignment 4: **
- article
- section
- nav
- header
- footer
- aside
** Assignment 5: **
- div
- span
- class
- id
** Assignment 6: Forms **
** Assignment 7: Tables **
** Assignment 8: Images **
** Assignment 9: Advanced Tags **
- abbr
- b
- i
- pre
- code
- blockquote
- figure
- figcaption
- cite
- caption
- hr
- time
- sub
- sup
- small
- s
- q
- mark
Selectors
- Tag, ID, Class
- Inheritance
Color
Typography
- Links
- Text decorations/transformations
- Character properties
Box model
- Margin
- padding
- border
- width
- height
- content
Page-flow
- Block vs inline
- Floats and Clears
- Visibility
Positioning
- Absolute
- Relative
- Static
Advanced selectors
- Descendant and child
- Attribute selectors
Mouse events
- Pseudo classes
Content-generation
- :before
- :after
Image
Background
Effects
Animation/transitions
Forms
Tables
Techniques
- Horizontal nav
- 3-column layout
- Linking/importing css