Reference

File Organization

How computers organize website projects with folders, filenames, file extensions, and project roots.

Before we begin building websites, it is important to understand how your computer organizes information.

Modern apps and mobile operating systems often hide file structures from users, but web design depends heavily on understanding folders, filenames, and project organization.

A website is ultimately a collection of files stored inside folders.

Project Organization

For this course, you will create a folder named:

Sites

inside your user folder on your computer.

Inside the Sites folder, each project will receive its own project directory.

Example:

Sites/
  resume/

The resume folder is called the project root.

Everything related to your website project should stay inside this folder.

File Naming Rules

Web servers are much less forgiving than most modern apps. Small filename mistakes can completely break a website.

Follow these rules carefully.

Use lowercase letters

Correct:

index.html
resume.css

Incorrect:

Index.html
Resume.CSS

Some servers treat uppercase and lowercase letters as different files.

Do not use spaces in filenames

Correct:

my-resume.html
contact-page.html

Incorrect:

My Resume.html
contact page.html

Use hyphens instead of spaces.

Pay attention to file extensions

A file extension tells the computer what type of file it is.

Examples:

.html
.css
.jpg
.png

One of the most common beginner mistakes is accidentally creating files like:

index.html.txt

This is actually a text file, not a webpage.

Make sure your homepage is named exactly:

index.html

As the semester continues, your projects will become more organized and more complex.

A typical website structure might eventually look like this:

resume/
  index.html
  css/
    style.css
  images/
    profile-photo.jpg

Keeping projects organized from the beginning will make your work easier to manage and easier to debug.