How this track grows with you
- Beginner — plain explanations, small steps, forgiving starter code in the playground.
- Intermediate — combine patterns (nav + grid + forms) and debug with DevTools.
- Advanced — open the Go deeper sections; expect interview depth and trade-off questions.
Lessons are labeled by difficulty in the sidebar. Skip ahead only when the quiz on the previous lesson feels easy.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
This track teaches how HTML and CSS cooperate on real pages—from your first line of markup through layouts and patterns used by experienced front-end developers.
Who this is for
- Beginners — never coded a webpage? Start here. Each lesson explains terms before using them.
- Intermediate — you know basics but want confident layouts, forms, and responsive pages.
- Experienced — open Go deeper sections, hard quiz questions, and the dashboard capstone for interview-level practice.
What you will build
- Complete page skeletons with correct metadata and landmarks.
- Real components: navigation, cards, forms, tables, and themed tokens.
- Flexbox and grid layouts that work on phones and large screens.
- Two projects: a profile page and a dashboard shell.
How to study each lesson
- Read at your level—skip Go deeper blocks until you are ready.
- Use the playground; change one thing at a time and run again.
- Complete the Challenge box when present—success criteria tell you when you are done.
- Take the quiz; explanations teach you even when you miss.
- Optional: discuss with the prompts at the bottom of the page (when signed in).
The two-layer mental model
- HTML
- Structure and meaning: headings, links, forms, landmarks. The browser builds a DOM tree from your markup.
- CSS
- Presentation: color, spacing, layout, motion. Rules select DOM nodes and compute final styles.
Rendered miniature page
Structure (HTML) + presentation (CSS)
This box is styled HTML in the lesson—your playground does the same with code you edit.
Important interview questions and answers
- Q: What is the difference between HTML and CSS in one sentence?
A: HTML describes structure and meaning; CSS describes how matched elements are presented. - Q: What should still work if CSS fails to load?
A: Core readable content and working links from semantic HTML. - Q: How should a beginner use this track?
A: Follow lesson order, do challenges, and do not skip quizzes—difficulty ramps toward advanced projects.
Self-check
- What does DOM stand for in your own words?
- Which lesson difficulty will you start with—beginner, intermediate, or advanced sections?