You Can Already Do This
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.
What Is a Tag?
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.Three examples — look at the pattern
This is a paragraph.
This is a heading
This is boldNotice 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.
Try it yourself
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.
Complete the Tags
Type the correct tag name in each blank. Remember: the opening and closing tag use the same name.
<>Read this carefully.</>
<>Important!</>
Build the Tag — Put the Pieces in Order
Drag the fragments into the correct order to build: <strong>Hello</strong>
The Essential Tags
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.
Text tags
These shape written content: headings (different sizes), paragraphs, and emphasis.
Main Section Title
Subsection Title
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
Lists come in two flavors: unordered (bullets) and ordered (numbers). Each item sits inside a <li> ("list item") tag.
- Bullet one
- Bullet two
- First step
- Second step
Try adding a third item to the list below. Copy an existing <li>...</li> line and paste it in.
- Read the guide
- Open the designer
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.
Links, images & containers
<a> and <img>: An <a> tag turns its content into a clickable link — the href attribute (more on attributes in Module 4) tells the browser where to go. An <img> tag shows an image — it's self-closing (no </img>) and uses src to point at the image file.
<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.
Sort the Tags into Categories
Drag each tag into the bucket that matches what it does.
Nesting — Tags Inside Tags
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.
Learning Outcomes
After this module you can:
- Explain the concept
- Apply it in practice
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.
Try it: remove the div
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.
Learning Outcomes
After this module you can:
- Explain the concept
- Apply it in practice
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.
Arrange the Nested Tags
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.
Spot the Nesting Error
One of these snippets has tags closed in the wrong order. Which one?
Attributes — Extra Info on Tags
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.
Common attributes
<a> tags)Try changing the link destination
Change the URL in href="..." to any other website. Notice the extra target="_blank" attribute — it tells the browser to open the link in a new tab. Always add it to external links in Canvas, so your learners stay on the Canvas page while opening the resource in a separate tab.
Read the Tag
Look at this HTML carefully and answer the question.
What text will the user see on the page?
Inline Styles — Making Things Look Good
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.
Info Box
This is styled.
Try one property at a time
Change the color value below to see different results. Try #EC5742 (red), #007041 (green), or orange.
Change my color!
Add padding and a background
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).
The properties you'll see most
color: #003D4C;background: #f7fafa;padding: 20px;margin: 16px 0;border: 1px solid #d4e3e6;border-radius: 8px;font-size: 1.2em;display: flex; gap: 12px;Padding vs margin — what's the difference?
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.
element
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.
Where does border fit in?
You've seen padding (inside space) and margin (outside space). The border is the visible line that sits between them — it's what actually makes padding and margin visible. Think of the full box model as four nested layers: margin → border → padding → content.
(text, image, whatever)
Without a border, padding and margin both look like empty space — you can't tell where one ends and the other begins. Add a border, and suddenly the whole structure becomes clear:
Padding is inside it. Margin is outside it.
The light orange strip above is the margin space (it's empty — pushing neighbours away).
Targeting one side at a time
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:
Shorthand: all four sides in one line
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.
Wrapping text around an image — float + padding
When you add an image inside a block of text, by default it sits on its own line. If you want the text to flow around the image, use float: right or float: left. This is exactly what Canvas's built-in image-align buttons (Align right / Align left in the rich-text editor) do behind the scenes.
Canvas gotcha: when you use Canvas's built-in Align right on an image, Canvas sets float: right but no padding — so the text jams right up against the image edge. The fix is to add padding-left to the image yourself (or use Canvas Designer's Image and text element, which already bakes it in).
The text wraps around the floated image — but with no padding on the image, the words press right up against its edge. Ugly and hard to read.
The text wraps around the floated image, but now padding-left: 14px keeps a clean gap between the words and the image. Much more readable.
The rule: the padding goes on the opposite side of the float. float: right → padding-left. float: left → padding-right. That's the side where the text meets the image.
One more thing: the parent container needs overflow: auto (or overflow: hidden), otherwise a tall floated image can stick out below the container. Try deleting it from the live example below to see what happens.
Try changing float: right to float: left (and swap padding-left for padding-right). Or bump the padding up to 32px and watch the gap grow.
Match Each Property to What It Does
Drag each CSS property onto the description that matches it.
Your Styling Playground
Experiment freely. Try changing values, adding new properties, or even adding new tags. The preview updates instantly.
Hello, Canvas!
Change any value above.
Canvas Rules — What Survives
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!
Survives Canvas
- color, background
- padding, margin
- border, border-radius
- font-size, line-height
- display: flex / grid
- text-align, text-decoration
- <strong>, <em>
- <details> / <summary>
Stripped by Canvas
- font-weight (use <strong>)
- text-transform
- letter-spacing
- box-shadow
- opacity (use rgba)
- transition, transform
- <script>, <style>
- <button>, <form>
Canvas or Stripped?
Sort each CSS property: does it survive when Canvas saves, or does Canvas remove it?
Reading Real Designer Output
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.
Key Concept
HTML tags define structure. CSS styles define appearance.
Scavenger Hunt
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?
So — where do I paste HTML into Canvas?
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:
- Open a Canvas page in edit mode
- Click the
</>button in the toolbar — the editor switches to HTML view - Paste your HTML
- Click Save. Your designed page appears instantly.
Tip: 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.
Grid & Responsive Layout
Module 5's float pattern is great for text wrapping around an image. But what if you want two completely separate columns side-by-side — say, a text block next to a screenshot, both the same height? That's a job for CSS grid.
This module is optional and a bit more technical. You don't need it for most Canvas pages, but if you ever think "I want a two-column layout", grid is the answer.
Grid in one minute
Grid works like a table, but without the <table> tag. You put display: grid on a container, then tell it how many columns you want with grid-template-columns. Each direct child of the container becomes a cell.
That 1fr 1fr means "two columns, each one fraction of the available width". fr is a grid-specific unit that reads "fraction". 1fr 2fr = one column takes 1/3, the next takes 2/3. 2fr 1fr 1fr = three columns with a 2:1:1 ratio.
Common column ratios
These are the ratios Canvas Designer's Grid containers use under the hood. You can recreate them by hand too — just paste the right grid-template-columns value.
How Canvas Designer uses grid
In the palette, the Rutenett / Grid elements (▤, ▥, ▦, etc.) are each one of these ratios wrapped in a container. When you drop one into your page, you can drag other elements into each column. The exported HTML uses display: grid + grid-template-columns — exactly what we just wrote by hand. If you peek at the HTML (Module 7), you'll see the same pattern.
When to use a Grid container vs the Image + text element: pick Bilde og tekst (float) when you want text to flow around an image — the text keeps going under the image. Pick a Grid container when you want two truly separate columns that don't wrap around each other — for example, a long text on the left and a pinned screenshot on the right.
Responsive layout — without media queries
Here's the coolest part. You might expect a two-column layout to look terrible on a phone — and often it does. But there's a pattern that fixes this automatically, without you writing a single @media query (which Canvas strips anyway).
Shrinks the browser — these cards will rearrange themselves.
No media query — the grid figures it out.
Try resizing this window.
repeat(auto-fit, minmax(280px, 1fr)) reads: "pack in as many columns as you can fit, where each column is at least 280px wide but can grow to fill the space". On a wide screen you get three columns; on a tablet, two; on a phone, one. All automatic.
The magic number is the minimum width. Pick a value that represents the narrowest each card should be before wrapping to a new row. 280px is a good default for cards with heading + paragraph. For image-heavy cards, try 240px. For dense info boxes, 320px.
The flex alternative (also responsive)
For a ratio-preserving responsive layout (e.g. text-wide-ish + image-narrow), flex works too:
flex: 2 1 300px decodes as: grow=2 (this column takes twice as much extra space as its sibling), shrink=1 (it can shrink if needed), basis=300px (below that, it wraps to a new line). Combine two children — one with grow=2 and one with grow=1 — and you get a 2:1 ratio that degrades gracefully on mobile.
Canvas compatibility note
Canvas preserves grid and flex — all the properties we've used in this module (display: grid, grid-template-columns, gap, display: flex, flex-wrap, flex) survive the sanitizer. But media queries don't — Canvas strips <style> tags and @media rules entirely. That's why the auto-fit + minmax pattern and flex-wrap + flex-basis are so valuable: they achieve responsive layouts through inline style alone.
Match each grid-template-columns to its layout
Drag each grid-template-columns value onto the layout it produces.
1fr 1fr2fr 1fr1fr 1fr 1frrepeat(auto-fit, minmax(280px, 1fr))You made it through!
You now understand HTML tags, nesting, attributes, inline styles, float, grid, responsive layouts, 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!