Lesson 5 of 7

Files, folders and your first project

A website is really just a bunch of files in a folder. In this lesson you'll learn how developers organize those files, how to name them so nothing breaks and how to create your very first web page.

A project is a folder

When developers talk about a "project", they mean a folder that holds everything a website needs. The HTML files, the CSS files, the images, all of it lives together in one place.

A small website might look like this:

text

my-website/
├── index.html
├── about.html
├── styles.css
└── images/
    └── profile.jpg

The folder at the top, my-website, is the project. Everything inside belongs to it. There's even a folder inside the folder, images, which keeps the pictures tidy and separate from the code.

It's a good idea to keep all your coding projects together in one place on your computer. Many developers create a folder called projects or code in their home folder and put every project inside it. That way you always know where to look.

The special file called index.html

Notice the file called index.html in the example above. That name isn't random.

When a browser visits a website without asking for a specific page, the server looks for a file called index.html and sends that. It's the home page, the front door of your website. Almost every website you'll build will have one.

Quick check

Why do websites usually have a file called index.html?

Select one answer

Naming files so nothing breaks

Computers are much fussier about names than people are. A file name that looks fine to you can cause problems on a server later. Follow these rules and you'll avoid a lot of confusing bugs:

Use lowercase letters. Some servers treat About.html and about.html as two different files. Using only lowercase means you never have to think about it.
No spaces. Use a dash instead. Write my-first-page.html, not my first page.html.
Skip special characters. Stick to letters, numbers and dashes. Avoid things like å, ä, ö, & or ? in file names.
Keep the file ending. The part after the dot, like .html or .css, tells the computer what kind of file it is. Don't remove it.

Quick check

Which of these is the best file name?

Select one answer

Show file extensions on your computer

By default, both Windows and Mac hide the file ending (the extension) on many files. That can make it hard to tell whether a file is called index.html or index.html.txt. It's worth turning them on:

Windows: open File Explorer, click View at the top, then Show and check File name extensions.
Mac: open Finder, go to Finder in the menu bar, then Settings, then the Advanced tab and check Show all filename extensions.

Opening a folder in VS Code

VS Code works best when you open a whole folder instead of single files. That way the Explorer shows everything in your project and you can jump between files easily.

Create a new folder somewhere sensible, for example inside a projects folder in your home folder
In VS Code, go to File and choose Open Folder (on Mac it may say Open)
Select your folder and click Open

The first time you open a folder, VS Code may ask whether you trust the authors of the files. Since you made the folder yourself, you can safely say yes.

Creating your first web page

Now for the exciting part. With your folder open in VS Code:

Hover over the Explorer on the left and click the New File icon
Name the file index.html and press enter
The file opens in the editor. Type the following:

html

<h1>Hello, world!</h1>
<p>I made this.</p>

Save the file with Ctrl+S on Windows or Cmd+S on Mac (or let Auto Save do it for you)

To see your page in a browser, click the Go Live button in the bottom right corner. That's the Live Server extension from the last lesson. A browser tab opens and there it is: your first web page.

Try changing the text and saving again. The browser updates by itself.

If you skipped Live Server, you can also find the file in your file explorer and double click it. It opens in your browser the same way, you just have to refresh the page yourself when you make changes.

Quick check

Why is it better to open a whole folder in VS Code instead of single files?

Select one answer

Try it yourself

Create your own first page:

Make a folder called projects in your home folder if you don't have one already
Inside it, make a folder called first-page
Open first-page in VS Code
Create a file called index.html and write a heading with your name and a short sentence about yourself
Open it in the browser with Go Live

Then try adding another line, saving and watching the browser update. Congratulations, you're officially writing code.