Organizing Your Folders and Files

💡 The Concept

When I teach this section in person, I start by asking this question:

Students then raise between 1 and 5 fingers. I raise 3 fingers, because I do have some clutter on my desk.

Here is the point. Even if you keep your desk messy, you need to keep your website files and folders organized.

Why Folder and File Organization Matters More Than You Think

Organizing web project files correctly from the start prevents broken links, missing images, and the confusion that slows projects down. Here’s a truth that might surprise you: the number one reason beginner web projects break isn’t bad code; it’s disorganized files. Before you write a single line of HTML, the way you structure your folders and name your files can make or break your website. A website is simply a collection of folders and files that reference each other. If those references break because you moved something, misspelled a name, or used the wrong capitalization, your entire site can fall apart. Let’s get this right from the start.

Why Organization Is Non-Negotiable

Websites are built from files that constantly refer to each other. Your HTML file links to a CSS stylesheet. Your pages reference image files. Your navigation links point to other HTML pages. Every one of these connections depends on the files being exactly where your code says they are.

When your files are scattered across random folders, or when folders are named inconsistently, those connections break. What you end up with are missing images, broken links, and stylesheets that don’t load. Cleaning up this kind of mess involves a lot of rework, and it’s far easier to start organized than to fix things later.

The Rules for Naming Folders and Files

Web developers follow strict naming conventions for a reason. Some rules exist by convention, and others exist to prevent real technical problems. Here’s what you need to know:

• Use only lowercase letters (a-z), numbers (0-9), and dashes (-)
• Never use spaces or special characters
• Put a dash between each word. This also helps search engine bots read your folder and file names
• Don’t use underscores or camelCase. While these are common in other programming languages, the convention for website files and folders is to use dashes

Good Folder Names

susan-metoxen
portfolio-website
joystick-junkies
my-first-project

Bad Folder Names

Susan Metoxen        → uses capital letters and a space
myclassfolder        → no dash between the words
susan_metoxen        → uses an underscore instead of a dash
susanMetoxen         → uses camelCase

Why Spaces Are Especially Problematic

File and folder names appear directly in the URL of your web page. Every time there’s a space, the browser has to replace it with %20. So a folder named my project name would produce a URL like this:

That’s ugly, error-prone, and can cause real problems in your code. Web developers never use spaces in folder and file names. Period.

Every Website Gets Its Own Folder

This is a fundamental principle: each website you create lives in its own dedicated folder. Here’s how to set this up:

1. Choose a location on your computer. The Documents folder is a great choice
2. Create a master folder called websites
3. Inside websites, create a separate folder for website project

For example, if you’re working on a portfolio website, a website called “joystick-junkies” and a template, your structure would look like this:

Documents/
  └── websites/
        ├── portfolio/
        │     ├── index.html
        │     └── resume.html
        ├── joystick-junkies/
        │     └── index.html
        └── templates/
              └── index.html

Notice how everything is lowercase, uses dashes between words, and each project has its own clearly named folder. This structure scales beautifully, whether you have two projects or twenty.

🎬 Video Demonstration

In this video, I show you how to organize your websites into a folder named “websites” and create a folder for each “website” that you make. It also shows you how to create a file from Sublime Text and save it into the correct website folder.

Exercise: Try It Yourself

Let’s walk through creating a proper folder structure right now. Follow along on your own computer:

1. Create a master folder called websites inside your Documents folder (or wherever you prefer. Just remember where it is!)
2. Create website folder: Create a folder for your first website. If you made the Minneapolis Lakes website in the last lesson, create a folder called “lakes, and place the index.html file in it.

Note: If you are planning to follow these lessons, I recommend making a folder called, “template” so that you will have a place for your template work in upcoming lessons.

Note: If you are one of my students at MinnState, I have you make three folders for three website. The three folders are: portfolio, template, and joystick-junkies, folders you will need for upcoming lab assignments.

Why index.html?

You’ll notice that the main page of nearly every website folder is called index.html. This is a web convention. When a browser navigates to a folder on a server, it automatically looks for a file named index.html to display. It’s the default homepage for any directory.

Save this as index.html in one of your project folders, open it in a browser, and you’ll see your heading displayed. That’s your first properly organized web page!

🎬 Video Demonstration

One more quick thing for this module. Since a website is a set of folders and files that work together, it is very helpful to be able to see your folders and files as you work. With Sublime Text there is an easy trick to make this work. This video shows you how to do it.

Start Strong, Stay Organized

Getting your folders and files organized might feel like a small, unglamorous step, but it’s genuinely one of the most important habits you’ll build as a web developer. Professionals who’ve been coding for years still follow these exact same conventions because they work. Every lowercase letter, every dash instead of a space, every file placed in the right folder. These small decisions add up to projects that are easy to maintain, easy to debug, and easy to share with others.

So before you dive into writing HTML, CSS, or anything else, take five minutes to set up your folder structure properly. Future you will be grateful. Now go create that websites folder, name it right, and start building something great!

💡 If you are making a website template: Set up three folders inside your websites folder: template, joystick-junkies, and portfolio. You’ll use all three starting in Lab 2. See the full website template guide for reference.

❓ Frequently Asked Questions

wp:heading –>

★ Key Takeaways

Every web project is made up of multiple files that need to stay organized. This lesson showed you how to set up a folder structure so your HTML, CSS, and image files all work together correctly. Next, you will learn about HTML tags and elements, the building blocks of every web page. Understanding how tags work is the foundation of everything else in HTML.

← Back to HTML Fundamentals Lessons

← Back to All Lessons