As the functionalities of web apps keep getting ever more sophisticated and complex, web developers need flexible tools to keep up with rising user expectations. The good news is, the web development ecosystem gives us plenty of choice, with both well-established companies and the open-source community racing to build more powerful libraries, frameworks and apps to help developers do their job and increase productivity and efficiency.
In this post, I’ve rounded up 30 top tools for front-end web developers ranging from code editors and code playgrounds to CSS generators, JS libraries, and more.
Let’s dive right in!
Front-end developers spend hours writing or editing code. Therefore, it’s only natural that their closest friend on the job is the code editor. In fact, getting to know their code editor of choice and all its capabilities and shortcuts gives any dev a great advantage in terms of productivity.
Visual Studio Code (VS Code) by Microsoft is a full-blown, free and open-source cross-platform integrated development environment (IDE) — that is, a complex piece of software that allows developers to create, test and deploy an entire project.
Here are some of VS Code’s most popular features:
- IntelliSense, offering syntax highlighting and smart completions based on variable types, function definitions and imported modules
- debugging capabilities
- built-in Git commands
- flexibility and extensibility: you can easily add extensions relative to new languages, themes, etc.
- easy deployment capabilities
You can download VS Code for Windows, MacOS, and Linux.
Atom is a free, open-source and powerful cross-platform code editor that allows you to:
- collaborate with other developers using Teletype for Atom
- work with Git and GitHub with GitHub for Atom
- edit code on different platforms
- speed up coding with smart auto-completion
- search for, install and even create your own packages
- browse project files
- split the interface into multiple panes
- find and replace in a file or in multiple projects
- add new themes and customize the editor’s appearance and behavior by tweaking its code.
Sublime Text introduces itself as “a sophisticated text editor for code, markup and prose”.
It’s a paid, cross-platform code editing app with tons of features. These include:
- Goto Anything functionality: shortcuts that allow developers to search for bits of code in files and open files in projects
- multiple selections
- powerful API and package ecosystem to extend the built-in functionality
- split editing
- easy customization
- fast project switching
- high performance
- and more
Package managers are collections of tools for consistently automating processes like installing, upgrading, configuring and removing programs. Typing
npm install or yarn install in a command-line interface has become one of the most ordinary parts of a developer’s day-to-day job.
What is npm? Well, as it says on the company’s website, it’s many things. In particular:
- it’s the package manager for Node.js that helps JS devs to share packaged modules of code
- the npm registry is a public collection of packages of open-source code for Node.js, front-end web apps, and more
- npm is also the command-line client developers use to install and publish those packages
- npm, Inc. is the company responsible for hosting and maintaining all of the above
Yarn is a package manager for installing and sharing code and also a project manager. It’s extensible via plugins, stable, very well documented, free and open source.
Module bundlers are used to bundle several modules into one or more optimized bundles for the browser.
Here’s all the goodness you’ll find in webpack, as it’s detailed in the software’s website:
Parcel is a “blazing fast, zero configuration web application bundler”.
- is fast
- bundles all the project’s assets
- has zero-config code splitting
- and more.
Have you ever tried to memorize how to declare CSS properties for gradients, text shadows, Flexbox or Grid, to mention just a few? Not easy. Unless you use some CSS features and their properties over and over again, it’s hard to remember them all. But even those who master CSS sometimes need a refresher on some properties, especially if they haven’t used them in a while.
If you need some quick help with the latest and greatest CSS, here are CSS generators to the rescue. Enter the values, preview the result, grab the generated code and run.
The CSS3 Generator is a free online app that lets you quickly write code for a number of modern CSS features like Flexbox, gradients, transitions and transforms, and many more.
Enter the required CSS values, preview the result in real time, copy and paste the generated code. Also, this app shows a list of browsers and their versions where your CSS code is supported.
The Ultimate CSS Generator is a free online app that lets you generate code for CSS animation, backgrounds, gradients, borders, filters, and more.
The interface is user-friendly, the information about browser support for the CSS feature you’re interested in is clear and easy to spot, and the generated code is clean and accurate.
CSS Grid is awesome, and creating your grid in code gives you full control over the final result. However, it’s helpful to have a visual representation of the grid while you’re coding. Although some major browsers have implemented great tools to let you visualize your grid, some devs could do with some additional help. Here’s where a CSS Grid generator might come in handy.
The CSS Grid Layout Generator by Dmitrii Bykov is free, accessible online, and extremely flexible. I took it for a spin and found that it gives me a lot of control both at the level of the grid container and that of the grid item while providing me with nice preview capabilities and clean code.
If you need help, click on the How to Use button and watch the presentation video offered by the app’s author.
To know more about which CSS Grid generators are available, I put some of the best ones through their paces on SitePoint in my article “5 Super CSS Grid Generators for Your Layouts”.
Libraries and Frameworks
- being declarative, which makes building user interfaces easy to code, update and debug
- being component-based
- being agnostic about the technology stack used to build the project
- Versatile: you can easily integrate Vue into a web project as little or as much as you need. You can start by applying Vue to the UI and progressively scale up to its full-blown framework capabilities.
- Small and highly performant.
Created by Google, Angular is the most mature of all the frameworks listed here. It’s free and open source, it’s got the backing of a giant company and the support of a strong community.
Advantages of using Angular include:
- being cross-platform: web, mobile web, native mobile and native desktop
- speed and performance
- powerful tooling
- the productivity and scalable infrastructure that supports Google’s largest applications
Static Site Generators
Static site generators represent a
… compromise between using a hand-coded static site and a full CMS,
while retaining the benefits of both. In essence, you generate a
static HTML-only website using CMS-like concepts such as templates.
The content can be extracted from a database but, more typically,
Markdown files are used. — Craig Buckler, “7 Reasons to Use a Static Site Generator”
Here are the top two static site generators listed on the StaticGen website.
Next is a free and open-source framework for statically exported React apps. Features include:
- pre-rendering (Next supports server-side rendering)
- zero configuration
- awesome documentation
- and more.
Gatsby is a free and open source framework based on React that helps
developers build blazing fast websites and apps.
Gatsby provides tons of features like:
- a rich data plugin ecosystem
- progressive web apps generation
- super easy deployment
- starters, or pre-packaged Gatsby sites tailored to different use cases
- and more.
Performance is crucial on the Web: visitors get impatient as they wait for content to load and search engines tend to penalize slow and sluggish websites.
Optimizing graphics is a necessary step towards building blazing-fast websites and apps, and SVG graphics are no exception. To make sure the SVG code is clean and uncluttered, using an SVG optimizer has become an essential step in the workflow of a front-end developer.
Below are two SVG optimizers that do a fantastic job and are widely used by professional devs.
SVGOMG is a free online app that lets you apply a number of optimization options to your SVG code and preview the end result. It’s easy to use and it also works offline. Check out this article by Sara Soueidan to learn more.
This is another fantastic, free, online SVG optimization tool you can use to trim your SVG code. It’s intuitive and a breeze to use. For more details on how to get the best out of it, head over to “The Designer’s Guide to Working with SVG – Pt 1” by Alex Walker.
Animation is present everywhere on the Web, be it in the form of subtle micro effects or the story-telling movement of big chunks of content that gradually unfolds on the screen.
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
As its name suggests, the library is in pure CSS. Among the pre-packaged effects, you’ll find: attention seekers like bouncing and flashing effects, back entrances and exits, fading in and fading out, and tons more.
- quick installation with npm, Yarn or CDN
- ease of use
- option of using CSS custom properties (CSS variables) to customize the animation duration, delay and interactions
- utility classes for delays, speed variations and repetitions
GSAP (GreenSock Animation Platform) offers “ultra high-performance, professional-grade animation for the modern web”.
Anime was created by Julian Garnier and is entirely free and open source. Thanks to its intuitive syntax and fantastic docs, you can be up and running with Anime.js in no time.
Front-end developers’ best friends, built-in developer tools offered by major browsers are an integral part of day-to-day web programming tasks. They allow developers to understand code written by others, to test changes to the code in real time, and to debug chunks of front-end code, as well as making performance checks and much more.
These tools keep getting more and more sophisticated and helpful, so much so that I can’t think of ever being able to do without them.
Below are developer tools made available by two major browsers, Mozilla Firefox and Google Chrome.
For a detailed guide on what they are and how to use them, don’t miss this dedicated reference on MDN.
For those who mainly use Chrome as their browser of choice, the Chrome DevTools are an essential part of their workflow.
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
Developers have no control over which kind of device their websites or apps are going to be accessed from. In 2019, over half of the web traffic came from mobile devices. On the whole, screen sizes vary from desktop and tablet to smartphone and wearable technology.
As front-end developers, making sure the web page remains usable at any screen size constitutes a core component of our job. While nothing compares to testing websites and apps directly on different browsers and platforms, covering all the bases this way is not an option available to most of us. The services and apps listed below can help.
You’ll get up-to-date statistical results, both at the global and country-specific level, as well as information about specific issues, resources, etc.
This is a free online app that lets you quickly check how your website looks at different screen sizes.
Here’s a list of the features:
- You can use the app from its website by entering the URL of the site you intend to test in a textbox or from anywhere by using the Am I Responsive bookmarklet on your browser.
- You can click and scroll inside each device on which your website is displayed for testing.
Responsive Web Design Checker is another free online app to test how your website looks not only on different screen sizes, but also on a wide range of devices. These include various kinds of desktops and notebooks, tablets like Apple iPad Retina and Amazon Kindle Fire, and smartphones like Apple iPhone 6/7 Plus, Samsung Galaxy, and plenty more.
BrowserStack is a popular, paid service that lets you test your website or app on 2000+ real devices and browsers. It works out of the box and is totally secure.
Code collaboration and Playgrounds
If you imagine coders as being individuals who spend their days typing away in splendid isolation for hours, forget it. At least, this is part of the story. The most common scenario involves teams of developers and non developers working on the same project. Therefore, being able to collaborate on projects and share code is of paramount importance to the success of most web projects.
Below are some great tools that let you quickly share code, prototype and test project ideas.
The #1 go-to place for team collaboration and code sharing cannot be but the super popular and established GitHub.
Here’s how GitHub introduces itself:
CodePen has been around for years and is loved and widely used by the front-end developer community. Created by Chris Coyier and Alex Vazquez, it’s amazing for trying out concepts, prototyping, learning to code, and code sharing. It’s defined by its team as follows:
There are thousands of web development tools available to front-end devs. What’s important is that you understand entirely what each tool does so that you can make the best choice specific to your project’s needs. Front-end web development keeps growing and evolving, so it’s crucial to stay on top of the new shiny tools out there as some will save you hours of development, and more importantly, contribute to a better user experience.
Maria Antonietta Perna is co-Editor of the HTML/CSS Channel at SitePoint and a front-end web developer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding for the web or not writing for the web, she enjoys philosophy books, long walks and good food.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers