13 Essential Resources for Front-End Developers

When building websites, we need resources. Images, fonts, frameworks, and more. In this article, we’re going to explore 13 essential resources that will make your life easier as a front-end developer.

1. Visual Studio Code

It should be of no surprise to you that Visual Studio Code is at the top of our list. If you’re developing modern software built with modern technologies, this editor is must-have.

Let’s dig in to some of the features of Visual Studio Code:

• IntelliSense
• Debugging
• Git commands built-in
• Extensible and customizable

IntelliSense

Code autocompletion with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.

Debugging

Debug code right from the editor.

Git commands built-in

Review diffs, stage files, and make commits right from the editor. Push and pull from any hosted SCM service.

Extensible and customizable

Install extensions to add new languages, themes, debuggers, and to connect to additional services.

2. React

React is a JavaScript library for building user interfaces. Built by engineers at Facebook, React is must-know tool if you’re planning on being a front-end developer. In 2021, React surpassed jQuery as the most commonly used web framework.

The best way to learn React is through the official documentation and tutorial.

3. Gatsby

Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL. It provides over 2500 plugins to create static sites based on sources as Markdown documents, MDX, images, and numerous Content Management Systems such as WordPress, Drupal and more.

Using Gatsby will speed up the development process, as there are lots of templates to choose from.

4. Bootstrap

Bootstrap is a CSS framework directed at responsive, mobile-first front-end web development. Being first released in 2011, it is by far the most popular CSS framework used on the web today, with 158,000+ stars on GitHub.

5. Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be, which we think is quite impressive.

6. Bulma

Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

We absolutely love Bulma and have used it in quite a few of our own projects. Give it a try, we’re sure you’ll love it too.

7. WebGradients

WebGradients is a free collection of 180 linear gradients that you can use as
content backdrops in any part of your website. Easy copy CSS3 crossbrowser code
and use it in a moment! We’ve also prepared a .PNG version of each gradient.

8. Font Awesome

Those social icons on our navigation bar and footer? They’re there thanks to Font Awesome, an icon library and toolkit, used by millions of websites on the web today. There’s an icon for nearly everything you can think of, which makes font awesome a fantastic resource for your projects.

9. Canva

We wrote about Canva in a previous article. It is an incredible resource for your websites, social media accounts, and more. Canva makes it incredibly easy to create awesome graphics. Give it a try!

10. Google Fonts

There’s a high chance the last 50 websites you’ve visited have had Google fonts in use. Google Fonts is a library of 1464 open source font families and APIs for convenient use via CSS and Android. You’ll probably want to bookmark this or memorize the URL for your development needs.

11. Envato Elements - HTML templates

Envato Elements is home to all sorts of templates, from web pages, graphics, and music, whatever you need will be found on this site. Most useful, in our opinion, are the HTML and CSS templates. If you’re into freelancing, this resource will be highly useful to you.

12. Namecheap

Is your portfolio hosted on GitHub without a custom domain name (i.e. username.github.io)? You might want to update that to be a real, custom domain name. By far the best service we’ve used to purchase domain names is from Namecheap.

It’s super simple to set up your new domain name with most hosting services, and it’s almost guaranteed there’s an article from Namecheap describing the exact process.

13. Courses

The learning never ends. Keep your skills sharp with the following websites:

• Udacity
• LinkedIn Learning
• Coursera
• TeamTreeHouse
• Udemy
• Edx
• EggHead
• FreeCodeCamp
• Pluralsight
• LevelUpTuts

Let me know about your favorite resource(s) in the comments below!