Start here
The maintainers' picks if you only open a few.
- GreatFrontendgreatfrontend.com
The best platform for practicing frontend system design and preparing for frontend interviews.
- A Complete Guide to Flexboxcss-tricks.com
The definitive guide to Flexbox. Bookmark this - you
- Public APIsgithub.com
Curated list of free APIs. The best resource for finding APIs.
Everything
- LearningCodington JavaScript Practicecodington.io
Free browser-based JavaScript exercises with instant feedback and no account required.
Learning - LearningFrontendAtlasfrontendatlas.com
A step-by-step framework for answering frontend system design interview questions with clear trade-offs, state, and data flow.
Learning - UI Libraryshadcnui.shadcn.com
A collection of beautifully designed, accessible, and unstyled React components built with Radix UI and Tailwind CSS, meant to be copied into your codebase
UI Library - TypeScriptTypeHerotypehero.dev
An ultimate, in-depth course and community for mastering modern TypeScript. Great for all skill levels.
TypeScript - CSSGrid Gardencssgridgarden.com
Interactive game to learn CSS Grid. Write CSS code to grow your carrot garden and master grid layout.
CSS - CSSFlexbox Defenseflexboxdefense.com
Tower defense game that teaches Flexbox. Position your towers using CSS Flexbox properties to stop enemies.
CSS - LearningPatterns.devpatterns.dev
Free online resource on design, rendering, and performance patterns for building powerful web apps. Covers JavaScript, React, Vue, and performance optimization patterns.
Learning - Design ResourcesLukasz Adam Illustrationslukaszadam.com
Free SVG illustrations for commercial and personal use under CC0 license. No attribution required. Perfect for websites and projects.
Design Resources - FrameworkTailwind CSStailwindcss.com
A utility-first CSS framework for rapidly building custom designs. A must-have for modern CSS architecture.
Framework - LearningYou Don't Know JS Yet (YDKJS)github.com
The essential book series for a deep understanding of JavaScript's core mechanics (scopes, closures, 'this', async).
Learning - LearningGraphQLgraphql.org
The official documentation for GraphQL, a query language for your APIs and a runtime for fulfilling those queries.
Learning - State ManagementZustandgithub.com
A small, fast, and scalable bearbones state-management solution for React. A popular alternative to Redux.
State Management - Design ResourcesFigmafigma.com
The industry-standard collaborative interface design tool. Essential for developers to inspect designs and export assets.
Design Resources - ToolChrome DevToolsdeveloper.chrome.com
Official documentation for Chrome's built-in web developer tools. Essential for debugging, profiling, and auditing.
Tool - LearningResponsive Images Guidecloudinary.com
Excellent article explaining responsive images with practical examples. Essential for modern web development.
Learning - ToolMJMLmjml.io
Framework for creating responsive emails that work across all email clients. Saves hours of email debugging.
Tool - LearningCSS Grid Coursecssgrid.io
Free comprehensive course by Wes Bos. The best way to master CSS Grid.
Learning - CSSBEMgetbem.com
Block Element Modifier methodology. The most popular CSS naming convention for maintainable stylesheets.
CSS - CSSSMACSSsmacss.com
Scalable and Modular Architecture for CSS. Essential reading for organizing large CSS codebases.
CSS - LearningAtomic Designatomicdesign.bradfrost.com
Methodology for creating design systems. Changed how we think about component architecture.
Learning - ToolPostCSSpostcss.org
Transform CSS with JavaScript plugins. Powers modern CSS tooling (Autoprefixer, Tailwind, etc.).
Tool - ToolCan I Usecaniuse.com
Essential browser compatibility checker. Check feature support before using any CSS property.
Tool - CSSFlexbox Froggyflexboxfroggy.com
Interactive game to learn Flexbox. Makes learning fun and memorable.
CSS - LearningCSS Trickscss-tricks.com
The best CSS resource on the web. Articles, guides, and snippets for everything CSS.
Learning - CSS
- ToolCubic Beziercubic-bezier.com
Interactive tool for creating custom cubic-bezier transitions. Essential for fine-tuning animations.
Tool - CSSAnimate.cssanimate.style
Popular CSS animation library. Great for quick prototypes and learning animation techniques.
CSS - Design ResourcesCoolorscoolors.co
Best color palette generator. Press spacebar to generate beautiful color schemes.
Design Resources - Design ResourcesBrand Colorsbrandcolors.net
Collection of official brand color palettes. Useful for client work.
Design Resources - CSSCSS3 Patterns Gallerylea.verou.me
Amazing collection of pure CSS background patterns. Great for inspiration.
CSS - Tool
- Tool
- LearningUnderstanding EM and REMwebdesign.tutsplus.com
Clear explanation of when to use em vs rem. Solves a common CSS confusion.
Learning - CSSAirbnb CSS Style Guidegithub.com
Well-documented CSS style guide from Airbnb. Great reference for best practices.
CSS - CSS
- LearningEloquent JavaScripteloquentjavascript.net
The best free book for learning JavaScript. Updated regularly, covers modern ES6+ features.
Learning - LearningJavaScript Design Patternsaddyosmani.com
Free book on JavaScript design patterns. Essential for writing maintainable code.
Learning - LearningJavaScript Event Looplatentflip.com
Visual tool to understand the event loop. Essential for understanding async JavaScript.
Learning - LearningJavaScript Module Systemsauth0.com
Clear comparison of CommonJS, AMD, ES6 modules. Helps understand module evolution.
Learning - LearningAirbnb JavaScript Style Guidegithub.com
Most popular JavaScript style guide. Great reference for code consistency.
Learning - TypeScriptTypeScript Handbooktypescriptlang.org
Official TypeScript documentation. The best place to learn TypeScript.
TypeScript - ToolAST Explorerastexplorer.net
Interactive tool to explore JavaScript AST. Essential for understanding how code is parsed.
Tool - LearningMDN JavaScript Guidedeveloper.mozilla.org
The most reliable JavaScript reference. Always up-to-date and comprehensive.
Learning - LearningLeetCodeleetcode.com
Best platform for coding interview preparation. Practice algorithms and data structures.
Learning - LearningCodeWarscodewars.com
Fun way to practice JavaScript through coding challenges. Great for daily practice.
Learning - LearningExercismexercism.io
Practice coding exercises with mentor feedback. Excellent for learning with community support.
Learning - AccessibilityWCAG 2.1 Guidelinesw3.org
Official accessibility guidelines. The standard for web accessibility.
Accessibility - AccessibilityWebAIMwebaim.org
Leading resource for web accessibility. Articles, tools, and training materials.
Accessibility - AccessibilityWAVEwave.webaim.org
Free browser extension to evaluate web accessibility. Essential tool for a11y testing.
Accessibility - AccessibilityA11y Projecta11yproject.com
Community-driven accessibility resource. Checklists, patterns, and best practices.
Accessibility - Accessibility
Official guide to implementing ARIA. Essential for accessible components.
Accessibility - Accessibility
- Accessibilityaxe DevToolsdeque.com
Most comprehensive accessibility testing browser extension. Used by major companies.
Accessibility - Performance
- PerformanceWebPageTestwebpagetest.org
Free tool for detailed performance analysis. More detailed than PageSpeed Insights.
Performance - PerformanceLighthousedevelopers.google.com
Built into Chrome DevTools. Automated performance, accessibility, and SEO audits.
Performance - PerformanceImages Guideimages.guide
Comprehensive guide to image optimization. Essential for fast-loading sites.
Performance - PerformanceBundle Phobiabundlephobia.com
Check npm package sizes before installing. Prevents bundle bloat.
Performance - PerformanceChrome User Experience Reportdevelopers.google.com
Real-world performance data. See how your site performs for real users.
Performance - SecurityOWASP Top 10owasp.org
The most critical web application security risks. Essential reading for all developers.
Security - Security
- SecurityWeb Security Academyportswigger.net
Free web security training by PortSwigger. Hands-on labs for learning security.
Security - SecurityContent Security Policydeveloper.mozilla.org
Guide to implementing CSP headers. Critical for preventing XSS attacks.
Security - PWA
- PWAWorkboxdevelopers.google.com
JavaScript libraries for adding offline support. The easiest way to implement service workers.
PWA - PWA
- PWAService Worker Cookbookserviceworke.rs
Collection of service worker recipes. Practical examples for common patterns.
PWA - FrameworkReact Documentationreact.dev
The new React docs are the best place to learn modern React. Interactive examples and clear explanations.
Framework - FrameworkNext.jsnextjs.org
The React framework for production. Server-side rendering, static generation, and more out of the box.
Framework - State ManagementReact Query (TanStack Query)tanstack.com
The best data fetching library for React. Handles caching, synchronization, and updates automatically.
State Management - FrameworkReact Routerreactrouter.com
The standard routing library for React. Declarative and powerful.
Framework - State ManagementRedux Toolkitredux-toolkit.js.org
The official, opinionated way to write Redux. Much simpler than traditional Redux.
State Management - FrameworkReact Hook Formreact-hook-form.com
Best form library for React. Minimal re-renders and great performance.
Framework - ToolReact Developer Toolschrome.google.com
Essential Chrome extension for debugging React apps. Inspect component tree and state.
Tool - Learning
- FrameworkAngular Documentationangular.io
Official Angular docs. Comprehensive guides and API reference.
Framework - UI LibraryAngular Materialmaterial.angular.io
Material Design components for Angular. Production-ready UI components.
UI Library - ToolAngular CLIangular.io
Command-line tool for Angular. Generates code, runs tests, and builds apps.
Tool - LearningAngular Universityangular-university.io
High-quality Angular courses. Great for learning advanced patterns.
Learning - FrameworkVue.js Documentationvuejs.org
Excellent documentation. The progressive JavaScript framework that
Framework - Learning
- Framework
- FrameworkSvelte Documentationsvelte.dev
Revolutionary framework that compiles to vanilla JS. No virtual DOM, smaller bundles.
Framework - Framework
- FrameworkEmber.jsemberjs.com
Framework for ambitious web applications. Great for large, long-lived applications.
Framework - Framework
- Framework
- Framework
- Learning
- ToolVitevitejs.dev
Next-generation frontend tooling. Lightning-fast HMR and optimized production builds.
Tool - ToolWebpackwebpack.js.org
The most popular module bundler. Powerful but complex - use Vite for new projects.
Tool - Tool
- Tool
- Tool
- Testing
- Testing
- TestingTesting Librarytesting-library.com
Simple and complete testing utilities. Encourages testing like users interact.
Testing - Testing
- TestingCypresscypress.io
Popular E2E testing framework. Great developer experience with time-travel debugging.
Testing - ToolStorybookstorybook.js.org
Tool for building UI components in isolation. Essential for component-driven development.
Tool - Tool
- Tool
- Tool
- Tool
- LearningNode.js Documentationnodejs.org
Official Node.js docs. Comprehensive API reference and guides.
Learning - Tool
- Tool
- FrameworkNestJSnestjs.com
Progressive Node.js framework. Great for building scalable server-side applications.
Framework - ToolSentrysentry.io
Error tracking and performance monitoring. The industry standard for error tracking.
Tool - ToolLogRocketlogrocket.com
Session replay and frontend monitoring. See exactly what users experience.
Tool - Tool
- AnimationGSAPgreensock.com
The most powerful JavaScript animation library. Industry standard for web animations.
Animation - Animation
- AnimationLottieairbnb.design
Render After Effects animations on the web. Perfect for complex animations.
Animation - LearningCSS Animations Guidelearn.shayhowe.com
Comprehensive CSS animation tutorial. Great for learning fundamentals.
Learning - Data VisualizationD3.jsd3js.org
The most powerful JavaScript library for data visualization. Steep learning curve but unmatched flexibility.
Data Visualization - Data VisualizationObservableobservablehq.com
Interactive data visualization platform. Built by D3.js creator.
Data Visualization - Data VisualizationRechartsrecharts.org
Composable charting library for React. Built on D3, easier to use.
Data Visualization - Data VisualizationChart.jschartjs.org
Simple yet flexible charting library. Great for common chart types.
Data Visualization - Data VisualizationVictoryformidable.com
React components for data visualization. Beautiful and accessible.
Data Visualization - 3D & WebGLThree.jsthreejs.org
The most popular 3D library for the web. Great documentation and examples.
3D & WebGL - LearningWebGL Fundamentalswebglfundamentals.org
Excellent WebGL tutorials. Start here to understand WebGL basics.
Learning - 3D & WebGLReact Three Fiberdocs.pmnd.rs
React renderer for Three.js. Makes 3D accessible to React developers.
3D & WebGL - 3D & WebGL
- 3D & WebGL
- Platforms & HostingVercelvercel.com
The best platform for Next.js and React. Zero-config deployments, great DX.
Platforms & Hosting - Platforms & HostingNetlifynetlify.com
All-in-one platform for JAMstack. Great for static sites and serverless functions.
Platforms & Hosting - Platforms & HostingCloudflare Pagespages.cloudflare.com
Free static site hosting. Fast global CDN included.
Platforms & Hosting - Platforms & HostingGitHub Pagespages.github.com
Free static site hosting. Perfect for documentation and portfolios.
Platforms & Hosting - Platforms & HostingRailwayrailway.app
Modern platform for deploying full-stack apps. Great developer experience.
Platforms & Hosting - Public APIsJSONPlaceholderjsonplaceholder.typicode.com
Fake REST API for testing. Perfect for prototypes and demos.
Public APIs - Public APIs
- Public APIs
- State ManagementRxJS Documentationrxjs.dev
Official RxJS docs. Comprehensive guides and API reference.
State Management - Learning
- State ManagementNgRxngrx.io
Reactive state management for Angular. Inspired by Redux but built for Angular.
State Management - Utilities
- LearningRegular Expressions Inforegular-expressions.info
Comprehensive regex tutorial. The best resource for learning regex.
Learning - Tool
- Tool
- TypeScriptTypeScripttypescriptlang.org
Typed superset of JavaScript. Adds type safety and better tooling.
TypeScript - UI Library
- UI Library
- UI LibraryChakra UIchakra-ui.com
Simple, modular React component library. Great developer experience.
UI Library - UI LibraryRadix UIradix-ui.com
Unstyled, accessible component primitives. Build your own design system.
UI Library - UI LibraryMantinemantine.dev
Full-featured React components library. Great defaults and customization.
UI Library - LearningDesign Systems Repodesignsystemsrepo.com
Curated list of design systems. Great for inspiration.
Learning - Learning
- Tool
- Tool
- Tool
- Tool
- Tool
- Tool
- Tool
- Tool
- Tool
- Tool
- Tool
- Git
- Git
- Git
- GitConventional Commitsconventionalcommits.org
Specification for commit messages. Makes history readable.
Git - Design Resources
- Design Resources
- Design Resources
- Design Resources
- Design ResourcesFont Awesomefontawesome.com
Popular icon font library. Free and paid tiers available.
Design Resources - Utilities
- UtilitiesTransform Toolstransform.tools
Convert between formats (JSON, YAML, TypeScript, etc.). Incredibly useful.
Utilities - Utilities
- UtilitiesCarboncarbon.now.sh
Create beautiful code screenshots. Perfect for blog posts and documentation.
Utilities - LearningfreeCodeCampfreecodecamp.org
Free coding bootcamp. Comprehensive curriculum with certifications.
Learning - LearningFrontend Mastersfrontendmasters.com
Premium video courses from industry experts. Best paid resource.
Learning - Learning
- Learning
- Learning
- LearningFrontend Interview Handbookgithub.com
Comprehensive frontend interview guide. Great for job preparation.
Learning - LearningWeb.devweb.dev
Google's comprehensive resource for modern web development. Learn about performance, accessibility, PWA, security, and best practices. Includes guides, tools, and case studies to build fast, accessible, and engaging web experiences.
Learning - LearningMDN Web Docsdeveloper.mozilla.org
The most reliable web documentation. Always accurate and up-to-date.
Learning - Web VR
- Web VR