Looking through job postings for a front-end developer can be overwhelming.

From mentions of back-end JavaScript libraries to various CMS platforms and even SEO-related requirements, it can be shocking to see the wide variety of front-end developer skills that job descriptions can require.

Since no two front-end developer job descriptions are alike, it can make you wonder: what are the essential skills I actually need to become a front-end web developer? How do I decide what kind of front-end developer I want to be?

That's exactly what I want to answer in this post. I'll cut through those conflicting job listings to identify the key front-end developer skills you should focus on based on your personal goals.

Plus, you’ll find out how to actually learn those skills and take big steps towards becoming a front-end developer.

Let's get into it!

Disclosure: I’m a proud affiliate for some of the resources mentioned in this article. If you buy a product through my links on this page, I may get a small commission for referring you. Thanks!

Front end skills checklist Download a free checklist that will walk you through all the skills you need to become a front-end developer. Success! Now check your email to confirm your subscription.

Part 1: What it takes to become a front-end developer

First of all, let's start with the basics: what is a front-end developer, what does a front-end developer do, and how do you become one?

What is a front-end developer?

A front-end web developer implements web designs using various coding languages (see more about this below). If you look at any site, almost anything you can see on the front-end, from the page layout to the navigation menus, have probably been designed by a front-end developer.

You might also be wondering how to become a front-end engineer. In most cases, the terms “developer” and “engineer” are interchangeable. So if you see a job listing with the title “front-end engineer”, don't panic!

How to become a front-end developer

Now that you know what the role entails, what does it actually take to become a front-end developer?

I gathered my insights from four sources:

Job descriptions themselves

What coding bootcamps are teaching

Which technologies high-profile companies are using

Insights from leaders in the web development space

This way, you'll get a sense of what front-end developer requirements are in the real world—instead of a context-less front-end developer skills list that may not be based on the real tech industry!

Front-end developer job descriptions

Let's take a look at what companies are searching for when hiring a front-end developer.

For this first part, I analyzed different listings for front-end web developer jobs. Here's what I did to find these job ads:

Used Indeed.com

Only looked at entry-level to mid-level listings (nothing senior level)

If I saw any mention of Flash, I immediately disregarded the listing (since it is an outdated skill)

As mentioned in the beginning, every front-end job description is different and lists a ton of skills, and you'll see this first-hand here! However, don't worry: you don’t necessarily need to have ALL of these skills.

Here’s a look at just how different job listings for front-end devs can be.

Job #1: Front-End Engineer

This front-end engineer listing asks for some back-end skills as well (Python and Django).

You'll also notice a few key soft skills highlighted. Notably, you should work well with a team and be a good communicator. These days, development can be a fairly social role; no more solitary cubicles!

Job #2: Junior Front-End Developer

In this junior front-end developer listing, you'll notice that it requires design and UI/UX skills with knowledge of Photoshop and Sketch.

This demonstrates that some front-end developer jobs focus more on the coding, others focus on the visual design, and many will combine them to one degree or another.

Job #3: Front-End Software Engineer

This front-end software engineer job posting requires knowledge of ES6, d3, webGL—even more different languages than the ones above!

Another difference in this listing is that it mentions having a relevant BA/BS degree, whereas the previous two mentioned experience only.

Job #4: Front-End Developer

This last job requires front-end developer skills including SASS and MVC frameworks, knowledge of Git version control and branches, and front-end build tools like NPM, Webpack, and Grunt.

As soft skills go, you'll notice that communication makes another appearance here!

Before you get discouraged, be aware that the vast majority of job ads are more of a “wish list.” Very few applicants will tick all the boxes right out the gate, and companies don't expect you to. (More on this later!)

Head back to the table of contents »

The front-end technologies popular tech companies use

Since front-end developer job listings can vary so widely, it's useful to narrow your focus more. It may be a good idea to check your dream company’s tech stack to inform what you should learn. The easiest way to do this is by using stackshare.io.

Here's a quick look at popular companies' front-end tech stacks:

Airbnb uses React, ES6, SASS, CSS/HTML, and JavaScript

uses React, ES6, SASS, CSS/HTML, and JavaScript Uber uses Node.js, React, Angular, LESS, SASS, ES2015, and CoffeeScript

uses Node.js, React, Angular, LESS, SASS, ES2015, and CoffeeScript Amazon uses front-end tech like JavaScript, Typescript, Angular.js, and LESS

Ask yourself: if you could work anywhere, what companies would you pick? Then search job postings to see what front-end developer skills they usually ask for, and learn those to reverse-engineer your dream job.

Head back to the table of contents »

What coding courses and bootcamps are teaching

