🌐 Web Development Roadmap — Part 11
📁 Files, Folders & Project Structure
Before we start writing HTML
, CSS, and JavaScript, you need to understand how a web development project is organized.
A website isn't usually one giant file. A real project contains multiple files and folders, each with a specific purpose.
1️⃣ What Is a File?
A file is a container that stores information.
In web development, you'll commonly work with files such as:
.html
.css
.js
.json
.ts
.jsx
.tsx
For example:
index.html
style.css
script.js
Each file can have a different responsibility.
2️⃣ What Is a Folder?
A folder is used to organize files and other folders.
For example:
my-website/
│
├── index.html
├── style.css
├── script.js
│
├── images/
│ ├── logo.png
│ └── profile.jpg
│
└── pages/
├── about.html
└── contact.html
Here:
my-website/
is the main project folder.
Inside it are files and additional folders.
3️⃣ Why Do We Need Project Structure?
Imagine putting every file for a large application into one folder without organization.
You might eventually have:
100+ files
Finding the correct file would become difficult.
A good structure makes it easier to:
Find files
Understand the project
Maintain code
Work with other developers
Scale the application
4️⃣ The Basic Website Structure
For a beginner website, you can start with:
my-website/
│
├── index.html
├── style.css
└── script.js
Each file has a different job.
index.html
Contains the webpage structure.
<h1>My Website</h1>
<p>Welcome to my website.</p>
style.css
Controls the appearance.
h1 {
color: blue;
}
script.js
Adds behaviour.
console.log("Website loaded");
The browser can connect these files together.
5️⃣ The index.html File
You'll see index.html very often.
It is commonly used as the main or default HTML page of a website.
For example:
my-website/
│
└── index.html
When someone visits the main page of a simple website, the server may serve the index.html document.
It's a convention rather than a universal rule for every web application.
6️⃣ Organizing Images
Instead of putting every image directly in the project root, we can create an images folder.
my-website/
│
├── index.html
├── style.css
├── script.js
│
└── images/
├── logo.png
├── laptop.jpg
└── phone.jpg
Then HTML can reference an image inside that folder.
<img src="images/logo.png" alt="Logo">
The path:
images/logo.png
tells the browser where the image is located relative to the HTML file.
7️⃣ Multiple Pages
A website can contain multiple HTML pages.
For example:
my-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│ └── style.css
│
└── images/
└── logo.png
You could have:
index.html → Home
about.html → About
contact.html → Contact
This is a simple way to understand how multi-page websites are structured.
8️⃣ Relative Paths
Understanding file paths is extremely important.
Suppose you have:
project/
│
├── index.html
│
└── images/
└── logo.png
From index.html, you can reference the image using:
<img src="images/logo.png">
Now suppose you have:
project/
│
├── pages/
│ └── about.html
│
└── images/
└── logo.png
From about.html, you need to go up one folder first:
<img src="../images/logo.png">
