beginner 45 minHTML & CSS

Build Your First Web Page

Write real HTML and CSS and see it render live, no setup, no installs.

You will learn to

Structure a semantic HTML document with proper tags
Format text using headings, paragraphs, strong, and emphasis tags
Create ordered and unordered lists
Style elements with CSS colours, margins, padding, and fonts
Understand the Box Model by applying borders and spacing

Before you start

No experience needed, this is a true starting point

Tools needed

The in-browser Code Sandbox (embedded below)

Your workspace

Practise right here. Work through the steps below in this environment.

Open full sandbox

Loading editor...

Preview

Press Run to see your page

Console

console.log output appears here.

Step-by-step

Tick each task as you finish it, your progress saves on this device.

1. Understand the HTML Skeleton
Every web page starts with a skeleton. While our Sandbox hides the `<html>`, `<head>`, and `<body>` tags for simplicity, everything you type here goes into the `<body>`. Let’s start by giving the page a main heading. In the HTML panel, replace the existing text with a `<h1>` tag containing your full name. Press **Run** and watch the preview update.
Done when: The preview shows your name as a large main heading
2. Add a short biography
Below your heading, let's add some context. Write a `<p>` (paragraph) tag that contains two to three sentences about who you are, where you are from, and what you hope to achieve by learning to code on Teki-SL. Use the `<strong>` tag around your career goal to make it bold, and `<em>` around your location to make it italicized.
Done when: A formatted paragraph appears under your heading with bold and italic text
3. List your skills and goals
Let's organise information using lists. First, add an `<h2>` heading titled "My Learning Goals". Below it, create an unordered list (`<ul>`) containing at least three list items (`<li>`). For example, you might list HTML, CSS, and JavaScript. Then, add another `<h2>` titled "Steps to Success" and create an ordered list (`<ol>`) with three numbered steps.
Done when: Both a bulleted list and a numbered list are visible in the preview
4. Introduce CSS Styling
HTML provides the structure, but CSS provides the style. Switch to the CSS panel. Let's change the background color of the entire page and the font family. Target the `body` element and set `background-color: #f4f4f9;` and `font-family: Arial, sans-serif;`.
Done when: The page background changes to a soft gray and the font updates to Arial
5. Style your headings
Next, let's make your name stand out. Target the `h1` element in the CSS panel. Change its text color to a deep blue (like `#1d3557`), align it to the center using `text-align: center;`, and give it a bottom border to separate it from the content: `border-bottom: 2px solid #e63946;`.
Done when: Your name is centered, blue, and has a red line underneath it
6. Apply the Box Model to lists
Let's style your lists so they look like cards. Target the `ul` and `ol` elements. Give them a white background (`background: white;`), some inner spacing (`padding: 20px;`), a subtle shadow (`box-shadow: 0 4px 6px rgba(0,0,0,0.1);`), and rounded corners (`border-radius: 8px;`). Also, add some outer spacing (`margin: 20px auto;`) to push them away from other elements.
Done when: Your lists now look like modern floating cards on the gray background

Finished every step?

Mark the lab complete to record it on this device.

Reflect

If you can answer these in your own words, the lab stuck.

What is the difference between an unordered list (ul) and an ordered list (ol)?
Explain the difference between `padding` and `margin` in CSS based on how your list cards changed.
Why is it important to separate HTML (structure) from CSS (presentation)?