A curated list of awesome resources for frontend developers. This list has been compiled through years of experience in frontend development and includes the most useful tools, frameworks, libraries, and learning resources.

Please read the contribution guidelines before contributing.

• HTML5
• CSS3 & SCSS
• JavaScript / TypeScript

• Accessibility (A11Y)
• Performance
• Security
• Progressive Web Apps (PWA)

• React Ecosystem
• Angular
• Vue.js
• Svelte
• Ember.js
• Web Components
• Micro Front-End

• Build Tools & Bundlers
• Transpiling & Compiling
• Testing
• Linting & Formatting
• Development Tools
• Git

• Design Systems & UI/UX
• Animation
• Data Visualization
• 3D & WebGL
• Web VR / Virtual Reality
• Platforms & Hosting
• Learning Resources
• Public APIs

• Responsive Images Guide - Excellent article explaining responsive images with practical examples. Essential for modern web development.

• A Complete Guide to Flexbox - The definitive guide to Flexbox. Bookmark this - you
• Airbnb CSS Style Guide - Well-documented CSS style guide from Airbnb. Great reference for best practices.
• Animate.css - Popular CSS animation library. Great for quick prototypes and learning animation techniques.
• BEM - Block Element Modifier methodology. The most popular CSS naming convention for maintainable stylesheets.
• CSS Animations Guide - Comprehensive CSS animation tutorial. Great for learning fundamentals.
• CSS Grid Course - Free comprehensive course by Wes Bos. The best way to master CSS Grid.
• CSS Tricks - The best CSS resource on the web. Articles, guides, and snippets for everything CSS.
• CSS3 Patterns Gallery - Amazing collection of pure CSS background patterns. Great for inspiration.
• Easings - Visual reference for CSS easing functions. Perfect for smooth animations.
• Flexbox Defense - Tower defense game that teaches Flexbox. Position your towers using CSS Flexbox properties to stop enemies.
• Flexbox Froggy - Interactive game to learn Flexbox. Makes learning fun and memorable.
• Grid Garden - Interactive game to learn CSS Grid. Write CSS code to grow your carrot garden and master grid layout.
• SMACSS - Scalable and Modular Architecture for CSS. Essential reading for organizing large CSS codebases.
• State of CSS - Annual CSS survey. Learn what CSS features developers use.
• Style Guides - Collection of style guide examples. Inspiration for creating your own.
• Understanding EM and REM - Clear explanation of when to use em vs rem. Solves a common CSS confusion.

• Airbnb JavaScript Style Guide - Most popular JavaScript style guide. Great reference for code consistency.
• CodeWars - Fun way to practice JavaScript through coding challenges. Great for daily practice.
• Eloquent JavaScript - The best free book for learning JavaScript. Updated regularly, covers modern ES6+ features.
• JavaScript Design Patterns - Free book on JavaScript design patterns. Essential for writing maintainable code.
• JavaScript Event Loop - Visual tool to understand the event loop. Essential for understanding async JavaScript.
• JavaScript Module Systems - Clear comparison of CommonJS, AMD, ES6 modules. Helps understand module evolution.
• JavaScript.info - Modern JavaScript tutorial. Covers ES6+ and modern practices.
• MDN JavaScript Guide - The most reliable JavaScript reference. Always up-to-date and comprehensive.
• Patterns.dev - Free online resource on design, rendering, and performance patterns for building powerful web apps. Covers JavaScript, React, Vue, and performance optimization patterns.
• RxJS Documentation - Official RxJS docs. Comprehensive guides and API reference.
• State of JS - Annual survey of JavaScript ecosystem. See what
• TypeHero - An ultimate, in-depth course and community for mastering modern TypeScript. Great for all skill levels.
• TypeScript - Typed superset of JavaScript. Adds type safety and better tooling.
• TypeScript Handbook - Official TypeScript documentation. The best place to learn TypeScript.
• You Don't Know JS Yet (YDKJS) - The essential book series for a deep understanding of JavaScript's core mechanics (scopes, closures, 'this', async).

