Web Tools Directory

The industry-standard design tool for web and UI. Free for individuals with unlimited projects and real-time collaboration built in.

The most popular free code editor. Lightweight, powerful, and packed with extensions for HTML, CSS, JavaScript and every other language.

Browse and embed thousands of free, open-source fonts in your website with a single line of code. No hosting required.

Google's official tool to measure your page's loading performance on mobile and desktop. Shows Core Web Vitals and specific fixes.

Generate beautiful colour palettes in seconds. Lock colours you like, adjust tones, and export in HEX, RGB, CSS or any format.

Compress and convert images right in your browser. Supports WebP, AVIF, JPEG and PNG — see quality vs file size side by side.

Check which CSS and JavaScript features are supported across different browsers before you ship. Essential for cross-browser development.

Compress PNG and JPEG images using smart lossy compression. Typically reduces file sizes by 60–80% with barely noticeable quality loss.

Deploy static sites from GitHub in seconds. Free tier includes custom domains, HTTPS, form handling, and edge network delivery.

Host a static website directly from a GitHub repository — free, with custom domain and HTTPS support. Perfect for portfolios.

Lightning-fast hosting for static sites and web apps. Instant deploys from GitHub with a global edge CDN included at no cost.

Test foreground and background colour combinations against WCAG AA and AAA accessibility standards. Instant pass/fail results.

Optimise SVG files by removing unnecessary code and metadata. Reduce SVG file sizes by up to 90% without losing visual quality.

A browser tool that shows your website at multiple screen sizes simultaneously. Free and open source — great for responsive testing.

Discover great Google Font combinations curated for readability and visual style. Filter by font style, mood, and popularity.

Create beautiful code screenshots for sharing on social media or documentation. Choose from multiple themes and export as PNG.

A clean, visual reference for every HTML element and attribute with live examples, descriptions, and browser support information.

Generate favicons from text, images, or emojis. Download in all required sizes with the correct HTML code ready to copy and paste.

Create and share beautiful images of your source code. Highly customisable themes, fonts, and backgrounds — perfect for documentation.

Free, open-source SVG illustrations you can instantly recolour to match your brand. Thousands of scenes for every topic.

A curated collection of beautiful colour palettes created and voted on by designers worldwide. Browse by tag, trend, or popularity.

Detailed website speed reports with waterfall charts, Core Web Vitals data, and prioritised actionable recommendations to improve speed.

Monitor your site's performance in Google Search. See clicks, impressions, index coverage, and get alerts about technical issues.

Free backlink checker, keyword generator, and website authority checker from one of the top SEO platforms. No account needed.

Create wireframes, flowcharts, and mind maps with a fast, clean interface. Great for planning page layouts before writing code.

Built into Chrome, DevTools lets you inspect elements, debug JavaScript, analyse network requests, and audit performance in real time.

Record your screen and share short video walkthroughs instantly. Ideal for sharing design feedback, tutorials, and client presentations.

An all-in-one workspace for notes, planning, and documentation. Used by designers to manage design systems, content plans, and client docs.