How the Web Works

You have been using the web your whole life — opening links, browsing designs on Behance, checking references on MDN. But have you ever wondered what actually happens the moment you click a link? This module answers that question in plain terms, with no programming experience required.

By the end of this module you will understand what browsers, servers, HTML, CSS, and JavaScript each do — and you will have written your very first styled web card by hand.

What you will learn in this module

Lesson	What you will understand
How the Web Works	Browsers, servers, URLs, and the journey of a web page
HTML, CSS & JS Roles	The three languages and exactly what each one does
Your First Page	Build and edit a real page from scratch

There is nothing to install and nothing to memorise before you start. Every lesson has a live editor so you can see changes happen in real time — just like toggling properties in Figma’s inspect panel, but for code.

Try it now — your first card

The editor below is a complete, working web snippet. Click inside, change the text, and watch the preview update. You are already writing real code.

HTMLCSS

<div class="card"> <h2>Hi, I'm a designer.</h2> <p>And I just wrote my first web card.</p> </div>

Try changing Hi, I'm a designer. to your own name. Try changing #7C3AED to #E11D48 and see the heading turn red.

💡 Code is just text with rules

Every web page is a plain text file. There is no magic compiler, no special hardware. A browser reads the text, follows the rules, and draws the result on screen. If you can type in Figma’s text panel, you can write code.

What is the job of a web browser?

To store your files on the internet To read code files and draw them as a visual page To write HTML automatically To host websites on a server

Which three languages build every web page?

Python, Ruby, and PHP Figma, Sketch, and XD HTML, CSS, and JavaScript Markdown, YAML, and JSON

Submit

Mark as complete