Real snippets
Practice syntax, punctuation, and indentation developers actually use.
HTML & CSS Code Typing Test
Live CPM0
Accuracy100%
Time01:00
Start typing/HTML/CSS / 60s
Type the displayed code. Pasting and drag-and-drop are disabled.Ready for HTML/CSS, 60 seconds. Start typing when you are ready.<div class="dashboard-layout">
<aside class="sidebar" aria-label="Main Navigation">
<div class="brand">
<span class="logo"></></span>
<h1 class="title">DevSpace</h1>
</div>
<nav class="nav-menu">
<a href="/home" class="nav-item active">Dashboard</a>
<a href="/projects" class="nav-item">Projects</a>
<a href="/settings" class="nav-item">Settings</a>
</nav>
</aside>
<main class="main-content">
<header class="top-nav">
<h2 class="section-title">Overview</h2>
<button class="btn btn-primary">Create New Project</button>
</header>
<section class="grid-container">
<article class="stat-card">
<h3>System Status</h3>
<p class="stat-val">99.98%</p>
</article>
<article class="stat-card">
<h3>Active Tasks</h3>
<p class="stat-val">24</p>
</article>
</section>
</main>
</div>
<style>
.dashboard-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; }
.sidebar { background-color: #1e293b; padding: 24px; display: flex; flex-direction: column; gap: 32px; border-right: 1px solid #334155; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 24px; color: #3b82f6; font-weight: bold; }
.title { font-size: 20px; font-weight: 700; margin: 0; }
.nav-menu { display: flex; flex-direction: column; gap: 8px; }
.nav-item { padding: 12px 16px; border-radius: 8px; color: #94a3b8; text-decoration: none; transition: background 0.2s; }
.nav-item.active, .nav-item:hover { background-color: #334155; color: #f8fafc; }
.main-content { padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.top-nav { display: flex; justify-content: space-between; align-items: center; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat-card { background-color: #1e293b; padding: 20px; border-radius: 12px; border: 1px solid #334155; }
.stat-val { font-size: 28px; font-weight: 800; color: #3b82f6; margin: 8px 0 0 0; }
</style>
Focus here and start typing to begin
built for developersReal code typing practice. Useful metrics. Improve faster.Learn more
Codestroke is a code typing test for developers. Practice real JavaScript, Python, SQL, Java, C++, HTML/CSS, PHP, Go, and Kotlin snippets instead of ordinary prose.
This HTML & CSS typing test focuses on semantic tags, CSS selectors, Flexbox, and Grid. Choose a 30, 60, or 120 second session and track your code typing speed and accuracy as you practice.
HTML and CSS typing practice
Practice an HTML and CSS typing test with semantic tags, selectors, Flexbox, and Grid. Build web-code typing speed while keeping markup and style syntax accurate.
Try the main code typing test or choose another language from the directory below.
Useful metrics
Track live CPM, accuracy, time, and detailed session results.
Flexible practice
Choose a 30, 60, or 120 second test and improve at your pace.
how speed and accuracy work
Code typing speed is measured in CPM (characters per minute), so symbols, brackets, and indentation count just like letters. Accuracy shows how much of the snippet you entered correctly. Pick a language to practice a focused code typing test:
code typing test FAQ
What does the HTML and CSS typing test include?
The HTML and CSS test includes semantic markup, CSS selectors, Flexbox, and Grid rules so you can practice web code syntax accurately.
What is a code typing test?
A code typing test measures how quickly and accurately you can type real source code instead of ordinary prose. Codestroke is built for developers.
How does a coding speed test work?
Code contains symbols, brackets, and short tokens, so CPM measures every typed character. Codestroke also reports WPM, accuracy, and the selected test duration.
Why measure CPM instead of WPM?
Words per minute can be misleading for code because syntax contains punctuation and short tokens. CPM gives a clearer view of code typing speed.
Which languages can I practice?
You can practice JavaScript, Python, SQL, Java, C++, HTML/CSS, PHP, Go, and Kotlin snippets.
Is Codestroke free?
Yes. The typing test is free in modern web browsers, and you can begin as a guest without creating an account.