MGU Computer Science Series — Web Development: HTML, CSS, and JavaScript

Part I: Foundations of the Web

Files · Folders · Paths · Naming · Project Structure

Chapter 3 of 30

MGU Computer Science Series · Web Development: HTML, CSS, and JavaScript · Library Textbook Edition

Chapter 3:
Files, Folders, Paths,
and Project Structure

How web projects are organized on disk — files, extensions, folders, paths, naming conventions, and a clean starter project structure that prevents the most common beginner errors

■ Part I of VII ■

■ 12 Sections • Chapter 3 of 30 ■

Builds directly on Chapter 2 — no prior web development experience required

Chapter 3 — Front Matter

Chapter Introduction and Learning Objectives

A finished website can feel like a single, seamless thing — a page with text, color, images, and buttons that all just work. But no website is actually one thing. Every website is a collection of separate files, stored in a structured set of folders, waiting to be found and assembled by a browser. The HTML file holds the words. A separate CSS file holds the colors and layout. A separate JavaScript file holds the behavior. Separate image files hold the photographs and icons. None of this comes together automatically — it comes together because the HTML file contains precise instructions for where to find each of the other pieces.

This chapter teaches you how that organization works. You will learn what files and folders are in a web project, how file extensions tell the browser what kind of content it is looking at, how the special file index.html behaves, and — most importantly — how paths describe the route from one file to another. Broken paths are one of the most common problems beginning web developers encounter, and almost all of them are preventable once you understand how paths actually work. By the end of this chapter, you will be able to build a clean, professional project folder before you write a single line of HTML.

Opening Question

Imagine you build a page on your own computer. You add a stylesheet, a few images, and a script. Everything looks perfect when you open it in your browser. Then you copy the project to a different computer, or upload it to a web server — and suddenly the images are missing, the page has no styling, and the script does not run. Nothing about the HTML itself changed. What happened? By the end of this chapter, you will understand exactly why this happens, and you will know how to build projects that do not break when they move.

12Sections

11Objectives

14Key Terms

30Total Chapters

Learning Objectives

By the end of this chapter, you should be able to:

1Explain why a website is best understood as a collection of files in an organized folder, not a single document.
2Identify common web file extensions and explain what each type of file is used for.
3Describe the standard folder structure used in beginner web projects, including the purpose of css/, js/, and images/.
4Explain the special role of index.html when a browser requests a folder address from a server.
5Define a relative path and write correct relative paths between files at different locations in a project.
6Use the path symbols ./ and ../ correctly when navigating between folders.
7Distinguish relative paths from absolute paths, including file system absolute paths and root-relative paths.
8Write correct href and src paths to link CSS files, JavaScript files, images, and other pages.
9Apply web-safe file naming conventions, including lowercase letters, hyphens, and awareness of case sensitivity.
10Identify and correct the most common path-related errors that break links, stylesheets, scripts, and images.
11Build a clean starter project folder — with the correct subfolders, starter files, and linked resources — from scratch.

Chapter 3 — Contents

Sections at a Glance

3.1Websites as File SystemsWhy a website is a collection of files, not a single document; what happens when a browser loads a page; the cost of missing or misplaced files
3.2Files and File ExtensionsBase names and extensions; common web file types; hidden extensions; HTML, CSS, and JavaScript as plain text files
3.3Folders and Project OrganizationWhy projects need folders; the standard css/, js/, images/, data/ structure; naming the project root
3.4The Role of index.htmlWhy servers look for index.html automatically; index.html in subfolders; clean URLs versus flat file structures
3.5Relative PathsWhat a relative path is; reading paths from the root; reading paths from inside a subfolder; the forward slash rule
3.6Understanding Path SymbolsThe current-folder symbol, the parent-folder symbol, and no-prefix paths; chaining symbols across multiple folder levels
3.7Absolute Paths at an Introductory LevelFile system absolute paths and why they break; root-relative paths; when absolute paths are appropriate
3.8Linking CSS, JavaScript, Images, and PagesThe <link>, <script>, <img>, and <a> elements; checking a path before writing it
3.9Naming Files for the WebLowercase letters, hyphens, case sensitivity on servers, descriptive names, forbidden special characters
3.10Common Path MistakesSix recurring errors — wrong starting point, wrong case, missing extensions, backslashes, stray spaces, absolute paths — and how to fix each
3.11Building a Clean Starter ProjectA six-step process for creating a professional starter folder, linking resources correctly, and verifying the result in a browser
3.12The Running Project: Setting Up Your Course WebsiteEstablishing the Student Learning Site project that grows throughout the textbook

