HTML5 + CSS3 Masterclass

1. Semantic Structure

header
main
section
article
footer
<header></header>
<nav></nav>
<main>
  <section>
    <article></article>
  </section>
  <aside></aside>
</main>
<footer></footer>

2. Forms Deep Dive

Try submitting empty/invalid to see native validation. Toggle novalidate to disable.

<input type="email" required>
<input type="tel" pattern="\d{3}-\d{4}">
<input type="range"> <output></output>
<form novalidate> … </form>

3. Multimedia

Audio (WAV data URI)

Video + WebVTT (data URI track)

Picture + srcset (inline SVG)

Responsive picture demo

4. Canvas API – Drawing Pad

const ctx = canvas.getContext('2d');
ctx.lineCap = 'round';
// pointerdown → beginPath
// pointermove → lineTo + stroke

5. Inline SVG – Gradient Circle

SVG 
<svg>
  <defs><linearGradient id="grad">...</linearGradient></defs>
  <circle fill="url(#grad)" />
</svg>

6. Selectors Playground

Matches: 0

  • Item A
  • Item B
  • Item C

Paragraph with data-test

Another span.item in paragraph

document.querySelectorAll(yourSelector)

7. Box Model Visualizer

Content

Margin Collapse Demo

Box A margin-bottom: 40px
Box B margin-top: 40px (collapses to 40px gap, not 80px)

8. Flexbox Lab

1
2
3
.container{
  display:flex;
  flex-direction: row;
  justify-content:center;
  align-items:center;
  gap:12px;
}

9. Grid Lab

1
2
3
4
5
6

Auto-fit Example

A
B
C
D
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

10. CSS Variables Theming

clamp() demo: resize window → font scales between 1rem and 2rem

calc() demo: width = calc(100% - 40px)

16 / 9 aspect-ratio
:root{ --accent:#6ea8fe; --accent-2:#a78bfa; }
.box{ background:var(--accent); width:calc(100% - 40px); }
.title{ font-size:clamp(1rem, 2vw + .5rem, 2rem); }
.media{ aspect-ratio:16/9; }

11. Motion

transition: transform .25s ease;
transform: rotate(20deg) scale(1.2);
animation: bounce .8s infinite;

12. Advanced CSS

Clip-path Gallery

Backdrop-filter Glass

Glassmorphism card with backdrop-filter: blur(10px)

Container Query (resize me)

Panel A
Panel B

Drag the right edge. Layout switches at 420px container width.

:has() Validation Demo

Form border turns red when child input is invalid.

Scroll Snap Carousel

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Progress bar at top uses CSS Scroll-driven Animations with JS fallback.

13. Responsive Design

Viewport width: – px

Card 1
Card 2
Card 3
Card 4
Card 5
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }

14. Accessibility

Focus-visible

Link

ARIA Live Region

Prefers Reduced Motion

Spinner stops animating if you enable “Reduce motion” in OS settings.

15. HTML5 APIs + Todo Mini-Project

localStorage Note

sessionStorage Counter

Views this session: 0

Drag & Drop Reorder

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Geolocation

Notifications

Details / Summary

What is this?

Native accordion without JavaScript.

Dialog

Native <dialog>

Press Esc or click Close.

Popover API

Popover

This uses the Popover API. No JS needed.

Todo List Mini-Project (persisted)

    // localStorage CRUD
// :has() styles completed items
li:has(input:checked) { text-decoration: line-through; }