𝗟𝗲𝘃𝗲𝗹 𝗨𝗽 𝗬𝗼𝘂𝗿 𝗦𝗸𝗶𝗹𝗹𝘀 𝘄𝗶𝘁𝗵 𝗧𝗵𝗲𝘀𝗲 𝗚𝗮𝗺𝗲-𝗖𝗵𝗮𝗻𝗴𝗶𝗻𝗴 𝗖𝗼𝘂𝗿𝘀𝗲𝘀!
​
Looking to learn practical, in-demand skills? These courses cover Generative AI, Cybersecurity, AI tools and Digital Marketing.

💫 Learn at your own pace
⚡Build career-relevant skills
🔥Practical learning opportunities

𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝘁𝗵𝗲 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 :-

https://pdlink.in/4z3vOYU

Save this post and share with your friends

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

Here:

../

means:

Go up one directory.

This concept becomes very important as projects become larger.

9️⃣ Common Project Folders

As applications become more complex, you'll encounter folders such as:

src/

components/

pages/

assets/

images/

styles/

utils/

services/

Their exact purpose depends on the project and framework.

For example:

src/
├── components/
├── pages/
├── services/
├── assets/
└── styles/

We'll learn these structures when we start working with React and larger applications.

🔟 A Real-World Project

A simple website might look like:

portfolio/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
└── images/
    ├── profile.jpg
    └── project1.png

A larger modern application might eventually look more like:

my-app/
│
├── src/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── assets/
│   └── styles/
│
├── public/
├── package.json
├── README.md
└── .gitignore

Don't worry about understanding all of these folders yet.

We'll introduce them when we actually need them.

🧠 Key Things to Remember

File → Stores information or code.

Folder → Organizes files.

index.html → Common default/main HTML document.

images/ → Can organize image files.

css/ → Can organize CSS files.

js/ → Can organize JavaScript files.

../ → Moves up one directory in a relative path.

A good project structure keeps code organized and makes applications easier to understand and maintain.

Double Tap ❤️ For Part 12

10 Tools for Web Developers 🛠🚀 -

💻 Visual Studio Code - Lightweight code editor
🔍 Postman - API development and testing
🎨 CodePen - Front-end development playground
🐙 GitHub - Version control and collaboration
🎨 Figma - UI/UX design and prototyping
📊 Google Analytics - Website traffic analysis
🌐 Netlify - Easy web hosting and deployment
🔒 Auth0 - Authentication and authorization
📦 Webpack - Module bundler for modern JavaScript apps
📦 NPM - Node package manager for JavaScript libraries and tools

React ❤️ for more

🎓 𝗛𝗔𝗥𝗩𝗔𝗥𝗗 𝗨𝗡𝗜𝗩𝗘𝗥𝗦𝗜𝗧𝗬 𝗙𝗥𝗘𝗘 𝗢𝗡𝗟𝗜𝗡𝗘 𝗖𝗢𝗨𝗥𝗦𝗘𝗦 😍

Dreaming of learning from one of the world’s most prestigious universities? Explore Harvard’s online courses and build valuable, career-ready skills from home!

💡 Beginner-friendly options
⏰ Learn at your own pace
🌍 Accessible online worldwide
🎯 Ideal for students, freshers and working professionals

🔗 𝗘𝘅𝗽𝗹𝗼𝗿𝗲 𝗙𝗥𝗘𝗘 𝗖𝗼𝘂𝗿𝘀𝗲𝘀 👇

https://pdlink.in/4xPUdzU

📢 Share this valuable opportunity with your friends and classmates!