Section 3.1

Websites as File Systems

When you visit a website and see a polished page with text, images, colors, and interactive buttons, it can feel like a single thing. But every website is actually a collection of separate files stored in an organized folder structure.

A typical web page requires at minimum:

An HTML file that holds the structure and content
A CSS file that holds the visual styling
A JavaScript file that holds the interactive behavior
Image files for any photographs, icons, or graphics

When a browser loads a web page, it does not load one file. It reads the HTML file first, then follows instructions inside that HTML file to load each additional resource: the stylesheet, the scripts, the images, and anything else the page needs.

If any file is missing, misnamed, or stored in the wrong folder, the browser cannot find it. The result is a broken page: missing styles, missing images, or JavaScript that does not run. The HTML itself may still display, but the page will look incomplete or broken.

This is why web developers think carefully about file organization before they begin writing code. A well-organized project folder prevents an entire category of errors.

The Mental Model

Think of a web project as a folder on your computer, not as a single document. Every file inside that folder serves a purpose. Every file has a name, a location, and a type. The browser finds files by following a path from one location to another — and the rest of this chapter is about how to write that path correctly.

Section 3.2

Files and File Extensions

Every file on a computer has two parts to its name: the base name and the extension. The extension comes after the final dot and tells the operating system and the browser what kind of file it is.

Extension	File Type	Purpose
.html	HTML document	Page structure and content
.css	CSS stylesheet	Visual styles and layout
.js	JavaScript file	Behavior and interaction
.png	PNG image	Photographs, graphics
.jpg / .jpeg	JPEG image	Photographs, high-resolution images
.gif	GIF image	Animated images, simple graphics
.svg	SVG image	Scalable vector graphics, icons
.webp	WebP image	Modern compressed image format
.json	JSON data file	Structured data
.ico	Icon file	Browser tab favicon
.woff2	Web font	Custom font files

Each extension tells the browser how to interpret the file. When a browser receives a .css file, it reads it as styling rules. When it receives a .js file, it executes it as JavaScript code. When it receives a .png, it renders it as an image.

File Extension Visibility

Some operating systems hide file extensions by default. This is a common source of confusion for beginners. A file might appear to be named style when its real name is style.css. If you accidentally save a file as style.css.txt because extensions were hidden, the browser will not recognize it as a CSS file and your styles will not work. You should always work with file extensions visible — enable this in File Explorer's View settings on Windows, or in Finder preferences on a Mac.

A Note on Text Files

HTML, CSS, and JavaScript files are all plain text files. This means you can open and edit them in any text editor — you do not need special software to read or write them. What makes an HTML file different from a CSS file is not its internal format — both are just text — but its extension and the conventions that govern what goes inside it.

Section 3.3

Folders and Project Organization

Web projects use folders to group related files together. A folder (also called a directory) is a container that holds files and other folders.

A small project might only have three or four files, and organizing them into subfolders may feel unnecessary at first. But consider what happens as a project grows: a site with ten pages has ten HTML files; a site with images has dozens of image files; a site with multiple stylesheets or scripts has multiple .css and .js files; a site with data has JSON files. Without organization, all these files pile into one folder and become difficult to manage. With organization, each type of file lives in a logical place and the project remains readable.

The Standard Web Project Structure

A beginner web project typically uses this folder structure:

