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> 
Top comments (0)