Frontend Beauty
ESC

Type to search the knowledge base.

Frontend engineering, structured for mastery.

A structured knowledge platform for frontend engineers — interviews, fundamentals, system design, and tools. Built like documentation, not a blog.

Start with a roadmapInterview prepOpen playground →
Guides
600+
Interview tracks
8+
Client tools
12
Static-only
100%

Why this platform

Built for engineers who want depth

Premium developer resources share a pattern: clear information architecture, excellent reading experience, and content that respects your time.

Documentation, not a blog

Topic-oriented structure with sidebars, TOCs, and progressive depth — built like MDN and react.dev, not a reverse-chronological feed.

Interview-ready tracks

Separate paths for language fundamentals, DSA, machine coding, system design, and company experiences — not one endless list.

Tools that stay client-side

Playground and developer utilities run entirely in the browser. No account, no backend, no surprise network calls for core features.

Static by design

SSG-only architecture. Host on GitHub Pages or Vercel free tier. Fast first load, boring operations, easy contributions via MDX.

Roadmap

A clear path through frontend

Start from the platform foundations and move toward production systems and interviews.

All roadmaps →
  1. 01HTML & CSS systems
  2. 02JavaScript & TypeScript
  3. 03React & the platform
  4. 04Interview loops

Interview tracks

Prepare by format, not by FOMO

Each track mirrors how real loops are structured.

View all →

Frontend interviews

Prep

Topic guides across HTML, CSS, JS, React, a11y, performance, and security.

DSA for frontend

Coding

Pattern-based problems with JS/TS solutions, complexity, and company tags.

Machine coding

Build

Timed UI builds: todos, carousels, file explorers — with architecture notes.

Frontend system design

Design

Product-scale UI architecture: YouTube, docs, feeds, caching, and tradeoffs.

Guides

Featured reading

High-signal pages to start with.

All articles →

Focus Management

intermediate

Keyboard focus as real UI state — modals, SPAs, menus, and patterns from platform a11y guidance.

accessibility · intermediate

Browser Rendering Pipeline

intermediate

From bytes to pixels — parse, style, layout, paint, composite — and how your JS/CSS kicks each stage.

browser · intermediate

Cascade & Specificity

beginner

How CSS decides the winner — origin, importance, layers, specificity, and order — in human terms.

css · beginner

Two Sum

beginner

The classic warm-up: find two indices that add to a target — brute force, hash map, and the follow-ups interviewers love.

dsa · beginner

Semantic HTML

beginner

Pick elements for meaning, not looks — landmarks, headings, forms, media, and how semantics feed a11y and SEO.

html · beginner

JavaScript Interview Guide

intermediate

A map of what strong FE interviews probe — language, async, DOM, performance — with practice prompts, not a 200-question dump.

interview · intermediate

Tools

Developer utilities

All tools run locally in your browser.

View all →

JSON Formatter

Format, validate, and minify JSON in the browser.

Regex Tester

Test patterns with live match highlighting.

Color Tools

Picker, contrast-aware hex/rgb/hsl conversion.

JWT Decoder

Inspect header and payload without sending tokens anywhere.

Playground

Try ideas instantly

HTML, CSS, and JavaScript with live preview. Shareable via URL. No signup.

Open playground →
playground · browser-only
<div class="card">Hello</div>
<style>
  .card { padding: 1rem; }
</style>
<script>
  console.log('ready')
</script>