Press ▶ Show page to see your page here.
Lesson 49: Project: About Me page
Level 6, Make a Web Page. A page all about you, with alt text and colours. The new word: alt text. It follows lesson 48, The folder of a site. Next comes lesson 50, Practice: Broken Page.
What the lesson explains
Project: About Me. Build a page all about you, in your site folder.
What to share. Fun facts are great. Private facts stay private. yes hobbies, pets; yes favourite food; no address, school.
Words for a picture. alt text tells what a picture shows, for screen readers. On the card: alt="My cat asleep on a book"
What you do first
Your title and intro. Write a title and a sentence of your own. One way: write in index.html: <h1>Hi, I am Sam</h1> / <p>I like coding, cats and football.</p>. Then press Show page to see it.
The files on the practice computer
This lesson works in one folder. At the start, Documents\my-site holds images\, index.html, style.css.
Along the way you save index.html in Documents\my-site and save style.css in Documents\my-site. Lesson 50 opens with the files just as you leave them.
The page on the screen
Project: About Me. The page uses the tags <h1>, <p>, <img>, and its big title reads "My site".
Words for a picture. The page uses the tags <h1>, <p>, <img>, and its big title reads "Hi, I am Sam".
What you practise
Try it, "Your title and intro": Write a title and a sentence of your own. One way: write in index.html: <h1>Hi, I am Sam</h1> / <p>I like coding, cats and football.</p>. Then press Show page to see it.
Try it, "Describe the picture": Give the picture alt text. One way: write in index.html: <img src="images/cat.png" alt="My cat Mittens asleep on a book">. Then press Show page to see it.
Try it, "Favourite things": Add an <h2> and a list of three. One way: write in index.html: <h2>My favourite things</h2> / <ul> / <li>Pizza</li> / <li>Football</li> …. Then press Show page to see it.
Challenge, "Your colours": Give body a background and h1 a colour. One way: write in style.css: body { / background-color: lightyellow; / } / h1 { …. Then press Show page to see it.
What PlayBuddy and PlayType say
PlayBuddy: "Project time! Let’s make a page all about you."
PlayType: "Share fun facts. Never share your address or your school."
Help in every lesson
Everything happens on a pretend computer in your browser, so nothing touches your real files. PlayBuddy and PlayType stand beside the board, cheer you on and say when it is your turn.
A green ring shows where to click the first time. After that you do it on your own, and if you slip twice the ring comes back.
Stars
The lesson has 4 things to do. Up to one slip in ten gives three stars, up to one in four gives two, and finishing always gives at least one. Stars and progress are saved in this browser only; there is no account.
About DayOneCode
DayOneCode is an independent learning site, not affiliated with or endorsed by Anthropic. Claude and Claude Code are trademarks of Anthropic.