Files and Folders for a Website

After this lesson you can

• Name web files so they work on every web server, in lowercase with hyphens instead of spaces and the right extension
• Lay out a website's folder with index.html as its front page and its pictures in an images folder

Key takeaways

• A website is a folder of files. Give each site its own project folder, with index.html as its front page.
• Name web files in lowercase, with hyphens between words and no spaces, such as game-night.html. Many web servers treat Menu.html and menu.html as two different files.
• The extension after the last dot, such as .html or .jpg, says what kind of file it is. Turn on showing extensions so you can see it.
• Keep pictures in an images folder. From index.html, the path to one is images/ and its name, such as images/dice.jpg.

A page that works perfectly on your computer and shows "404 Not Found" once it's online is one of the most common surprises in web development, and the cause is usually a file name: a capital letter, a space, or a hidden .txt on the end. A few habits about naming and arranging files prevent it, and they're the same habits every web team uses. Set them up now, before your first real page, and you won't have to undo anything later.

A website is a folder

Think of a kitchen drawer for takeout menus: one drawer, everything about takeout in it, and you always know where to look. A website works the same way. It's a folder of files: the pages, the pictures, and later the styles. When you put a site online, you upload that folder, and the web server hands out its files when browsers ask.

So every website you build gets its own project folder, and all its files go inside it. In this course, keep them together in one html-course folder in your Documents folder:

Documents/
└── html-course/
    ├── game-night/
    ├── band-fan-page/
    └── weekend-trip-guide/

A folder is also called a directory, especially in a terminal. They mean the same thing.

File names that work on the web

Your computer is forgiving about names; the web is not. Many web servers treat Menu.html and menu.html as two different files, even though Windows and macOS treat them as the same one. A link to menu.html works on your computer and breaks online. Spaces cause trouble too: in a URL a space becomes %20, so game night.html turns into game%20night.html.

The rule that avoids all of it:

• Lowercase letters and numbers only.
• Hyphens between words, never spaces. This style is called kebab case, because the words look like pieces on a skewer.
• No other symbols: no &, #, ? or accented letters.

Works everywhere           Causes trouble
game-night.html            Game Night.html
rules-and-snacks.html      rules&snacks.html
images/board-games.jpg     images/Board Games.JPG

Extensions: what kind of file it is

The letters after the last dot in a file name are its file extension. They tell the computer, and the browser, what kind of file it is: .html is a web page, .css a stylesheet, .jpg and .png pictures.

Windows and macOS hide extensions unless you ask to see them, which leads to a classic mistake: a file that looks like index.html but is really index.html.txt, a text file the browser shows as plain text. Turn extensions on:

VS Code always shows the whole name, extension included, so creating files there avoids the problem.

index.html: the front door

When a URL names a folder but no file, such as https://www.example.com/, the web server sends that folder's index.html. That makes index.html your site's front door: the page visitors see first. Every website you build in this course has one, and it's always named exactly index.html, all lowercase.

Other pages sit beside it, and pictures go in a folder of their own named images:

game-night/
├── index.html
├── rules.html
└── images/
    ├── board-games.jpg
    └── dice.png

A path is the directions to a file. Starting from index.html, the directions to the dice picture are "go into images, then take dice.png", written images/dice.png. A path that starts from where you are, the way this one starts from index.html, is a relative path. You'll write paths like it when you add links and pictures, in Links Between Your Own Pages and Adding Pictures.

Try it. Inside your html-course folder, make a folder named my-first-site. Open it in VS Code with File > Open Folder. In the Explorer, use the New Folder icon to make an images folder, and the New File icon to make index.html (outside images). Your Explorer should show the same shape as the tree above. Then look at the folder in File Explorer or Finder with extensions turned on: the file is index.html, nothing more.

Check yourself

2 questions to try on the lesson page.

So what

A website is a folder, and its file names are part of its addresses. Lowercase, hyphens, the right extension and an index.html at the front: get these right from the first page, and your links and pictures keep working when the site goes online.

Key terms

• File Extension
• Directory
• Kebab Case
• Relative Path

Cheat sheets

• Files and Folders for a Website