Let's turn to the increasingly popular developer bootcamps and see what they are instructing. My reasoning behind looking at coding bootcamps is this: if a person is dishing out a few thousand dollars to learn front-end skills, the course had better teach industry standards.

I'm going to use General Assembly (GA) as the primary example because they have learning centers across the US and even in cities internationally.

In brief, these are the front-end languages that their Front-End Web Development course instructs:

HTML

CSS

Intro to Programming using JavaScript

Intro to jQuery

Responsive design principles

You'll notice a distinct lack of certain topics:

There's nothing relating to JavaScript frameworks like Angular.js

Nothing pertaining to Sass or another precompiler (like Less or Stylus)

No mention of the command line or version control

And nothing pertaining to any kind of back-end language like PHP or node.js

This doesn't mean these skills aren't important, but it does mean that they're not “core” front-end developer skills. Basically, they're not the first skills you should learn to become a front-end developer: they're extras that can come after the essentials.

Using Course Report to sift through other front-end bootcamps/courses quickly, I found that while they do have variations in what they teach, there are also front-end languages in common.

Did you find the similarities? HTML, CSS, and JavaScript are the constants among which front-end web developer skills the big bootcamps teach.

Head back to the table of contents »

Which skills/technologies experts say you should learn

We've looked at job descriptions, what companies are using, and what bootcamps are teaching. Now, it's time to hear the perspective of an expert!

Brandon Morelli, creator of codeburst.io, has an awesome mind map that shows important web development languages, frameworks, and tools to learn.

As you can see, he mentions a bunch of front-end technologies (some of which do not appear in the job listings or coding courses above). Here's a look at what Brandon recommends learning to become a front-end developer.

Javascript Frameworks

As far as JS framework options go, there are tons out there, but three of the most popular are Angular, React, and Vue.js.

Brandon recommends learning Angular or React. But be prepared: learning a JS framework is the toughest part of becoming a true front-end developer!

CSS Tools

You should be familiar with two types of CSS tools:

Preprocessors: Using a preprocessor (or precompiler ) has a lot of advantages, like making code cleaner, maintaining organization, and better following DRY principles. Popular CSS precompilers are as Sass, Less, and Stylus. You only need to learn one; Brandon suggests Sass. CSS Frameworks: These help optimize your workflow with built-in grids and other CSS components. Two popular examples are Bootstrap and Foundation. Brandon personally recommends Bootstrap.

Responsive web design

Responsive web design means being able to build sites that work on all screen sizes—desktop, tablet, and mobile. Responsive design is intrinsic to frameworks like Bootstrap and Foundation, so if you learn one of those frameworks, you're good to go.

Front-end build tools

Brandon recommends becoming familiar with three basic types of front-end technologies:

Package Management: This includes tools such as Yarn or NPM. When projects get large, it can be tough organizing all the libraries, assets, and so forth. Package managers help with managing all the parts. Task Runners: Good examples are Grunt, Gulp, or NPM scripts. They run on the command line, compress files, and also act as a compiler for Sass or Less. They also have a wide range of plugins boasting other features. Javascript Module Loader: This includes tools like webpack, Require.js, and Browserify, which function to bundle up dependencies.

Testing

Jest, Mocha, Jasmine, and Enzyme are tools that help developers write tests for applications. Out of everything on this list, learning how to test your applications comes last. It's a nice addition to your resume, but you can definitely get a front-end dev job without it.

This may seem like a long list of front-end developer skills to learn, but Brandon himself emphasizes that you do not need to learn every single thing. Depending on the company and role, you can get a job as a front-end developer with a few well-chosen web development skills.

Part 2: How to become a front-end developer

So, what skills should you actually start learning, and how can you become a front-end developer?

The tech skills you 100% need to know to get a front-end job

Based on all four elements of the research above, here's the final consensus. These are the basics of what you need to know to become a front-end developer:

HTML

CSS

JavaScript: JavaScript will likely be the core front-end dev skill for the foreseeable future. Having knowledge (or production experience) in JS frameworks is also a benefit.

Version control software platforms (e.g. Git, Subversion, Mercurial)

These skills appear everywhere. You need a strong grasp of each just to have your foot in the door.

Front end skills checklist Download a free checklist that will walk you through all the skills you need to become a front-end developer. Success! Now check your email to confirm your subscription.

Head back to the table of contents »

The soft skills you need to land a front end developer position

As noted in the job listings sections above, soft skills are often just as important as your hard skills.

Aside from being a good communicator and team player, there are a few more things you can focus on.

Here's an easy one: be friendly! According to a Learn to Code With Me reader who has hired front-end developers and been one himself, “Regardless of how much you know, your character and being easy to work with, and generally being a nice person, will win over someone who is more skilled but intolerable or lacks good people skills.”

