Skip to content

Level 397 of 415

CSS: A CSS rule

Indentation is part of the exercise. Press Enter at the end of each line and use spaces, never Tab.

Target
37 WPM
Accuracy
96.4%
XP
105
WPM0
Accuracy0.0%
Time0:00
Raw0
Consistency0%
.keyboard-key {↵
 display: flex;↵
 border-radius: 8px;↵
 background: var(--surface-raised);↵
 transition: transform 120ms ease;↵
}

Click here or press Tab to start typing

Notes on this level

Which finger types each key

A browser can only report which character was typed, never which finger pressed it. That is why this lesson blocks on the wrong key rather than claiming to detect the wrong finger — the finger is something you have to build the habit for, and the table below is the habit to build.

{
Right pinky finger, top row — reaching up from ;, with Shift held by the opposite hand's little finger.
}
Right pinky finger, top row — reaching up from ;, with Shift held by the opposite hand's little finger.
:
Right pinky finger, home row — where the right pinky finger already rests, with Shift held by the opposite hand's little finger.
;
Right pinky finger, home row — where the right pinky finger already rests.
-
Right pinky finger, number row — reaching up from ;.
(
Right ring finger, number row — reaching up from L, with Shift held by the opposite hand's little finger.
)
Right pinky finger, number row — reaching up from ;, with Shift held by the opposite hand's little finger.
%
Left index finger, number row — reaching up from F, with Shift held by the opposite hand's little finger.

What these symbols are for

Punctuation and symbols are where most typists slow down, because they combine the weakest fingers with the Shift key and appear too rarely for the habit to form by accident.

{
opens a block of code or an object.
}
closes a block of code or an object.
:
introduces a list, a definition, or a value in JSON and YAML.
;
separates clauses, and ends a statement in many programming languages.
-
hyphenates compound words and marks subtraction.
(
opens a bracketed aside, and opens an argument list in code.
)
closes a bracketed aside or an argument list.
%
expresses a percentage, and is the remainder operator in most programming languages.

Where the mistakes come from

Errors are rarely random. A wrong key is usually the right finger travelling the wrong distance in its own column, which is why the fix is control rather than slowing down everywhere.

{
Most often mistyped as 0, -, =, p, ], \, ;, ', / — the other keys the right pinky finger is responsible for.
}
Most often mistyped as 0, -, =, p, [, \, ;, ', / — the other keys the right pinky finger is responsible for.
:
Most often mistyped as 0, -, =, p, [, ], \, ', / — the other keys the right pinky finger is responsible for.
;
Most often mistyped as 0, -, =, p, [, ], \, ', / — the other keys the right pinky finger is responsible for.
-
Most often mistyped as 0, =, p, [, ], \, ;, ', / — the other keys the right pinky finger is responsible for.
(
Most often mistyped as o, l, . — the other keys the right ring finger is responsible for.
)
Most often mistyped as -, =, p, [, ], \, ;, ', / — the other keys the right pinky finger is responsible for.
%
Most often mistyped as 4, r, t, f, g, v, b — the other keys the left index finger is responsible for.

Stuck on this level?

Most difficulty at this stage is technique rather than effort. These explain the technique.