Project File Structure Explained

1. What We Are Learning

This lesson fulfills the final learning outcome for this module: Explain the purpose of each file and folder in your simple project.

We will break down our current project structure piece by piece:

• The main project folder (the "root")
• The index.html file
• The styles folder and the style.css file inside it

You'll learn the role each part plays and why this specific organization is a professional standard.

2. Why This Matters

In design, you use conventions to keep your work clean and scalable. You create components, organize layers with logical names, and maintain a separate library for your design system. You don't just throw all your icons, mockups, and user flows onto one giant, untitled canvas.

Coding is exactly the same. The way we structure our files and folders isn't arbitrary; it's a practice called "separation of concerns." This principle means that each part of the project should have one clear job.

• HTML's job: To define the structure and content (the skeleton).
• CSS's job: To define the visual presentation (the clothes and paint).
• JavaScript's job (which we'll cover later): To define interactivity (the moving parts).

Keeping them separate makes our project easier to understand, update, and debug. To kick things off, let's explore this core idea with a powerful analogy.

This image perfectly captures the role of HTML as the foundational structure.

With that foundational concept in mind, let's look at our specific files.

3. Step-by-Step Instructions

Step 1: The Project Folder (The Root Directory)

The folder you created, my-landing-page, is known as the root directory.

Think of this as the master folder for your entire design project. It's the self-contained "suitcase" that holds everything related to this one website. If you were to move this website to a different computer or upload it to the internet, you would move this entire folder.

Step 2: The index.html File (The Front Door)

Every website needs a default starting page. By universal convention, that page is named index.html.

Why "index"?
When a browser requests a web address (like www.your-site.com), it's essentially asking the server for the main page of that folder. The server is configured to automatically look for a file named index.html to serve as that main page.

It acts like the table of contents or an index for that directory.

Why not home.html?
A directory might not be a "home." It could be a blog section, a photo gallery, or a products page. The name "index" is more neutral and technically accurate.

Let's dive a little deeper into the history and importance of this file.

Step 3: The styles Folder and style.css File (The Style Guide)

In our project, we have a file named style.css placed inside a folder named styles. Let's break this down.

Why is the CSS in a separate style.css file?
This is "separation of concerns" in action.

• Analogy: This is your design system's style library in Figma. You define your primary button's color and typography in one central component. You don't want to redefine that style on every single screen where the button appears. If you need to change the brand color, you change it in one place (the style library), and it updates everywhere.
• The benefit: Our style.css file is that one central place. We can (and will) have an index.html page, an about.html page, and a contact.html page all linking to the same style.css file for a consistent look and feel.

Why is it inside a styles folder?
This is for organization. Right now, we only have one CSS file. But as projects grow, you'll have folders for images, js (for JavaScript), fonts, etc. Grouping files by type keeps the root directory clean and makes everything predictable.

This cheat sheet, though detailed, shows how our simple structure is the beginning of a professional standard that many designers and developers use.

To see this organization in practice, this short video from Kevin Powell is a great visual guide.

4. What Could Go Wrong

While file structure is about organization, a few common mistakes can break your site:

• Incorrect Naming: Naming your homepage Home.html or index.HTML (with a capital "H" or "HTML") will prevent most servers from finding it automatically. File names on web servers are case-sensitive. Always stick to index.html in all lowercase.
• Putting index.html in a subfolder: The main index.html file must live in the root directory. If you tuck it inside the styles folder, for example, the server won't find it.
• Using Spaces in Filenames: As the video mentioned, never use spaces in file or folder names (e.g., my styles). Use hyphens (my-styles) or underscores (my_styles) instead. Spaces can break links and cause unpredictable behavior.

5. Mini Exercise

Time to apply this knowledge with a small, practical task.

1. Open your my-landing-page project in VS Code.
2. In the Explorer panel on the left, make sure no files are selected.
3. Click the "New Folder" icon.
4. Name the new folder images. Make sure it's at the same level as your index.html file and styles folder.

Your final folder structure should now look like this:

my-landing-page/
├── images/
├── styles/
│   └── style.css
└── index.html

You've just prepared your project to hold images, following the standard practice of organizing different asset types into their own dedicated folders.

6. Checklist Before Moving Ahead

• I can explain that the project's root folder contains everything the website needs to run.
• I can explain that index.html is the default "front door" of a website that servers look for automatically.
• I understand that putting CSS in a separate style.css file follows the "separation of concerns" principle, similar to using a style library in Figma.
• I understand that creating folders like styles and images keeps the project organized and scalable.

Excellent work. You've now completed your first "Quick Win" module! You've not only built a simple web page but also understand the fundamental tools (VS Code, Live Server) and organizational principles behind it.

A Look Ahead: With a well-structured project in place, our next step is to learn how to save and track its history. In the next module, we'll dive into Git, which is like Figma's version history, but for code. This is a crucial step before we start working with AI tools and deploying our site.