my-project/
  index.html
  about.html
  contact.html
  css/
    main.css
  js/
    main.js
  images/
    logo.png
    hero.jpg
    team-photo.jpg
  data/
    resources.json

Subfolder

css/

Holds all stylesheet files. Every CSS file the project uses lives here, separate from the HTML.

Subfolder

js/

Holds all JavaScript files. Behavior code stays out of the HTML and CSS folders.

Subfolder

images/

Holds all image files — logos, photographs, icons, and graphics used across the site.

Subfolder

data/

Holds JSON and other structured data files, introduced later when pages need to render external data.

HTML files often live at the root of the project folder, where they are easy to find, though some projects use a pages/ subfolder for pages other than the home page.

Naming the Root Folder

The outer folder is the project root. Give it a meaningful name like my-portfolio, school-club-site, or learning-project. Avoid spaces in folder names; use hyphens or underscores instead.

Section 3.4

The Role of index.html

Web servers have a special convention: when a browser requests a folder address without specifying a filename, the server automatically looks for and serves a file named index.html.

What This Means in Practice

If you visit https://example.com/, the server looks for example.com/index.html and serves it automatically.

If you visit https://example.com/about/, the server looks for example.com/about/index.html.

This is why the home page of almost every website is named index.html. It is not a rule you must follow during local development, but it is the standard convention for published websites. If you name your home page home.html instead, the server may return an error when someone visits your root address.

index.html in Every Subfolder

Some multi-page sites use a folder structure where each section of the site has its own folder, and each folder contains its own index.html:

my-project/
  index.html          ← home page
  about/
    index.html        ← about page
  contact/
    index.html        ← contact page

In this structure, a user visiting example.com/about/ gets the about page automatically. This creates clean URLs without .html extensions visible in the browser bar.

For your early projects, you can keep all HTML files at the root and link to them directly by name:

my-project/
  index.html
  about.html
  contact.html

Both approaches work. Use whichever makes sense for the size and structure of your project.

Section 3.5

Relative Paths

A path is the address of a file within a file system. Paths tell the browser where to find a resource relative to the current file.

There are two kinds of paths: relative paths and absolute paths. Relative paths are by far the most common type used inside a web project. You will write relative paths hundreds of times as a web developer.

A relative path describes how to find a file starting from the current file's location. It does not start with a domain name or a drive letter. It starts with the file or folder name, or with a special symbol like ./ (current folder) or ../ (go up one folder).

Example Project Structure

my-project/
  index.html
  about.html
  css/
    main.css
  images/
    logo.png
    hero.jpg
  js/
    main.js

Reading Relative Paths from index.html

index.html lives in the project root. From index.html, here is how you would write relative paths to other files:

To Reach This File	Relative Path from index.html
about.html	about.html
css/main.css	css/main.css
images/logo.png	images/logo.png
js/main.js	js/main.js

Since index.html is in the root folder, you simply write the path from the root down into any subfolder.

Reading Relative Paths from a File Inside a Subfolder

Now suppose you have an HTML file inside a subfolder, like this:

my-project/
  index.html
  pages/
    about.html
  css/
    main.css
  images/
    logo.png

From pages/about.html, the paths are different because you are starting one level deeper:

To Reach This File	Relative Path from pages/about.html
index.html	../index.html
css/main.css	../css/main.css
images/logo.png	../images/logo.png

The ../ means "go up one folder." From inside the pages/ folder, you need to go up one level to reach the root, and then down into css/ or images/.

The Forward Slash Rule

In web paths, folders are separated by forward slashes /, not backslashes \. This is true even on Windows, where the file system normally uses backslashes. In HTML, CSS, and JavaScript files, always use forward slashes in paths.

Section 3.6

Understanding Path Symbols

Three special path symbols appear frequently in web development. Learn to recognize them immediately.

Symbol

./ Current Folder

Means "start from the current folder." Often optional but makes the intent explicit. Example: ./images/logo.png means "look in the current folder, then inside images/, then find logo.png."

Symbol

../ Go Up One Folder

