Muhammad Rezki Dwijayanto

☰

🖥️ Beginner Tutorial: Build Your First Simple Website

 



1. Project Overview

We will create a personal website with:

  • A header (with name and navigation)

  • An “About Me” section

  • A simple “Projects” section

  • A footer

This project uses only HTML and CSS (no JavaScript yet), so it’s great for absolute beginners.

2. Setup Your Project

  1. Create a new folder on your computer, e.g., my-website.

  2. Inside, create two files:

    • index.html

    • style.css

3. Writing the HTML

Open index.html and write this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Header -->
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <!-- About Section -->
  <section id="about">
    <h2>About Me</h2>
    <p>Hello! My name is [Your Name]. This is my very first website.</p>
    <img src="https://via.placeholder.com/150" alt="My Photo">
  </section>

  <!-- Projects Section -->
  <section id="projects">
    <h2>My Projects</h2>
    <ul>
      <li>🌱 Learning HTML & CSS</li>
      <li>🎨 Making simple designs</li>
      <li>📚 Writing tutorials</li>
    </ul>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <h2>Contact Me</h2>
    <p>Email: <a href="mailto:example@email.com">example@email.com</a></p>
  </section>

  <!-- Footer -->
  <footer>
    <p>© 2025 My First Website</p>
  </footer>

</body>
</html>

👉 This creates the structure of your webpage.

4. Adding Styles with CSS

Open style.css and add this:

/* Reset default styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Header */
header {
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 10px;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

/* Sections */
section {
  padding: 20px;
}

#about {
  background: #f4f4f4;
}

#projects {
  background: #e2e2ff;
}

#contact {
  background: #f9f9f9;
}

/* Footer */
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

👉 This adds colors, spacing, and styles to make your website look nice.

5. Open Your Website

  • Open index.html in your web browser (double-click it).

  • You should now see your first personal website 🎉

6. Challenge (For Practice)

Try these improvements:

  1. Change the background color in the header.

  2. Add another project to the list.

  3. Replace the placeholder image with your real photo.

  4. Add a “Hobbies” section below Projects.

✅ Congratulations! You just built your first simple static website.