Welcome to Code Builders! Over six lessons you'll build your own website, one piece at a time. Today you'll learn what a website is made of and make your very first page.
About 45 minutes. You can stop and come back. Your answers are saved in this browser.
Code Builders uses skills from Byte's AI Lab and Prompt Pro. Three quick questions to warm up!
A website is just a set of files that a web browser knows how to read. Think of it like a person:
The structure: headings, words, pictures, buttons.
The looks: colors, fonts, sizes, spacing.
The actions: what happens when you click.
<!DOCTYPE html>
<html>
<head>
<title>Skate Zone</title>
</head>
<body>
<h1>Skate Zone</h1>
<p>Everything I love about skateboarding.</p>
<button>Show a trick</button>
</body>
</html>h1 {
color: darkorange;
font-family: Arial;
}
body {
background-color: navy;
color: white;
}button.addEventListener("click", function () {
alert("Kickflip!");
});Now clicking the button pops up "Kickflip!" The HTML made the page, the CSS made it look good, and the JavaScript made it do something.
Your website will live in one folder on the computer. The main page is always called index.html. That's the home page. Later you'll add more files next to it.
Here's how a page gets from the AI to your browser:
index.html. Choose "All files" as the type, so it doesn't become index.html.txt.You might get hundreds of lines, several files, code that loads things from other websites, and parts you don't understand.
The Prompt Recipe from Prompt Pro works for code too! The Limits are extra important here, because they keep the code small, safe and easy to understand.
Always read AI code before you open it. Can you spot the two problems in this one?
<h1>Skate Zone</h1>
<p>Join my skate club!</p>
<form action="https://example-collector.com/save">
<input name="email" placeholder="Your email">
<button>Join</button>
</form>
<script src="https://some-other-site.com/widget.js"></script>Problem 1: the form asks for an email address and sends it to another website. Problem 2: the script loads code from a different website, and you can't see what that code does. Neither belongs on your site. Delete them, or ask the AI to remove them.
http)?My safe-coding rules: only open .html and .css files that you made. Never run programs you downloaded. Never paste code into a black command window. And never install anything without a grown-up.
Is each piece of code HTML (bones), CSS (clothes) or JavaScript (moves)?
This is a Code Playground. Type in the dark box and watch the page change underneath. Try to tick off all three goals. If things go wrong, press Reset to start again.
The playground only runs inside this page. It can't open other websites or change anything on your computer. Your code is saved in this browser, on this device.
Notice that each tag has a start like <p> and an end like </p>. You'll learn lots more tags next lesson.
Time to use your own chatbot. Missions get harder as you go. Bronze is the one to do today. Silver and Gold are extra challenges for when you want more.
The first time you save a code file and open it on the computer, do it with a grown-up nearby. Show them your Code Check. Only open files you made yourself.
Make your project folder and your first page.
my-website.index.html.Change the code yourself, by hand.
index.html in your text editor.<title> tag.Use your website plan from Prompt Pro.
Your notes are saved right in this browser, on this device. They're never sent anywhere.
Your Build Log records how your website grows. Add one page every lesson. At the end you can print the whole log.
Your Build Log is saved right in this browser, on this device. It's never sent anywhere.
index.html.10 questions, picked at random from a bigger question bank. If you take it again, you'll probably see a different mix. Let's go!
Add headings, lists and pictures to your site.