Banner image for a switzCodes blog post titled ‘Building My First Full HTML Page – What I Learned,’ featuring the switzCodes logo in dark blue, white, and green tones with a complete page layout visual.

📄 Building My First Full HTML Page – What I Learned

📅 October 14, 2025

✍️ By Evans

Hey everyone! 👋

After weeks of learning the basics of HTML — from headings and links to forms and meta tags — I finally decided to build my first full HTML page. 🎉

It wasn’t perfect (trust me 😅), but it was the first time I saw all the pieces come together into something that looked like a real website.

Here’s what I learned from the process! 👇

🧱 Start with a Clear Structure

Before writing any content, I laid out my basic HTML skeleton:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My First Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>About Me</h2>
      <p>I’m learning HTML and this is my very first web page built from scratch!</p>
      <img src="my-photo.jpg" alt="Evans learning HTML">
    </main>

    <footer>
      <p> &copy; 2025 Evans. All rights reserved.</p>
    </footer>
  </body>
</html>
                        

This helped me understand how headers, navigation, main content, and footers all connect.

🎨 Styling Comes Later

At first, I tried to make it look perfect — colors, fonts, layouts — but I quickly realized: HTML is about structure, not style.

So, I focused on getting the content and tags right.

CSS can come in later to make things pretty. 💅

💬 Comments Saved Me

When I came back to my code after a day, comments helped me remember what each section did.


<!-- Main Content Section --<
<main>
  ...
</main>
                        

It made editing and updating my page much easier!

🧠 Testing Everything

After saving my file as index.html, I opened it in my browser — and wow, seeing my first webpage live on screen felt amazing. 🌍

I clicked through every link and checked every tag to make sure nothing broke. It taught me that testing often saves time later.

💡 Mistakes Are Part of Learning

At first, I forgot to close a <div> tag and my footer ended up inside the main section 😅. But fixing those mistakes helped me understand how browsers read code — line by line, tag by tag.

Every small fix made me better at spotting errors.

🎯 What I Learned

Building my first full HTML page showed me how far I’ve come. It wasn’t about perfection — it was about progress.

Now, when I look at my page, I don’t just see text and tags — I see the foundation of web development.

This project gave me confidence to move forward into the next step: CSS — where the real design magic begins! 🎨

👉 What’s Next?

Up next, I’ll start a brand-new category on SwitzCodes: Introduction to CSS – Styling My First Web Page

I’ll learn how to change colors, control layouts, and make my pages come alive! ✨

See you there!

Stay tuned — and keep coding! 😊

— Evans 💻