HTML & CSS Typing Drill
< > / = " { } : ; - #
Every passage contains: < > / = " { } : ; - #
QWERTY layout assumed. Backspace corrects; uncorrected errors count against net WPM.
<section class="row-list"> opens with an angle bracket and closes an attribute value inside double quotes; .row-list { display: flex; gap: 0.5rem; } opens with a brace and separates each property from its value with a colon. Both lines are dense with punctuation, but they barely share a character — one is built from angle brackets and quotation marks, the other from braces, colons and semicolons — and a real file asks a typist to move between the two within the same few minutes of work. The angle bracket itself is the same shifted comma-and-period pair the Maths Operator Drill uses for less-than and greater-than, though here it opens and closes a tag rather than comparing two values.
The two languages even handle the same underlying idea differently. type="text" joins a name to a value with a plain, unshifted equals sign. display: flex joins a property to a value with a shifted colon instead. Both are doing the identical job — attaching a value to a label — on the same right pinky, but one needs Shift and the other doesn't, and which one applies depends entirely on which of the two syntaxes the hand is currently inside.
The hash character does two unrelated jobs inside CSS on its own. #main { max-width: 48rem; margin: 0 auto; } uses it to select an element by its ID. a:hover { color: #b8721e; } uses the identical character a few lines later to open a hexadecimal colour value. Nothing about the keystroke distinguishes the two; only where it sits in the line does.
Why This Drill
The real skill this drill trains is recognising, line by line, which of two reflexes currently applies — reaching for an unshifted equals sign to join an HTML attribute to its value, or a shifted colon to join a CSS property to its. Using the wrong one doesn't produce an obvious error; it produces something that looks plausible and simply doesn't work.
<img src="/row.png" alt="A single row" width="64"> needs six separate double-quote presses in one line, each a full shift-then-release on the right pinky, and one of those quoted values — "A single row" — contains actual spaces inside it. That's something the Email & URL Character Drill's addresses can never do, since nothing in a raw URL is ever wrapped in quotes and a literal space would break it outright.
CSS adds a rhythm none of this batch's other languages repeat quite this tightly: display: flex; gap: 0.5rem; toggles the same physical key between its shifted form and its unshifted form twice in one short declaration — colon, then later semicolon, colon, semicolon again — over and over down the length of a stylesheet. A real project usually keeps this markup in a separate file from the JavaScript Typing Drill's logic, but a typist still moves between the two within the same working session.
An Equals Sign in One Language, a Colon in the Other
type="text" attaches a value to an HTML attribute with a plain, unshifted equals sign. display: flex attaches a value to a CSS property with a shifted colon instead. Both do the same conceptual job on the identical right pinky; only the language currently being typed decides which of the two reflexes is correct.
Six Quote Presses in a Single Line of Markup
<img src="/row.png" alt="A single row" width="64"> wraps three separate attribute values in double quotes, which is six full shift-and-release presses of the apostrophe key in one line — more than any other single line in this drill's passage asks of any one character, and more than the paired examples in the Quotation Mark Drill usually ask for at once.
One Character, Two Jobs, Inside CSS Alone
#main selects an element by its ID. #b8721e, a few lines later in the same file, opens a hexadecimal colour value. The keystroke — Shift plus 3 — never changes; only its position in the line tells a reader, or a typist reading ahead, which of the two meanings applies.
The Same Key, Shifted Then Not, Twice a Declaration
.row-list { display: flex; gap: 0.5rem; } uses colon and semicolon — the shifted and unshifted forms of one physical key — twice each in a single short line, and that pairing repeats down every declaration in a stylesheet. None of this batch's other languages return to the same key, in both its states, this often or this close together.
Frequently Asked Questions
Why does switching from HTML to CSS mid-file feel like a bigger adjustment than switching between two paragraphs of prose?
The two syntaxes barely share a character. HTML leans on angle brackets and quoted attribute values; CSS leans on braces, colons and semicolons, and the two even use different keys — one shifted, one not — to do the same basic job of attaching a value to a name.
Does the equals sign in an HTML attribute ever need Shift?
No — type="text" and every other attribute assignment in this passage use a plain, unshifted equals sign. Shift only enters the picture for the quote marks wrapping the value itself.
Why does # mean two different things inside CSS?
It's used both as the ID-selector symbol, as in #main, and as the prefix for a hexadecimal colour value, as in #b8721e. The keystroke never changes; the surrounding syntax is what tells the two apart.
Can an HTML attribute value contain a literal space the way a URL can't?
Yes — alt="A single row" has real spaces inside its quoted value, which is fine in HTML because the quotes mark where the value starts and ends. A bare URL has no such marker, so it can never contain a literal space.
Why does this drill single out the <img> line for its quote-mark count?
It has three separate attributes, each wrapped in double quotes, which works out to six full shift-and-release presses of the same key in a single line — more than any other line in this passage.
Is the @ in @media the same character as the one in an email address?
The exact same key and finger, doing a different job — here it introduces a media condition for a stylesheet rule, rather than marking the start of a domain the way it does in the Email & URL Character Drill.