🌐Course Curriculum

HTML & CSS for Beginners

Web Development· Beginner· Ages 11–14· 40 Hours

Course At a Glance

Program Outcomes

By the end of this course, students will be able to:

1
Build structured web pages using fundamental HTML elements.
2
Apply CSS styling techniques to design visually organised and user-friendly websites.
3
Develop a basic multi-page website demonstrating creativity and foundational web development skills.

Module 1

Introduction to the Web & HTML Fundamentals

Students are introduced to how websites work and the role of HTML in building web pages. They learn HTML document structure, headings, paragraphs, text formatting, images, links, and file organisation. Culminates in a two-page personal website.

Approx. 10 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tags / Properties
1.1	How the Web Works	Understand the difference between the internet and the web. Learn what happens when you visit a website: browsers, servers, and HTTP requests explained simply. Distinguish between front-end and back-end. Introduction to HTML, CSS, and JavaScript as the three pillars of the web.	Explore & Discuss: Open DevTools in Chrome, inspect three favourite websites, and identify HTML structure. Sketch a simple diagram of how a browser fetches a webpage.	`Browser, server, HTML, CSS, JS (concepts)`
1.2	Your First HTML Page	Set up a code editor (VS Code) and create the first HTML file. Learn the essential boilerplate: <!DOCTYPE html>, <html>, <head>, <title>, and <body>. Understand what tags, elements, and attributes are. Open the file in a browser.	Build: Create 'index.html' with correct boilerplate. Add a title, a heading, and a paragraph welcoming visitors to your page. View it in the browser.	`<!DOCTYPE>, <html>, <head>, <title>, <body>`
1.3	Headings & Paragraphs	Use heading tags <h1> through <h6> to create visual hierarchy. Add paragraphs with <p>. Use <br> for line breaks and <hr> for horizontal rules. Understand the importance of headings for accessibility and SEO.	Build: 'About Me' page — structured with h1 (name), h2 (sections like Hobbies, Favourite Things), and paragraphs of content. At least 4 headings and 6 paragraphs.	`<h1>–<h6>, <p>, <br>, <hr>`
1.4	Text Formatting & Inline Elements	Format text using inline elements: bold with <strong>, italic with <em>, underline with <u>, highlight with <mark>, strikethrough with <s>, subscript and superscript with <sub> and <sup>. Understand the difference between block and inline elements.	Build: 'Interesting Facts' page — each fact uses at least one formatting tag. Include a fun fact with a superscript (e.g. 10²), and highlight the most surprising fact with <mark>.	`<strong>, <em>, <u>, <mark>, <s>, <sub>, <sup>`
1.5	Images	Add images using the <img> tag. Set src (file path or URL), alt (accessibility text), width, and height attributes. Understand relative vs. absolute file paths. Organise project files in a folder structure (images/ subfolder).	Build: Add at least 4 images to the 'About Me' page. Two from local files (stored in an images/ folder) and two from URLs. All images must have meaningful alt text.	`<img src= alt= width= height=>`
1.6	Hyperlinks & Navigation	Create hyperlinks using the <a> tag. Link to external websites, internal pages (relative paths), and sections within the same page (anchor links with id). Open links in a new tab using target='_blank'. Build a simple text navigation menu.	Build: Add a navigation bar of text links at the top of the About Me page — links to Home, Hobbies, and Contact sections (anchor links). Add one external link to a favourite website.	`<a href= target= id=>, anchor links`
1.7	File Structure & Multi-Page Sites	Understand how to organise a multi-page website using a consistent folder structure (index.html, about.html, contact.html, images/, css/). Create a second HTML page and link the two pages together using relative links.	Build: Create a second page 'hobbies.html'. Link index.html and hobbies.html to each other using a shared navigation bar. Both pages must have the same boilerplate structure.	`Relative paths, folder structure, <nav>`
1.8	Module 1 Project: Personal Webpage	Combine all Module 1 skills to build a complete two-page personal website: a Home page (index.html) and a Hobbies page. Both pages share a navigation menu. Content includes headings, paragraphs, images, links, and text formatting.	Project: 'My Personal Website v1' — index.html with personal bio, image, and formatted text; hobbies.html with hobbies, favourite things, and external links. Navigation links both pages.	`Full Module 1 HTML`

Module 2

Structuring Content with HTML

Students deepen their HTML knowledge through lists, tables, forms, semantic elements, media embedding, and container elements. Emphasis is placed on organising content clearly and logically using correct, accessible HTML.

