Files, folders, and the program you'll use

Before you make anything, let’s get comfortable with where things live on your computer.

Files sit in folders

A file is one thing: a letter, a photo, a page. A folder holds files. Folders can hold other folders.

On a Mac, the program that shows them is called Finder. On Windows, it’s File Explorer. You’ve used it. That’s all a folder is.

Your website is one folder

Everything for your site will sit in one folder. People call it the project folder, or just “the project”. Inside it there are a few folders with set names:

Folder	What goes in it
src	The pages you write. Short for “source”.
public	Pictures and files that go on the site as they are
node_modules	Tools your project uses. You never open this one.

You don’t make these folders yourself. Astro makes them for you. You just need to know they’re there.

The program you’ll use to edit files

You need a program that edits plain text. Not Word. Word adds hidden formatting that breaks code.

The one we use is called VS Code. It’s free, made by Microsoft, and works on Mac and Windows. It shows your project’s folders down the left side, and the file you’re editing in the middle.

It also colours your code so it’s easier to read, and it points out typos. Think of it as a very helpful notepad.

Lesson 1 of our free course shows you how to install it.

Three things to try

1. Make a new folder on your desktop. Name it practice.
2. Open it. It’s empty. That’s a project folder with nothing in it yet.
3. Delete it. See? Nothing bad happens. Making and removing folders is safe.

Why this matters

When a guide says “create a file called about.astro inside src/pages”, you now know exactly what that means: open the project folder, open src, open pages, make a new file, name it about.astro.