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 Table of Contents
- 2 Module 1: Establishing Conventions, Tools, and the Project Repository
- 3 Module 2: Structuring CSS Like Proper Code with Sass
- 4 Module 3: Three Ways to Center Elements
- 5 Module 4: Building a Collapsible List Without Script
- 6 Module 5: Making HTML Accessible to Everyone
- 7 Module 6: Five Ways to Make Text More Readable
- 8 Module 7: Working with Custom Fonts
- 9 Module 8: Filtering User Input with Simple HTML
- 10 Module 9: Working Effectively with Semantic HTML
- 11 Module 10: Knowing What Works in Which Browsers
- 12 Module 11: Using a UI Framework Like Bootstrap
- 13 Module 12: Creating Compelling Animations Using Only CSS
- 14 Module 13: Reducing HTTP Requests with CSS Image Sprites
- 15 Module 14: Creating Powerful Graphics with SVG in HTML
- 16 Module 15: Controlling Capitalization with CSS
- 17 Module 16: Making Links Target Different Media and Devices
- 18 Module 17: Replacing Zombie Tags with Something Better
- 19 Module 18: Restricting File Types in Upload Inputs
- 20 Module 19: Selecting Multiple Files with Upload Inputs
- 21 Module 20: Creating Simple Data Visualization with HTML and CSS Only
- 22 Module 21: Taking Control Over Mobile Presentations with Media Targets
- 23 Summary
More HTML, CSS & Web Fundamentals courses
View all 10Creating Graphics with Canvas and SVG
The rich features of JavaScript, combined with the power of modern web browsers, have blurred the lines between the capabilities of web-based and native applications. This course discusse...
CSS: Advanced Features
This course built up a layered toolkit for adding depth, color, motion, and typographic polish to a site using only CSS — no images, no JavaScript animation libraries.
CSS: Creating Layouts
css · layouts · html · web · fundamentals · frontend · development · layout · page · responsive · components · grid · clean · flexbox · pies · designing · home · study · visit · accessibi...
Debugging Sites with Chrome DevTools
Google Chrome ships with a powerful set of tools to help developers debug websites. There is no more appropriate place to debug client-side web apps than right in the application where th...
Deploying and Optimizing Websites
Zip --> Kudu[Upload to Kudu Zip Deploy] Kudu --> Extract[Kudu extracts files] Extract --> Recycle[App Service recycles] Recycle --> Live[Site live at azurewebsites.net] flowchart TB You[Y...
HTML APIs: Creating Interactive Experiences
html · apis · interactive · experiences · css · web · fundamentals · frontend · development · dom · events · event · playback · animations · audio · content · drag · drop · elements · ani...
Interested in this course?
Contact us to book it or get a custom training plan for your team.