Kurser

You've made it to the end of the first course. Nice work! You now know what web developers do, how the web works and how to use the tools of the trade.

In this project you'll put it all together and set up the folder for your personal website. This is the project you'll keep building on throughout the whole pathway, so it's worth getting right. By the end of the pathway, this folder will hold a real website that anyone can visit.

What you'll build

A project folder called my-website with a first version of your home page in it. It won't look like much yet, and that's completely fine. Every website starts as a blank page.

Step 1: create the folder from the terminal

Open the terminal in VS Code and use the commands from the last lesson:

bash

cd ~
cd projects
mkdir my-website
cd my-website

If you don't have a projects folder yet, create it first with mkdir projects before the second line.

Step 2: open it in VS Code

Still in the terminal, type:

bash

code .

A new VS Code window opens with your empty my-website folder. If the code command doesn't work, go back to the terminal lesson and turn it on, or use File and Open Folder instead.

Step 3: create your home page

Create a file called index.html in the folder. Remember the naming rules: all lowercase and no spaces.

Write a heading with your name and a sentence or two about yourself. For example:

html

<h1>Hi, I'm Alex</h1>
<p>I'm learning web development, and this is the start of my very own website.</p>

Make it yours. Write whatever you like, it's your page.

Step 4: look at it in the browser

Click Go Live in the bottom right corner and check that your page shows up in the browser. Change something, save and watch it update.

Step 5: check your setup

Before you hand it in, run through this list:

Your theme and font size feel comfortable
Auto Save is on
Prettier, Live Server, Error Lens and Code Spell Checker are installed
Format On Save is on with Prettier as the default formatter
Your folder is called my-website and contains index.html

Finally, in the terminal, run pwd and then ls inside your my-website folder. You'll need what they print for the assignment below.

AssignmentAI-graded assignment

Show that your workspace is ready. In your answer, include:

What the terminal printed when you ran pwd and then ls inside your my-website folder
The full contents of your index.html file
Which color theme you picked and which extensions you installed
One thing from this course that felt hard or confusing at first, and how you figured it out

There are no wrong answers in part 4. It's there because noticing what you struggled with helps you learn faster next time.

Your setup is ready when the path from pwd ends in my-website, the ls list includes index.html, your page has a heading and a paragraph with your own text and you've installed at least Prettier and Live Server. If something is missing, the feedback will tell you exactly what to fix.

Resources:

Stuck on the terminal commands? The cheat sheet at the end of "The terminal without fear" has all of them.
The code command not working? The same lesson shows how to turn it on, or you can use File and Open Folder instead.
Not sure about Prettier settings? Go back to "Extensions worth having".