Website File and Folder Management

1. Understanding Website Directory Structure

before you start

In the previous lesson, you accessed the GitHub Codespaces development environment used in this course. In this lesson, you will work inside that environment to organize website files and folders using standard naming conventions and directory structures.

Every website project needs a home—a central location where all files and folders live. In GitHub Codespaces, this home appears as a project folder in the file explorer panel. Understanding how this folder is structured is the foundation of organized web development and will help you navigate and manage real projects inside your development environment.

1a. The Role of the Root Folder

The root folder is the main container for your entire website project. Think of it as the top-level folder that holds everything related to one website. When you create a new project in your IDE, you typically create or open a root folder to work within. When you open a project in GitHub Codespaces, the root folder is the top-level folder shown in the file explorer and contains all files for that website.

The root folder serves several important purposes:

• It establishes the starting point for all file paths in your project.
• It keeps all website files contained in one location.

A typical root folder might be named after your project, such as my-portfolio or coffee-shop-website. Inside this root folder, you will organize your files into subfolders based on their purpose.

EXAMPLE

The following structure shows how files and folders are commonly organized within a website project:

my-portfolio/
├── index.html
├── about.html
├── contact.html
├── css/
├── js/
└── images/

This same structure is mirrored in Codespaces:



This structure matches how website projects appear in the GitHub Codespaces file explorer. The my-portfolio folder is the root folder, and all files related to the website are organized within it.

key concept

The root folder is the top-level directory containing all files and folders for a single website project. All file paths in your project are relative to this root folder.

term to know

Root Folder

The top-level folder of a website project that contains all files and subfolders and serves as the starting point for organizing and locating project resources.

1b. Common Folder Patterns

Professional web developers follow consistent patterns for organizing files within the root folder. While there is some flexibility, certain conventions have become standard practice because they make projects predictable and easy to navigate. These folder organization patterns are visible in the GitHub Codespaces file explorer and help you quickly locate related files as projects grow.

Standard Folder Structure
Folder Name	Purpose	Example Contents
css/	Stylesheet files	styles.css, navigation.css
js/	JavaScript files	main.js, form-validation.js
images/	Image files	logo.png, hero-background.jpg
assets/	Mixed media files	Fonts, videos, icons, downloads
pages/	Secondary HTML pages	about.html, contact.html

Here is what a well-organized project structure looks like in practice:

IMAGE

Notice how the images folder contains a subfolder called menu-items. As projects grow, you can create subfolders within subfolders to maintain organization. This is called nesting, and it helps keep related files grouped together. In Codespaces, nested folders appear indented beneath their parent folders in the file explorer.

try it

IMAGE

In your GitHub Codespaces file explorer, imagine organizing a website for a local bakery with multiple pages, images, and styles. Use the folder organization patterns shown above to answer the following questions.

Which folder would store image files for the website?

Image files should be stored in the images folder. This keeps visual assets grouped together and easy to locate as the project grows.

Which folder would store files with the .css extension used to control the website’s appearance?

Files with the .css extension are typically stored in the css folder. Grouping these files together makes it easier to manage the visual styling of a website as it grows.

Which location could contain additional HTML pages, such as an About or Contact page?

Additional HTML pages can be stored either in the root folder or inside a dedicated pages folder, depending on the project’s organization pattern. Both approaches are commonly used in web development.

term to know

Nesting

The practice of placing folders inside other folders to create organized hierarchies.

---

2. Creating Files and Folders

Now that you understand how website projects are organized, you will begin creating files and folders inside the GitHub Codespaces workspace. In this section, you will use the file explorer to build a basic project structure that follows common web development conventions.

The focus is on creating and placing files and folders correctly.

2a. Folders

Folders are used to group related files together within a website project. Creating folders early helps keep projects organized and easier to maintain as they grow.

In GitHub Codespaces, folders are created using the file explorer panel. New folders should be created inside the project’s root folder unless otherwise noted.

step by step

1. In the file explorer, locate the root folder for your project.
2. Select the option to create a new folder.
3. Name the folder using lowercase letters and no spaces (for example, css or images).
4. Press “Enter” to create the folder.

Repeat this process to create additional folders as needed.

Folder names should be short, descriptive, and consistent. Following naming conventions now prevents confusion later.

2b. Files

Files store the content and behavior of a website. When creating a file, both the filename and the file extension matter. The extension tells the browser how the file should be interpreted.

In GitHub Codespaces, files are created directly inside folders using the file explorer.

step by step

1. In the file explorer, select the folder where the file should be created.
2. Choose the option to create a new file.
3. Enter the filename and extension (for example, index.html or styles.css).
4. Press “Enter” to create the file.

