Learn

Lesson 03 / Folders

Understanding File Paths

Time
45 min
Type
Reading + Practice
Level
Beginner

Understand how files are organized on a computer and how browsers find the resources a webpage needs.

Teacher Notes / In-Class Use

Demo Live

  • Draw the folder tree first, then write the matching HTML paths beside it.
  • Break one image path on purpose and use the browser dev tools network panel to show what file the browser tried to find.

Try In Class

  • Have students link one CSS file, one image, and one internal page using relative paths.
  • Ask students to move an image into a folder and update the path until it works again.

Submit Or Check

  • Students should be able to explain where the current HTML file is and where the target file is.
  • Verify paths still work after publishing, not only on the local machine.

Watch For

  • Backslashes from Windows paths being copied into HTML instead of forward slashes.
  • Case mismatches that work locally for some students but fail after publishing.

Learning Goals

  • Explain a website as a folder of connected files
  • Use relative and absolute paths correctly
  • Link CSS, JavaScript, images, and internal pages from HTML

What This Teaches

This lesson teaches how a website is organized as a folder of connected files.

You will learn how browsers find CSS files, JavaScript files, images, and other pages by reading the paths you write in HTML.

Why It Matters

Broken images, missing styles, and JavaScript that does not run are often file path problems.

If the browser cannot find a file, the page may still load, but parts of the site will look or behave broken.

Learning file paths early makes debugging much easier because you can ask one clear question: where is this file in relation to the page asking for it?

Core Concept: A Website Is a Folder

Imagine a website as a folder on your computer. That folder can contain different kinds of files that work together to create the site.

  • HTML files: These files contain the structure and content of your webpages. The main page of a website is often named index.html.
  • CSS files: These files contain the styling rules that determine how the HTML elements look, including colors, fonts, and layout.
  • JavaScript files: These files contain the scripts that make your website interactive, including animations and user input handling.
  • Images: These files contain the images displayed on your webpage.
  • Other files: Websites can also include other files like videos, audio, and documents.

Core Concept: Paths Tell the Browser Where to Look

To access a file within the website's folder, you need to specify its path.

A path tells the browser the location of the file relative to the current file.

Example Site Folder

A small site might use a structure like this:

my-website/
|-- index.html
|-- about.html
|-- styles.css
|-- script.js
|-- icon.png
|-- img/
|   |-- gizmo.jpg
|-- images/
|   |-- logo.png

What Each File Does

  • index.html: This is the main page of your website. Your home page.
  • about.html: This is another page on your website.
  • styles.css: This file contains the CSS styles for your website.
  • script.js: This file contains JavaScript code for your website.
  • img/gizmo.jpg: This is an image file located within the img subfolder.
  • images/logo.png: This is an image file located within the images subfolder.
  • icon.png: This is an image file that will serve as our favicon, located within the root directory.

Code Example: Link a CSS File

If styles.css sits next to index.html, the path is just the file name.

  • rel="stylesheet": Tells the browser this file is a stylesheet.
  • href="styles.css": Tells the browser where the CSS file is located.
<link rel="stylesheet" href="styles.css">

Code Example: Link an Image

If an image is inside a folder, include the folder name in the path.

  • src="images/logo.png": Tells the browser to look inside the images folder for logo.png.
  • alt="My Website Logo": Describes the image for screen readers and browsers that cannot display it.
<img src="images/logo.png" alt="My Website Logo">

Code Example: Link to Another Page

If about.html sits next to index.html, link to it by file name.

<a href="about.html">Link to About page</a>

Relative vs. Absolute Paths

Most class projects will use relative paths. A relative path describes where a file is located compared with the current HTML file.

An absolute path uses the complete URL to a file or page.

  • Relative path: images/logo.png
  • Relative path: about.html
  • Absolute path: https://www.example.com/images/logo.png

Use relative paths for files inside your own project. Use absolute URLs when linking to outside websites or hosted resources.

Code Example: Link JavaScript

JavaScript files add interactivity to webpages.

A common pattern is to load your script near the end of the body so the HTML exists before the script runs.

  • src="script.js": Tells the browser where the JavaScript file is located.
<body>
  <h1>Welcome to My Website</h1>
  <script src="script.js"></script>
</body>

Complete HTML Example

Here is how index.html might connect a stylesheet, image, internal page, and JavaScript file.

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <img src="images/logo.png" alt="My Website Logo">
  <a href="about.html">Link to About page</a>
  <script src="script.js"></script>
</body>
</html>

Common Mistakes

  • The file name in HTML does not exactly match the real file name.
  • The file is in a folder, but the folder name is missing from the path.
  • The path uses the wrong folder name, such as image instead of images.
  • The file extension is missing or incorrect, such as logo.jpg when the real file is logo.png.
  • The project works locally but breaks online because file names use inconsistent capitalization.

Debugging Checklist

  • Find the HTML file that is asking for the resource.
  • Find the resource file in your project folder.
  • Trace the path from the HTML file to the resource file.
  • Check spelling, capitalization, folder names, and file extensions.
  • Open browser developer tools and look for 404 errors in the Console or Network tab.

Resources

MDN: Creating hyperlinks | MDN: HTML images

Checkpoint

Before moving on, make sure these feel true.

  • I can link CSS, images, and pages using relative paths.
  • I can fix a broken asset by reading the folder structure.
  • I can confirm the paths work after publishing.

Project Connection

This lesson supports current class projects.

Project 01 Basic Webpage Create a basic webpage using HTML to practice structure, semantic markup, headings, paragraphs, lists, links, images, and basic styling.

Practice

  • Create index.html, styles.css, script.js, and an images folder.
  • Draw your project folder structure.
  • Link one CSS file, one JavaScript file, one image, and one internal page from index.html.