Approx. 10 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tags / Properties
2.1	Unordered & Ordered Lists	Create bulleted lists using <ul> and <li>, and numbered lists using <ol>. Customise list style types. Nest lists inside one another to create hierarchical structures. Understand when to use each type.	Build: 'My Top 10' page — a numbered list of favourite movies/songs/books with a nested unordered list of reasons for each top pick.	`<ul>, <ol>, <li>, type='a', nested lists`
2.2	HTML Tables	Build structured tables using <table>, <tr>, <th>, and <td>. Add a caption, use colspan and rowspan to merge cells. Apply basic table attributes (border, cellpadding). Understand when tables are appropriate for data display.	Build: 'Weekly Timetable' — a full school timetable table with days as columns, periods as rows, merged cells for lunch and breaks, and a caption.	`<table>, <tr>, <th>, <td>, colspan, rowspan`
2.3	HTML Forms — Part 1	Understand what forms are used for on the web. Create a form with <form>. Add text inputs, email inputs, password fields, and a submit button using <input>. Use <label> tags for accessibility. Set placeholder and required attributes.	Build: 'Sign-Up Form' — collects first name, last name, email, and password. All fields have labels, placeholders, and are marked required. Styled with basic HTML attributes.	`<form>, <input type=>, <label>, placeholder, required`
2.4	HTML Forms — Part 2	Extend forms with dropdowns (<select> and <option>), radio buttons, checkboxes, a textarea for multi-line text, and a date picker. Group related inputs with <fieldset> and <legend>. Review all form input types.	Build: 'Event Registration Form' — includes text fields, a dropdown for event type, radio buttons for attendance, checkboxes for dietary requirements, a date picker, and a textarea for comments.	`<select>, <option>, <textarea>, <fieldset>, <legend>, type='radio/checkbox/date'`
2.5	Semantic HTML Elements	Replace generic <div> and <span> containers with meaningful semantic elements: <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. Understand why semantics matter for accessibility and search engines.	Refactor: Take the Module 1 personal webpage and restructure it using semantic elements. Replace all layout <div>s with the appropriate semantic tag. No visible change — the goal is correct structure.	`<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>`
2.6	HTML5 Media Elements	Embed video using <video> with controls, autoplay, muted, and loop attributes. Embed audio with <audio>. Add captions with <track>. Use <iframe> to embed YouTube videos and Google Maps. Understand fallback content.	Build: 'Media Showcase' page — embed one local or YouTube video, one audio clip, and one embedded Google Map using <iframe>. All media elements have controls and fallback text.	`<video>, <audio>, <source>, <iframe>, controls`
2.7	Divs, Spans & HTML Organisation	Use <div> as a block-level container and <span> as an inline container for grouping content. Apply class and id attributes to elements in preparation for CSS targeting. Understand the difference between id (unique) and class (reusable).	Build: Structure a 'News Feed' page using <div class='card'> containers for each news article — each card has a heading, image, short paragraph, and a 'Read More' link. Add id and class attributes throughout.	`<div>, <span>, class='', id=''`
2.8	Module 2 Project: Structured Webpage	Apply all Module 2 concepts to build a well-structured multi-section webpage. The page uses semantic elements, includes a table, a form, and multiple lists. Content is logically organised and all HTML is valid.	Project: 'School Club Website' — semantic layout with header/nav/main/footer, a membership sign-up form, a club timetable (table), an events list, and an embedded map of the club meeting location.	`Full Module 2 HTML`

Module 3

Introduction to CSS & Styling

Students learn how CSS controls presentation. Topics progress from basic selectors and colours through typography, the box model, Flexbox layout, hover effects, responsive design, and professional stylesheet organisation.

