200 Web-Based, Must-Try Web Design and Development Tools
Tags: webdev, tooling, links, productivity
Published: 2023-08-08 19:52:32

Let’s get right into it: Here are not 10, not 50, not 100, but—200 web-based and free tools that make your web design and web development life easier. (It’s true.)

<ol>
<li><a href="https://shop.alterlinks.com/htaccess-validator/htaccess-validator.php">.htaccess Checker</a></li>
<li><a href="https://chmod-calculator.com/">“chmod” Calculator</a></li>
<li><a href="https://www.accessibilitychecker.org/">Accessibility Checker (AccessibilityChecker.org)</a></li>
<li><a href="https://wave.webaim.org/">Accessibility Checker (WAVE)</a></li>
<li><a href="https://www.w3.org/WAI/eval/report-tool/evaluation/define-scope">Accessibility Evaluation Report Generator</a></li>
<li><a href="https://www.spyfu.com/">Ads and Keywords Analyzer</a></li>
<li><a href="https://www.devglan.com/online-tools/aes-encryption-decryption">AES Encrypter and Decrypter</a></li>
<li><a href="https://www.arraybuilder.com/">Array Transformer</a></li>
<li><a href="https://astexplorer.net/">AST Viewer</a></li>
<li><a href="https://uptime.com/freetools/global-uptime-test">Availability Checker (Regional)</a></li>
<li><a href="https://trianglify.io/">Background Image Generator</a></li>
<li><a href="https://doodad.dev/pattern-generator/">Background Pattern Generator</a></li>
<li><a href="https://ahrefs.com/backlink-checker">Backlink Analyzer</a></li>
<li><a href="https://www.backlink-tool.org/en/anchor-text-checker/">Backlink Anchor Text Analyzer</a></li>
<li><a href="https://www.bandwidthplace.com/">Bandwidth Speed Tester</a></li>
<li><a href="https://deepai.org/machine-learning-model/colorizer">Black and White Photo Colorizer</a></li>
<li><a href="https://trovami.altervista.org/en/webmasters/makebutton">Brilliant Button Maker</a></li>
<li><a href="https://amiunique.org/">Browser Fingerprint Checker</a></li>
<li><a href="http://c64.superdefault.com/">C64-Style Image Converter</a></li>
<li><a href="https://convertcase.net/">Case Converter</a></li>
<li><a href="https://seositecheckup.com/tools/cdn-usage-test">CDN Use Checker</a></li>
<li><a href="https://grammica.com/character-count">Character Counter</a></li>
<li><a href="https://www.ipaddressguide.com/cidr">CIDR to IPv4 Converter</a></li>
<li><a href="https://transform.tools/">Code Converter</a></li>
<li><a href="http://prettyprinter.de/">Code Formatter</a></li>
<li><a href="https://yellowlab.tools/">Code Quality Checker</a></li>
<li><a href="https://carbon.now.sh/">Code Screenshot Generator</a></li>
<li><a href="https://neatnik.net/view-source/">Code Viewer</a></li>
<li><a href="https://www.whocanuse.com/">Color Accessibility Checker</a></li>
<li><a href="https://www.toptal.com/designers/colorfilter">Color Blindness Emulator</a></li>
<li><a href="https://www.myndex.com/APCA/">Color Contrast Analyzer</a></li>
<li><a href="https://atmos.style/color-converter/hex-to-lch">Color Converter (Hex, RGB, HSL, and LCH)</a></li>
<li><a href="https://convertingcolors.com/">Color Converter</a></li>
<li><a href="https://lokeshdhakar.com/projects/color-thief/">Color Extractor and Generator</a></li>
<li><a href="https://commitlint.io/">Commit Message Linter</a></li>
<li><a href="https://cspvalidator.org/">Content Security Policy Validator</a></li>
<li><a href="https://www.privacypolicies.com/cookie-consent/">Cookie Consent Generator</a></li>
<li><a href="https://cookie-script.com/">Cookie Use Checker</a></li>
<li><a href="https://crontab.guru/">Cron Schedule Generator</a></li>
<li><a href="https://cm2.pw/websocket">Cross-Site WebSocket Hijacking Tester</a></li>
<li><a href="https://cssstats.com/">CSS Analyzer (CSS Stats)</a></li>
<li><a href="https://projects.verou.me/rework-utils/">CSS Analyzer (Lea Verou)</a></li>
<li><a href="https://www.websiteplanet.com/webtools/unminify-js/">CSS and JavaScript Un-Minifier</a></li>
<li><a href="https://animista.net/">CSS Animation Generator</a></li>
<li><a href="https://www.squarefree.com/userstyles/make-bookmarklet.html">CSS Bookmarklet Generator</a></li>
<li><a href="https://min-max-calculator.9elements.com/">CSS Clamp Generator</a></li>
<li><a href="https://cubic-bezier.com/">CSS Cubic Bézier Curve Generator</a></li>
<li><a href="https://unused-css.com/">CSS Efficiency Checker</a></li>
<li><a href="https://flexbox.tech/">CSS Flexbox Generator</a></li>
<li><a href="https://modern-fluid-typography.vercel.app/">CSS Fluid Typography Generator</a></li>
<li><a href="https://hype4.academy/tools/glassmorphism-generator">CSS Glassmorphism Generator</a></li>
<li><a href="https://www.joshwcomeau.com/gradient-generator/">CSS Gradient Generator</a></li>
<li><a href="https://layout.bradwoods.io/">CSS Grid Layout Generator</a></li>
<li><a href="https://autoprefixer.github.io/">CSS Prefixer</a></li>
<li><a href="https://quantityqueries.com/">CSS Quantity Query Generator</a></li>
<li><a href="https://isellsoap.github.io/specificity-visualizer/">CSS Specificity Visualizer</a></li>
<li><a href="https://omatsuri.app/triangle-generator">CSS Triangle Generator</a></li>
<li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
<li><a href="https://ezgif.com/image-to-datauri">Data URI Generator</a></li>
<li><a href="https://hihayk.github.io/shaper/">Design and Design Token Generator</a></li>
<li><a href="https://www.knapsack.cloud/calculator">Design System ROI Calculator</a></li>
<li><a href="https://tokens.layoutit.com/">Design Tokens Generator</a></li>
<li><a href="https://www.diagrameditor.com/">Diagram Editor</a></li>
<li><a href="https://doodad.dev/dither-me-this/">Dither Effect Generator</a></li>
<li><a href="https://www.nslookup.io/">DNS Analyzer</a></li>
<li><a href="https://www.whatsmydns.net/">DNS Propagation Checker</a></li>
<li><a href="https://uptime.com/domain-health">Domain and Server Health Checker</a></li>
<li><a href="https://www.namecheck.com/en/">Domain and Social Media Name Checker</a></li>
<li><a href="https://www.englishtools.org/en/convert-english-words-into-ipa-phonetic-alphabet">English to IPA Converter</a></li>
<li><a href="https://realfavicongenerator.net/favicon_checker">Favicon Checker</a></li>
<li><a href="https://www.websiteplanet.com/webtools/favicon-generator/">Favicon Generator</a></li>
<li><a href="https://favicon.io/">Favicon Generators</a></li>
<li><a href="https://flat-icon.surge.sh/">Flat Design Icon Generator</a></li>
<li><a href="https://www.myfonts.com/pages/whatthefont">Font Determiner</a></li>
<li><a href="https://meowni.ca/font-style-matcher/">Font Style Matcher</a></li>
<li><a href="https://play.typedetail.com/">Font Tester</a></li>
<li><a href="https://www.dotcom-tools.com/ftp-test">FTP Server Tester</a></li>
<li><a href="https://www.geo-tag.de/generator/en.html">Geo Tag Generator</a></li>
<li><a href="https://firstpr.me/">GitHub First Pull Request Checker</a></li>
<li><a href="https://googlechrome.github.io/lighthouse/scorecalc/">Google Lighthouse Scoring Calculator</a></li>
<li><a href="https://search.google.com/test/rich-results">Google Rich Results Checker</a></li>
<li><a href="https://gwfh.mranftl.com/fonts">Google Web Fonts Helper</a></li>
<li><a href="https://www.giftofspeed.com/gzip-test/">Gzip and Brotli Checker</a></li>
<li><a href="https://toolbox.googleapps.com/apps/har_analyzer/">HAR Analyzer and Visualizer</a></li>
<li><a href="https://services.w3.org/htmldiff">HTML Diff</a></li>
<li><a href="https://caninclude.glitch.me/">HTML Nesting Checker</a></li>
<li><a href="https://kangax.github.io/html-minifier/">HTML Optimizer and Minifier</a></li>
<li><a href="https://a11y-tools.com/markup-de-crapulator/">HTML Optimizer</a></li>
<li><a href="https://www.debugbear.com/html-size-analyzer">HTML Size Analyzer</a></li>
<li><a href="https://validator.w3.org/">HTML Validator</a></li>
<li><a href="https://unminify.com/">HTML, CSS, JavaScript, JSON, and XML Un-Minifier</a></li>
<li><a href="https://www.labnol.org/urlfetch/">HTTP Request Generator</a></li>
<li><a href="https://icomoon.io/app/">Icon Font, SVG, PDF, and PNG Generator</a></li>
<li><a href="https://www.photoroom.com/background-remover/">Image Background Remover</a></li>
<li><a href="https://cleanup.pictures/">Image Cleaner</a></li>
<li><a href="https://compressor.io/">Image Compressor</a></li>
<li><a href="https://www.freeconvert.com/image-converter">Image Converter</a></li>
<li><a href="https://webspeedtest.cloudinary.com/">Image Performance Analyzer</a></li>
<li><a href="https://validator.w3.org/i18n-checker/">Internationalization Checker</a></li>
<li><a href="https://netrenderer.com/">Internet Explorer Viewer</a></li>
<li><a href="http://latentflip.com/loupe/">JavaScript Call Stack Visualizer</a></li>
<li><a href="https://www.jslint.com/">JavaScript Linter</a></li>
<li><a href="https://obfuscator.io/">JavaScript Obfuscator</a></li>
<li><a href="https://snorpey.github.io/jpg-glitch/">JPEG Distorter</a></li>
<li><a href="https://j-brooke.github.io/FracturedJson/">JSON Formatter</a></li>
<li><a href="https://json-generator.com/">JSON Generator</a></li>
<li><a href="https://jsoncompare.com/">JSON Validator</a></li>
<li><a href="https://jwt.io/#debugger-io">JSON Web Token Debugger</a></li>
<li><a href="https://seositecheckup.com/tools/keywords-cloud-test">Keyword Cloud Generator</a></li>
<li><a href="https://keywordtool.io/">Keyword Generator</a></li>
<li><a href="https://javier.xyz/pintr/">Line Drawing Generator</a></li>
<li><a href="https://validator.w3.org/checklink">Link Checker</a></li>
<li><a href="https://www.siteliner.com/">Links and Content Analyzer</a></li>
<li><a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM Viewer</a></li>
<li><a href="https://sitecheck.sucuri.net/">Malware and Security Scanner</a></li>
<li><a href="https://search.google.com/test/mobile-friendly">Mobile-Friendliness Checker</a></li>
<li><a href="https://cloudconvert.com/">Multi-Purpose File Converter</a></li>
<li><a href="https://bundlejs.com/">Package Size Checker</a></li>
<li><a href="https://pagespeed.compare/">PageSpeed Results Comparer</a></li>
<li><a href="https://www.security.org/how-secure-is-my-password/">Password Security Checker</a></li>
<li><a href="https://www.performancebudget.io/">Performance Budget Calculator</a></li>
<li><a href="https://www.canva.com/photo-editor/">Photo Editor</a></li>
<li><a href="https://www.dotcom-tools.com/ping-test">Ping Tool (Regional)</a></li>
<li><a href="https://www.copyscape.com/">Plagiarism Checker</a></li>
<li><a href="https://explain.dalibo.com/">PostgreSQL Query Plan Analyzer and Visualizer</a></li>
<li><a href="https://www.bennadel.com/coldfusion/privacy-policy-generator.htm">Privacy Policy and Terms of Service Generator</a></li>
<li><a href="https://pfpmaker.com/">Profile Picture Generator</a></li>
<li><a href="https://www.punycoder.com/">Punycode Converter</a></li>
<li><a href="https://toolcool.org/random-favicon-generator/">Random Favicon Generator</a></li>
<li><a href="https://svgco.de/">Raster Image to SVG Converter</a></li>
<li><a href="https://www.experte.com/readability-checker">Readability Bulk Checker</a></li>
<li><a href="https://hemingwayapp.com/">Readability Checker</a></li>
<li><a href="https://www.freeformatter.com/regex-tester.html">Regex Tester</a></li>
<li><a href="https://www.debuggex.com/">Regex Visualizer</a></li>
<li><a href="https://viewdns.info/reverseip/">Reverse IP and Domain Lookup</a></li>
<li><a href="https://mxtoolbox.com/ReverseLookup.aspx">Reverse IP Lookup</a></li>
<li><a href="https://textmechanic.com/text-tools/obfuscation-tools/reverse-text-generator/">Reverse Text Generator</a></li>
<li><a href="https://www.internetmarketingninjas.com/tools/robots-txt-generator/">robots.txt Generator</a></li>
<li><a href="https://technicalseo.com/tools/robots-txt/">robots.txt Validator</a></li>
<li><a href="https://validator.w3.org/feed/">RSS and Atom Feed Validator</a></li>
<li><a href="https://www.browserling.com/">Screenshot Generator for Windows and Android</a></li>
<li><a href="https://browsershots.org/">Screenshot Generator for Windows, macOS, and Linux</a></li>
<li><a href="https://haveibeenpwned.com/">Security Leak Victim Checker</a></li>
<li><a href="https://seositecheckup.com/">SEO Analyzer (SEO SiteCheckup)</a></li>
<li><a href="https://spotibo.com/seo-analyzer">SEO Analyzer (Spotibo)</a></li>
<li><a href="https://www.xml-sitemaps.com/">Sitemap Generator</a></li>
<li><a href="https://slowfil.es/">Slow File Download Emulator</a></li>
<li><a href="https://metatags.io/">Social Markup Previewer and Generator</a></li>
<li><a href="https://www.namecheckr.com/">Social Media and Domain Name Checker</a></li>
<li><a href="https://www.sharedcount.com/">Social Signal Counter</a></li>
<li><a href="https://www.spf-record.com/spf-lookup">SPF Record Checker</a></li>
<li><a href="https://www.spfwizard.net/">SPF Record Generator</a></li>
<li><a href="https://www.ssllabs.com/ssltest/">SSL Checker</a></li>
<li><a href="https://www.howsmyssl.com/">SSL Client Checker</a></li>
<li><a href="https://www.google.com/webmasters/markup-helper/">Structured Data Generator</a></li>
<li><a href="https://www.srihash.org/">Subresource Integrity Hash Generator</a></li>
<li><a href="https://vectorpaint.yaks.co.nz/">SVG Editor</a></li>
<li><a href="https://jakearchibald.github.io/svgomg/">SVG Optimizer</a></li>
<li><a href="https://tagcrowd.com/">Tag Cloud Generator</a></li>
<li><a href="https://type-scale.com/">Type Scale Generator</a></li>
<li><a href="https://www.typescriptlang.org/play">TypeScript Tester</a></li>
<li><a href="https://r12a.github.io/app-conversion/">Unicode Code Converter</a></li>
<li><a href="https://mothereff.in/unquoted-attributes">Unquoted Attribute Value Validator</a></li>
<li><a href="https://toolbox.googleapps.com/apps/browserinfo/">User Agent Detector</a></li>
<li><a href="https://www.fakenamegenerator.com/gen-random-us-us.php">User Identity Generator</a></li>
<li><a href="https://www.uuidgenerator.net/">UUID Generator</a></li>
<li><a href="https://template-explorer.vuejs.org/">Vue.js Template Analyzer</a></li>
<li><a href="https://mauve.isti.cnr.it/singleValidation.jsp">WCAG 2.0 and 2.1 Checker</a></li>
<li><a href="https://www.textise.net/">Web Page to Text Converter</a></li>
<li><a href="https://calibreapp.com/tools/core-web-vitals-checker">Web Vitals Analyzer</a></li>
<li><a href="https://www.frustrationindex.com/">WebPageTest Report Frustration Calculator</a></li>
<li><a href="https://www.accessify.com/">Website Analyzer (Accessify)</a></li>
<li><a href="https://frontenddogma.com/tools/check/">Website Analyzer (Frontend Dogma)</a></li>
<li><a href="https://nibbler.insites.com/">Website Analyzer (Nibbler)</a></li>
<li><a href="https://archive.vn/">Website Archiver (archive.today)</a></li>
<li><a href="https://archive.org/web/">Website Archiver (Internet Archive)</a></li>
<li><a href="https://www.dotcom-tools.com/china-firewall-test">Website Blockade Checker for China</a></li>
<li><a href="https://isitblockedinrussia.com/">Website Blockade Checker for Russia</a></li>
<li><a href="https://www.dotcom-tools.com/website-speed-test">Website Browser and Location Speed Tester</a></li>
<li><a href="https://digitalbeacon.co/">Website Carbon Footprint Calculator (Beacon)</a></li>
<li><a href="https://www.websitecarbon.com/">Website Carbon Footprint Calculator (Wholegrain Digital)</a></li>
<li><a href="https://www.experte.com/page-experience">Website Experience Analyzer</a></li>
<li><a href="https://observatory.mozilla.org/">Website Headers Analyzer (Mozilla)</a></li>
<li><a href="https://securityheaders.com/">Website Headers Analyzer (Security Headers)</a></li>
<li><a href="https://pagespeed.web.dev/">Website Performance Analyzer (PageSpeed)</a></li>
<li><a href="https://www.webpagetest.org/">Website Performance Analyzer (WebPageTest)</a></li>
<li><a href="https://transparencyreport.google.com/safe-browsing/search">Website Security Checker (Google)</a></li>
<li><a href="https://safeweb.norton.com/">Website Security Checker (Norton)</a></li>
<li><a href="https://builtwith.com/">Website Technology Analyzer</a></li>
<li><a href="https://translate.google.com/?sl=auto&tl=en&op=websites">Website Translator</a></li>
<li><a href="https://www.godaddy.com/domain-value-appraisal">Website Value Estimator</a></li>
<li><a href="https://w3c.github.io/webvtt.js/parser.html">WebVTT Validator</a></li>
<li><a href="https://whois.domaintools.com/">WHOIS Analyzer</a></li>
<li><a href="https://myip.ms/">WHOIS and Hosting Analyzer</a></li>
<li><a href="https://wppluginchecker.earthpeople.se/">WordPress Plugin Detector</a></li>
<li><a href="https://www.accessify.com/tools-and-wizards/developer-tools/xfn/default.php">XFN Link Generator</a></li>
<li><a href="https://www.freeformatter.com/xml-formatter.html">XML Formatter</a></li>
<li><a href="https://schneegans.de/sv/">XML Schema Validator</a></li>
<li><a href="https://www.freeformatter.com/xml-validator-xsd.html">XML XSD Checker</a></li>
<li><a href="https://codebeautify.org/yaml-validator">YAML Validator</a></li>
</ol>

