WA4RPWeb Administration for Retired Persons

Core skills · Guide 01

Files, Folders & Browser Basics

Before editing a website, it helps to know which thing you are actually looking at. This guide builds a simple mental map of the browser, the files behind a site, and a safe way to make your first changes.

Time
15–20 minutes
Level
Foundation
You need
A browser and a folder you can practice in

01

The browser is a viewer, not the filing cabinet

When you visit a website in Firefox, Chrome, Safari, or another browser, the browser receives files and turns them into the page you see. The page in front of you is the result; the website files are the ingredients.

BrowserDisplays a website and lets you interact with it.
Website filesHTML, CSS, images, and other files that the browser uses to build the page.

02

Folders give a website its address book

A small website often looks like an ordinary folder on your computer. The exact names vary, but a simple project might look like this:

my-community-site/
├── index.html
├── styles.css
└── img/
    ├── logo.svg
    └── picnic.jpg

index.html is commonly the front page. styles.css controls appearance. The img folder keeps images together. If HTML asks for img/logo.svg, that path means “look inside the img folder for logo.svg.”

03

A safe edit is a small edit you can undo

  1. 1
    Make a copy first.

    Duplicate the file you plan to change or keep a backup of the project folder.

  2. 2
    Change one thing.

    Edit a heading, sentence, image, or style—not six unrelated parts at once.

  3. 3
    Save the file.

    Your browser cannot show an edit that your editor has not saved.

  4. 4
    Refresh and inspect.

    Check the page at normal size and make sure nothing nearby broke.

  5. 5
    Keep or restore.

    If the change works, continue. If not, undo it or restore your backup.

04

Practice: make a harmless first page

Create a new folder named practice-site. Inside it, create a file named index.html and add:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Practice Site</title>
</head>
<body>
    <h1>Hello from my practice site</h1>
    <p>I know where this file lives.</p>
</body>
</html>

Save it, then open the file in your browser. Change the paragraph, save, and refresh. The goal is not to memorize HTML. The goal is to see the relationship between the file you edit and the page the browser renders.

05

Keep this checklist

  • I know which file I am editing.
  • I know where that file is stored.
  • I made a backup or can undo the change.
  • I changed one thing at a time.
  • I saved before refreshing the browser.
  • I checked the page after the edit.