Interactive Lab • Single File

Learn HTML5 + CSS3 by playing with live demos

Modern dark UI, neon accents, glassmorphism. Each section explains the concept in plain English, shows a live, editable demo on the left, and the essential code on the right. Works fully offline.

No libraries Copy-paste ready Responsive Vanilla JS

How to use

Scroll to a section → read the 2-line why → tweak the live demo → copy the code. Use ⌘/Ctrl+K to jump nav (browser find).

1. HTML5 Semantic Essentials

Use meaningful tags so browsers, screen readers, and search engines understand your page structure. Always start with doctype, lang, and viewport.

header

nav

article section

aside

footer

Why: semantics improve accessibility, SEO, and give you clean CSS hooks without extra divs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Semantic Page</title>
</head>
<body>
  <header>Site header</header>
  <nav>Primary navigation</nav>
  <main>
    <article>
      <h1>Article title</h1>
      <section>Content section</section>
    </article>
    <aside>Sidebar</aside>
  </main>
  <footer>© 2025</footer>
</body>
</html>

2. Forms & New Input Types

HTML5 inputs validate in the browser. Use :valid/:invalid for instant feedback—no JS needed.

<form>
  <input type="email" required>
  <input type="tel" pattern="[0-9]{10}">
  <input type="url">
  <input type="date">
  <input type="time">
  <input type="color">
  <input type="range" min="0" max="100">
  <input list="browsers">
  <datalist id="browsers">...</datalist>
</form>

/* Instant validation styling */
input:valid { border-color: #22c55e; }
input:invalid { border-color: #ef4444; }

3. Media (Audio, Video, Responsive Images)

Native elements play everywhere. <picture> serves the right image size for the viewport.

Audio (silent demo)

Responsive demo — Resize window to swap sources

<!-- Video -->
<video controls poster="poster.jpg" width="100%">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Audio -->
<audio controls src="audio.mp3"></audio>

<!-- Responsive images -->
<picture>
  <source media="(min-width:800px)" srcset="large.jpg">
  <source media="(min-width:500px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

<figure>
  <img src="..." alt="">
  <figcaption>Caption text</figcaption>
</figure>

4. Canvas & SVG

Canvas is for pixels (draw with JS). SVG is for vectors (style with CSS). Both work offline.

Color Size

<canvas id="pad" width="800" height="300"></canvas>
<script>
const ctx = pad.getContext('2d');
let drawing = false;
pad.onpointerdown = e => { drawing = true; ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); };
pad.onpointermove = e => { if(!drawing) return; ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); };
addEventListener('pointerup', () => drawing = false);
</script>

<!-- SVG morph on hover -->
<svg viewBox="0 0 100 100">
  <rect x="15" y="15" width="70" height="70" rx="12" class="morph"/>
</svg>
<style>.morph{transition:.4s} svg:hover .morph{rx:35;transform:rotate(45deg)}</style>

5. Web APIs: Storage & Drag-Drop

localStorage persists across reloads. Drag-and-drop lets users reorder without libraries.

Autosave note (localStorage)

Saved: never

Drag to reorder

HTML5
CSS3
JavaScript
Accessibility
Performance

// localStorage autosave
note.value = localStorage.getItem('note') || '';
note.oninput = () => localStorage.setItem('note', note.value);

// Drag & Drop reorder
let dragEl;
list.addEventListener('dragstart', e => dragEl = e.target);
list.addEventListener('dragover', e => {
  e.preventDefault();
  const after = [...list.children].find(li =>
    e.clientY < li.getBoundingClientRect().top + li.offsetHeight/2
  );
  list.insertBefore(dragEl, after);
});

6. CSS3 Core: Variables, calc(), Selectors

Variables make theming trivial. Modern selectors reduce extra classes.

Hue Spacing Radius

Card A

Card B

Card C

attribute selector [data-type="primary"]

li:nth-child(odd)
even
odd

:is() groups

zero extra specificity with :where()

This paragraph is styled via :where(.prose) p

Toggle :has() parent style

:root{
  --hue: 260;
  --spacing: 12px;
  --radius: 16px;
}
.card{
  padding: calc(var(--spacing) * 2);
  border-radius: var(--radius);
  background: hsl(var(--hue) 70% 50% / .15);
}

/* Advanced selectors */
[data-type="primary"]{ font-weight:600 }
li:nth-child(odd){ opacity:.9 }
:is(h2,h3) > a{ text-decoration:none }
:where(.prose) p{ line-height:1.7 } /* zero specificity */
.card:has(input:checked){ outline:2px solid var(--accent) }

7. Layout Lab: Flexbox

One-dimensional layout. Control direction, alignment, and gap. Perfect for navs and rows.

gap

.flex{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

8. Layout Lab: Grid

Two-dimensional layout. Define columns, rows, and areas. Build complex UIs with minimal code.

Cols Rows Gap

1 span 2

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 12px;
}
/* grid-template-areas example */
.layout{
  grid-template-areas:
    "hd hd hd"
    "sb main main"
    "ft ft ft";
}

9. Transitions, Transforms, Animations

Smooth motion = transform + opacity + cubic-bezier. Animate with keyframes, control with JS.

hover me
scale/rotate

hover me

speed 1.2s

x1 y1 x2 y2

cubic-bezier visual → applied to animation

/* transitions */
.card{ transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.card:hover{ transform: translateY(-4px) scale(1.02) rotate(-1deg); }

/* keyframes */
@keyframes bounce{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-30px) }
}
.animated{ animation: bounce 1.2s infinite; }

10. Responsive & Modern CSS

Media queries adapt to viewport. Container queries adapt to parent. Add polish with clip-path, filters, blend modes.

Resize window

clip-path

backdrop-filter

Container queries

Resize me →

prefers-color-scheme

/* Media queries */
@media (max-width: 900px){ .box{ background:#7c3aed } }
@media (max-width: 600px){ .box{ background:#06b6d4 } }

/* Modern CSS */
.clip{ clip-path: polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%) }
.filter{ filter: blur(2px) grayscale(.5) }
.blend{ mix-blend-mode: screen }
.frost{ backdrop-filter: blur(12px) saturate(1.5) }

/* Container query */
@container (min-width: 400px){ .inner{ display:grid; grid-template-columns:1fr 1fr } }

/* Prefers color scheme */
@media (prefers-color-scheme: light){ :root{ --bg:#fff } }