As a Front End developer you’ll be using a lot of tools on a daily basis to make your life easier and workflow more productive. Below I’d like to share popular tools for Front End developers.
- Code editor
- Online code editor
- Design editor
- Version control
- Web performance
- API docs
- Local server
- Free hosting
- Online diff
- Code formatter
- Browser support
Having a good code editor can save you a lot of time by helping you write code efficiently and effortlessly. Not only that a good code editor possesses additional features that can help you manage the day-to-day tasks as a developer, like versioning system and debugging.
There are quite a few different code editors to choose from but the following are the two most popular ones:
- Visual Studio Code - considered to be the most popular FREE code editor;
- Web Storm - a full-fledged IDE with tons of useful features (PAID subscription-based, but has a 30-day trial).
Online code editor
Sometimes to make a quick prototype or a demo you can use an online code editor. These days there’s a wide variety of online code editors available.
The best part is you can make projects without worrying much about configuration or setup. All you need to do is just write a code and see a result, which you can instantly share or save for later. And then you can access your work from any device and any place
To view design files you’ll need a design editing/viewing tool. From collaborating with other team members to editing or just viewing the design of the app or a website. There are a number of different tools but the most popular ones are:
There are a few tools that can help you manage and track changes to your project:
To measure the speed, load time, performance, and best practices of your website, you can use the following free online tools:
- GTMetrix - online tool to measure the performance of the website;
- PageSpeed Insights - online tool to measure the performance of the website;
- Lighthouse - runs audits for performance, accessibility, progressive web apps, SEO, and more in Chrome browser;
- web.dev - online tool to measure the performance of the website;
Typography and fonts are an integral part of web design. As a Front End developer you’ll be working with different fonts quite often. Sometimes a well-chosen font can make a huge difference in the appearance of a website.
The following tools offer a library of the most popular fonts as well as help you to select and add fonts to your webpage:
Same as Fonts, images play a vital part in the web design. When working with images you have quite a few tools at your hands to ease your life:
- Unsplash - FREE stock image library;
- Pixabay - FREE stock image library;
- Canva - FREE online image editor;
- TinyPNG - FREE online image size compressor.
Various API Documentations are a must-have resource for any Front End developer. Used heavily on a daily basis to look up code references, definitions, and examples.
There might be times when you’re offline and still need to get information. Offline API Documentation is a lifesaver:
You’ll need a server to work locally with database and network requests. There are a few options to choose from:
To test your project in a live environment you’ll need hosting. But usually hosting services are pretty expensive, especially when you’re still learning Front End development. Luckily there are some FREE hostings that you can use to deploy and test your projects:
While some code editors and IDEs provide a build-in tool to check the difference between the files, there are online tools that can help you manage that task:
You can use a code formatting tool to either beautify or uglify code.
Front End developers have to be aware of what language feature or property is supported by the browsers, usually, to check technology browser support you should use:
The list is now quite full, I’ve just mentioned the most common and popular ones. There are a lot more tools for Front End developers that can help you be more productive and creative during the development process.
It’s nearly impossible to mention all of the tools as the number could be quite large, however, I’d like to provide useful links that you can explore yourself:
- Tiny Helpers - A collection of free single-purpose online tools for web developers by Stefan Judis;
- Web Development Resources - Awesome Web Development Resources list by Marco Denic;
- Awesome Toolkits - A curated list of open source, high-quality, popular and well maintained “zero-configuration” (#0CJS) toolkits by Ronald Rey;
- Awesome - Awesome lists about all kinds of interesting topics by Sindre Sorhus.