Step 1.1 · Plan and prepare

Organize your files

Websites depend on exact file names and locations. Set up your folders correctly before you make anything else.

You will work in: LastnameFirstInitial_triad-website/
Learning outcome: File organization for websites

If a file is misnamed or saved in the wrong folder, the code that points to it will not work. The browser cannot guess what you meant.

Web-safe file names

Every file and folder in your website follows these rules:

Rule	Good	Bad
Underscores or hyphens, never spaces	`red-01-sm.jpg`, `De_Stijl_logo.svg`	`red 01 sm.jpg`
Letters, numbers, underscores and hyphens only (capitals are fine)	`De_Stijl_logo.svg`	`De Stijl logo(final)!.svg`
Name the home page `index.html`, all lowercase	`index.html`	`Index.html`, `home.html`
Two-digit numbers so files sort in order	`red-02`, `red-10`	`red-2`, `red-10`

Case matters

Capitals are allowed, but many web servers treat Red.html and red.html as two different files. A link that works on your computer can break once the site is published. Pick one spelling for each file and match it exactly, capitals included, everywhere it appears in your code.

Create the folders

Create a project folder named LastnameFirstInitial_triad-website (your last name and first initial, for example RosenstockS_triad-website).
Create two folders inside it: resources and site.

LastnameFirstInitial_triad-website/ ├── resources/ originals, credits table, drafts (not published) └── site/ the website itself (everything here is published)

The site folder is your root folder. Everything a visitor sees must be inside it.
Download the starter folder from Canvas and move its contents into site:

site/ ├── index.html starter home page ├── topic-1.html starter gallery page ├── css/ │ └── styles.css starter style sheet ├── js/ │ └── gallery.js lightbox script └── images/ ├── thumbs/ your small gallery images └── large/ your large gallery images
- CSS files (.css) go in css
- JavaScript files (.js) go in js
- Images (.jpg, .png, .svg, .webp) go in images
Open the site folder in Visual Studio Code. Choose File > Open Folder and select your site folder. The Explorer panel on the left shows your files exactly as they are organized. Keep this folder open as the project root and use relative paths so links keep working when you publish.

Tip

Save your project folder in OneDrive so you can open it from any computer and preview your pages in a browser.

Set up Visual Studio Code

Download Visual Studio Code and install it.
Open your site folder with File > Open Folder.
Preview a page the way you did in Projects 1 and 2: right-click index.html in Explorer and choose Open with Integrated Browser, or choose Reveal in Finder (Mac) / Reveal in File Explorer (Windows) and double-click the file to open it in an external browser. Save, then refresh the preview to see each change.

Use Visual Studio Code to create and edit your HTML and CSS files throughout this project. See Using Visual Studio Code for help with editing files, previewing pages, and arranging editor views.

Relative paths

A relative path describes where a file is compared to the page that uses it. You will write paths like these all project long:

From `index.html`, the path…	means
`red.html`	a file in the same folder
`css/styles.css`	open the `css` folder, then the file
`images/thumbs/red-01-sm.jpg`	open `images`, then `thumbs`, then the file

Never use paths that start with C:\, /Users/ or file:///. They only exist on your computer.