search

Foundations

15 hands-on labs taking you from HTML document structure to a complete, responsive, accessible portfolio page. Every lab uses Docker for consistent verification — no local setup headaches.

hashtag
🐳 Quick Start

# Pull the lab image
docker pull zchencow/innozverse-htmlcss:latest

# Run an interactive session
docker run --rm -it -v /tmp:/workspace zchencow/innozverse-htmlcss:latest bash

# Verify a lab file
docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest \
  node -e "const fs=require('fs'); console.log(fs.readFileSync('/workspace/index.html','utf8').length + ' bytes')"

hashtag
📋 Lab Overview

#
Lab
Key Topics
Time

1

HTML Structure & Semantics

DOCTYPE, html/head/body, semantic elements, attributes

20 min

2

CSS Selectors & Specificity

Type, class, ID, combinators, pseudo-classes, cascade

25 min

3

Box Model & Layout

margin, padding, border, display, box-sizing

25 min

4

Typography & Colors

font-family, text properties, color systems, web fonts

25 min

5

Positioning & Z-index

static, relative, absolute, fixed, sticky, z-index

30 min

hashtag
🧩 Complete Lab Table

#
Lab
Topics
Time

1

HTML Structure & Semantics

DOCTYPE, elements, attributes, semantic HTML5

20 min

2

CSS Selectors & Specificity

Selectors, cascade, specificity calculation

25 min

3

Box Model & Layout

margin, padding, border, display, box-sizing

25 min

4

Typography & Colors

Font properties, text styling, color systems

25 min

5

Positioning & Z-index

static, relative, absolute, fixed, sticky

30 min

6

Lists, Tables & Navigation

ul/ol, table, nav patterns, link states

25 min

7

CSS Flexbox

Flex container, items, alignment, wrapping

35 min

8

CSS Grid

grid-template, areas, auto-placement

35 min

9

Responsive Design

Media queries, mobile-first, fluid typography

35 min

10

Animations & Transitions

Keyframes, transform, easing functions

30 min

11

Forms & Input Styling

Input types, validation states, custom UI

35 min

12

CSS Variables & Theming

Custom properties, dark mode, design tokens

30 min

13

Accessibility & ARIA

Semantic HTML, WCAG, keyboard navigation

35 min

14

CSS Architecture & BEM

BEM methodology, @layer, organization

30 min

15

Capstone Portfolio Page

Full responsive portfolio — all concepts

60 min

Total estimated time: ~6 hours

hashtag
🎯 What You'll Build

By Lab 15, you'll have built:

  • ✅ A complete developer portfolio website

  • ✅ Sticky glassmorphism navigation header

  • ✅ Animated hero section with gradient text

  • ✅ Responsive skill cards grid

  • ✅ Project showcase with hover effects

  • ✅ Accessible contact form with validation

  • ✅ Dark theme with CSS custom properties

  • ✅ Print-friendly stylesheet

hashtag
🔍 Lab Verification Pattern

Every lab follows the same verification pattern:

circle-info

All files go to /tmp/ so Docker can mount them with -v /tmp:/workspace. The verification scripts read the file and check for key patterns — no browser needed for verification!

circle-check

Learning tip: Don't just copy-paste. Type out each code example. The muscle memory of writing CSS properties is part of learning. Then modify it — change colors, sizes, animations — to see what breaks.

hashtag
📖 Prerequisites

  • Basic computer skills (create files, use terminal)

  • A text editor (VS Code, Sublime Text, Notepad++ — any works)

  • Docker installed (for lab verification)

  • A modern browser (Chrome/Firefox/Edge)

No prior programming experience required for Labs 1-6. Labs 7+ assume you've completed the earlier labs or have equivalent knowledge.

PreviousHTML/CSS OverviewNextLab 01: HTML Structure & Semantics

Last updated