The HTML Typing Profile
HTML is angle-bracket heavy. Every tag is an open-angle, tag name, attributes, close-angle — then content, then the closing tag with its forward slash. For prose typists, the angle-bracket and forward-slash reaches are the specific keys that slow down real HTML typing.
On top of that, attribute values are wrapped in double quotes that must be properly paired. `<a href="/about" class="nav-link">` contains six punctuation reaches in just one opening tag.
HTML Weak Spots
The specific patterns worth drilling:
- Opening and closing tag pairs as chunks: `<div>...</div>`
- Self-closing tags: `<img />`, `<br />`, `<input />`
- Attribute-value pairs: `href="..."`, `class="..."`, `data-id="..."`
- Common nested patterns: `<ul><li>...</li></ul>`
- Semantic tag names: `<header>`, `<main>`, `<article>`, `<section>`
CSS Typing Profile
CSS has a different profile: property name, colon, value, semicolon. Every declaration ends the same way, which makes it an ideal candidate for chunk practice. The HTML/CSS symbols lesson drills the colon-semicolon pattern as a rhythm unit alongside the nesting braces of rule sets.
Modern CSS adds more complexity: custom properties with `--`, `calc()`, `clamp()`, and the pseudo-class chains that selectors can grow to. These all benefit from targeted drilling.
Selectors and Nesting
CSS selectors can become long — `main article h2.title:first-child + p` — and fast typing of these is a real speed factor for frontend developers. The HTML/CSS control flow lesson drills media queries and nested rules, which are where most modern CSS lives.
The real snippet lesson puts everything together in a realistic landing-page section with responsive grid and custom properties.
Why This Matters Even With Autocomplete
Editor autocomplete handles tag names and some common attributes, but it does not handle attribute values, custom class names, inline styles, CSS property values, or the content between tags. That is still 60 to 70% of the characters you actually type in an HTML/CSS file.
Drilling the patterns that autocomplete does not cover is where real speed gains come from — and the more you train them, the less you rely on autocomplete to keep pace with your thinking.