• A11y Project - Community-driven accessibility resource. Checklists, patterns, and best practices.
• Accessibility Insights - Microsoft
• axe DevTools - Most comprehensive accessibility testing browser extension. Used by major companies.
• WAI-ARIA Authoring Practices - Official guide to implementing ARIA. Essential for accessible components.
• WAVE - Free browser extension to evaluate web accessibility. Essential tool for a11y testing.
• WCAG 2.1 Guidelines - Official accessibility guidelines. The standard for web accessibility.
• WebAIM - Leading resource for web accessibility. Articles, tools, and training materials.

• Bundle Phobia - Check npm package sizes before installing. Prevents bundle bloat.
• Chrome User Experience Report - Real-world performance data. See how your site performs for real users.
• Images Guide - Comprehensive guide to image optimization. Essential for fast-loading sites.
• Lighthouse - Built into Chrome DevTools. Automated performance, accessibility, and SEO audits.
• Web.dev Performance - Google
• WebPageTest - Free tool for detailed performance analysis. More detailed than PageSpeed Insights.

• Content Security Policy - Guide to implementing CSP headers. Critical for preventing XSS attacks.
• JWT.io - Debug and decode JWTs. Essential tool when working with authentication.
• OWASP Top 10 - The most critical web application security risks. Essential reading for all developers.
• Web Security Academy - Free web security training by PortSwigger. Hands-on labs for learning security.

• PWA Documentation - Google
• Service Worker Cookbook - Collection of service worker recipes. Practical examples for common patterns.
• Web App Manifest - Guide to creating app manifests. Makes your site installable.
• Workbox - JavaScript libraries for adding offline support. The easiest way to implement service workers.

• Next.js - The React framework for production. Server-side rendering, static generation, and more out of the box.
• React Documentation - The new React docs are the best place to learn modern React. Interactive examples and clear explanations.
• React Hook Form - Best form library for React. Minimal re-renders and great performance.
• React Query (TanStack Query) - The best data fetching library for React. Handles caching, synchronization, and updates automatically.
• React Router - The standard routing library for React. Declarative and powerful.
• Redux Toolkit - The official, opinionated way to write Redux. Much simpler than traditional Redux.
• Zustand - A small, fast, and scalable bearbones state-management solution for React. A popular alternative to Redux.

• Angular Documentation - Official Angular docs. Comprehensive guides and API reference.
• NgRx - Reactive state management for Angular. Inspired by Redux but built for Angular.

• Nuxt.js - The Vue.js framework for production. Similar to Next.js but for Vue.
• Vue.js Documentation - Excellent documentation. The progressive JavaScript framework that

• Svelte Documentation - Revolutionary framework that compiles to vanilla JS. No virtual DOM, smaller bundles.
• SvelteKit - The official Svelte framework. Full-stack app framework with SSR.

• Ember.js - Framework for ambitious web applications. Great for large, long-lived applications.

• Custom Elements - Components created by the community.
• Web Components - Standards-based component model.

• Single-SPA - Framework for micro frontends.

• Parcel - Zero-configuration bundler. Great for quick prototypes.
• Rollup - Optimized for libraries. Produces smaller bundles than Webpack.
• Turbopack - Next.js
• Vite - Next-generation frontend tooling. Lightning-fast HMR and optimized production builds.
• Webpack - The most popular module bundler. Powerful but complex - use Vite for new projects.

• Babel - The JavaScript compiler. Transpiles modern JS to compatible versions.
• SassMeister - Online SASS/SCSS compiler. Great for testing Sass code snippets.
• SWC - Super-fast TypeScript/JavaScript compiler written in Rust. Used by Next.js.

• Cypress - Popular E2E testing framework. Great developer experience with time-travel debugging.
• Jest - The most popular JavaScript testing framework. Zero-config, great for React.
• Playwright - Modern end-to-end testing. Faster and more reliable than Cypress.
• Testing Library - Simple and complete testing utilities. Encourages testing like users interact.
• Vitest - Fast unit test framework powered by Vite. Great alternative to Jest.

• ESLint - The standard JavaScript linter. Catches bugs and enforces code quality.
• Prettier - Opinionated code formatter. Stop arguing about code style.
• Stylelint - Linter for CSS/SCSS. Catches errors and enforces consistent styles.
• TypeScript ESLint - ESLint rules for TypeScript. Essential for TS projects.