The new file will appear in the file explorer and open in the code editor automatically.

watch

Watch this video to learn how to set up your files and folders in Codespaces for an organized web project.

try it

In your GitHub Codespaces workspace, create the following structure:

• A folder named css inside the root folder
• A file named index.html in the root folder
• A file named styles.css inside the css folder

You do not need to add any content to these files. Focus only on creating the folders and files in the correct locations.

---

3. File and Folder Naming Conventions

Choosing clear and consistent names for files and folders helps ensure your website works correctly across different systems and is easy to understand later. These rules are known as naming conventions, and they guide how developers name project files and folders.

In this section, you will apply naming conventions to the files and folders you created in your GitHub Codespaces workspace.

term to know

Naming Convention

A set of rules for choosing file and folder names that ensures consistency, readability, and compatibility across different systems.

3a. Naming Rules

Web developers follow a small set of standard rules when naming files and folders. These rules exist because web servers and browsers treat filenames very precisely.

Essential Naming Rules:

1. Use lowercase letters only.
2. Do not use spaces.
3. Separate words with hyphens.
4. Avoid special characters.
5. Keep names descriptive but concise.
6. Use the correct file extension (such as .html, .css, or .js).

In GitHub Codespaces, filenames and extensions are visible in the file explorer, making it easy to check whether your files follow these conventions.

The following examples show how naming conventions improve clarity and reliability.

Filename Comparisons
Poor Filename	What’s Wrong	Improved Filename
About Us.html	Uses spaces and uppercase letters	about-us.html
MainStyles.CSS	Uses uppercase letters	main-styles.css
script(1).js	Uses special characters	form-validation.js
contactformvalidationscript.js	Difficult to read	contact-form-validation.js

Folder Name Comparisons
Poor Folder Name	What’s Wrong	Improved Folder Name
CSS Files	Uses spaces and uppercase letters	css
assets & media	Uses special characters and spaces	assets

try it

In your GitHub Codespaces workspace, review the file and folder names you created earlier.

For each of the following, decide whether it follows best practices. If it does not, identify what should be changed.

Does index.html follow naming conventions?

Yes. The filename uses lowercase letters, includes no spaces or special characters, and uses the correct .html extension.

Does styles.css follow naming conventions?

Yes. The filename uses lowercase letters, is descriptive, and uses the correct .css extension.

Would a file named “My Stylesheet.css” follow naming conventions? Why or why not?

No. The filename contains uppercase letters and spaces. It should be renamed using lowercase letters and hyphens, such as my-stylesheet.css.

---

4. Working With Website File Types

Website projects are made up of different file types that work together. Each file type has a specific purpose and is identified by its file extension. In this section, you will recognize common website file types by locating them in your GitHub Codespaces workspace.

4a. Core File Types

Most websites rely on three core file types that work together to create structure, appearance, and behavior. Each file type is identified by its file extension and is typically stored in a specific location within a website project.

Files with the .html extension contain the structure and content of web pages. Examples include index.html and about.html, which are commonly stored in the root folder or a dedicated pages folder. In GitHub Codespaces, HTML files appear in the file explorer and open in the code editor when selected.

Files with the .css extension control the visual appearance of a website. These files are commonly stored inside a css folder to keep styling resources organized. The styles.css file you created earlier is an example of this file type.

Files with the .js extension add behavior and interactivity to a website. JavaScript files are typically stored inside a js folder. You may not have JavaScript files in your project yet, but organizing your folders this way prepares your project for future lessons.

File Extension	File Type	Common Folder Location
.png, .jpg, .gif, .svg, .webp	Images	images folder
.woff, .woff2, .ttf	Fonts	assets/fonts folder
.mp4, .webm	Videos	assets/videos folder
.pdf	Documents	assets or downloads folder
.ico	Favicon	root folder

4b. The Special Role of index.html

Among all the files in a website project, index.html holds a special position. This file serves as the default home page that web servers automatically display when visitors access your website.

When someone visits www.example.com, the web server looks for a file named index.html in the root folder and displays it. This happens automatically without the visitor needing to type www.example.com/index.html.

Why index.html Matters:

• Web servers recognize index.html as the default file to serve.
• It creates cleaner URLs for visitors (no filename required).
• It is a universal convention that all web servers understand.
• Search engines expect to find your home page content here.

key concept

Every website project should have an index.html file in the root folder. Web servers automatically serve this file as the home page when visitors access your domain without specifying a particular page.

EXAMPLE

