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> — What is a link? (super simple)

A link (anchor) lets people move from one page to another. It's like pointing to another page and saying "Click me!"

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

The href is the address (URL) — where the link goes.

Link text — what should you write?

The words between <a>...</a> are the clickable words. Keep them clear: "Click here" is fine, but better is "Visit my site".

<a href="https://probablybored.net">Visit my portfolio</a>

Open in same tab vs new tab (very simple)

By default a link opens in the same tab. If you want it to open in a new tab (so your page stays open), use target="_blank".

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

Also add rel="noopener noreferrer" for security when using target="_blank" (this is standard and safe).

<button> — What is a button? (super simple)

A button is something people can click to do things. On a real site it might submit a form or run some code.

<button>Click me</button>

If you put a button inside an anchor (<a>), clicking it will go to that link. That's handy for beginners.

<strong> — make text important (bold)

Use <strong> when something is important. Browsers make it bold by default.

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

This helps screen readers and makes meaning clear — it's not just visual styling.

<em> — emphasise text (italics)

Use <em> when you want to show emphasis — it's usually shown as italics.

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

Good for small emphasis: names, single words, or stress in a sentence.

Short exercises — try small changes

Try editing the example: change the link text, add target="_blank", wrap a button inside an anchor. Use your editor, save and preview.


<a href="https://probablybored.net" target="_blank" rel="noopener noreferrer">Visit ProbablyBored</a>


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

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 shown below — don't just copy it, try to type it yourself first.

<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, target="_blank", and button text. Press "Run" to preview.

Playground — code anything (no boilerplate needed)

This is your sandbox. You don't need the full HTML boilerplate here — just drop the tags you want to try. For example: <h1>Test</h1>, or an anchor + button. Press Run to see the result below.

Tip: Because this is a tiny preview area you do not need to include <!doctype html> or <html> tags — just type the HTML you want to try.

Nice — Lesson 2 complete

You learned links with target="_blank", buttons, and emphasis tags. Use the Playground to practice — try making a button that links to your favourite site and opens in a new tab.

Lesson 3 — Page structure & semantics

(Placeholder) We'll add detailed slides here next — semantic tags like <header>, <main>, <section>, <footer> and why they matter for accessibility & SEO. Coming soon.

Lesson 4 — Divs, classes & IDs

(Placeholder) We'll explain structure, containers, class vs id, and basic styling hooks. Coming soon.

Lesson 5 — Forms & inputs

(Placeholder) We'll cover forms, inputs, labels, and accessibility best practices. Coming soon.