Learn to Code, One Sip at a Time.

Select a course to start your journey.

Batch 001 learning modules

Course cards load from BATCH_001/batch001-catalog.json over HTTP; opening the dashboard as a local file falls back to the same list embedded in this page. Tracks tagged creative coding appear in their own row.

Current Roast

Browse All
In Progress

HTML Aroma: The Foundations

45%

Quick Sips (Challenges)

The Div Cup Challenge

Center a element within a container.

Flexbox Steaming

Unlock at level 2.

HTML Aroma: The Foundations

Module 1: The Skeleton

What is HTML?

Think of HTML as the **structural roast** of your website. Without it, your site has no form. It uses "Tags" to tell the browser what is a heading, what is an image, and what is a button. 

<!DOCTYPE html>
<html>
  <head>
    <title>My Coffee Shop</title>
  </head>
  <body>
    <h1>Freshly Brewed Code</h1>
    <p>Start your day with HTML.</p>
  </body>
</html>

The Visual Blueprint

Hover over the pins to see the HTML tags in action.

Best Beans in Town

Order now for free delivery.

2
<h1> Primary Heading
3
<p> Paragraph text
Image Tag
Image Tag
4
<img> Self-closing asset tag
Pro Tip

Always use sematic tags like <header> and <footer> instead of just <div> to help screen readers understand your brew!

Nesting

Tags can go inside tags. It's like putting your espresso (content) inside a cup (container).

Your Tray