HTML & CSS

HTML and CSS are the two foundational languages of the web — HTML structures a page's content (headings, paragraphs, links, images, forms), while CSS controls how that content looks (colour, spacing, layout, typography). Every website a browser renders, however it was built, comes down to HTML and CSS underneath. They're also one of the most approachable places to start learning to code, since the results are visible immediately in a browser.

This is Cloodit's HTML & CSS curriculum: free worksheets covering everything from how a browser renders a page through HTML structure, semantic elements and forms, to CSS selectors, the box model, Flexbox, and CSS Grid. Each module includes real practice questions, worked examples, and a full answer key — not just definitions to memorize.

The modules are ordered to build on each other, so a complete beginner can work through them from Module 1 to Module 63 and come out the other side able to build and style a real web page. Teachers can also assign these modules as a structured course — see the HTML and CSS Journey below — with progress tracking, class sprints, and badges for students.

Whether you're a student working through the fundamentals, a teacher looking for ready-made worksheets with answer keys, or just brushing up on one specific topic, start with any module below or work straight through the full sequence. Planning a unit rather than the whole course? Each module maps to a single lesson-length concept, so you can pull just the ones your unit needs — HTML Elements & Attributes for a markup-basics unit, or CSS Fundamentals for an intro-to-styling unit — without reworking your sequence.

Assign this whole curriculum to your class, or just the modules your unit needs — Cloodit tracks who's stuck automatically.

Create a free teacher account →

Getting Started (Modules 1–10)

1
How a browser renders a web page Rendering is when the browser reads the HTML it received and paints it into the visible page shown on screen.
2
HTML vs CSS: structure vs style The language that defines the structure and content of a webpage using tags and elements, not appearance.
3
HTML elements: opening and closing tags A closing tag - the forward slash before the tag name signals the end of an HTML element.
4
The document skeleton (DOCTYPE, html, head, body) The declaration that must appear on the very first line of every HTML file, telling the browser the document uses modern HTML.
5
The title element An HTML element placed inside <head> that sets the text shown in the browser tab. Its content is not displayed on the page.
6
Meta tags (charset and viewport) A self-closing HTML element placed in <head> that provides metadata about the page, such as character encoding or viewport settings.
7
HTML comments An HTML comment - text placed between <!-- and --> is ignored by the browser and never shown on the page.
8
Headings (h1 to h6) The most important HTML heading element - displays as the largest heading on the page. Headings range from <h1> (most important) to <h6> (least important).
9
Paragraphs (p) An HTML element that wraps a block of text as a paragraph. The browser adds spacing above and below it and displays it on its own line.
10
Line breaks (br) A self-closing HTML element that inserts a line break, forcing the next content onto a new line. It has no content and needs no closing tag.

HTML Elements & Attributes (Modules 11–20)

11
Horizontal rule (hr) A self-closing HTML element that draws a horizontal line across the page, used to create a visual and thematic break between sections.
12
Inline text formatting (strong, em, b, i) An inline HTML element that marks text as important. Browsers display it bold. Use it when the content has semantic importance, not just for visual styling.
13
HTML attributes Extra information added to an HTML opening tag as a name="value" pair, such as class="header" or href="page.html".
14
The id attribute An HTML attribute that gives an element a unique identifier on the page. No two elements may share the same id value.
15
The class attribute An HTML attribute that assigns CSS class names to an element. The same class can be reused on many elements for shared styling.
16
Links (a and href) An attribute on the <a> element that specifies the URL destination of the hyperlink. Without href, the link has no destination to navigate to.
17
Images (img, src, alt) An attribute on <img> that provides a text description of the image, shown when the image fails to load and read aloud by screen readers for accessibility.
18
Unordered lists (ul and li) An HTML element that creates an unordered (bulleted) list. Each item inside must be wrapped in an <li> element.
19
Ordered lists (ol and li) An HTML element that creates an ordered (numbered) list. Each item must be wrapped in an <li> and the browser numbers them automatically.
20
Div: the block container A generic block-level container element with no built-in styling. Used to group content so CSS can target and style sections of a page.

Semantic HTML & Forms (Modules 21–30)

21
Span: the inline container A generic inline container with no built-in styling. Used to wrap part of a text flow so CSS can target and style that portion of the text.
22
Semantic layout landmarks (header, nav, main, footer) The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.
23
Content sectioning (section, article, aside) A semantic HTML element for self-contained content that could stand alone, such as a blog post, news story, or forum entry.
24
Tables (table, tr, td, th) An HTML element that creates one horizontal row inside a table. Every <td> and <th> cell must sit inside a <tr>.
25
Table sections (thead, tbody, caption) The HTML element that groups the main data rows of a table. It sits inside <table> alongside <thead> and <caption>, wrapping the <tr> rows that contain <td> cells.
26
The form element The <form> attribute that specifies the URL where the form data is sent when the user submits. Without it, data is sent to the current page URL.
27
Text inputs (input) The <input> attribute that identifies the field's value when the form is submitted. Without name, the input value is not sent to the server.
28
Input types The <input> attribute that specifies what kind of data field is created. Different values produce text boxes, password fields, number steppers, checkboxes, and more.
29
Labels (label and for) The <label> attribute that links the label to a specific input. Its value must exactly match the id of the target input element.
30
Buttons (button) An HTML element that creates a clickable button. The type attribute controls its behaviour: submit, reset, or button.

CSS Fundamentals (Modules 31–40)

