Course chapters
Tap View summary on any chapter to see what’s inside — no need to start the course.
1Your First Web PageOpens when you start📄
🎯 What you’ll learn
- What HTML is
- Tags and the page skeleton
- Opening your page in a browser
🎬 Animated demo
Type a few tags and a real web page appears.
🛠️ Project & application ideas
- “Hello, world” page
- My favourite things page
2Headings, Paragraphs & ListsOpens when you finish chapter 1📝
🎯 What you’ll learn
- Heading levels
- Paragraphs and line breaks
- Bulleted and numbered lists
🎬 Animated demo
Plain text turns into a neat page with headings and lists.
🛠️ Project & application ideas
- Recipe page
- Top-10 list page
3Links & ImagesOpens when you finish chapter 2🔗
🎯 What you’ll learn
- Linking pages
- Adding pictures
- Alt text for everyone
🎬 Animated demo
Click a link to jump down the page, and see alt text stand in for a missing picture.
🛠️ Project & application ideas
- Photo gallery page
- Two-page mini website
4Tables & FormsOpens when you finish chapter 3📋
🎯 What you’ll learn
- Rows and columns
- Text boxes, buttons and choices
- Labels for forms
🎬 Animated demo
A timetable table and a sign-up form appear.
🛠️ Project & application ideas
- Class timetable
- Club sign-up form
5CSS: Colours & FontsOpens when you finish chapter 4🎨
🎯 What you’ll learn
- Adding style rules
- Colours and backgrounds
- Fonts and sizes
🎬 Animated demo
A dull page turns bright with one style rule at a time.
🛠️ Project & application ideas
- Theme your favourite-things page
- Festival colour theme
6Boxes: Margin, Border, PaddingOpens when you finish chapter 5📦
🎯 What you’ll learn
- The box model
- Spacing things out
- Rounded corners and shadows
🎬 Animated demo
Grow a box’s padding, border and margin and see the space change.
🛠️ Project & application ideas
- Profile card
- Button designs
7Layout with FlexboxOpens when you finish chapter 6📐
🎯 What you’ll learn
- Rows and columns
- Centring things
- Space between items
🎬 Animated demo
Cards line up, centre and spread out with Flexbox.
🛠️ Project & application ideas
- Navigation bar
- Card row
8Grid LayoutsOpens when you finish chapter 7🔲
🎯 What you’ll learn
- Grid rows and columns
- Photo grids
- Page layouts
🎬 Animated demo
Photos snap into a neat grid.
🛠️ Project & application ideas
- Photo wall
- Magazine-style page
9Responsive DesignOpens when you finish chapter 8📱
🎯 What you’ll learn
- Pages for phones and laptops
- Media queries
- Flexible images
🎬 Animated demo
Shrink the screen and watch the layout rearrange.
🛠️ Project & application ideas
- Phone-friendly portfolio
- Responsive menu
10Animations & Hover EffectsOpens when you finish chapter 9✨
🎯 What you’ll learn
- Hover effects
- Transitions
- Keyframe animations
🎬 Animated demo
Hover a button and it glows; a logo bounces in.
🛠️ Project & application ideas
- Animated buttons
- Bouncing logo
11Build a Portfolio PageOpens when you finish chapter 10🧑🎨
🎯 What you’ll learn
- Plan sections
- Show your projects
- Make it look professional
🎬 Animated demo
A complete portfolio page comes together section by section.
🛠️ Project & application ideas
- My project portfolio
- Class showcase page
12Publish Your WebsiteOpens when you finish chapter 11🚀
🎯 What you’ll learn
- Free hosting options
- Sharing your link
- Updating your site
🎬 Animated demo
Your page goes live and opens on a friend’s phone.
🛠️ Project & application ideas
- Publish your portfolio
- School club website (final project)
📝Exam 1 and Exam 224 hours after the last chapter, then 24 hours later · best of 2