In the tech world, being a good learner is also essential. As another front-end developer commented, “If you want to be a front-end developer, know that you will never finish learning. [The job] will forever change and mutate with the different libraries unless some standardization is achieved.”

Be humble enough to learn from your mistakes (everyone makes them!).

Lastly, from the application process to each day at the job, do your best to show that you’re passionate and motivated about what you do.

Head back to the table of contents »

The skills that will make you stand out

Starting with the basics is fine, but to give yourself the best leg up during job-seeking, pick up a few skills that go beyond them.

And it can (literally) pay off, too. As the dev manager from above explains, “If a job seeker can offer a range of skills and not just the core 3 (HTML5, CSS3, JS), they will come way ahead of their competitors and are likely to get an offer that will come with a higher $ amount (or get a raise shortly after starting).”

So, to stand out, add a few of these to your repertoire!

One or two (or more!) JavaScript frameworks

This commenter says, “Frameworks such as Angular and Backbone are optional to learn, but nice to have.” The same goes for other JS frameworks–the more you know, the more job options will become available to you!

Choose a few frameworks from this list:

jQuery React Angular Ember Backbone

There are other frameworks to consider as well. To find out which JavaScript framework(s) you should learn, check out these resources:

Since JavaScript is one of the key front-end languages, knowing plenty of frameworks can only help you become a front-end developer.

JSON

This JavaScript syntax helps you structure data for transmission between servers and web applications. “JSON is critical today, due to massive growth in APIs and frameworks,” comments this dev manager. “But it's also incredibly easy to understand, if you understand JS syntax.”

Some design or UI/UX skills

Since front-end devs are working on what is visible to customers and users, it's valuable to understand what matters to them. What elements work best visually together? How can you provide a smooth navigational experience? What kind of flow is intuitive for the kinds of users you're targeting?

A server-side programming language, like Python, Java, or Ruby

Sure—you're looking for how to become a front-end web developer. Even so, there are a few languages on the back end that you're most likely to run into as a front-end dev.

To build a working product, you will most likely need to integrate front-end code with server-side technology at some point, or at least collaborate with back-end or full-stack developers.

However, while it’s good to have an understanding of these languages, you don’t necessarily need to know them thoroughly to be a great front-end developer.

Head back to the table of contents »

Online resources for learning essential front-end skills

Here’s a list of online resources to help jumpstart your career in front-end development—going from complete beginner up through more advanced topics.

Online courses

Beginner computer science courses

If you're new to tech, you should start by understanding CS fundamentals before even looking at more complex code.

Try one of these:

For learning HTML/CSS

These resources are great for complete front-end newbies:

For learning JavaScript

After you’ve got the basics of HTML/CSS down, start on JavaScript with courses/learning paths like the ones offered here:

For learning front-end development

These options are great for people who want a comprehensive, structured path to learning front-end development:

To advance your front-end skills even further

Once you have a basic understanding of HTML, CSS, and JS, kick it up a notch with these courses:

LTCWM resources

Here are some in-depth articles I've compiled on great learning resources where you can learn front-end developer skills (and more) for free:

Recommended books

Prefer learning from books instead of screens? No problem! Check these two out:

Head back to the table of contents »

Applying for front end developer jobs

Remember that you don't have to meet every requirement when applying for a position. The good thing about becoming a front-end dev is that you’ll learn new languages and frameworks on the job and as you build your own side projects. Few people start their careers as an expert, after all!

Many career counselors agree that meeting 80% of the skills listed is sufficient. (The Daily Muse explains how to determine if you should apply to that hard-to-reach job or not.)

Moreover, keep in mind that job descriptions are like a hiring manager’s wish list. If you master every skill and meet every requirement, you're probably overqualified.

Nevertheless, here's my advice: any computer/technology/design know-how that you have, bring it to the table. You never know what an employer might be looking for. And you just may be perfect, even if (or because) you have an unconventional background!

To find front-end developer jobs, start by checking out Stack Overflow, which specifically features jobs for developers!

Front end skills checklist Download a free checklist that will walk you through all the skills you need to become a front-end developer. Success! Now check your email to confirm your subscription.

Head back to the table of contents »

Conclusion: You (can) have what it takes to be a front end developer!

The answer to the question “do you have what it takes to be a front-end developer?” is an enthusiastic yes! As long as you’re willing to put in the work to learn the in-demand front-end developer skills required, and honing your soft skills like flexibility, willingness to learn new skills, and passion, you'll be an amazing front-end dev.

Start by taking a few online courses on HTML, CSS, and JavaScript, reading books, and building your own projects—and you’ll become a front-end developer before you know it.

Head back to the table of contents »