Approx. 10 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tags / Properties
3.1	Introduction to CSS	Understand what CSS is and how it controls presentation. Learn three ways to add CSS: inline, internal (<style> tag), and external stylesheet (linked .css file). Understand why external stylesheets are best practice. Write the first CSS rules.	Guided Exercise: Style the personal webpage three ways — inline, then <style>, then an external 'style.css' file. Observe how the external stylesheet applies to all pages at once.	`inline style=, <style>, <link rel='stylesheet'>`
3.2	Selectors & the Cascade	Use element, class, and id selectors. Combine selectors with descendant, child, and grouping combinators. Understand the cascade: how specificity and source order determine which styles win. Use browser DevTools to inspect applied styles.	Exercises: Write 10 CSS rules using different selector types. Predict which style wins when two rules conflict, then verify in DevTools. Identify and fix 3 specificity bugs in a provided stylesheet.	`tag, .class, #id, tag.class, tag > tag, specificity`
3.3	Colours & Backgrounds	Apply colours using colour names, hex codes, rgb(), and rgba() (with transparency). Set background colours, background images (background-image, background-size, background-position). Use gradients with linear-gradient(). Build colour palettes.	Build: 'Colour Palette Page' — sections styled with hex, rgb, and rgba colours. One section uses a background image with background-size: cover. One uses a linear gradient. Demonstrate transparency with rgba.	`color, background-color, background-image, rgba(), linear-gradient()`
3.4	Typography & Text Styling	Style text with font-family (web-safe fonts and Google Fonts via <link>). Control font-size (px, em, rem), font-weight, font-style, line-height, letter-spacing, text-align, text-decoration, and text-transform. Understand units: px vs em vs rem.	Build: 'Typography Showcase' page — demonstrate Google Font, different sizes in px/em/rem, bold and italic variants, letter-spaced headings, and centred/right/left aligned text blocks.	`font-family, font-size, font-weight, line-height, @import (Google Fonts)`
3.5	The Box Model	Understand the CSS box model: content, padding, border, and margin. Control each side independently. Use box-sizing: border-box. Apply border styles (solid, dashed, dotted), border-radius for rounded corners, and outline. Visualise box model in DevTools.	Box Model Workshop: Build a set of 'profile cards' — each card uses padding, border-radius, border, and margin to create a well-spaced, styled card with an image, name, and description.	`margin, padding, border, border-radius, box-sizing: border-box`
3.6	Display, Width & Height	Understand display values: block, inline, inline-block, and none. Control element dimensions with width, height, min-width, max-width. Use overflow to manage content that exceeds its container. Apply visibility: hidden vs display: none.	Build: Style a horizontal navigation bar by changing <li> elements from block to inline-block. Create a card grid where each card has a fixed width and auto margin for equal spacing.	`display: block/inline/inline-block/none, width, max-width, overflow`
3.7	Flexbox Layout	Introduce CSS Flexbox as the primary layout tool. Use display: flex on a container. Control direction (flex-direction), alignment (justify-content, align-items), wrapping (flex-wrap), and individual item sizing (flex-grow, flex-basis). Build common layouts: centred content, navigation bar, card row.	Build: Redesign the navigation bar and card section from Module 2 using Flexbox. Create a centred hero section. Build a row of 3 equal-width cards using flex-wrap. All without float or positioning hacks.	`display: flex, justify-content, align-items, flex-wrap, flex-grow`
3.8	Pseudo-classes, Transitions & Hover Effects	Use pseudo-classes :hover, :focus, :active, :nth-child() to style elements in different states. Apply CSS transitions (transition: all 0.3s ease) to animate property changes smoothly. Add a box-shadow and transform: scale() for interactive visual feedback.	Build: 'Interactive Card Gallery' — cards lift on hover using box-shadow and transform: translateY(). Buttons change colour on hover with a smooth transition. Navigation links underline on focus. All effects use only CSS.	`:hover, :focus, :nth-child(), transition, transform: scale()/translateY()`
3.9	Responsive Design & Media Queries	Understand why responsive design matters (mobile vs. desktop). Use CSS media queries (@media) to apply different styles at different screen widths. Set the viewport meta tag. Switch from multi-column to single-column layout on small screens.	Build: Make the card gallery from Lesson 3.8 responsive — 3 columns on desktop (>768px), 2 columns on tablet, 1 column on mobile (<480px). Test by resizing the browser window and using DevTools mobile emulator.	`@media (max-width: ), <meta name='viewport'>, responsive layout`
3.10	CSS Organisation & Best Practices	Organise a stylesheet professionally: group related rules, use comments, apply a consistent naming convention for classes (BEM basics). Avoid redundancy with grouped selectors and CSS variables (--primary-color). Validate HTML and CSS with W3C validators.	Refactor Sprint: Take the personal website stylesheet and reorganise it — add comments, group rules by section, extract repeated colour values into CSS variables, and fix any W3C validation errors.	`--variable, var(), /* comments */, CSS organisation, W3C validator`

Module 4

Mini Website Project

Students apply all HTML and CSS knowledge to plan, design, and build a complete 3-page website. The focus is on clean structure, consistent styling, responsive layout, and user-friendly design. Concludes with a live presentation.

