The "Master Folder" Strategy

1. Create One Main Folder

Think of your project as a suitcase. Everything you need for your trip must be inside that one suitcase. If you leave your shoes (images) in a different room (your desktop), they won't make it to the destination (the server).

Create a single folder on your Desktop or in your Documents. Name it something simple like web-project.

• Everything related to your site goes inside here.
• Do not link to images or files that are sitting elsewhere on your computer.

2. The Standard Folder Structure

Inside your main folder, create sub-folders to keep things tidy. Your finished project should look something like this:

web-project/
├── index.html       ← Home page (always stays in the main folder)
├── about.html       ← Rename these to match your page titles
├── page3.html
├── page4.html
├── page5.html
├── css/
│     └── style.css  ← All shared styles go here
└── images/
      ├── img.jpg    ← All photos and graphics go here
      ├── img2.jpg
      └── img3.gif

3. Linking Your Pages & Files

When you write code, you are giving the browser "directions." If your files are organized correctly, those directions stay simple and predictable.

To link between pages:

<a href="about.html">About</a>

If you want the link to open in a new tab, add target="_blank":

<a href="about.html" target="_blank">About</a>

To display an image:

<img src="images/img.jpg" alt="Description of the image">

To link your stylesheet:

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

If you move a file after writing the code, the link will break. Organize first, code second.

4. Cleaning Up Before the Upload

Before you open FileZilla, Cyberduck, or Core FTP, do a "Final Sweep":

1. Delete Draft Files: Move files like index-OLD.html or test-style.css out of your project folder. Don't upload trash to the server.
2. Check for "Copy" Files: Rename anything like image (1).jpg to something clean like header-bg.jpg.
3. Close Everything: Save and close your files in your editor before uploading. Uploading a file that's still open can sometimes cause a glitch.

5. Pre-Upload Checklist

• My project has one main folder.
• My home page is named index.html (all lowercase).
• My images are all inside an images folder.
• My stylesheet is inside a css folder.
• None of my files or folders have spaces in their names.
• I have a backup of this entire folder on a USB drive, OneDrive, or Google Drive.

Ready to go? Drag the contents of your web-project folder into your FTP client and you're done.