Frontend Practical Guide
A reference site for learning correct frontend implementation by actually trying it. Each topic includes live demos and code examples, covering both specification knowledge and practical usage.
What this site is for
Understand specs correctly
Learn HTML, CSS, JavaScript, and WCAG based on official specifications. The goal is to understand why an implementation is correct before writing it.
Learn by trying
Many topics include interactive demos. You can compare passing and failing examples and learn through hands-on exploration.
Build practical judgment
Make better decisions in real projects by checking browser support, accessibility requirements, and implementation trade-offs.
Sections
HTML
242 HTML features
A Baseline-oriented reference for HTML features with support data, examples, and live demos.
CSS
424 CSS features
A practical CSS reference organized by Baseline support, usage, and fallback strategy.
JavaScript
121 JavaScript features
A practical reference for syntax, APIs, and standard library features with interactive demos.
A11y
WCAG 2.2 coverage
Learn WCAG, WAI-ARIA, and related standards through practical explanations and demo-based comparisons.
Design Patterns
21 UI patterns
Implementation patterns for common UI components with HTML, CSS, JavaScript, and accessibility guidance.