• Angular CLI - Command-line tool for Angular. Generates code, runs tests, and builds apps.
• AST Explorer - Interactive tool to explore JavaScript AST. Essential for understanding how code is parsed.
• Can I Use - Essential browser compatibility checker. Check feature support before using any CSS property.
• Carbon - Create beautiful code screenshots. Perfect for blog posts and documentation.
• Chrome DevTools - Official documentation for Chrome's built-in web developer tools. Essential for debugging, profiling, and auditing.
• CodeSandbox - Online IDE for React, Vue, and more. Share code instantly.
• Cubic Bezier - Interactive tool for creating custom cubic-bezier transitions. Essential for fine-tuning animations.
• Dabblet - Interactive CSS playground by Lea Verou. Perfect for quick experiments.
• Datadog - Application performance monitoring. Great for production monitoring.
• DevDocs - Offline documentation aggregator. All your docs in one place.
• GraphQL Playground - Interactive GraphQL IDE. Test queries and explore schemas.
• JSON Formatter - Format and validate JSON. Essential for API development.
• LocalTunnel - Expose localhost to the internet. Great for testing webhooks.
• LogRocket - Session replay and frontend monitoring. See exactly what users experience.
• MJML - Framework for creating responsive emails that work across all email clients. Saves hours of email debugging.
• NestJS - Progressive Node.js framework. Great for building scalable server-side applications.
• ngrok - Secure tunnels to localhost. More reliable than LocalTunnel.
• npm trends - Compare npm package download trends. See what
• npms - Better npm search. Finds packages by quality, not just popularity.
• NVM - Node Version Manager. Switch between Node versions easily.
• PM2 - Production process manager for Node.js. Keeps apps running forever.
• pnpm - Fast, disk space efficient package manager. Uses symlinks to save space.
• PostCSS - Transform CSS with JavaScript plugins. Powers modern CSS tooling (Autoprefixer, Tailwind, etc.).
• React Developer Tools - Essential Chrome extension for debugging React apps. Inspect component tree and state.
• Regex101 - Online regex tester and debugger. Essential tool for writing regex.
• Sentry - Error tracking and performance monitoring. The industry standard for error tracking.
• Shields.io - Badges for GitHub projects. Add status badges to your README.
• StackBlitz - Online IDE powered by WebContainers. Runs Node.js in the browser.
• Storybook - Tool for building UI components in isolation. Essential for component-driven development.
• Transform Tools - Convert between formats (JSON, YAML, TypeScript, etc.). Incredibly useful.
• TypeScript Playground - Online TypeScript editor. Test TS code instantly.
• Yarn - Fast, reliable package manager. Alternative to npm.

• Conventional Commits - Specification for commit messages. Makes history readable.
• GitHub Learning Lab - Interactive Git and GitHub tutorials. Learn by doing.
• Oh My Git! - Interactive game to learn Git. Makes learning fun.
• Pro Git Book - The official Git book. Free and comprehensive.

• Angular Material - Material Design components for Angular. Production-ready UI components.
• Ant Design - Enterprise-class UI design language. Beautiful React components.
• Brand Colors - Collection of official brand color palettes. Useful for client work.
• Chakra UI - Simple, modular React component library. Great developer experience.
• Coolors - Best color palette generator. Press spacebar to generate beautiful color schemes.
• Figma - The industry-standard collaborative interface design tool. Essential for developers to inspect designs and export assets.
• Font Awesome - Popular icon font library. Free and paid tiers available.
• Heroicons - Beautiful hand-crafted SVG icons. Made by Tailwind CSS team.
• Lucide - Beautiful icon library. Fork of Feather icons with more icons.
• Lukasz Adam Illustrations - Free SVG illustrations for commercial and personal use under CC0 license. No attribution required. Perfect for websites and projects.
• Mantine - Full-featured React components library. Great defaults and customization.
• Material Design - Google
• Pexels - Free stock photos and videos. Great alternative to Unsplash.
• Radix UI - Unstyled, accessible component primitives. Build your own design system.
• shadcn - A collection of beautifully designed, accessible, and unstyled React components built with Radix UI and Tailwind CSS, meant to be copied into your codebase
• Unsplash - High-quality free stock photos. The best free photo resource.

