Build Your First Portfolio Website 🚀

Learn the tags, see how they fit together, edit the code yourself, and watch a real portfolio website appear immediately.

HTML = BODY CSS = CLOTHES JavaScript = ACTION DIV = ROOM NAV = ROAD SIGNS

1. First See the Whole Website Skeleton

Every portfolio page is simply a number of labelled rooms arranged in order. Click any tag below to see what it does.

→ → → → → → → → →
MEMORY PATH: HEAD → BODY → NAV → HERO → ABOUT → GALLERY → VIDEO → SKILLS LIST → CONTACT → FOOTER

2. Why the Navigation Links Work

A navigation link is just an <a> tag. The href tells the browser where to go.

<a href="#gallery">Gallery</a> means: “When clicked, jump to the element whose id is gallery.”

3. Build the Portfolio Live

Change the words in the quick form first. Then open the HTML, CSS or JavaScript tab and change the real code yourself.

📝 Your Code
👀 Browser Preview
Why this structure works:

<nav> holds links.
<section class="hero"> introduces you.
<div class="gallery"> groups images.
<iframe> can embed a YouTube video.
<ul><li> creates your skills list.
<button> gives JavaScript something to react to.
<footer> closes the page.

4. CSS Can Live in Three Places

Inline CSS

<h1 style="color:red">

Fast for one element. Harder to manage on a large site.

Inside the Head

<style> h1{color:red} </style>

Good for a one-page practice project like this.

External CSS

<link rel="stylesheet" href="style.css">

Best when many pages should share the same design.

5. Can You Rebuild It Without Copying?

Before you say “I know HTML,” check whether you can point to every part in your own code.

0 / 10 skills checked.

6. Your Final Goal

When you can rebuild this page with your own colours, pictures, links and words, you have moved from “I know tags” to “I can produce a real portfolio page.”

DO NOT MEMORISE EVERY LINE. MEMORISE THE WEBSITE SHAPE — THEN BUILD EACH ROOM.

7. The Clubhouse Wall 🖼️

Every finished build in this class lands here. Open anyone's card to see their screen and their real code side by side.

0 builds 0 builders 0 schools & clubs
STEP 1

Build and run

Finish your page in the builder above and click Run until there are no errors.

STEP 2

Publish

Fill the short form below. Your card appears on this wall straight away.

STEP 3

Send it to your teacher

Click Save my build to a file and hand the file in. Your teacher loads every file onto one class wall.

0 builds

The wall is empty for now

Be the first name on it. Finish your page above, then publish it.

Submit my build
👩🏽‍🏫 Teacher tools — build the class wall

Students each publish on their own laptop, then click Save my build to a file and hand the file in. Drop all of those files here and every build joins this wall.

Drop student build files here, or tap to choose them

Where is this saved? On this computer, in this browser. It survives closing the browser and switching off the laptop. It does not travel to other laptops on its own — that is what the build files are for. Use Back up the whole wall before a school laptop gets wiped.

8. Put Your Build On The Wall

Do this once your page runs with no errors. You do not need to copy any code — the form takes it from your builder above.

RUN YOUR PAGE FIRST. FIX EVERY ERROR. THEN PUBLISH.

No code taken yet. Click the button above.

Add the name you want printed under your build.
Give your build a title so people know what they are opening.
Separate with commas. Three is plenty.
Tap to add a screenshot, or skip it — the wall will show your live page instead.
Skipping this keeps the file small, and your card still looks right.