HTML & CSS
HTML & CSS Typing Practice Chapters
150 exercises across 15 chapters, ordered from basic syntax to advanced patterns. Each section is real HTML & CSS code, and your best speed and accuracy are saved per section.
Document Structure
0/10 completedBeginner
Type the skeleton every page starts from
Doctype & Skeleton
Meta Tags
Title & Stylesheet Links
Script Tags
Comments
Open Graph Tags
Preload & Prefetch
Base & Canonical
Body & Root Attributes
Full Boilerplate
Text & Headings
0/10 completedBeginner
Headings, paragraphs, and inline emphasis
Headings
Paragraphs
Bold & Italic
Line Breaks & Rules
Blockquotes
Code & Pre
Spans
Small, Mark & Del
Subscript & Superscript
A Complete Passage
Links & Images
0/10 completedBeginner
Anchors, URLs, and image embedding
Basic Links
Targets & Rel
Mailto & Tel
In-Page Anchors
Images
Width, Height & Loading
Figure & Caption
Picture & Srcset
Image Links
A Navigation Block
Lists & Tables
0/10 completedBeginner
Ordered, unordered, and tabular data
Unordered Lists
Ordered Lists
Nested Lists
Description Lists
Basic Tables
Thead & Tbody
Colspan & Rowspan
Table Footers
Caption & Scope
Lists as Navigation
Forms & Inputs
0/10 completedIntermediate
Every control a form can hold
Form & Text Input
Labels
Email & Password
Checkboxes & Radios
Select & Options
Textareas
Buttons
Number, Range & Date
Fieldset & Legend
Validation Attributes
Semantic Layout
0/10 completedIntermediate
The elements that give a page structure
Header & Nav
Main & Section
Articles
Asides
Footers
Address & Time
Details & Summary
Dialog
Search & Complementary
A Full Page Layout
Media & Embeds
0/10 completedIntermediate
Video, audio, SVG, and third-party content
Video
Audio
Multiple Sources
Iframes
Embedded Players
Inline SVG
Canvas
Object & Embed
Captions & Tracks
Responsive Wrapper
Attributes, Data & ARIA
0/10 completedIntermediate
Classes, data attributes, and accessibility
Class & ID
Data Attributes
ARIA Labels
Roles & States
Tabindex & Focus
Hidden & Disabled
Editable & Draggable
Boolean Attributes
Live Regions
Template & Slot
CSS Selectors
0/10 completedBeginner
Target elements with precision
Element Selectors
Class Selectors
ID Selectors
Descendant & Child
Attribute Selectors
Hover, Focus & Active
Nth-Child
Before & After
Sibling Combinators
Grouping & Universal
Box Model & Spacing
0/10 completedBeginner
Margin, padding, borders, and sizing
Margin & Padding
Borders
Width & Height
Box Sizing
Shorthand Order
Display
Overflow
Rounded Corners
Outline & Shadow
Centering with Auto
Flexbox
0/10 completedIntermediate
One-dimensional layout
Display Flex
Justify Content
Align Items
Direction & Wrap
Gap
Grow, Shrink & Basis
Order & Align Self
A Flex Navbar
A Card Row
Perfect Centering
CSS Grid
0/10 completedIntermediate
Two-dimensional layout
Template Columns
Template Rows
Grid Gap
Template Areas
Column & Row Spans
Minmax & Auto-Fill
Aligning Items
Line Placement
A Grid Page Layout
Nested & Subgrid
Typography & Color
0/10 completedBeginner
Fonts, colors, and backgrounds
Font Stacks
Size & Weight
Line Height & Spacing
Hex Colors
RGB & HSL
Align & Transform
Backgrounds
Gradients
Shadows on Text
Link States
Responsive Design
0/10 completedIntermediate
Media queries and fluid sizing
Min-Width Queries
Max-Width Queries
Mobile-First Pattern
Viewport Units
Clamp & Fluid Sizing
Container Queries
Dark Mode Query
Reduced Motion
Orientation & Print
Responsive Images
Modern CSS
0/10 completedAdvanced
Variables, animation, and new selectors