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. Browser support, code examples, and live demos for each feature.
- Baseline
- 114 demos
-
CSS
424 CSS features
A Baseline-oriented reference for CSS features. Browser support, real-world examples, and fallback strategies for each feature.
- Baseline
- Live demos
-
JavaScript
121 JavaScript features
A Baseline-oriented reference for JavaScript features. Learn ES2015+ syntax, APIs, and standard library through interactive demos.
- Baseline
- 85 demos
-
A11y
Full WCAG 2.2 coverage
Complete coverage of WCAG 2.2 success criteria, WAI-ARIA 1.2, and ATAG 2.0. Pass/fail comparison demos let you experience accessibility hands-on.
- WCAG 2.2
- 70+ demos
- WAI-ARIA 1.2
-
Design Patterns
21 UI patterns
Implementation guides for common UI patterns — accordions, modals, tabs, and more. Accessible live demos paired with HTML, CSS, and JavaScript code examples.
- Live demos
- A11y ready
-
Security
OWASP-based security guide
Web security essentials for frontend developers — CSP, XSS, CORS, and more. OWASP-based explanations with Baseline browser support data and implementation patterns.
- Baseline
- OWASP
- Playground
-
Web Concepts
Web Concepts Guide
Accurately organized web concepts — Web Components, SPA, SSR/SSG, and more. Based on MDN and W3C specs, with security considerations included.
- MDN-based
- Security notes
Who this site is for
-
Developers who want to adopt new HTML/CSS/JavaScript features safely
Use Baseline status to judge browser support at a glance. Fallback strategies are included.
-
Teams starting out on accessibility
Learn WCAG success criteria one by one through hands-on demos. See what fails, and how to fix it.
-
Learners strengthening their frontend fundamentals
Accurate, specification-based information presented in a structured way.
-
Lead engineers who need review criteria
Use per-feature caveats and accessibility checkpoints as a reference during code review.