Means "go up one folder from my current location." Chain these together to go up multiple levels: ../../css/main.css goes up two levels, then into css/.

No Prefix

Same Folder

A filename or folder name with no prefix is looked for in the same folder as the current file. Example: about.html looks for that file beside the current one.

Worked Example

Tracing a path two levels deep

my-project/
  index.html
  pages/
    blog/
      post.html
  css/
    main.css
  images/
    photo.jpg

Starting pointThe current file is pages/blog/post.html — two levels deep from the project root.
TargetWe want to reach css/main.css, which sits at the root level.
The path../../css/main.css — the first ../ goes up from blog/ to pages/; the second ../ goes up from pages/ to the root; then css/main.css goes down into the css/ folder and finds main.css.

Section 3.7

Absolute Paths at an Introductory Level

An absolute path provides the complete address of a file from a fixed starting point. There are two kinds of absolute paths in web development.

File System Absolute Paths

These begin from the root of your operating system's file system:

Windows:     C:\Users\YourName\Documents\my-project\index.html
Mac / Linux: /Users/YourName/Documents/my-project/index.html

Why You Should Avoid These

These paths work on your local computer but break immediately when you publish your site, because another server does not have the same folder structure as your computer. You should almost never use file system absolute paths in web projects.

Root-Relative Paths

Root-relative paths begin with a single forward slash /:

/css/main.css
/images/logo.png
/about.html

The / at the start means "start from the root of the website," not the root of your operating system. A root-relative path of /css/main.css tells the browser to go to the top of the domain and look for css/main.css there.

Root-relative paths work well on published websites but may not behave as expected when you open HTML files directly from your desktop by double-clicking them, before setting up a local server. For this reason, relative paths without a leading / are generally recommended for beginner projects.

When You Will See Absolute Paths