A visitor types www.local-bakery.com into their browser. The web server automatically serves the content of index.html from the root folder:

IMAGE

If the index.html file were missing or named something else like home.html, visitors would see an error or directory listing instead of the home page.

try it

You want to add the following items to your website project in GitHub Codespaces:

• A logo image
• A custom font file
• A short promotional video

Which folder should each of these files be placed in?

• The logo image should be placed in the images folder.
• The custom font file should be placed in the assets/fonts folder.
• The promotional video should be placed in the assets/videos folder.

term to know

index.html

The default filename for a website’s home page, automatically served by web servers when no specific page is requested.

---

5. Navigating File Paths

Once your files are organized into folders, you need to link them together. When an HTML file references a CSS stylesheet or displays an image, it uses a file path to locate that resource. Understanding how to write correct file paths is essential for making your website function properly. You can observe these paths by looking at how files and folders are nested in the GitHub Codespaces file explorer.

term to know

File Path

A text string that specifies the location of a file within a directory structure.

5a. Relative Paths

A relative path describes the location of a file based on where the current file is located. Instead of starting from the top of the website, a relative path starts from the file you are working in and navigates through folders from that position.

Relative paths are commonly used when linking files within a website because they continue to work even if the entire project is moved to a different server or location.

Relative paths are read step by step, moving through folders as needed.

Path	What It Means
styles.css	The file is in the same folder as the current file.
css/styles.css	Go into the css folder, then find styles.css.
../styles.css	Go up one folder level, then find styles.css.
../css/styles.css	Go up one level, then into the css folder.
../../images/logo.png	Go up two levels, then into the images folder.

Consider this project structure:

IMAGE

When you are working in index.html, which is located in the root folder, relative paths move directly into subfolders:

• Link to CSS file: css/styles.css
• Link to JavaScript file: js/main.js
• Link to image file: images/logo.png

Because index.html is already at the top level, no upward navigation is needed.

When you are working in about.html, which is inside the pages folder, you must first move up one level to reach the root folder before accessing other folders:

• Link to CSS file: ../css/styles.css
• Link to JavaScript file: ../js/main.js
• Link to image file: ../images/logo.png

The ../ notation means “go up one folder level.” In GitHub Codespaces, this corresponds to visually moving up one level in the file explorer hierarchy before navigating into another folder.

EXAMPLE

In this HTML file located at pages/about.html, relative paths link to resources in other folders. You do not need to understand or write this HTML code yet. Focus only on the file paths shown inside the quotes (" "), which demonstrate how relative paths work.



Each relative path begins with ../, which moves up one level from the pages folder to the root folder. From there, the path continues into the appropriate subfolder, such as css, images, or js. This structure matches what you see in the GitHub Codespaces file explorer.

term to know

Relative Path

A file path that describes a location relative to the current file’s position in the directory structure.

5b. Absolute Paths

An absolute path provides the full location of a file starting from a fixed reference point rather than from the current file’s location. Unlike relative paths, absolute paths do not depend on where the file doing the linking is located.

There are two common types of absolute paths used in web development.

Root-Relative Absolute Paths:

Root-relative paths start with a forward slash (/), which represents the root folder of the website on the server.

• /css/styles.css
• /images/logo.png

The leading slash tells the browser to start at the root folder, no matter which page is currently being viewed. This means the same path works from any file in the project.

In GitHub Codespaces, you can recognize root-relative paths by imagining that the slash (/) points to the top-level project folder you see in the file explorer.

Full URL Absolute Paths:

Some absolute paths include the entire web address and are typically used for files hosted outside your project.

• https://example.com/images/photo.jpg
• https://cdn.example.com/library.js

These paths tell the browser exactly where to find a resource on the internet, regardless of your project’s folder structure.

hint

For most beginner projects, relative paths are the best choice. They keep your website portable, meaning you can move the entire project folder without breaking any links. As your projects grow larger, you may find root-relative paths more convenient for deeply nested files. You can determine whether a path is relative or absolute by looking at its starting character.

Path Type	Best Used For
Relative paths	Linking files within your project
Root-relative paths	Large projects with many nested folders
Full URL paths	Resources hosted on external websites

try it

Your project has this structure:

IMAGE

From details.html, write the relative path to link to styles.css.

View Answer

The correct relative path is: ../../css/styles.css

Starting from details.html in the projects/web-app/ folder:

• ../ goes up to the projects folder
• ../ goes up again to the root portfolio folder
• css/styles.css navigates into the css folder and to the file

term to know

Absolute Path

A file path that provides the complete location of a file, either from the website root or as a full URL.