← All Journeys

HTML and CSS Journey

Learn from foundation ideas of web app building to advance tags and elements in HTML and CSS.

Modules (61)

1 How a browser renders a web page 2 HTML vs CSS: structure vs style 3 HTML elements: opening and closing tags 4 The document skeleton (DOCTYPE, html, head, body) 5 The title element 6 Meta tags (charset and viewport) 7 HTML comments 8 Headings (h1 to h6) 9 Paragraphs (p) 10 Line breaks (br) 11 Horizontal rule (hr) 12 Inline text formatting (strong, em, b, i) 13 HTML attributes 14 The id attribute 15 The class attribute 16 Links (a and href) 17 Images (img, src, alt) 18 Unordered lists (ul and li) 19 Ordered lists (ol and li) 20 Div: the block container 21 Span: the inline container 22 Semantic layout landmarks (header, nav, main, footer) 23 Content sectioning (section, article, aside) 24 Tables (table, tr, td, th) 25 Table sections (thead, tbody, caption) 26 The form element 27 Text inputs (input) 28 Input types 29 Labels (label and for) 30 Buttons (button) 31 Textarea 32 Select dropdowns (select and option) 33 Adding CSS to HTML 34 Element (type) selectors 35 Class selectors 36 ID selectors 37 Combinator and grouping selectors 38 Pseudo-classes 39 Specificity and the cascade 40 CSS color values 41 Font properties 42 CSS units 43 The box model 44 Padding 45 Border 46 Margin 47 Width and height 48 box-sizing 49 The display property 50 Positioning 51 Flexbox container 52 Flexbox alignment 53 Flex item sizing 54 CSS Grid container 55 CSS Grid placement 56 Backgrounds 57 Border-radius and box-shadow 58 Media queries (responsive design) 59 CSS transitions 60 CSS transforms 61 CSS custom properties (variables)

Printables for this journey

Every module above has its own free printable worksheet with an answer key. These crosswords and word searches cover the same terms:

✎
Crossword: Getting Started and HTML Elements & Attributes (Modules 1–12) 6 clues · How a browser renders a web page, HTML vs CSS: structure vs style, HTML elements: opening and closing tags, The document skeleton (DOCTYPE, html, head, body) and more
✎
Crossword: HTML Elements & Attributes and Semantic HTML & Forms (Modules 11–21) 7 clues · Horizontal rule (hr), Inline text formatting (strong, em, b, i), HTML attributes, The id attribute and more
✎
Crossword: Semantic HTML & Forms (Modules 21–30) 8 clues · Span: the inline container, Semantic layout landmarks (header, nav, main, footer), Content sectioning (section, article, aside), Tables (table, tr, td, th) and more
✎
Crossword: CSS Fundamentals and Advanced CSS & Layout (Modules 31–41) 9 clues · Textarea, Select dropdowns (select and option), Adding CSS to HTML, Element (type) selectors and more
✎
Crossword: Advanced CSS & Layout (Modules 43–52) 10 clues · Font properties, CSS units, The box model, Padding and more
✎
Crossword: Advanced CSS & Layout (Modules 53–63) 10 clues · Flexbox container, Flexbox alignment, Flex item sizing, CSS Grid container and more
🔎
Word Search: Getting Started to Semantic HTML & Forms (Modules 1–23) 20 words to find · How a browser renders a web page, HTML vs CSS: structure vs style, HTML elements: opening and closing tags, The document skeleton (DOCTYPE, html, head, body) and more
🔎
Word Search: Semantic HTML & Forms to Advanced CSS & Layout (Modules 21–41) 20 words to find · Span: the inline container, Semantic layout landmarks (header, nav, main, footer), Content sectioning (section, article, aside), Tables (table, tr, td, th) and more
🔎
Word Search: Advanced CSS & Layout (Modules 43–63) 20 words to find · Font properties, CSS units, The box model, Padding and more

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.

Add to class →
For Teachers

Add this journey to your class and track every student in real time.

Create a free teacher account →

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

For Students

Start this journey on Cloodit — track progress, earn badges, and play live sprints with your class.

Start Learning Free →

Have a class code?