DEV Community

Cover image for Setting Up Your First HTML Project (Without Any Framework)
Deepak Kumar
Deepak Kumar

Posted on • Originally published at thecampuscoders.com

2 1 1 1 1

Setting Up Your First HTML Project (Without Any Framework)

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)
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

🔗 👉 Click here to read the full Blog on TheCampusCoders

Dev Diairies image

User Feedback & The Pivot That Saved The Project ↪️

We’re following the journey of a dev team building on the Stellar Network as they go from hackathon idea to funded startup, testing their product in the real world and adapting as they go.

Watch full video 🎥

Top comments (0)

Retry later
Retry later