Absolute paths appear in two common situations: links to external websites (https://www.example.com/page.html) and links to resources on a content delivery network, such as a font service. For everything inside your own project, prefer relative paths.

Section 3.8

Linking CSS, JavaScript, Images, and Pages

Now that you understand paths, you can see how they are used in HTML. Paths appear in several different HTML elements and attributes.

Example 3.8.1

Four ways paths show up in HTML

StylesheetA <link> element in the head connects an external stylesheet: <link rel="stylesheet" href="css/main.css">. The href attribute holds the path to the CSS file.
ScriptA <script> element near the bottom of the body connects a JavaScript file: <script src="js/main.js"></script>. Scripts are typically placed just before the closing </body> tag so the HTML is fully loaded before the script runs.
ImageAn <img> element uses src to point to an image file: <img src="images/logo.png" alt="Company logo">.
Page linkAn <a> element uses href to link to another HTML file: <a href="about.html">About Us</a>.

Checking Paths Before You Write Them

Before writing any path, ask yourself two questions: Where is the current file located? Where is the target file located? Then trace the route from the current file to the target file using the path symbols you learned in Section 3.6. If you answer both questions correctly, the path will work.

Section 3.9

Naming Files for the Web

File naming matters more in web development than in everyday computer use. Web servers and web browsers are sensitive to filenames in ways that a desktop application is not.

Rules for Web-Safe Filenames

Use Only Lowercase Letters

Web servers on Linux (which hosts the majority of websites) are case-sensitive. If your image file is named Logo.PNG but your HTML references logo.png, the server will report a file-not-found error. Local development on Windows or Mac may work because those systems are case-insensitive, hiding the problem until you publish.

✓ logo.png ✗ Logo.PNG ✗ LOGO.PNG

Use hyphens to separate words. Avoid spaces entirely. A filename like my logo.png becomes my%20logo.png in a URL, because spaces must be URL-encoded, which is harder to read and type. Hyphens are standard and readable.

✓ team-photo.jpg ✓ main-stylesheet.css ✗ team photo.jpg

Keep names short and descriptive. A file named img1.jpg tells you nothing. A file named hero-background.jpg tells you exactly what it is and where it is used.

✓ hero-background.jpg ✓ contact-form.js ✗ img1.jpg ✗ final-version-REAL.html

Avoid special characters. Do not use characters like #, ?, &, %, !, @, (, ), or + in filenames — these characters have special meanings in URLs.

Use consistent extensions. Always include the correct file extension and use the lowercase version. Prefer .jpg over .JPG, .html over .HTML.

Keep folder names lowercase and hyphenated as well: ✓ css/, ✓ about-us/ rather than ✗ CSS/, ✗ My Images/.

Section 3.10

Common Path Mistakes

Even experienced web developers occasionally break links with path errors. Learning to recognize common mistakes now will save you significant debugging time.

Mistake 1 — Wrong Starting Point

A file in pages/about.html writes href="css/main.css", which the browser reads as pages/css/main.css — a file that does not exist.

The fix: Always ask yourself where the current file is located, not just where the target file is. From inside pages/, the correct path is ../css/main.css.

Mistake 2 — Wrong Case

HTML references Images/Logo.PNG but the file is actually stored as images/logo.png.

The fix: Use consistent lowercase filenames and match them exactly in your HTML. This will fail on a case-sensitive server even though it may work locally.

Mistake 3 — Missing Extension

href="css/main" is missing the .css extension. The browser will request a file literally named main, not main.css.

The fix: Always include the file extension in paths.

Mistake 4 — Backslashes Instead of Forward Slashes

src="images\photo.jpg" uses a backslash, which is the Windows file system convention, not the web convention.

The fix: Always use forward slashes / in HTML, CSS, and JavaScript, regardless of which operating system you use to write the code.

Mistake 5 — Extra Spaces

src=" images/photo.jpg" has a leading space, causing the browser to look for a path that literally starts with a space character.

The fix: Check paths carefully for accidental spaces, especially near quote marks.

Mistake 6 — Absolute File System Path

href="C:\Users\YourName\Documents\my-project\css\main.css" works on one specific computer and breaks everywhere else.

The fix: Always use relative paths inside a project.

How to Debug a Broken Path

When a resource does not load, open your browser's developer tools (covered in detail in Chapter 4) and check the Console or Network panel. The browser will show an error message identifying which file it could not find and what path it tried to load. This is the fastest way to diagnose and fix path errors.

Section 3.11

Building a Clean Starter Project

Now that you understand files, folders, paths, extensions, and naming, you can build a clean starter project structure before you write any HTML, CSS, or JavaScript. A clean starter project gives you a professional foundation for every project you build, a consistent habit that prevents path errors, a structure that scales as your project grows, and a framework that mirrors how professional web projects are organized.

Step-by-Step

Creating a starter project

Step 1Create the project root folder. Give it a lowercase, hyphenated name, such as my-learning-site/.
Step 2Create the required subfolders inside the root: css/, js/, and images/. You can add a data/ folder later if your project uses JSON files.
Step 3Create the starting files: an empty index.html in the root, an empty main.css inside css/, and an empty main.js inside js/.
Step 4Open the entire project folder — not just one file — in your text editor. Most modern editors, like Visual Studio Code, show the full file tree in a sidebar.
Step 5Add the HTML skeleton to index.html, with correct relative paths to the CSS and JavaScript files.
Step 6Open index.html in a browser and check the developer tools console for errors. If the CSS and JavaScript files load without errors, your paths are correct.

my-learning-site/
  index.html
  css/
    main.css
  js/
    main.js
  images/

The starter index.html file, with the skeleton you will learn in full detail in Chapter 5:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Learning Site</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <h1>Welcome to My Learning Site</h1>

    <script src="js/main.js"></script>
  </body>
</html>

Notice the paths used here: href="css/main.css" finds main.css inside the css/ folder, and src="js/main.js" finds main.js inside the js/ folder. Both paths are relative, starting from index.html's location in the project root.

Section 3.12

The Running Project: Setting Up Your Course Website

Throughout this textbook, you will build a running project: a multi-page educational website that grows with each new skill you learn. Chapter 3 is where you set up the foundation of that project.

The Running Project: Student Learning Site

Planned pages: Home (index.html), About (about.html), Lessons (lessons.html), Resources (resources.html), and Contact (contact.html).

student-learning-site/
  index.html
  about.html
  lessons.html
  resources.html
  contact.html
  css/
    main.css
  js/
    main.js
  images/
    (image files will be added later)
  data/
    resources.json    ← will be added in Part V

For now, create all the HTML files listed above as empty files. You will fill them with real content throughout Parts II, III, and IV.

What This Project Will Eventually Include

Semantic HTML structure with correct headings and landmarks
A shared navigation bar linking all pages together
Responsive layout that works on phones, tablets, and desktops
A hero section on the home page
An image gallery on the lessons page
A contact form with JavaScript validation
CSS variables for consistent colors and spacing
JavaScript-powered collapsible FAQ sections
A resource list populated from a JSON data file
An accessibility and quality checklist before publishing
A final publishing and deployment walkthrough

Chapter 3 — Back Matter

Chapter Summary

Section 3.1A website is a collection of files in an organized folder, not a single document. The browser loads the HTML first, then follows instructions inside it to load the stylesheet, scripts, images, and other resources.
Section 3.2Every file has a base name and an extension. Extensions such as .html, .css, .js, .png, and .json tell the browser how to interpret a file. HTML, CSS, and JavaScript are all plain text files.
Section 3.3Web projects use folders to group related files. The standard beginner structure uses a project root with css/, js/, images/, and optionally data/ subfolders.
Section 3.4Servers automatically look for index.html when a browser requests a folder address. This is why home pages and section landing pages are conventionally named index.html.
Section 3.5A relative path describes how to find a file starting from the current file's location. Paths differ depending on whether the current file is at the project root or inside a subfolder.
Section 3.6The symbols ./ (current folder), ../ (go up one folder), and no-prefix paths (same folder) are the building blocks of every relative path. Symbols can be chained to move up multiple folder levels.
Section 3.7File system absolute paths break when a project moves to another computer or server and should be avoided. Root-relative paths, beginning with /, start from the website's domain root and are useful on published sites.
Section 3.8Paths appear in the href attribute of <link> and <a> elements and the src attribute of <script> and <img> elements. Always trace where the current file is and where the target file is before writing a path.
Section 3.9Web-safe filenames use only lowercase letters, hyphens instead of spaces, short descriptive names, no special characters, and consistent extensions. Case sensitivity on servers makes consistent naming essential.
Section 3.10The most common path errors are wrong starting points, mismatched capitalization, missing extensions, backslashes, stray spaces, and file system absolute paths. Browser developer tools quickly reveal which path failed.
Section 3.11A clean starter project — a root folder with index.html, css/, js/, and images/ subfolders, and a linked stylesheet and script — is the right foundation for every web project, built in six repeatable steps.
Section 3.12The Student Learning Site running project is established with five planned HTML pages and the standard folder structure, ready to be filled in throughout the rest of the textbook.

Key Terms

absolute path

A path that specifies a file's full location from a fixed root, such as a domain root or operating system root. Contrast with relative path.

Common Misconceptions

Misconception 1

"I can use backslashes in HTML paths."

No. HTML always uses forward slashes /. Backslashes are a Windows file system convention. Web paths, URLs, and HTML attributes use forward slashes on all platforms.

Misconception 2

"File names don't matter as long as the path is right."

They do matter. File names must match exactly, including capitalization, on case-sensitive servers. A file named Photo.jpg and a reference to photo.jpg will fail on Linux servers even though they might work on your Windows or Mac computer during development.

Misconception 3

"I can figure out the path structure later after I build the pages."

It is much easier to set up the project structure first and write correct paths from the beginning than to rename and reorganize files after the project is partially built. Reorganizing files requires updating every path reference in every file that links to them.

Misconception 4

"Absolute paths are safer because they always point to the right place."

File system absolute paths are actually more fragile, not safer. A path like C:\Users\YourName\Documents\site\css\main.css only works on your computer. Relative paths work wherever the project folder is located.

Misconception 5

"The index.html name is just a tradition I can ignore."

For local development, you can use any name and open the file directly. But for published websites, most servers are configured to serve index.html when a folder address is requested. Ignoring this convention causes problems at publication time.

ReviewReview Questions

Explain in your own words why websites are described as "file systems" rather than single documents.
What is a file extension? Name four file extensions used in web projects and explain what each one indicates about the file's content.
Why is index.html used as the standard name for a home page? What happens on a web server when a browser requests a folder address without specifying a filename?
What is a relative path? How is it different from an absolute path? Which type is recommended for files within a web project?
What does ../ mean in a file path? Write an example path that uses ../ and explain what it means.
A web developer creates an image file and names it "My Profile Photo.JPG". Identify three separate problems with this filename and explain how to fix each one.
An HTML file is stored at pages/about.html. It needs to load a CSS file stored at css/main.css. Write the correct relative path for the href attribute of the <link> element.
Why do file system absolute paths cause problems in web development even if they work during local development?
A student is debugging their page and notices that the stylesheet is not applying. What are three path-related mistakes that could cause a stylesheet to fail to load?
Describe the standard starter project structure taught in this chapter. What folders does it contain, what files go at the root, and why is this structure a good habit to develop?

Chapter 3 Checklist

Use this to confirm your understanding before moving to Chapter 4

Concepts

I can explain why a website is a collection of files, not a single document.
I can identify common web file extensions and what each one is for.
I can describe the standard css/, js/, and images/ folder structure.
I can explain why servers automatically look for index.html.
I can define a relative path and distinguish it from an absolute path.
I can use ./ and ../ correctly when writing paths.
I can distinguish file system absolute paths from root-relative paths.

Applied Skills

I can write correct href and src paths for stylesheets, scripts, images, and pages.
I can apply web-safe naming conventions to files and folders.
I can identify and fix the six common path mistakes covered in this chapter.
I can build a clean starter project folder from scratch and verify it loads without console errors.

Preview — Chapter 4

Browsers, Developer Tools, and Page Inspection

Chapter 4 introduces the browser developer tools: the built-in debugging and inspection panel available in every modern web browser. You will learn how to open developer tools, inspect the HTML structure of any page, read CSS rules as the browser applies them, use the console to check for errors, and preview how pages look on different screen sizes. Now that you have set up a project folder in Chapter 3, developer tools will become your most important debugging companion as you begin writing HTML in Chapters 5 through 10.

MGU Library Connection

Web Development: HTML, CSS, and JavaScript — Appendix A: Web Project Setup Reference
Web Development: HTML, CSS, and JavaScript — Appendix M: Glossary
Companion resource: File and Path Guide
Companion resource: Project Folder Starter Checklist
Next chapter: Chapter 4 — Browsers, Developer Tools, and Page Inspection
MGU Digital Literacy — background reading on files, folders, and digital organization

Chapter 3:Files, Folders, Paths,and Project Structure

Chapter Introduction and Learning Objectives

Learning Objectives

Sections at a Glance

Websites as File Systems

Files and File Extensions

Folders and Project Organization

The Standard Web Project Structure

The Role of index.html

index.html in Every Subfolder

Relative Paths

Example Project Structure

Reading Relative Paths from index.html

Reading Relative Paths from a File Inside a Subfolder

Understanding Path Symbols

Absolute Paths at an Introductory Level

File System Absolute Paths

Root-Relative Paths

Linking CSS, JavaScript, Images, and Pages

Naming Files for the Web

Rules for Web-Safe Filenames

Common Path Mistakes

Building a Clean Starter Project

The Running Project: Setting Up Your Course Website

The Running Project: Student Learning Site

Chapter Summary

Key Terms

Common Misconceptions

Chapter 3:
Files, Folders, Paths,
and Project Structure