Codelab: Your First Webpage
Step-by-step guide to creating a real HTML & CSS webpage on your own computer.
Set up your workspace
Up until now, you've been writing HTML and CSS inside WebSprout's built-in editor. That's great for learning, but real web developers write code in files on their own computer and open them in a browser. Let's do that right now!
First, you need a terminal — a text-based way to talk to your computer. Instead of clicking icons, you type short commands and press Enter. It looks like a dark window with blinking text, and it's one of the most powerful tools a developer has.
On Linux, press Ctrl + Alt + T to open a terminal. You'll see a blinking cursor waiting for your commands. Now type these three commands, pressing Enter after each one:
- mkdir ~/my-website — This creates a new folder called "my-website". The command mkdir stands for "make directory" (directory is just another word for folder). The ~ symbol is a shortcut that means "my home folder" — so the full path is something like /home/yourname/my-website.
- cd ~/my-website — This moves you into that folder. The command cd stands for "change directory". Think of it like double-clicking a folder to open it, but with text.
- code . — This opens VS Code (a popular code editor) in the current folder. The dot . means "right here" — it tells VS Code to open whatever folder you're currently in.
Start typing to see your tags visualized here...