HTML / INTERACTIVE PRACTICE

Fix broken file paths

Five connections are broken in a small website. Use its folder tree to reconnect the files, one path at a time.

New to folders and paths? Read the file structure guide →

Why this practice comes now

You have learned how website folders connect. Practice tracing each reference from its source file to the requested target.

Concepts to recall

Start with one action

Start with Connect the stylesheet. Locate index.html in the folder tree, then trace the route to the stylesheet before changing the first path.

Progress loads in this browser

Your project files

The files stay in these folders. Change only the paths.

my-website/
├── index.html
├── pages/
│   └── about.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
└── images/
    ├── logo.svg
    └── pattern.svg

Start in the folder containing the source file. Find a route to the target file.

Use file-relative paths for this exercise, without a full URL or a leading slash. Type only the path, without quotes.

PATH 1 OF 5

Connect the stylesheet

Source file: index.html
Target file: css/styles.css

<link rel="stylesheet" href="styles.css">
Hint 1: find your starting folder

Start beside index.html. Which folder holds the stylesheet?

Hint 2: trace the route

Starting beside index.html, move up with ../ only when you need to leave its folder. Then enter the folders leading to css/styles.css. Copy their spelling from the tree.

Hint 3: check the destination

Run Check solution and read the resolved destination. If it points to the wrong folder, retrace the path from the source file, not from the project root. Keep only the path in the field.

PATH 2 OF 5

Load the script

Source file: index.html
Target file: js/script.js

<script src="scripts/script.js" defer></script>
Hint 1: find your starting folder

Compare the folder name in your path with the tree.

Hint 2: trace the route

Starting beside index.html, move up with ../ only when you need to leave its folder. Then enter the folders leading to js/script.js. Copy their spelling from the tree.

Hint 3: check the destination

Run Check solution and read the resolved destination. If it points to the wrong folder, retrace the path from the source file, not from the project root. Keep only the path in the field.

PATH 3 OF 5

Show the About page logo

Source file: pages/about.html
Target file: images/logo.svg

<img src="images/logo.svg" alt="Our logo">
Hint 1: find your starting folder

The About page is already inside pages. How can you reach a sibling folder?

Hint 2: trace the route

Starting beside pages/about.html, move up with ../ only when you need to leave its folder. Then enter the folders leading to images/logo.svg. Copy their spelling from the tree.

Hint 3: check the destination

Run Check solution and read the resolved destination. If it points to the wrong folder, retrace the path from the source file, not from the project root. Keep only the path in the field.

PATH 4 OF 5

Link back home

Source file: pages/about.html
Target file: index.html

<a href="index.html">Home</a>
Hint 1: find your starting folder

Find the home page in relation to the folder containing about.html.

Hint 2: trace the route

Starting beside pages/about.html, move up with ../ only when you need to leave its folder. Then enter the folders leading to index.html. Copy their spelling from the tree.

Hint 3: check the destination

Run Check solution and read the resolved destination. If it points to the wrong folder, retrace the path from the source file, not from the project root. Keep only the path in the field.

PATH 5 OF 5

Load a CSS background

Source file: css/styles.css
Target file: images/pattern.svg

background-image: url("images/pattern.svg");
Hint 1: find your starting folder

This reference starts in the stylesheet's folder, even when another page uses that stylesheet.

Hint 2: trace the route

Starting beside css/styles.css, move up with ../ only when you need to leave its folder. Then enter the folders leading to images/pattern.svg. Copy their spelling from the tree.

Hint 3: check the destination

Run Check solution and read the resolved destination. If it points to the wrong folder, retrace the path from the source file, not from the project root. Keep only the path in the field.

Check your paths when you are ready.

Includes your current work as HTML, CSS, and JavaScript files. How to run it on your computer →

Reset paths

Restore the broken starter paths. Your completion achievement is kept.

Explained solution

Try the paths first. Opening this solution does not record completion.

Connect the stylesheet

<link rel="stylesheet" href="css/styles.css">

From the project folder, enter css and select styles.css.

Load the script

<script src="js/script.js" defer></script>

The folder is named js, so the path enters js from index.html's folder.

Show the About page logo

<img src="../images/logo.svg" alt="Our logo">

Leave pages with ../, then enter images and select logo.svg.

Link back home

<a href="../index.html">Home</a>

Leave pages with ../. index.html is in that parent folder.

Load a CSS background

background-image: url("../images/pattern.svg");

Start in css, leave it with ../, then enter images. CSS image paths start from the CSS file.