Codelab: Your First Webpage

Step-by-step guide to creating a real HTML & CSS webpage on your own computer.

Step 1 of 7

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.
Think of it this way: The terminal is like texting your computer instead of tapping buttons. You type a short message (a command), press Enter (send), and the computer does what you asked. It feels unfamiliar at first, but once you learn a few commands, it becomes faster than clicking through menus.
Tip
If VS Code isn't installed, you can download it free from code.visualstudio.com — or use any text editor like gedit or nano. The important thing is having a program that saves plain text files. Don't use a word processor like LibreOffice Writer — it adds invisible formatting that browsers can't read.
HTMLREAD ONLY
TAG VIEW

Start typing to see your tags visualized here...

PREVIEW