HTML & CSS Typing Practice
Part of the Programmers track.
A real markup and stylesheet snippet, practicing the angle brackets and colon-property syntax of front-end code.
Type the drill below at a pace where you can stay accurate. Reaching the lesson target shown below marks this lesson complete and shows a link to the next lesson in the track.
This is lesson 6 of 8 in the Programmers track. Your attempts, best WPM, and completion status are saved in this browser when local storage is available.
Type spaces for indentation and Enter for line breaks; Tab moves focus. For varied snippets, open the code typing tool. To plan a session, read the code typing practice routine.
Practice focus
Keep tag delimiters and attribute or property punctuation in order.
- Read opening and closing angle brackets, slash marks, quotes, and any CSS colons in the displayed snippet.
- Copy the literal markup; the practice area displays characters instead of rendering the sample as a web page.
Review your attempt
If a closing tag fails, compare the opening name with its closing counterpart and inspect the slash transition.
Try the follow-up exercisePractice this lesson
Click the passage and copy the text, including spaces. Use Enter for line breaks and Backspace for corrections; Tab moves focus. The attempt ends when you reach the end. Finish the passage with at least 95% accuracy. Speed is recorded separately and cannot bypass accuracy.
Enable JavaScript for timed practice and saved progress.
Read the lesson passage
Check unfamiliar keys before starting. You can also copy this passage into a plain-text editor for untimed practice; timed feedback below requires JavaScript.
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
}
.card-title {
font-weight: 600;
}Your earlier attempts and best speed are retained. Finish a new attempt to confirm the current accuracy target.
Something unclear in this lesson? Share the page and the step that needs work.