Beginner

HTML & CSS Playbook

html · css · playbook · web · fundamentals · frontend · development · practical · content · control · elements · media · sass · semantic · bootstrap · font · fonts · input · method · styl...

A practical, technique-by-technique reference for solving the recurring problems that come up when building web front ends with plain HTML and CSS. Rather than a single narrative, this is a "playbook" of independent plays — each one a self-contained pattern, recipe, or trick that you can pull out when the matching problem arises. Every technique in this reference is built with no server-side code and no client-side scripting — the goal is to show what pure HTML and CSS can achieve on their own, and where their limits are.

HTML and CSS form such a broad set of topics that the most productive way to build mastery is to accumulate a supply of separate, well-understood techniques — plays you can reach for as a situation demands. This has two benefits: it steadily builds real capability, and it makes the process of building that capability bank more enjoyable, because each play is a self-contained, solvable problem.

Sign in to read this course

A free account unlocks all 514 courses. 20 are readable without one.

What's inside

23 sections
  1. 1 Table of Contents
  2. 2 Module 1: Establishing Conventions, Tools, and the Project Repository
  3. 3 Module 2: Structuring CSS Like Proper Code with Sass
  4. 4 Module 3: Three Ways to Center Elements
  5. 5 Module 4: Building a Collapsible List Without Script
  6. 6 Module 5: Making HTML Accessible to Everyone
  7. 7 Module 6: Five Ways to Make Text More Readable
  8. 8 Module 7: Working with Custom Fonts
  9. 9 Module 8: Filtering User Input with Simple HTML
  10. 10 Module 9: Working Effectively with Semantic HTML
  11. 11 Module 10: Knowing What Works in Which Browsers
  12. 12 Module 11: Using a UI Framework Like Bootstrap
  13. 13 Module 12: Creating Compelling Animations Using Only CSS
  14. 14 Module 13: Reducing HTTP Requests with CSS Image Sprites
  15. 15 Module 14: Creating Powerful Graphics with SVG in HTML
  16. 16 Module 15: Controlling Capitalization with CSS
  17. 17 Module 16: Making Links Target Different Media and Devices
  18. 18 Module 17: Replacing Zombie Tags with Something Better
  19. 19 Module 18: Restricting File Types in Upload Inputs
  20. 20 Module 19: Selecting Multiple Files with Upload Inputs
  21. 21 Module 20: Creating Simple Data Visualization with HTML and CSS Only
  22. 22 Module 21: Taking Control Over Mobile Presentations with Media Targets
  23. 23 Summary

Interested in this course?

Contact us to book it or get a custom training plan for your team.