Level 6 · Lesson 48: The folder of a site

What the lesson explains

A folder of a site. A website is a folder of files. Let’s build one.

One folder, three parts. A home page, a style file, and a folder of pictures. index.html home; style.css looks; images pictures.

The start of a page. PlayBuddy wrote the first lines of index.html for you. On the card: <link rel="stylesheet" href="style.css">

What you do first

Make the site folder. In the practice terminal, type mkdir my-site at the prompt PS C:\Users\you\Documents> and the computer answers: Directory: C:\Users\you\Documents / d---- my-site. It makes my-site.

The files on the practice computer

This lesson works in one folder. At the start, Documents holds diary\, music\, my-project\, stories\, vault\, homework.txt.

Along the way you type mkdir my-site, type ni index.html, type ni style.css, type mkdir images, type copy ..\my-project\images\cat.png images, save index.html in Documents\my-site and save style.css in Documents\my-site. Lesson 49 opens with the files just as you leave them.

What you practise

Try it, "Make the site folder": In the practice terminal, type mkdir my-site at the prompt PS C:\Users\you\Documents> and the computer answers: Directory: C:\Users\you\Documents / d---- my-site. It makes my-site. Then: In the practice terminal, type cd my-site at the prompt PS C:\Users\you\Documents>; the prompt then reads PS C:\Users\you\Documents\my-site>. Then: In the practice terminal, type ni index.html at the prompt PS C:\Users\you\Documents\my-site> and the computer answers: Directory: C:\Users\you\Documents\my-site / -a--- index.html. It makes index.html.

Try it, "The other parts": In the practice terminal, type ni style.css at the prompt PS C:\Users\you\Documents\my-site> and the computer answers: Directory: C:\Users\you\Documents\my-site / -a--- style.css. It makes style.css. Then: In the practice terminal, type mkdir images at the prompt PS C:\Users\you\Documents\my-site> and the computer answers: Directory: C:\Users\you\Documents\my-site / d---- images. It makes images. Then: In the practice terminal, type copy ..\my-project\images\cat.png images at the prompt PS C:\Users\you\Documents\my-site>; the prompt then reads PS C:\Users\you\Documents\my-site>. It makes cat.png.

Try it, "Show the cat": Add <img src="images/cat.png" alt="My cat">. One way: write in index.html: <img src="images/cat.png" alt="My cat">. Then press Show page to see it.

In your head, "Where is the cat?": The page says src="cat.png". Will the picture show? The answer: "No: cat.png is inside images".

What PlayBuddy and PlayType say

PlayType: "A website is a folder of files. Let’s build one!"

PlayBuddy: "The home page is always called index dot html."

Help in every lesson

Everything happens on a pretend computer in your browser, so nothing touches your real files. PlayBuddy and PlayType stand beside the board, cheer you on and say when it is your turn.

A green ring shows where to click the first time. After that you do it on your own, and if you slip twice the ring comes back.

Stars

The lesson has 8 things to do. Up to one slip in ten gives three stars, up to one in four gives two, and finishing always gives at least one. Stars and progress are saved in this browser only; there is no account.

About DayOneCode

DayOneCode is an independent learning site, not affiliated with or endorsed by Anthropic. Claude and Claude Code are trademarks of Anthropic.