WHAT YOU'LL LEARN
Real skills, not fake points.
- Explain a website request from address to rendered page
- Write and inspect meaningful HTML
- Style responsive pages with CSS
- Investigate bugs systematically
- Build, test and export your own site
THE LEARNING FORGE · COURSE 01
Build Your First Website.
Understand the web. Write real code. Build a site worth showing.
A PROJECT-BASED AIL COURSE
Stop watching tutorials.
Start making things.
By the end, you'll understand how browsers find websites, write HTML and CSS, fix real bugs, and download a responsive website that you built yourself.
5 missions · beginner · learn by doing
05HANDS-ON MISSIONS
04CHECKPOINT QUIZZES
03LIVE CODE LABS
01REAL SITE TO KEEP
YOUR ROADMAP
One skill builds the next.
Nothing is locked. Explore freely, but take the missions in order for the best experience.
HOW THIS COURSE WORKS
Learn → Try → Prove.
Learn: understand the idea with short, useful explanations.
Try: control a working simulation or edit real code.
Prove: complete a challenge and checkpoint. The final mission becomes a file you can publish.
MISSION 01 · DISCOVER
The invisible journey of one click.
Type a website address. A fraction of a second later, a page appears. It feels like magic. In reality, your browser has just performed a sequence of very specific jobs. Understanding those jobs will make every other lesson easier.
Big ideaWebsites aren't pictures sent to your screen. Your browser requests files and builds the page from them.
INTERACTIVE LAB 01
LIVE SIMULATIONFollow the request
Move through the journey. Try a successful page, then a missing one.
01DNSFind address
02REQUESTAsk server
03SERVERProcess
04RESPONSESend files
05RENDERDisplay page
NETWORK TRACE
Ready. Press “Next step” to begin.
WHAT'S HAPPENING?
Your browser is ready. Nothing has been requested yet.
0 / 5 stepsMINI GAME · BUILD THE NETWORK ROUTE
Can you reconstruct the journey?
Tap the five actions in the correct order. You have just observed the process — now explain it without being shown the sequence.
Your sequence will appear here…
Who does what?
BrowserRequests resources, reads HTML/CSS/JS and displays the page.
DNSHelps find the server's IP address from a domain name.
ServerReceives the request and sends a response.
HTML / CSS / JSStructure / presentation / behaviour.
Try to predict it.
Switch the response code to 404, reset the simulation and see what changes. The server still responds — it just hasn't found the requested resource.
Deep dive: what's an HTTP status?
HTTP responses carry a status code. 200 usually means success, 404 means the requested resource was not found, and 500 indicates a server-side error. Real requests may also involve redirects, caching and many additional resources.
MISSION 02 · CREATE
HTML gives a page meaning.
A website starts with a document. HTML tells the browser what's a heading, what's navigation, where the main content begins and what links to other places. It isn't just for appearance — structure also helps keyboards, screen readers and search engines.
Big ideaTags describe the job of content. A
<button> is an action. An <a> goes somewhere. Choose the right element, not just the right look.INTERACTIVE LAB 02
LIVE HTML EDITORWrite code. See the result.
Edit the real HTML below. Press Run to rebuild the preview.
Your challenge
Build a semantic page with a main heading, a <main> area, navigation containing a real link, and an explanation of your brand or project.
index.html
HTML EDITOR Ctrl + Enter
LIVE PREVIEW Browser render
Read the code
<header> introduces the site. <nav> groups navigation links. <main> holds the central content. <h1> gives the page its primary heading.
Deep dive: semantic HTML
A generic <div> is useful for grouping layout, but meaningful elements communicate purpose. Use <button> for interactive actions, <a href="..."> for navigation and <label> with form controls.
Build habits that last.
A good first page has a clear heading, useful links, understandable content and sensible document structure. Later you'll make it attractive using CSS.
Learn HTML with MDN ↗MISSION 03 · DESIGN
Style is a system, not decoration.
CSS transforms structure into an experience. But a design that looks beautiful on your laptop and breaks on someone's phone isn't finished. Today you'll control spacing, shape, colour and responsive layout — and see the CSS rules responsible.
Big ideaResponsive design doesn't mean shrinking everything. It means giving content enough room, then changing layout when that room runs out.
INTERACTIVE LAB 03
RESPONSIVE DESIGNThe design workbench
Use real CSS properties to redesign a mini storefront. Test both screen sizes.
DESIGN PREVIEW Desktop · 100%
styles.css · editable
Why your design moves.
display: grid creates a layout. gap creates consistent space. border-radius shapes corners. A media query can change the number of columns on smaller screens.
Deep dive: the box model
Every element occupies a box. The content sits inside padding; the border wraps that; margins separate it from neighbours. With box-sizing: border-box, widths are easier to reason about.
Design constraint
Make something that works at desktop width and about 390 pixels wide. On mobile, cards should stack, text should remain readable and no content should spill sideways.
Responsive design guide ↗MISSION 04 · REPAIR
Real developers get stuck. Then they investigate.
Good debugging isn't guessing random changes. You observe a symptom, form a hypothesis, isolate the cause, make the smallest useful change and test it. Now you'll repair three different problems without being given the answer first.
Big ideaAlways distinguish the symptom from the cause. A button that looks broken may have a CSS selector problem; a link that does nothing may have a misspelled attribute.
INTERACTIVE LAB 04
3 REAL BUGSThe Debugging Room
Pick a fault, study it, repair the code and run the tests.
The dead link
BROKEN SOURCE CODE
PREVIEW See the problem
A method you'll use forever
- Reproduce: observe the bug reliably.
- Inspect: compare actual behaviour with intended behaviour.
- Hypothesise: name a likely cause.
- Change one thing: avoid rewriting everything.
- Retest: confirm the fix and check nearby behaviour.
Developer tools
On a desktop browser, press F12 or open Inspect to see the HTML, applied CSS rules and console errors. The browser is not just where a website runs — it's a debugging instrument.
Deep dive: why tests matter
A fix that looks correct in one screenshot may still fail with different content or screen sizes. Check the behaviour you wanted to repair, then check an adjacent case to catch regressions.
MISSION 05 · SHIP
Your website. Your decisions. Your proof.
Now combine everything. Plan a one-page website for a brand, project or portfolio. Modify the real HTML, CSS and JavaScript, test the responsive layout, and download a working standalone HTML file. This project is yours to keep.
Final deliverableA real responsive site with meaningful content, navigation, styling and at least one useful interaction. No paid tools are required to complete this mission.
FINAL PROJECT WORKSHOP
YOUR PROJECTBuild your launch page
Use the starter or replace it entirely. This is actual editable code.
PROJECT CODE Ctrl + Enter
SANDBOXED LIVE SITE JavaScript enabled
PRE-LAUNCH CHECKLIST
Test like a developer.
Pass the automated checks and tick the four real-world tests first.
PUBLISHING & NEXT STEPS
Put it on the internet.
Download the HTML file, open it locally to double-check it, and upload it as index.html to a static hosting service.
Easy hostingCloudflare Pages direct upload ↗
AlternativeGitHub Pages quickstart ↗
Next lessonForms, real JavaScript behaviour, accessibility, performance and multiple pages.
The export is a self-contained front-end website, not an online shop with payment processing or a database.
COURSE COMPLETED
You've built your first website.
Learning is one thing. Shipping something you made yourself is another. Keep improving it.