Week 1
Main Points
- Rules, selectors, and properties.
- Pseudo-selectors.
- How selectors relate to HTML structure.
Challenge
CSS selector game — see who can finish first!
CSS Power-ups
An eight-week course on everything CSS.
Week 2
Main Points
- Specificity problems and how to avoid them.
- How to debug specificity wars.
Challenge
Specificity quiz — see who can finish first!
Week 3
Main Points
- Block elements vs. inline elements.
- How to center things vertically.
- Margin, padding, and other layout properties.
Challenge
Implement this Lucidchart wireframe in CSS (ignoring text).
Challenge Solutions
Week 4
Main Points
- Pseudo-elements.
- All the cool things that can be done with CSS these days.
- How to check for browser compatibility.
Challenge
Implement the coding challenge!
Week 5
Topic
Main Points
- Media queries.
- Non media-query solutions.
Challenge
Make your project from last week scale down to mobile nicely.
Week 6
Topic
Main Points
- Advantages and disadvantages of preprocessors generally.
- Features and relative strengths/weaknesses of the most popular preprocessors.
Challenge
Refactor your solution from the last two weeks to use a preprocessor.
Week 7
Topic
Main Points
- How to make sure your front-end work is performant.
- Tools for debugging performance issues.
Challenge
Implement a parallax scroll effect, and make it as performant as you can.
Week 8
Main Points
- Atomic, OOCSS, BEM, and other paradigms.
- Overviews of Compass, Bootstrap, and other frameworks.
Extra Credit Challenge
Implement a small CSS framework that allows users to style their typography. Use any approach you like.