Here’s a list of some of the free online tools that will help you in designing and developing websites. The list includes everything from image optimisers, browser plugins to code validators and everything in between. Enjoy this collection of tools that will make your work better and more efficient.
Sublime Text
Sublime Text is lightweight, quick, customisable, and it has a large library of plugins that are backed up by an active community. You can download it for free, but it will cost money for “continued use.”
The plugins are free, though! Here are some:
Package Control – A package manager for easily installing and managing the plugins
Compass – Adds a build system for Compass Watch when opening SASS files
Emmet – Tags auto-completer for HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS
SassBeautify – A plugin that beautifies SASS files
SublimeLint – Errors highlighting
Git Gutter – Shows you the lines that were added, removed or edited since your last git commit.
Google Web Fonts
Google has hundreds of free, open-source fonts to choose from. These fonts are easy to implement and can be downloaded for use in design files. Only be careful of using too many different fonts on your site ( including different styles of the same font), or it will negatively impact your load time.
Free stock photos (Unsplash, Death of the Stock Photo, Gratisography, Picjumbo, Pixabay, Stock Up)
You don’t always have a budget for a professional photo shoot or even paid stock photos. When that’s the case, turn to the free stock photo sites mentioned above. They’re great for placement purposes or just changing up the monotony of the traditional stock photo.
ImageOptim
It optimizes your images and does it without losing quality. If you want, you can tweak the settings to get even smaller image sizes. Plus, it will delete any metadata (GPS position, camera serial number, etc.) if that’s a concern for you.
GraphicBurger
GraphicBurger is a great site for free design resources like PSD mockups (devices, collateral, products, etc.), UI kits, icons, and much more. Everything you can use from there have very high quality, and also royalty free for commercial use.
Real Favicon Generator
Real Favicon Generator makes it very easy to implement every favicon or platform icon you ever want. Just upload a PNG, JPG, or SVG file which is at least 260px by 260px, and will generate all the Apple, Android, Windows mobile, desktop, and regular favicons in one easy-to-download ZIP file, as well as the code to implement them.
Livereload
Livereload is a handy tool for web developers. It monitors changes in a file system and reloads the browser as soon as you save. When you update an image or change a CSS file, it instantly updates even without reloading the browser. This tool can save you countless seconds, which will really pay off over the long haul. It works on Safari, Mobile Safari, Chrome, Firefox, and Opera with desktop (Mac and Windows) and browser extensions.
Embed Responsively
This service gives you responsive CSS to go along with the embed code from popular services such as YouTube, Vimeo, Google Maps, and Instagram. Your mobile users will thank you later.
Snazzy Maps
Snazzy Maps allows you to create better looking Google Maps and embed them on your website. You can choose from some preset styles or create your own and customise every single detail to your heart’s desire.
Tape
This Google Chrome plugin lets you set guidelines on a website just like you would in sketch or photoshop. It also allows you to measure positions and sizes of elements easily, even taking padding and borders into account.
OneTab
This browser plugin can probably save you a bunch of memory. It will consolidate all of the open tabs in a window into one tiny list that can be reopened at any future time. If you use this plugin constantly, your computer will run much faster because of it.
W3C validators (CSS Validator, HTML Checker, Link Checker)
These W3C validators are great resources for finding mistakes. Just type your URL into each of these and rest easy knowing that your HTML, CSS, and links are free from errors and optimised according to the W3C standards.
Toggl
Toggl is a really simple tool for tracking time. It’s available anywhere online (be it web, desktop, mobile), and it works great for teams and freelancers alike. It also creates some handy charts and reports that will enable you to analyse where your hours are going on projects. It’s free for teams up to five.
Use a combination of these tools for a more efficient work. Aside from that, consider consulting the top web developers in Australia today.