How To Build Your First Website UsingHTMLand CSS

How to Build Your First Website Using HTML and CSS

Beginner-friendly, practical, and clear — start from zero and get a working page.

1. Setting Up Your Project

First, create a new folder on your computer. Inside it, add two files:

index.html → This will be the structure of your website.
style.css → This will contain your design and styling.

2. Writing the HTML Structure

Open index.html and add the following code:

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

  <main>
    <section>
      <h2>About Me</h2>
      <p>This is my first simple website using HTML and CSS.</p>
    </section>

    <section>
      <h2>My Projects</h2>
      <ul>
        <li>Project 1</li>
        <li>Project 2</li>
        <li>Project 3</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

3. Adding CSS Styling

Now, let’s make the website look better. Open style.css and add:

/* General styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f4f9;
  color: #333;
}

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

header nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
}

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

/* Main content */
main {
  padding: 20px;
}

section {
  margin-bottom: 30px;
}

/* Footer */
footer {
  text-align: center;
  padding: 15px;
  background: #333;
  color: #fff;
  width: 100%;
}

4. Viewing Your Website

Open your project folder.
Double-click index.html.
Your browser will open and show your first website 🎉.

5. Next Steps

Add images using the <img> tag.
Create more pages (like about.html) and link them.
Experiment with CSS Flexbox or CSS Grid for modern layouts.
Learn about responsive design to make your site look good on mobile devices.

✅ Final Thoughts

Building your first website with HTML and CSS is a huge milestone. It gives you the foundation to move on to more advanced topics like JavaScript, frameworks, and backend development.

Remember: start small, practice often, and keep experimenting. Every developer’s journey begins with that first simple website — and now you’ve built yours! 🚀

Search This Blog

DevStarter