Resources

    Curated tools, references, and learning materials for web developers.

    Responsively

    Tools

    Modified browser for responsive web development across devices.

    Responsive

    Regex101

    Tools

    Online regex tester with real-time explanation and debugging.

    Regex

    ESLint

    Tools

    Pluggable linting utility for JavaScript and TypeScript codebases.

    LintingJavaScriptCode Quality

    Prettier

    Tools

    Opinionated code formatter supporting many languages and editors.

    FormattingCode Quality

    WebPageTest

    Performance

    Free website speed test from multiple locations with detailed reports.

    Performance

    Bundlephobia

    Performance

    Find the cost of adding an npm package to your bundle.

    PerformanceNPM

    Fontsource

    Design

    Self-host open-source fonts in neatly bundled NPM packages.

    FontsNPM

    Realtime Colors

    Design

    Visualize your color palette on a real website template instantly.

    ColorPalette

    Figma

    Design

    Collaborative interface design tool used by teams worldwide.

    Design ToolsCollaboration

    web.dev

    Learning

    Google resource for modern web development guidance and best practices.

    PerformanceBest Practices

    Frontend Mentor

    Learning

    Real-world front-end challenges with professional designs to practice.

    PracticeDesign

    JavaScript.info

    Learning

    Modern JavaScript tutorial from basics to advanced topics with exercises.

    JavaScript

    Tailwind CSS

    Documentation

    Utility-first CSS framework documentation with component examples.

    CSSTailwindReference

    React Documentation

    Documentation

    Official React docs with tutorials, API references, and best practices.

    ReactJavaScriptReference

    TypeScript Handbook

    Documentation

    Official TypeScript documentation with comprehensive guides and examples.

    Reference

    PageSpeed Insights

    Performance

    Analyze your page performance and get actionable recommendations from Google.

    PerformanceSEO

    Autoprefixer

    Tools

    PostCSS plugin to automatically add vendor prefixes to CSS rules.

    CSSPostCSSBuild Tools

    Emmet

    Tools

    Toolkit for high-speed HTML & CSS workflow with abbreviation expansion.

    HTMLCSSProductivity

    Grid Garden

    Learning

    Learn CSS Grid layout through an interactive gardening game.

    CSSCSS GridInteractive

    Flexbox Froggy

    Learning

    Interactive game for learning CSS flexbox layout in a fun way.

    CSSFlexboxInteractive

    Lighthouse

    Performance

    Automated auditing tool for performance, accessibility, and SEO.

    PerformanceAccessibilitySEO

    Google Fonts

    Design

    Free, open-source font library with hundreds of typeface families.

    Fonts

    Coolors

    Design

    Super fast color palette generator for designers and developers.

    ColorPalette

    HTML Validator

    Tools

    W3C markup validation service to check your HTML against web standards.

    HTML

    Can I Use

    Tools

    Browser compatibility tables for modern web technologies and CSS features.

    CSSBrowser Support

    CSS-Tricks

    Learning

    Tips, tricks, and techniques on using CSS. Huge archive of guides and snippets.

    CSS

    MDN Web Docs

    Documentation

    The definitive reference for HTML, CSS, and JavaScript documentation.

    HTMLCSSJavaScriptReference