Design Inspiration
An internationally recognized web design awards platform — its winning work is worth browsing daily to train your eye
The Glasshouse · Frontend Nav
Where good sites grow toward the light
Hand-picked front-end websites organized by purpose, each with bilingual notes and a structured detail page. Stroll around, and taste grows on you.
Category
Tag
Design Inspiration
Design Inspiration
A library of ~30 fully-written design style prompts — pick a style, copy the prompt, feed it to your AI
Design Inspiration
A global community of designers' work — the go-to place for UI and visual inspiration
Design Inspiration
A gallery of hand-picked landing page designs — visit before building your next marketing page
Design Inspiration
A library of real app UI screenshots — a practical mobile design reference (iOS-first)
Design Inspiration
A daily curation of exceptional design across a dozen categories — web, branding, motion, 3D and more
Design Inspiration
A long-running showcase of fine websites, filterable by industry, style and theme
Motion & Interaction
Motion & Interaction
A front-end playground — a dense hub of motion snippets and experiments
Motion & Interaction
A long-standing source of creative web interaction tutorials with high-quality demos
Motion & Interaction
A visual cheatsheet of easing functions — a base tool for tuning motion feel (Chinese available)
Motion & Interaction
The industry-standard JavaScript animation library; its official showcase doubles as a motion inspiration gallery
Motion & Interaction
A Lottie animation library and toolset — a primary source for ready-made lightweight vector motion
Motion & Interaction
A state-driven interactive animation platform for characters and micro-interactions
Learning
Learning
The classic CSS blog — home of the widely cited Flexbox and Grid guides
Learning
A free coding education platform — learn by building projects, with free certifications along each track
Learning
Real design challenges to sharpen your front-end skills — well suited for portfolio-worthy practice
Learning
The Modern JavaScript Tutorial — a systematic free course from basics to advanced (Chinese translation available)
Learning
A boutique front-end blog where CSS and animation tutorials are deep and delightful
Learning
A Chinese developer community — a major source of front-end articles and China's tech scene
Learning
A modern guide to front-end design patterns and rendering strategies
Learning
Google's guidance for modern web development — the home of performance and UX courses like Core Web Vitals
Docs & Tools
Docs & Tools
Browser support tables — check before you code and save yourself rework
Docs & Tools
A color palette generator — press one key, get a full scheme
Docs & Tools
A free web font library for both CJK and Latin typefaces
Docs & Tools
An open-source icon library with a clean line style — well suited for project icons
Docs & Tools
The authoritative documentation for Web technology — start here for HTML/CSS/JS references (Chinese available)
Docs & Tools
The official React docs — high-quality tutorials and practical guides (Chinese translation available)
Docs & Tools
An online regex debugger that explains matches in real time
Docs & Tools
An open-source React component library that brings ink-wash aesthetics to interfaces
Docs & Tools
The utility-first CSS framework — its docs are a design-system textbook in themselves
Docs & Tools
The official TypeScript site with its handbook and live Playground
Docs & Tools
The next-generation front-end build tool — this very project is built on it
Recommend a site
Know a front-end site worth listing? Leave a name and a URL.
Clicking submit opens GitHub to finish your recommendation (GitHub account required) — human reviewed, with a curated bilingual write-up before listing.
FAQ
What is this site?
A curated front-end navigation: sites are grouped into four purpose-based sections — design inspiration, motion & interaction, learning, and docs & tools — each with bilingual notes and a structured detail page.
What does it take to get listed?
Quality over quantity: only hand-picked sites make it in, judged on content quality, freshness and real value for front-end learners — never on exhaustive coverage.
How do I recommend a site?
Use the form at the bottom of this page (or open an issue on GitHub directly). Clicking submit opens GitHub to finish the recommendation; submissions are human-reviewed and listed with a curated bilingual write-up.
Why bilingual?
Every note comes in both Chinese and English — handy for bilingual search, and any visitor can tell what a site does. One standard for personal use and for the public.
How are categories organized?
By purpose: design inspiration (visual reference), motion & interaction (how effects are built), learning (systematic growth), and docs & tools (daily lookups). Each site sits in its primary purpose.
How is content updated?
Everything is data-file driven: add or edit a site, rebuild, and both the listing and detail pages update — no page-by-page edits.
About this site
Frontend Nav is a maintained learning navigation and curated collection: hand-picked sites organized by purpose, so you find the right reference in the right context — and taste grows on you.
Every site carries bilingual notes and a structured detail page (what it is, how to use it, key features), so reading and searching across languages never loses the trail.
The whole site is statically generated from data files, and every listed site gets its own detail page — together forming a searchable matrix of front-end site pages.