31
Textarea An HTML element that creates a multi-line text input. Unlike <input>, it requires opening and closing tags. Default content goes between them.
32
Select dropdowns (select and option) An HTML element placed inside <select> to provide one choice in a dropdown. Its value attribute is sent when the form submits; its text content is what the user sees.
33
Adding CSS to HTML A self-closing HTML element placed in <head> that connects an external CSS file. Its rel attribute must be "stylesheet" and href provides the file path.
35
Element (type) selectors An element selector that targets every <p> element on the page. The tag name is used directly as the selector, followed by a CSS declaration block.
36
Class selectors A CSS selector that targets every element whose class attribute matches classname, written with a leading dot
37
ID selectors A CSS selector that targets one unique element by matching its id attribute; written as a hash symbol followed by the id value
38
Combinator and grouping selectors A space combinator like 'div p' targets every p inside a div. Combinators (space, >, +, ~) select by relationship; a comma groups selectors so several share one rule.
39
Pseudo-classes A keyword added after a selector with a colon that targets an element based on its state or position, e.g. :hover or :focus.
40
Specificity and the cascade A score that determines which CSS rule wins when multiple rules target the same element; higher score beats lower

Advanced CSS & Layout (Modules 41–63)

41
CSS color values A CSS hex colour code. Six hexadecimal digits (0–9 and A–F) define red, green and blue channels. Shorthand: #rgb uses one digit per channel.
43
Font properties A CSS property that sets the typeface for text, accepting a prioritised list of font names with a generic fallback such as serif or sans-serif
44
CSS units A CSS relative unit. 1rem equals the root element's (html) font size. Unlike em, rem is not affected by nesting — it is consistent throughout the page.
45
The box model Every HTML element is a box with four layers: content, padding, border, and margin. These layers control the element's size and spacing.
46
Padding A CSS property that adds space inside an element's border, between the content area and the border. Unlike margin, padding is inside the element.
47
Border A CSS shorthand property that sets a visible line around an element by specifying width, style, and color in one declaration, e.g. border: 2px solid black
48
Margin A CSS property that adds space outside an element's border, between it and surrounding elements. Unlike padding, margin is outside the element's background.
49
Width and height A CSS property that sets the maximum width an element is allowed to reach. The element can be smaller but never wider. Useful for responsive layouts.
50
box-sizing Controls whether width and height include padding and border. border-box includes them; content-box (the default) measures content only.
51
The display property A CSS property that controls how an element participates in layout. Common values: block, inline, inline-block, none and flex.
52
Positioning A CSS property that sets how an element is positioned. Values: static (default), relative, absolute, fixed or sticky. Offset properties (top, right, bottom, left) take effect on non-static elements.
53
Flexbox container Turns an element into a flex container. Its direct children become flex items that can be arranged, aligned and spaced using flex properties.
54
Flexbox alignment A CSS flexbox property on the container that aligns all flex items along the cross axis (perpendicular to flex-direction). Values: stretch, center, flex-start, flex-end.
55
Flex item sizing Sets the initial main size of a flex item before free space is distributed according to flex factors.
56
CSS Grid container Defines an element as a grid container and establishes a new grid formatting context for its direct children.
57
CSS Grid placement Shorthand property that specifies a grid item's size and location within the grid columns by defining its start and end lines.
58
Backgrounds Shorthand property to set all background style properties like color, image, position, and repeat in a single declaration.
59
Border-radius and box-shadow A CSS property that rounds the corners of an element's outer border edge.
60
Media queries (responsive design) A CSS rule used to apply different styles for different media types or screen sizes.
61
CSS transitions A CSS shorthand property used to control the animation speed when changing CSS properties.
62
CSS transforms A CSS property that lets you visually modify elements by rotating, scaling, skewing, or translating them.
63
CSS custom properties (variables) A CSS function used to insert the value of a custom property (variable) into other CSS declarations.

Journeys using these modules

HTML and CSS Journey

Or build your own Journey from any of these modules →

Frequently Asked Questions

Are these worksheets free?

Yes — every worksheet and its answer key is free to view, download, and print, with no account required to access any individual module.

Do I need an account?

No account is needed to view or print a worksheet. A free teacher account adds extras like assigning modules to a class and tracking progress automatically — it takes under three minutes to set up and doesn't need a credit card.

What year level is this for?

There's no single fixed year level — the modules run from absolute HTML basics (what a browser does with a page) through to CSS Grid, Flexbox, and custom properties, so teachers can start wherever matches their class, from upper primary through to secondary.

Can I print them?

Yes — every module has a one-click Print Worksheet button that generates a printable page with the practice questions and a full answer key.

Is this aligned to a curriculum?

The module sequence itself is curriculum-shaped — foundational HTML first, then semantic HTML and forms, then CSS from first principles through to layout — but it isn't currently mapped to specific ACARA or Victorian Curriculum codes the way the Python curriculum is.

Can students use this without a teacher?

Yes — students can start any module and practice directly, no class or account required. Joining a teacher's class with a class code adds progress tracking, class badges, and live Sprints, but isn't needed to work through the worksheets or modules solo.

Do I need to know HTML & CSS myself to teach this?

No — every module comes with a full worked answer key, and Cloodit tracks who's stuck automatically, so you don't need to solve each exercise yourself before assigning it or be able to debug a student's work line by line.

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Pufferfish' badge — Error Handler, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →
For Teachers

Set this curriculum for your class and see who needs help, automatically.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?