Setting Up Your First HTML Project (Without Any Framework)

#html #css #javascript #beginners

Introduction

Before diving into libraries, frameworks, or complex tooling, it's essential to understand how to set up a pure HTML project from scratch.

No React, no Bootstrap, no heavy tools — just you, your editor, and the browser.

In this guide, you'll learn step-by-step how to structure, create, and organize your first real-world HTML project manually, just like developers used to do — and still often do for simple websites, prototypes, or quick projects.

Why Start Without a Framework?

Foundation First: You understand the basics deeply without tool abstraction.
Better Control: Full command over your codebase and file structure.
Framework Readiness: Frameworks are built on top of HTML/CSS/JS — knowing the base makes learning frameworks easier.
Performance: Lightweight websites without unnecessary bloat.

Step 1: Setting Up the Project Folder

Real-world developers always start with organized folders.

Project Structure Example:

my-first-html-project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── (your images here)
└── README.md (optional documentation)

index.html → Main HTML file.
css/ → All your CSS files go here.
js/ → All your JavaScript files.
images/ → Images and media assets.

Tip:

Even small projects benefit from early organization — it saves time later.

Step 2: Creating Your First HTML File

Create a new file named index.html inside your project folder.

Basic Boilerplate 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 HTML Project</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <a href="#about">About</a> | 
      <a href="#services">Services</a> | 
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>This is a simple introduction about who I am and what I do.</p>
    </section>

    <section id="services">
      <h2>Services</h2>
      <p>Here are the services I offer.</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Reach out to me through email or phone.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 My Website. All rights reserved.</p>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>