🏆 Level 4 · Expert📘 Chapter 2⏱️ 18 minutes
<Mini Apps & Websites/>
Learn what a web page is made of, ask Claude to build a tiny one, test it, fix it and share it safely.
🔁 Remember: 📋 Examples 📏 Rules 🔄 Plan · Answer · Check
👨👩👧
Reminder: Build only practice pages with made-up or school content. Never include personal details, and ask a parent or teacher before sharing anything online.
Your editor tabs
Chapter 2 at a glance
🧱
2.1 What is a web page?
🎯 Goal: know the three building blocks of a page- A web page is made of text that a browser reads and draws.
- HTML is the structure: headings, paragraphs, buttons.
- CSS is the style: colours, sizes and layout.
- JavaScript makes things move or react. You do not need to write it, just know it exists.
🧱 The page recipe
HTML
<h1>Hello</h1> → a big heading
CSS
h1 {color: teal;} → makes headings teal
JS
Reacts when you tap a button
Browser
Reads the file and shows the page
🌍 Real-life examples
🏷️ TagsA tag has an opening <p> and a closing </p>. The text goes between.
🎨 StyleCSS has a selector, a property and a value: p {color: blue;}
🚀 Try it yourself
Explain HTML and CSS to a Class 7 student using a house as an example. Then show a tiny page with one heading, one paragraph and one coloured button, and explain each line.
❌ Weak“Teach me coding.”
Too big and vague.
Too big and vague.
✅ Good“Explain HTML and CSS with a house example, then show a tiny page.”
Clear and small.
Clear and small.
🎉 Fun fact: Every page you visit is just a text file that your browser turns into pictures and buttons!
📝 Quick quiz
1. What does HTML do?
✅ It gives the page its structure.
2. What does CSS do?A) Style B) Structure
✅ A. CSS controls colours and layout.
3. What reads the file and shows the page?
✅ The browser.
🏗️
2.2 Ask Claude to build small
🎯 Goal: write a clear request for a tiny page- Start small: one page, one idea.
- Say the topic, who it is for, the colours and that you want one single file.
- Ask Claude to explain each part so you learn.
- Use only made-up or school-topic content. No personal details.
🏗️ Build recipe
💡Ideaone small page
➜
✍️Prompttopic, colours, one file
➜
👀Previewopen in browser
➜
🔧Improveone change at a time
🌍 Real-life examples
🐾 Animal cardA page about your favourite animal with 3 facts and a colourful heading.
🗓️ Study timetableA simple table page for a weekly study plan with made-up subjects.
🚀 Try it yourself
Make one HTML file with inline CSS for a Class 7 project page about the solar system. Include a title, 3 short facts and a dark blue background with white text. Keep it simple and add a comment before each part explaining it.
❌ Weak“Make me a website.”
Too vague to build.
Too vague to build.
✅ Good“One HTML file about the solar system, 3 facts, dark blue background, with comments.”
Specific and safe.
Specific and safe.
🏆 Mini challenge: Ask for a page about a hobby. Then change only the colours.
📝 Quick quiz
1. Why start small?
✅ Small pages are easier to test and understand.
2. What should you not put on a practice page?A) Made-up facts B) Personal details
✅ B. Keep personal details out.
3. Why ask for comments in the code?
✅ They explain what each part does.
🔍
2.3 Test and fix
🎯 Goal: be a debug detective- The first version is rarely perfect. Testing is normal.
- Look at the page: is anything missing, wrong or hard to read?
- Tell Claude exactly what is wrong: “The button is invisible.”
- Change one thing at a time and check again.
🔍 Detective questions
👀
What do I see?
Describe it
no guessing🎯
What did I expect?
Compare
spot the gap✂️
Which part?
Heading? Button?
narrow it down🔁
Test again
After one fix
repeat🌍 Real-life examples
🪲 Bug report“The heading is white on a white background. Please change the text colour.”
📱 Phone checkOpen the page on a phone and ask Claude to make text larger if needed.
🚀 Try it yourself
My page has a problem. I expected a blue heading, but I see black text. Here is my code: [paste]. Find the likely cause, explain it simply, and show only the fixed part.
❌ Weak“It is broken, fix it.”
Claude has to guess.
Claude has to guess.
✅ Good“I expected a blue heading, I see black. Here is the code.”
Easy to fix.
Easy to fix.
🎉 Fun fact: Even professional coders spend lots of time fixing bugs. It is part of the job!
📝 Quick quiz
1. What is a bug?
✅ A mistake that makes something not work as expected.
2. Best way to report a bug?A) “It is broken” B) Say what you expected and what you see
✅ B. Details help.
3. How many fixes at a time?
✅ One, so you know what worked.
🛡️
2.4 Share safely
🎯 Goal: publish only what is safe, with a grown-up- Before sharing, ask a parent or teacher.
- Never include full name, address, phone, school name or photos of people.
- Check that facts are right and that you have the right to use any pictures.
- Say it was made with help from AI.
🛡️ Publish checklist
✅ Grown-up
A parent or teacher said yes
✅ No personal info
No name, address, phone or school
✅ Facts checked
Verified in book or reliable site
✅ Credit
Said AI helped
🌍 Real-life examples
📣 Safe to shareA page about the water cycle with made-up characters.
🚫 Not safeA page with your address or classmates’ photos.
🚀 Try it yourself
Here is my web page text: [paste]. Check it for personal information, unsafe content or unchecked facts, and give me a short checklist of what to fix before I show my teacher.
❌ WeakPosting immediately.
No checking.
No checking.
✅ GoodChecking with a grown-up first.
Safe and responsible.
Safe and responsible.
🏆 Mini challenge: Make a page and show it only to your teacher or family first.
📝 Quick quiz
1. Who should you ask before sharing?
✅ A parent or teacher.
2. Which is safe to include?A) Your address B) A made-up character
✅ B. Made-up content is safer.
3. Why mention AI help?
✅ Honesty and credit.
🎨 Page Painter
Edit the code and watch the page change. Everything stays on your device. Pick a starter, then try a challenge!
🎯 Challenges
Tap a challenge.
💡 Remember: Practise with made-up content only. Ask a grown-up before sharing anything online.
Chapter 2 summary
HTML, CSS, JS • Build small • Test and fix • Share safely.