January 11, 2017

Useful Online Web Development Tools

Useful Online HTML Javscript & CSS Tools

Most useful online/web-based development tools suitable for both beginner and professional web developers, that will help you to become a better developer and improve your productivity.
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.
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.
  • 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.