August 27, 2019

Useful Online Web Development and Web Design Tools

Useful Online HTML Javscript & CSS Tools

Looking to improve your web development productivity? You got to the right place! look around for useful and interesting online web development tools (web dev tools) suitable for both beginner and professional web professionals (developers and designers), that will help you to improve your productivity, boost creativity, and learn how to become a better developer.

These tools allows you to test and debug (including simulate user browsing), improve your code and making it error-free (HTML, CSS, JS), which will results in better user experience.

You should know that most popular web browsers (such as Firefox, Google Chrome, and Internet Explorer) already have built-in tools for professional web development, which is offered for free and do not require additional modules or extensions, means you can use them right in the browser:
Website Speed Test & Performance Optimization
  • Google PageSpeed Insights - A tool from Google that will analyze the content of your website, then generates suggestions to make that page faster.
  • GTmetrix - A free, comprehensive tool that analyzes your page's speed performance.
  • Pingdom - A free Website Speed Test to analyze the load speed of your websites, and learn how to make them faster.
  • WebPagetest - Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.
  • Varvy SEO Pagespeed - Find out what is slowing down your site.
  • Dotcom-Monitor - Test your website speed from multiple locations worldwide.
  • GiftofSpeed - Offer website speed test, tools and techniques to optimize page speed.
Validate Code
Minify and Compression
  • Refresh-SF - Minify your JavaScript, CSS and HTML. This tool uses UglifyJS 2, Clean-CSS and HTML Minifier.
  • HTML Compressor - Reliable tool to reduce the size of HTML, CSS, JavaScript, PHP and Smarty code.
  • DirtyMarkup - Tidy up your HTML, CSS, and JavaScript code
  • CompressorRater - JavaScript Compressor and Comparison Utility.
  • ResizeImage - Free online image resizer.
  • ResizePicOnline - Convenient online tool to resize images.
  • TinyJPG - Smart JPEG and PNG compression.
  • Compress-or-Die - Online image compressor and resizer for design professionals.
Color and Element Generators
Find Icons
  • Font Awesome - Popular and easy to use icon set and toolkit. Get vector icons and social logos on your website.
  • Icons8 - Download free icons.
  • IconFinder - Free and premium vector icons. 3+ million SVG icons.
  • Noun Project - Over 2 Million curated icons, created by a global community.
  • IconMonster - Free simple icons for your next project.
  • Fontello - A tool to quickly pack vector images into webfonts.
Online IDE
  • jsFiddle - playground for web developers, an online editor for web snippets. Helps to isolate bugs.
  • Bootstrap Editor - Playground for JavaScript, CSS, HTML5 and jQuery.
  • JS Bin - Front End Developer Playground & Code Editor for HTML, CSS, and JavaScript.
  • CodePen - Front End Developer Playground & Code Editor for HTML, CSS, and JavaScript.
  • Mozilla Thimble - An online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript.
  • TextMechanic - Find and Replace Text.
  • Firefox Eyedropper - Build-in tool in Firefox that enables you to select colors in the current page.
  • ColorZilla - Read colors from any point in the browser.
  • WhatTheFont - Detect font from an image.
  • WhatFont - Easily get font information about the text you are hovering on.
  • Fount - Identify any web font you see in the browser.
  • Screenfly - Test your website on any screen size including desktops, tablets, televisions, and mobile phones.
  • TWBSColor - Generate your own Bootstrap navbar.
  • BuiltWith - Find out what websites are Built With.