5 Front-End Tools

5 Front-End Tools

Our Top 5 Favorite Front-End Development Tools

We feel that these 5 tools are an essential for any front-end developer to have in their toolbox.

We are strong believers in the old saying “it’s not the tools you use, it’s how you use them”. However, we feel that these 5 tools are an essential for any front-end developer to have in their toolbox. Here is a list of our top 5 favorite front-end development tools.

Google Fonts

A massive library of free fonts designed to be used on the web. Google Fonts makes it easy to add beautify fonts to any web-based project. It even allows users to download fonts to be used locally or to added into mobile applications.

Vue Js

Vue JS is an amazing JavaScript framework that gives its user exceptional control over the DOM. This allows for web apps to be built with much cleaner code, and much quicker. It is a similar framework to Angular or React, but we prefer Vue JS because of its great documentation and quick learning curve.

Font Awesome

Font Awesome provides a massive library of vector-based icons that can be easily added to any web project. The best part is that these icons can be manipulated by CSS, as they are treated like a font. This also allows for transitions and animations to be made to the icons, all through CSS or Javascript. Furthermore, as the icons are vector based, they can be scaled to any size without losing image quality.

SCSS (Sass)

Sass is an extremely powerful CSS pre-compiler that will definitely speed up your CSS development time. It has a nested syntax that allows for clean and organized CSS files. Furthermore, it allows for variables to be made with CSS. This is a powerful feature that allows users to quickly change the look and feel of websites. Sass must use a compiler to be turned into regular CSS for use on a website. We use Koala, a GUI based compiler.

CodePen

CodePen is an online front-end development playground. It allows users to code in HTML, CSS, and Javascript. It also lets users add javascript frameworks and pre-compilers for both CSS and HTML. Our main draw to Codepen is how quickly you can set up a new project, and that it renders simultaneously as you type. CodePen does have its limitation but we think it is the perfect tool for experimentation or developing small sections of a website.