Approx. 10 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tags / Properties
4.1	Project Briefing & Planning	Students choose a website theme and plan their 3-page mini website. They produce a planning document: site map (which pages link to which), a wireframe sketch for each page (layout blueprint), colour palette, font choices, and a content outline.	Planning Deliverable: Site map diagram, hand-drawn wireframes for all 3 pages, colour palette (3–5 colours), and font selections from Google Fonts. Teacher sign-off before building begins.	`Planning, wireframing, site map`
4.2	Project Setup & HTML Structure	Set up the project folder: index.html, about.html, contact.html, css/style.css, images/. Build the HTML skeleton for all three pages — correct boilerplate, semantic structure, shared navigation, and shared footer. Link all pages together and verify navigation works.	Build Sprint: All three pages exist with correct structure. Navigation bar links all pages. Footer is identical on all pages. External stylesheet linked. All validates with W3C checker.	`Project folder structure, semantic HTML, shared nav/footer`
4.3	Home Page Build	Develop the Home page (index.html) fully — hero section with a heading and tagline, a brief about section, an image gallery or card row, and a call-to-action link. Apply Flexbox layout and the planned colour scheme.	Build Sprint: Complete index.html with hero section, about preview, image cards (Flexbox), and a 'Learn More' button linking to about.html. Desktop layout complete and styled.	`Flexbox, hero section, cards, colour scheme`
4.4	Inner Pages Build	Develop the About page (about.html) — detailed content with images, formatted text, and lists. Build the Contact page (contact.html) — a complete form with text fields, a dropdown, radio buttons, and a submit button. Consistent styling across all pages.	Build Sprint: Complete about.html with bio, images, and lists. Complete contact.html with a full form. All pages share the same stylesheet, navigation, and footer. Consistent visual identity.	`HTML form, semantic structure, consistent CSS`
4.5	Styling, Hover Effects & Polish	Apply finishing CSS touches across all pages: hover effects on navigation links and buttons, transitions for smooth interactions, box-shadow on cards, rounded corners, and refined typography. Ensure visual consistency — same fonts, colours, and spacing throughout.	Styling Session: Add :hover and transition to all interactive elements. Apply box-shadow and border-radius to cards and images. Review every page side-by-side for consistency. Fix any style inconsistencies.	`:hover, transition, box-shadow, border-radius`
4.6	Responsive Layout	Make the entire website responsive using media queries. Ensure the navigation, hero section, card grid, and form all reflow correctly on mobile. Test on multiple screen sizes. Fix any layout breaks on small screens.	Responsive Sprint: Add @media breakpoints for tablet (768px) and mobile (480px). Navigation collapses gracefully, cards stack vertically, form fields fill full width on mobile. Test in Chrome DevTools mobile emulator.	`@media, flex-direction: column, width: 100%`
4.7	Testing, Validation & Peer Review	Test all links and navigation paths. Validate every HTML and CSS file with the W3C validator and fix all errors. Check all images load correctly and have alt text. Complete a cross-browser check (Chrome and Firefox). Conduct a structured peer review.	QA Session: Work through a testing checklist — all links work, all images load, no validation errors, alt text present, consistent layout on desktop and mobile. Peer review: swap websites with a classmate and complete a feedback form.	`W3C validator, alt text, cross-browser, QA checklist`
4.8	Final Presentation Day	Students present their completed website to the class. Each presentation demonstrates the live website in a browser, explains one HTML and one CSS concept they used, shares one challenge they faced and how they solved it, and describes what they would add next.	Final Demo: 3-minute live walkthrough of all pages + 2-minute Q&A. Assessed on: correct HTML structure, effective CSS styling, responsive layout, working navigation, and presentation clarity. Certificate of completion awarded.	`Full course — HTML & CSS`

Teaching Notes & Tips

Pacing Guidance

Each module contains 8–10 lessons of approximately 50–60 minutes each, totalling ~40 hours. Module 3 (CSS) is the most content-dense at 10 lessons — split Flexbox (3.7) and Media Queries (3.9) across two sessions if needed. Module 4 lessons are project sprints; hold teacher checkpoints at 4.2, 4.4, and 4.6.

Differentiation

Advanced students can explore CSS Grid, CSS animations (@keyframes), adding a favicon, a custom 404 page, or deploying their site with GitHub Pages. Students needing support should focus on completing core builds; pair programming is encouraged for project sessions.

Assessment Criteria

Module projects assessed on: (1) HTML Structure — correct semantic elements, valid HTML. (2) CSS Styling — visual consistency, appropriate properties used. (3) Responsiveness — layout works on mobile and desktop. (4) Functionality — all links and navigation work. (5) Creativity & Effort — personal touches and quality of content.

Tools & Environment

Required: VS Code with Live Server extension (auto-refreshes browser on save). Chrome with DevTools for inspection and mobile emulation. Students save work to a local project folder. Optional: deploy final project using GitHub Pages for a shareable link.

Mini Website Project Themes

Personal Portfolio — bio, skills, and contact form. Hobby or Interest Website — fan page for a sport, game, or hobby with facts, images, and links. School Project Website — informational site about a curriculum topic (science, history, geography, etc.). Fictional Business — a made-up shop, café, or service with a menu/product page.

Prior Knowledge Expected

Students should be comfortable using a computer: creating and saving files, navigating folder structures, opening files in a browser, and basic keyboard shortcuts (copy/paste, save). No prior coding experience required — only basic digital literacy.

Enroll Your Child Now