0Pricing
HTML for Kids · Lesson

Code-Along: Build a Simple Web Page

Follow step-by-step instructions to create a fun page.

Code-Along: Build a Simple Web Page is a free HTML for Kids lesson on CoddyKit — lesson 1 of 2. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 2 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Code-Along: Build a Simple Web Page

Welcome to your first coding project! In this lesson, we’ll build a simple web page step by step. Follow along to see how the pieces of HTML, CSS, and basic design come together.

Goal: Create a personal profile page.

Code-Along: Build a Simple Web Page — illustration 1

2

Step 1: Setting Up Your File

First, let’s create a folder for your project and add an HTML file:

  1. Create a new folder on your computer called MyWebPage.
  2. Inside the folder, create a file named index.html.
  3. Open the file in your code editor (e.g., Visual Studio Code).

Tip: The file name index.html is commonly used for the main page of a website.

3

Step 2: Adding the Basic Structure

Now, add the basic HTML structure to your file. This includes the <!DOCTYPE html>, <html>, <head>, and <body> tags.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Profile Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is my personal profile page.</p>
  </body>
</html>

4

Step 3: Adding a Profile Section

Let’s add a section to display your name and a brief description.

Example:

<body>
  <h1>Welcome to My Page</h1>
  <p>This is my personal profile page.</p>

  <!-- Profile Section -->
  <h2>About Me</h2>
  <p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>

5

Step 4: Adding an Image

Next, let’s add a profile picture using the <img> tag. Save an image in the project folder and link it to your HTML file.

Example:

<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />

6

Step 5: Adding a List of Hobbies

Create an unordered list of your hobbies using the <ul> and <li> tags.

Example:

<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
  <li>Reading books</li>
  <li>Playing video games</li>
  <li>Coding projects</li>
</ul>

7

Step 6: Adding a Link

Add a link to your favorite website using the <a> tag.

Example:

<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>

8

Step 7: Adding Inline Styles

Let’s add some basic styles directly to your HTML using the style attribute.

Example:

<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>

9

10

Great Job!

Congratulations! You’ve built your first web page step by step. In this project, you learned how to structure your HTML, add content, and style it with inline styles. Keep experimenting and adding new sections to your page!

Tip: Try hosting your page on GitHub Pages to share it with friends!

Code-Along: Build a Simple Web Page — illustration 10

Frequently asked questions

Is the “Code-Along: Build a Simple Web Page” lesson free?

Yes — the full text of “Code-Along: Build a Simple Web Page” is free to read here on the web, and the HTML for Kids course includes 2 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Code-Along: Build a Simple Web Page”?

Follow step-by-step instructions to create a fun page. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 2, so you can start here or from the beginning and move at your own pace.

How long does the “Code-Along: Build a Simple Web Page” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Code-Along: Build a Simple Web Page
  2. HTML Treasure Hunt
← Back to HTML for Kids