• Framer Motion - React animation library. Declarative and powerful.
• GSAP - The most powerful JavaScript animation library. Industry standard for web animations.
• Lottie - Render After Effects animations on the web. Perfect for complex animations.

• Chart.js - Simple yet flexible charting library. Great for common chart types.
• D3.js - The most powerful JavaScript library for data visualization. Steep learning curve but unmatched flexibility.
• Observable - Interactive data visualization platform. Built by D3.js creator.
• Recharts - Composable charting library for React. Built on D3, easier to use.
• Victory - React components for data visualization. Beautiful and accessible.

• Babylon.js - Powerful 3D engine. Great for games and complex 3D applications.
• PixiJS - 2D WebGL renderer. Perfect for 2D games and interactive graphics.
• React Three Fiber - React renderer for Three.js. Makes 3D accessible to React developers.
• Three.js - The most popular 3D library for the web. Great documentation and examples.

• A-Frame - Framework for building VR experiences. Works with WebXR and WebVR.
• WebXR Device API - Official WebXR documentation. The future of web VR/AR.

• Cloudflare Pages - Free static site hosting. Fast global CDN included.
• GitHub Pages - Free static site hosting. Perfect for documentation and portfolios.
• Netlify - All-in-one platform for JAMstack. Great for static sites and serverless functions.
• Railway - Modern platform for deploying full-stack apps. Great developer experience.
• Vercel - The best platform for Next.js and React. Zero-config deployments, great DX.

• Angular University - High-quality Angular courses. Great for learning advanced patterns.
• Atomic Design - Methodology for creating design systems. Changed how we think about component architecture.
• Design Systems Repo - Curated list of design systems. Great for inspiration.
• Exercism - Practice coding exercises with mentor feedback. Excellent for learning with community support.
• freeCodeCamp - Free coding bootcamp. Comprehensive curriculum with certifications.
• Frontend Interview Handbook - Comprehensive frontend interview guide. Great for job preparation.
• Frontend Masters - Premium video courses from industry experts. Best paid resource.
• GraphQL - The official documentation for GraphQL, a query language for your APIs and a runtime for fulfilling those queries.
• GreatFrontend - The best platform for practicing frontend system design and preparing for frontend interviews.
• Learn RxJS - Best resource for learning RxJS. Clear explanations and examples.
• LeetCode - Best platform for coding interview preparation. Practice algorithms and data structures.
• MDN Web Docs - The most reliable web documentation. Always accurate and up-to-date.
• Micro Frontends Article - Comprehensive guide to micro frontends.
• Node.js Documentation - Official Node.js docs. Comprehensive API reference and guides.
• Regular Expressions Info - Comprehensive regex tutorial. The best resource for learning regex.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs. A must-have for modern CSS architecture.
• UI Movement - Curated UI animations and interactions. Daily inspiration.
• useHooks - Collection of useful React hooks. Great for learning and reference.
• Vue School - Premium Vue.js courses. High-quality video tutorials.
• Web.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.
• WebGL Fundamentals - Excellent WebGL tutorials. Start here to understand WebGL basics.

• JSONPlaceholder - Fake REST API for testing. Perfect for prototypes and demos.
• Public APIs - Curated list of free APIs. The best resource for finding APIs.
• REST Countries - Free API for country data. No authentication required.
• The Cat API - Fun API for cat images. Great for testing and demos.

Contributions are welcome! If you have a great frontend resource that should be included in this list, please:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-resource)
3. Add your resource following the existing format
4. Commit your changes (git commit -m 'Add amazing resource')
5. Push to the branch (git push origin feature/amazing-resource)
6. Open a Pull Request

• Ensure the resource is relevant to frontend development
• Follow the existing format: - [Resource Name](URL) - Description with context and value
• Add emoji markers for recommendations (📚 for learning, 🔥 for essential tools, ⭐ for favorites)
• Keep descriptions concise but informative - explain "why" it's valuable
• Verify that links are working and up-to-date
• Add resources to the appropriate category

This project is open source and available for anyone to use and contribute to.

If you find this resource list helpful, please consider giving it a star on GitHub!

Made with ❤️ by the frontend community