Free 2-Hour Web Dev Course — Chapter 1 (Fixed)

Lesson 1 — Building a simple portfolio

This lesson walks you through creating a tiny portfolio page. First — open the editor you'll use (VS Code, Mimo web, or any editor). Create a folder and an index.html file inside it. Ready? Let's go.

1) Minimal boilerplate — copy & paste

Copy the exact code below into your index.html. It is intentionally minimal.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Portfolio</title>
  </head>
  <body>
    <!-- Start typing below this line -->

  </body>
</html>

<h1> — Add your main title

Add this line between the <body> tags:

<h1>My Portfolio</h1>

This is the biggest heading. It's used for your page title. Put your name or site title here.

<p> — A short description

Add a short line describing you — for example:

<p>Beginner Website Developer</p>

Paragraph tags hold sentences and small blocks of text.

<br> — Line break (detailed)

<br> inserts a line break (new line) inside text. It has no closing tag. Example:

<p>I love coding.<br>I also learn fast.</p>

Use it sparingly — paragraphs are usually better. But <br> is handy for addresses, poems, or tiny spacing inside a paragraph.

<h2> — Section heading "Skills"

Add a secondary heading for skills:

<h2>Skills:</h2>

Headings break the page into readable sections. Use them to label parts of your portfolio.

<ul> <li> — Lists

To show skills use an unordered list:

<ul>
  <li>Coding</li>
  <li>Fast learner</li>
</ul>

The <ul> container holds list items (<li>). Each <li> is a bullet point.

Quick gap-fill

Fill the blank: The tag to create a bullet item is _____.

Mini quiz — one question

Which tag is used for the biggest heading?

Nice — Lesson 1 done

You built a tiny portfolio page: title, description, line break, section heading and a skills list. Move to Lesson 2 for deeper tag work.

Go to Lesson 2 → Useful HTML tags

<a href> — links (deep dive)

The anchor tag <a href="URL">...</a> creates a link. Clicking it navigates the user to the URL. Example:

<a href="https://probablybored.net">Go to probablybored.net</a>

target="_blank" opens the link in a new tab or window. Use it when sending users to an external site. Example:

<a href="https://probablybored.net" target="_blank" rel="noopener noreferrer">Open site in new tab</a>

Important: add rel="noopener noreferrer" for security when using target="_blank".

<button> — clickable controls

A button is interactive. It's used to trigger actions (form submission, JS functions, etc.). Example:

<button>Click me</button>

Buttons inside anchors become clickable links when wrapped by an <a> — that's how we'll build the final task.

<strong> — strong importance

<strong> marks important text. Browsers render it bold by default. Use it to highlight meaningfully important words.

<p>I am a <strong>reliable</strong> worker.</p>

<em> — emphasis (italics)

<em> marks stressed/emphasised text. Browsers render it italic by default. Use it for emphasis or slight stress.

<p>This is <em>really</em> important.</p>

Gap fill — target="_blank"

Complete: To open a link in a new tab use the attribute _____.

Quick quiz — which tag makes text bold?

Final task — build a linked button (must use target="_blank")

Create an anchor that links to https://probablybored.net, opens in a new tab (target="_blank"), and contains a button with the text Click here. Example result (DON'T copy — code here is for demonstration only):

<a href="https://probablybored.net" target="_blank" rel="noopener noreferrer">
  <button>Click here</button>
</a>

Type your code below. When you're ready press "Check" — the checker will confirm the anchor, the button text, and that target="_blank" is present.

Nice — Lesson 2 complete

You learned links with target="_blank", buttons, and inline emphasis tags. Go back to earlier lessons or continue through the course.

Build a Linktree-style page

In this lesson you'll build a simple Linktree-style page step-by-step. For each step you'll load starter code into the editor panel, edit it (replace links with your socials), and preview the result instantly. We'll guide you — just follow the "Load step" buttons and press Run.

Step 1 — basic structure & header

We'll create the page container and a profile header. Click Load step 1 to put this starter into the editor, then press Run to preview.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Linktree</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <div class="linktree">
      <img src="https://placekitten.com/200/200" alt="Your avatar" style="width:120px;border-radius:999px;">
      <h1>Your Name</h1>
      <p>Short bio or tagline</p>
    </div>
  </body>
</html>

Editor & Preview — code live

Edit the HTML below. Replace the image URL with your profile image, and replace the links in later steps with your social links. When you're ready click Run to update the preview.

Tip: replace the image URL with your avatar, and change the <h1> and <p> text to your name and short bio.

Step 2 — add links (socials)

Now add 3 link buttons. Click Load step 2 to load code that includes three example links. Replace each href with your own socials (Twitter, Instagram, YouTube, Link to resume, etc.).

<div class="linktree">
  <img src="https://placekitten.com/200/200" alt="Your avatar" style="width:120px;border-radius:999px;">
  <h1>Your Name</h1>
  <p>Short bio or tagline</p>

  <a class="link" href="https://twitter.com/yourhandle" target="_blank" rel="noopener">Twitter</a>
  <a class="link" href="https://instagram.com/yourhandle" target="_blank" rel="noopener">Instagram</a>
  <a class="link" href="https://youtube.com/yourchannel" target="_blank" rel="noopener">YouTube</a>
</div>

Step 3 — add small avatar images (optional)

You can show small favicons or images next to links. Use <img> inside the anchor or use background-image in CSS. Click Load step 3 to see an example.

<a class="link" href="https://twitter.com/yourhandle" target="_blank" rel="noopener">
  <img src="https://placehold.co/24" alt="t" style="vertical-align:middle;border-radius:6px;margin-right:8px"> Twitter
</a>

Nice — Linktree built

Great job — you've coded a Linktree-style page. Make sure to replace example URLs and image links with your real socials and avatar. When you're happy, copy the final HTML into an index.html file and publish to GitHub Pages, Netlify, or Vercel.