Welcome — you’re about to learn how to build real websites in just 2 hours.
Three ways to split 2 hours:
Quick encouragement: mistakes are part of learning. Ship small, iterate, and you'll finish this course with something real to show.
What is website development?
Website development is the process of creating websites — from the visible pages people interact with to the code that makes those pages behave. This course focuses on the front-end: the parts users see and use in their browser.
What is front-end development?
Front-end development builds the user-facing parts of a website: layout, styles, and interactive functionality. The main languages you'll use are:
Short explainer video
Click play to start — video is embedded below and lazy-loads when you open this slide.
Quick quiz — check what you learned
If you have a desktop/laptop, download and install Visual Studio Code. It's the recommended editor for this course.
If you don't have a desktop, use Mimo web or the Mimo app.
On desktop: create a folder named website on your Desktop. Inside, make a file named index.html.
Open VS Code → File → Open Folder → select the website folder. Then open index.html to edit it.
If you're in Mimo web, use the Build > Static website editor — it creates the project for you.
Install these extensions to make development easier:
Note: Mimo users generally get similar features built-in; you don't need these extensions there.
Nice! You've installed/opened your tools, created your website folder and index.html, and (if on desktop) added helpful extensions.
You can now close VS Code or Mimo if you want to take a break. Ready to build your first page? Click Next ▶ to go to Lesson 3.
Open the tool you'll use to write code.
When you see your editor, create a new file called index.html. We’ll type simple lines of HTML there — nothing scary.
HTML stands for HyperText Markup Language.
That's a fancy name for a very simple idea: HTML is the code we use to tell the browser what content should be on the page — headings, paragraphs, images and buttons. Think of HTML like the skeleton or the labels of a page.
Example: <h1> is a big heading, <p> is a paragraph.
<!doctype html>Put this at the very top of your file:
<!doctype html>This tells the browser "this is an HTML page". That's it — just a one-line instruction, no parameters, nothing to worry about.
The <head> holds invisible settings for the page — the title shown in the browser tab and important meta info.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page title</title>
</head>You don't need to memorise every line — just know the head sets up the page and the <title> is what appears in the browser tab.
Everything visible on the page goes inside <body>. Headings, paragraphs, images — all the stuff people see.
<body>
</body>When you open your page in the browser, the content from the body is what you’ll see.
<h1>Hello world!</h1>Inside the <body>, add a big heading:
<!doctype html>
<html lang="en">
<head> ... </head>
<body>
<h1>Hello world!</h1>
</body>
</html>Save the file and you'll be ready to preview it. This is the exact line beginners usually type first — big and friendly.
How to open your page in a browser depending on your tool:
index.html, look to the bottom right of VS Code and click "Live Server" / "Go Live". Your page will open in a browser and update as you save.If you get stuck, just save your file and try opening it in your browser (desktop): right-click the file → "Open with" → your browser.
Copy this exact boilerplate into index.html. Save it. Then follow the next slides which explain each line.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Cat Website</title>
</head>
<body>
<!-- WRITE YOUR CODE BETWEEN THE BODY TAGS -->
</body>
</html>
Note: Add your headings and paragraphs between the <body> and </body> tags — those are the only lines that will show up in the browser.
<!doctype html>This single line tells the browser "this file is HTML5". It's always the very first line. No closing tag, no options — just put it at the top.
<h1>Your heading here</h1>In HTML most things are wrapped in angle brackets: < and >. <h1> is a heading tag. The opening tag is <h1> and the closing tag is </h1> — the slash before the name means "close this tag".
There are six heading levels: <h1> (biggest) down to <h6> (smallest). Use headings for titles and important labels.
<h1>My Cat Website</h1>
<h3>A website for all cat - lovers!</h3>Type the first line between your <body> tags. Then on the next line add the smaller heading with <h3>. Save and preview — you should see the big title and a smaller subtitle.
</h1> Cat app </h1>Choose the correct answer:
</h1>) which is not matched by an opening tag; it also ends with another closing tag.A quick video summary. Click play to watch.
<img> tag?The <img> tag is used to display images on your webpage. Unlike headings or paragraphs, the <img> tag does NOT have a separate closing tag.
It needs two important parts:
1. The tag name: <img>
2. A src attribute that tells the browser where the image is located.
<img> tagHere is the basic structure:
<img src="IMAGE-LINK-HERE" alt="description">The image will then appear exactly where you place this line in the <body> of your HTML file.
Now add the following line anywhere between your <body> and </body> tags:
<img src="https://th.bing.com/th/id/OIP.-IArq9ZxV_nX8RII3YE2mgHaE7?o=7rm=3&rs=1&pid=ImgDetMain&o=7&rm=3" alt="A cat image">That’s it — your Cat App now has its first image! 🎉
The browser will request the URL you give in src. If the URL is correct the image appears. If it is wrong, the browser shows a broken image icon and the alt text.
If you use a remote image (like the example below), make sure the link is public and starts with http or https.
If your page isn’t working, compare it exactly with the code below (copy & paste into index.html and save).
<!doctype html>
<html lang="en">
<head>
<title>My Cat Website</title>
</head>
<body>
<h1>My Cat Website</h1>
<h3>A website for all cat - lovers!</h3>
<img src="https://th.bing.com/th/id/OIP.-IArq9ZxV_nX8RII3YE2mgHaE7?o=7rm=3&rs=1&pid=ImgDetMain&o=7&rm=3" alt="A cat image">
</body>
</html>Tip: make sure your lines are inside the <body> tags and that opening/closing tags match exactly. If it still fails, check for stray characters or missing </html>.
Complete the sentence by clicking two answer blocks in the correct order — first the attribute used to give an image URL, then what images do not have.
"You can specify the url of an image you're using with the _ _ _ attribute. Images have no _ _ _ _ _ _ _ _ _ _."
Tip: click the first correct block (it will fill the first blank), then click the second. If you make a mistake use Reset.
You've officially completed your first full HTML project — AMAZING work!
Awarded to: You 🎖️
For completing:
Chapter 1 — The Absolute Basics