You can build a real, working website in about half an hour, no installs, no accounts, just a text editor and a browser. This walkthrough builds one page: a simple "About Me" page with a heading, a photo, and a link, the same first project YCA students build in their Web Development course before moving on to anything more advanced.
If you haven't yet, our guide on what web development actually is covers what HTML, CSS, and JavaScript each do. This post skips the theory and goes straight to building.
What You'll Need
Nothing to buy, nothing to install if you don't want to.
A laptop or desktop, not a phone, typing code needs a real keyboard
A text editor: Notepad (Windows) and TextEdit (Mac) both work, or a free tool like VS Code for something a bit friendlier
A web browser, Chrome, Firefox, or Edge, whatever's already on the computer
About 30 minutes with no interruptions
That's it. No sign-ups, no payment, no software license.
Why Real Code Instead of a Drag-and-Drop Builder?
Plenty of tools let a child build a webpage by dragging boxes around instead of typing. Those are fine for a five-minute activity, but they don't teach anything that carries over. A child who drags a box in one tool has to relearn everything from scratch in the next one.
Real HTML and CSS work everywhere, every browser, every device, forever. The tags a child types today are the exact same tags a professional developer used to build the website you're reading this on. There's no simplified, kid-only version to unlearn later. That's the whole reason this walkthrough uses a plain text editor instead of a builder tool.
Step 1: Set Up the Page Skeleton
Every webpage starts with the same basic shape. Open your text editor, create a new file, and type this in exactly:
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
</body>
</html>
Save the file as about-me.html. That .html at the end matters, it's what tells the computer this is a webpage and not just a text file.
Here's what each part does. <!DOCTYPE html> tells the browser this is a modern webpage. <head> holds information the browser needs but doesn't show, like the <title>, which is the text that shows up in the browser tab. <body> is where everything visible actually goes. Right now it's empty, so if you open the file in a browser, you'll see a blank page with "About Me" in the tab. That's expected, and it's already progress.
Step 2: Add a Heading and Introduce Yourself
Inside the <body> tags, add a heading and a short paragraph:
<body>
<h1>Hi, I'm [Your Name]</h1>
<p>I am [your age] years old and I live in [your city]. My favorite thing to do is [your hobby].</p>
</body>
Fill in the brackets with real answers, then save the file and refresh it in your browser. That's a real heading and a real sentence, written by a real person, showing up on a real webpage.
<h1> makes the biggest, boldest heading on the page. <p> marks a paragraph of regular text. Notice both tags have a closing version, </h1> and </p>, that's a rule worth remembering: almost every HTML tag that opens also has to close.
Step 3: Add a Photo
A page about you should probably have a picture of you. Add this line inside <body>, right after the paragraph:
<img src="me.jpg" alt="A photo of me">
Save a photo in the same folder as your HTML file and name it me.jpg to match, or change the filename in the code to match whatever the photo is actually called. The alt text matters too, it's what shows up if the image doesn't load, and it's also what a screen reader reads aloud for someone who can't see the image at all.
Step 4: Style It With CSS
Right now the page works, but it's plain black text on a white background. A few lines of CSS change that completely. Add this inside the <head> section, above </head>:
<style>
body {
background-color: #fdf6e3;
font-family: Arial, sans-serif;
}
h1 {
color: #2b6cb0;
text-align: center;
}
</style>
Save and refresh. The background is now a soft cream color, the text uses a cleaner font, and the heading is blue and centered. Nothing about the content changed, only how it looks. That's the entire point of CSS: HTML decides what's on the page, CSS decides how it looks.
Step 5: Add a Link
One last piece. Below the image, add a paragraph with a link in it:
<p>One of my favorite websites is <a href="https://your-favourite-site.com">This One</a>.</p>
Replace the web address with a real one, and change "this one" to describe it. Save, refresh, and click it. A working link, built entirely by hand.
What Your Child Just Learned
That's a complete, working webpage, and along the way, a few real coding concepts landed without ever being called by name:
Structure, since every tag has a job and a place it belongs
Opening and closing tags, and what happens when one gets forgotten
The difference between content and style, HTML for the words, CSS for the look
Attributes, like src and href, which pass extra information to a tag
Debugging, since something almost always looks slightly wrong the first time, and fixing it is half the actual skill
None of this needed a course or an account. It just needed a text editor and someone willing to try.
Is This the Right Age for My Child?
This exact project is what YCA opens with for Grade 6 to 10, roughly age 11 and up, since it needs enough reading comfort to follow multi-step instructions and enough typing patience to get through a few lines of code without giving up halfway.
Younger kids can still do a simplified version with a parent typing alongside them, but independent, unsupervised HTML really clicks around Grade 6. For the fuller picture of what to introduce at every age, from Scratch in Grade 1 through this kind of project later on, see YCA's parent's guide to coding by grade.
What Comes After This First Project?
This "About Me" page is a smaller version of the very first project in YCA's actual course, a personal bio page, which then grows into a styled profile card, a responsive landing page, and eventually a full JavaScript-powered portfolio site by the end. If your child enjoyed this and wants to keep going with an instructor guiding each step, YCA's free trial class is 45 minutes, no payment required, and most kids leave having already built something new.
For kids who want to keep experimenting on their own first, MDN Web Docs and W3Schools both offer free, beginner-friendly HTML references worth bookmarking.
