Interactive Mini-Course
Take it at your own pace. No prior coding experience needed — we start from zero.
Before we introduce any jargon: you're going to edit real HTML right now, and see the result change instantly. No setup, nothing to install.
Try changing the text below — replace "Hello" with your own name.
Hello, welcome!
That's it — you just edited HTML! The text between <p> and </p> shows up in the preview. The little labels <p> and </p> are called tags. We'll get to know them in the next module.
A tag is a small label wrapped in angle brackets: <like this>. Tags tell the browser what kind of content something is — "this is a heading", "this is a paragraph", "this is bold text".
/ that ends it. The content lives in the middle, like the gift inside the paper.This is a paragraph.
Notice the pattern: every opening tag <p> has a matching closing tag </p> with a slash. Only the tag name changes — p, h2, strong — everything else follows the same shape.
Below, the content starts as a paragraph. Change p to h2 in both places — the opening and the closing tag. The indicator shows whether your tags match.
Change the p to h2 or strong
Note: Browsers are forgiving and may render even when tags don't match — but the HTML is technically broken. Always change both the opening and closing tag.
<img> (an image) and <br> (a line break) stand alone.
Type the correct tag name in each blank. Remember: the opening and closing tag use the same name.
Drag the fragments into the correct order to build: <strong>Hello</strong>
You don't need to memorize hundreds of tags. About ten cover almost everything Canvas Designer creates. Let's meet them, grouped by what they do.
These shape written content: headings (different sizes), paragraphs, and emphasis.
A paragraph of normal text.
Bold text Italic textWhy h2, h3, h4? They mean "heading level 2, 3, 4". Smaller number = bigger, more important heading. Canvas uses h1 for the page title, so your content should start at h2.
Lists come in two flavors: unordered (bullets) and ordered (numbers). Each item sits inside a <li> ("list item") tag.
Try adding a third item to the list below. Copy an existing <li>...</li> line and paste it in.
Note: When you add a new <li>, don't forget the closing </li>! Browsers will often show the bullet anyway — but the indicator above warns you when a tag is unmatched.
<div> vs <span>: A <div> is a block — it takes up the full width and creates a new line. A <span> is inline — it sits in the middle of a sentence without breaking it.
Drag each tag into the bucket that matches what it does.
Tags can sit inside other tags. This is how complex designs are built — a container holds a heading, a paragraph, a list, all wrapped together as one group.
After this module you can:
See how the <div> wraps everything? On its own, a <div> is invisible — it's just a container. But the moment you give it styling (background, padding, border-radius), it becomes the card you see above — visually grouping the heading, paragraph and list as one unit.
In the editor below, try deleting the <div style="..."> opening line and the </div> closing line. Watch the card disappear — the content becomes plain flowing text. That's exactly what the div was doing for us.
After this module you can:
One more thing: the indentation in the code is just a visual aid for us humans — the browser ignores spaces. What matters is that </div> comes after all the tags nested inside it are closed.
( [ ] ) is correct, ( [ ) ] is wrong.
Drag the lines into the correct order to build a div containing a heading and a paragraph. Remember: outer tag opens first and closes last.
One of these snippets has tags closed in the wrong order. Which one?
So far our tags have just wrapped content. But some tags need extra information: a link needs to know where to go; an image needs to know which file to show.
That extra information lives in attributes — name-value pairs written inside the opening tag.
The pattern is always: name="value" inside the opening tag. Notice the quotes around the value — they're required.
<a> tags)Change the URL in href="..." to any other website. The link in the preview updates — but of course clicking it won't leave this page.
Look at this HTML carefully and answer the question.
What text will the user see on the page?
This is where design lives. The style attribute contains CSS properties — small instructions like "color: blue" or "padding: 20px".
Each property follows the same pattern: property: value; — a colon between them, a semicolon at the end.
This is styled.
Change the color value below to see different results. Try #EC5742 (red), #007041 (green), or orange.
Change my color!
Now let's make a styled box. Try changing the padding number (e.g. 40px) or the border-radius (try 50px for very round corners).
color: #003D4C;background: #f7fafa;padding: 20px;margin: 16px 0;border: 1px solid #d4e3e6;border-radius: 8px;font-size: 1.2em;display: flex; gap: 12px;This is the #1 confusion for beginners. Padding is the space inside an element (between its border and its content). Margin is the space outside an element (pushing neighbors away). Drag the sliders to see both in action.
Memory hook: think of padding as cushioning inside a gift box (protects the content), and margin as breathing room between gift boxes on a shelf.
So far we've used padding: 20px which applies the same value to all four sides. But you can also target each side individually — and Canvas Designer does this all the time.
Big gap above me
The pattern: {property}-{side}. You can add a hyphen and one of top, right, bottom, or left to most spacing and border properties:
You can also pass multiple values to padding or margin to set all sides at once. The order is clockwise from the top:
Try it yourself: in the editor below, experiment with border-top, margin-top, and side-specific padding. Try changing numbers and colors to see what happens.
Notice the turquoise line on top, the extra padding on the left, and the big margin above.
Drag each CSS property onto the description that matches it.
Experiment freely. Try changing values, adding new properties, or even adding new tags. The preview updates instantly.
Change any value above.
Canvas has a strict HTML filter. It quietly removes certain CSS properties and HTML elements when you save a page. Knowing what gets stripped prevents surprises later.
font-weight: bold in a style attribute gets removed. Canvas Designer always uses <strong> tags instead — if you edit the HTML manually, remember this!
Sort each CSS property: does it survive when Canvas saves, or does Canvas remove it?
Time to put it all together. Here's actual HTML exported from Canvas Designer. You now have the vocabulary to read every piece of it — tags, nesting, attributes, inline styles.
HTML tags define structure. CSS styles define appearance.
Look at the code above and answer these three questions.
1. What color is the top accent border?
2. What makes the little "i" icon appear as a circle?
3. Why is "Key Concept" bold?
Every Canvas page, assignment, and discussion uses the same rich text editor. To paste HTML, you need to switch it to HTML view using the </> button in the toolbar.
Before — the normal visual editor:
After clicking </> — you're now in HTML mode, paste here:
</> button in the toolbar — the editor switches to HTML viewTip: If you need to edit later, go back into HTML view with </>. Canvas's visual editor can sometimes reformat complex HTML, so for structural changes always use HTML view.
You now understand HTML tags, nesting, attributes, inline styles, and what Canvas preserves. You can read Canvas Designer output, make small tweaks, and know why <strong> is used instead of font-weight. When you're ready to design, open the Canvas Designer and start building!