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:

</span>
 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
  My First HTML Project
   rel="stylesheet" href="css/style.css">



  
    Welcome to My Website
    
       href="#about">About | 
       href="#services">Services | 
       href="#contact">Contact
    
  

  
     id="about">
      About Me
      This is a simple introduction about who I am and what I do.
    

     id="services">
      Services
      Here are the services I offer.
    

     id="contact">
      Contact
      Reach out to me through email or phone.
    
  

  
    © 2025 My Website. All rights reserved.
  

  <span class="na">src="js/script.js">





    Enter fullscreen mode
    


    Exit fullscreen mode
    




🔗 👉 Click here to read the full Blog on TheCampusCoders