Building My First Website Project

Building My First Website Project

By Naufal Al-Khalifa Utomo

After learning the basics of HTML, CSS, UI design, UX design, and responsive web design, I decided to start my first small website project.

Building a real project is one of the best ways to improve coding skills. Instead of only studying theory, creating a project helps turn knowledge into practical experience.

Planning the Website

Before starting to write code, I first planned the structure of the website. Planning helps organize the layout and decide what kind of content will appear on the website.

For my first project, I decided to build a simple personal webpage that includes the following sections:

• Header with the website title
• Navigation menu
• Main content section
• About section
• Footer

Basic HTML Layout

The structure of my webpage started with a basic HTML layout like this:

<header>
  <h1>My First Website</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<main>
  <p>Welcome to my website.</p>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

This simple structure helped me understand how different sections of a webpage are organized.

Adding Design With CSS

After creating the structure using HTML, I added CSS to improve the visual appearance of the website.

I experimented with colors, spacing, and layout to make the page look more organized and readable.

Challenges I Faced

While building my first website project, I faced several challenges. Sometimes the layout did not look the way I expected, or certain elements were not aligned properly.

However, solving these small problems helped me understand coding more deeply and improved my problem-solving skills.

What I Learned

From this project, I learned that building websites requires both technical skills and patience.

Every small mistake becomes an opportunity to learn something new. Over time, these experiences help developers grow and improve.

The Next Step

After completing my first website project, I plan to continue learning JavaScript. JavaScript will allow me to add interactive features to my websites.

In the next article, I will begin exploring the basics of JavaScript and how it works in web development.

Previous Article:
Responsive Web Design Basics

Next Article:
Learning JavaScript Basics

---

Naufal Al-Khalifa Utomo
Coding • Web Development • UI/UX Design