This is it. 200 amazing tools.

But.

Lists like this—of which there are <a href="https://www.google.com/search?q=web+development+tools">tons</a>—often amount to somewhat weird, somewhat nonsensical clickbait. There are <em>dedicated, curated, and maintained collections</em> for this, providing more choice of higher quality.

One is <a href="https://frontenddogma.com/tools/">Frontend Dogma’s list of web-based development tools</a> (<a href="https://frontenddogma.com/topics/tools/">by tag</a>). Yes, disclosure, that’s a collection I maintain, and it’s not the only one of its kind—there is <a href="https://tiny-helpers.dev/">Tiny Helpers</a>, run by <a href="https://www.stefanjudis.com/">Stefan Judis</a>, and there are others, certainly including some <a href="https://www.trackawesomelist.com/">“Awesome Lists,”</a> buried under hyped one-off posts of fractions of the value.

Given these dedicated sites, it’s also easy to take a snapshot of them and present a giga-post like this one. But in many and perhaps most cases, doing so subverts the commitment that goes into <em>maintaining</em> such collections over time. (In Frontend Dogma’s case, whose resources were based on UITest.com, <a href="https://meiert.com/en/blog/uitestcom/">over nearly 20 years</a>.)

If you’re a fan of link lists like this one, consider looking for (and contributing to) dedicated sites and collections, like Frontend Dogma or Tiny Helpers or a proven Awesome List.

And if you’re someone who likes to set up and market your own mini-lists (as you’re here, we know that they draw attention), consider supporting and giving back to collections you may get your inspiration from.

<em>With kudos and compliments to everyone out there who provides and maintains web-based tools—and tool collections.</em>