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.

Templates people can actually build with.

Browse student creations, open a live preview, study free source code, or choose polished premium templates. The free gallery grows your learning community; premium releases create a path to a real digital-template business.

FREE STUDENT BUILDSLIVE PREVIEWHTML + CSS + JSPREMIUM DOWNLOADSADMIN CURATION

7. Kodi Template Gallery ✨

Discover websites built inside the Clubhouse. Student submissions enter as FREE. Admin can promote selected designs to PREMIUM, add a price and feature them in the marketplace.

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
🛡️ Admin / Teacher tools — curate the marketplace

Import student builds, back up the gallery, and choose which templates stay free or become premium. Student submissions default to FREE; only the admin should promote a template to premium.

Marketplace Manager

Change a template to Premium, set its price in naira, or feature it. Changes are stored in this browser in this prototype.

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. Submit Your FREE Template

Do this once your page runs with no errors. Student submissions enter the public gallery as FREE templates. Admin can later curate exceptional builds for premium release.

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.