A change of direction and initial outline

— 2 minute read

I’ve recently started properly planning CSS From Scratch and it’s become apparent, very quickly, that this project is going to suit being a screencast-based course, rather than a book. The more thought I put into it, the more I’ve thought that it’ll actually be better that way.

Practical learning permalink

While I’ve been coming up with the outline, I’ve been thinking for each lesson/chapter: “how can I best teach this”, and almost always, the answer has been how I taught lectures, in my brief stint as a lecturer.

In those lectures, I would spend a short period of time explaining a concept, show some examples and then get practical and work through it with the students. I’m going to do it in the same way for this project too, because it worked incredibly well. The context was the same too: absolute beginners learning code for the first time!

Initial outline permalink

Like I said earlier in the post, I’ve put together the initial outline and it’s split into two main sections.

Fundamentals permalink

As this is CSS From Scratch, we start from day zero and work through the fundamentals first. Lessons include:

  1. What is the role of CSS?
  2. Boxes
  3. Cascade and Specificity
  4. Selectors
  5. Colour
  6. Text
  7. Hierarchy
  8. Space
  9. Layout
  10. Relationships
  11. Stacking
  12. Semantics
  13. Accessibility
  14. Performance
  15. Progressive Enhancement
  16. Movement
  17. Flair

Project permalink

We then move on to building a proper project. I’m not 100% sure what this will be yet, but the aim will be to cover all of the fundamentals that we’ll have learned together and then apply them into a proper project context. We’ll treat this like a client/internal project.

Lessons of this section include:

  1. Setting up
  2. Planning
  3. Markup
  4. Global styles and tokens
  5. Components
  6. Composition
  7. Accessibility testing
  8. Performance testing
  9. Refactoring
  10. Documentation
  11. Finishing touches
  12. Bundling and deployment
  13. Wrap up

Wrapping up permalink

That’s it, really. I just thought I’d keep you all in the loop about what’s going on and how this project is evolving.

A slight aside is that I’m going to create some proper branding and stings for continuity, so I’ll keep you all in the loop about that too!

Anyway: sign up for updates on Product Hunt, subscribe to the RSS feed or follow @cssfromscratch on Twitter to keep in the loop.