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.
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 heading2. 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 text3. 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 preview4. 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 Arial5. 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 it6. 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)?