📱 For the best experience, please use a laptop or desktop computer.

Lesson 1 — HTML Basics

Today you'll learn the essential building blocks of every website.

Essential HTML Tags

These are the main tags you’ll use in your first webpages. Each one creates something you can see on the screen.

<h1> … <h6> — titles and headings
<p> — a paragraph of text
<img> — an image (uses src, alt, width)
<a> — a link to another page
<button> — a clickable button
<ul>, <li> — bullet list and list items
<br> — line break (new line)
<hr> — horizontal line (divider)

Useful attributes give the browser extra information, like where an image is located or where a link should go.

src="" — image file path
alt="" — text description of an image
width="" — image size (e.g., 200 or 200px)
href="" — link destination

Want the full explanation with examples and results?
→ Open the HTML Reference Page

HTML-Only Demo

This is the simple, pure HTML version of the Hero Card we built in class.

Styled Demo (HTML + CSS)

Here’s how the exact same HTML transforms once we add CSS.

Here’s the HTML Code to Build This!

⬇ Download Image

Copy this into VSCode or CodePen to create the exact same Hero Card.

      <img width="200" src="kael-arden.png" alt="Hero">

      <h1>Kael Arden</h1>
      <h3>Shadow Division Operative</h3>

      <hr>

      <p>
        Silent infiltration specialist from the northern districts.<br>
        Moves unseen. Strikes without a trace.
      </p>

      <p>
        <a href="https://rbscode.com/Student-Portal/kael-dossier.html">
          ➤➤➤ Learn More
        </a>
      </p>

      <p>Core Stats:</p>

      <ul>
        <li>Awareness: 92</li>
        <li>Stealth: 97</li>
        <li>Tech Skill: 89</li>
      </ul>

      <a href="https://rbscode.com/Student-Portal/choose-kael.html">
        <button>Choose This Hero</button>
      </a>

This is clean, simple, beginner-friendly HTML — no styling yet. Next lesson we’ll add colours, layout tricks, and beautiful design!

Try It Yourself!

Great job completing Lesson 1 🎉 Now it’s time to practise and create your own Hero Card!

Choose a hero image
Add headings and text
Use lists for stats
Add your own button

Click below to begin Activity 1:

→ Go to Activity 1

Resources

Helpful tools and downloads for this lesson:

→ Open Resources Page