🌐 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">