← 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 35 Element (type) selectors 36 Class selectors 37 ID selectors 38 Combinator and grouping selectors 39 Pseudo-classes 40 Specificity and the cascade 41 CSS color values 43 Font properties 44 CSS units 45 The box model 46 Padding 47 Border 48 Margin 49 Width and height 50 box-sizing 51 The display property 52 Positioning 53 Flexbox container 54 Flexbox alignment 55 Flex item sizing 56 CSS Grid container 57 CSS Grid placement 58 Backgrounds 59 Border-radius and box-shadow 60 Media queries (responsive design) 61 CSS transitions 62 CSS transforms 63 CSS custom properties (variables)

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.

Teach this with your class →
For Teachers

Assign 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?