How to Become a Front-End Developer

A few years ago, I became a software engineer, and I took the front-end path. Don't get me wrong, front-end development is not just HTML and CSS, far from it! You also have to know JavaScript, Git, performance, accessibility, design, and much more. Building an excellent front-end application is a challenging task.

The path to getting a job as a front-end developer is not an easy one. But you're lucky. I've been there, and I know what works and what doesn't to get hired! There are four main steps in this journey:

Getting the knowledge
Building projects
Searching for a job
Succeeding the interview

My goal with this post is to clarify how you can become a front-end developer and a good one. Without further ado, let's start with the knowledge and the resources to achieve this goal!

Getting the knowledge

Nowadays, front-end development is overwhelming. There's so much to learn! Maybe you think that you'll never get there. Trust me. You won't know it all. The good news is that you have to focus on learning the right things. However, you'll need to practice. Be active in your learning journey; it's the key to mastery!

You'll find below the required knowledge of front-end developers to have a successful career. I added some resources, how you could put your skills to practice, and the blog posts I wrote on this (because why not self-promoting? 😏)

Note: there's no partnership with the resources I included. I just found them well made.

HTML and CSS

HTML represents the structure of a web page, and CSS its layout. You'll use these two technologies every day, so you need to get comfortable with this!

Resources: You can check out freeCodeCamp, especially the basic HTML and basic CSS sections.
Practice: build a simple page. Maybe a landing page or a cooking recipe.
Blog posts: Writing Blazing Fast HTML Code, How to Get Better at Writing CSS and How to Make a Responsive Grid With Only Three Lines of CSS.

JavaScript

That's what powers up your apps. It's a programming language that is important to any web app. JavaScript is being used everywhere: for the servers, for desktop applications, or even for mobile apps! It's an essential skill for a front-end developer.

Resources: You can continue with freeCodeCamp on this one, or you can also check out a course from Wes Bos: Beginner JavaScript. If you're practice-oriented, I highly recommend JavaScript 30 from Wes Bos as well.
Practice: You should be able to build a first small app, such as a to-do app or a countdown.
Blog posts: What You Should Know About JavaScript Arrays and Object and Array Destructuring in JavaScript

CSS Framework

Pure CSS is good. But it's not always easy to write some. Try to learn a CSS framework like TailwindCSS, Bulma or Bootstrap. Such frameworks are often used in companies, and it's important to get familiar with them.

Resources: Tailwind CSS as a set of screencasts if you're interested. Generally just, reading the docs of the CSS frameworks is enough.
Practice: improve the page you build while learning HTML and CSS or the app you created with JavaScript. It's your choice!

Version control (Git & GitHub)

Version control is useful for working together on the same project. You can't escape it, so get comfortable with git commit, git push, or branches. You also need to learn how to work with a source code management platform such as GitHub, GitLab

Resources: Guides from GitHub especially the beginner one.
Practice: Create an account on GitHub. Add the previous projects you made (landing page, to-do app, or anything code-related you did). It'll make you practice the famous git status git add, git commit, git push.

JS Framework

Most companies don't work with pure JS. They use a framework that allows them to be more productive and write great apps. There are three leading solutions on the market right now: React, Vue, and Angular (though it tends to be less used). React and Vue are the most popular, so I strongly recommend learning one of them to optimize your chances of getting hired.

By learning a JS framework, you'll learn package managers such as npm and yarn. You'll also learn some tooling and how to interact with APIs. Don't worry. The resources I included below cover all of this.

Resource: An excellent React course from Tyler McGinnis. Once finished, you can also take the React hooks one to learn the latest technologies. Alternatively, there's Andrei Neagoie, who created a complete course: Complete React Developer. On the Vue side, you can rely on Vue Mastery or Vue School, especially The Vue.js Master Class.
Practice: you can build a more advanced app here. Maybe a weather app, a movie search app, or if you want, you can make a second version of a to-do app.
Blog posts: Getting Started with Vue and How to Create an App with Vue CLI. Check them out to have a taste of Vue if you're learning React. I also wrote a post related to tooling for React: How to Setup ESLint and Prettier for Your React Apps.

Modern CSS

CSS is back again! Now that you know how to build an app with a JS framework, you need to get advanced CSS skills: Flexbox, Grid, preprocessors, the whole thing! It may be interesting to look into CSS-in-JS solutions like Emotion.

Resource: Advanced CSS and Sass from Jonas Schmedtmann. You'll learn how to build well-designed pages on top of it!
Practice: remember the landing page you built? Revamp it with your new shiny CSS skills. It may also be a good time to build the first version of your portfolio.

Trust me or not, but that's all you need to know to get hired as a junior front-end developer. Most companies know that you can't know everything. They're also interested in your career path. They know you'll gain more and more knowledge as time goes by.

However, the skills above are not sufficient to be in the top front-end developers. You'll find below other skills to get if you want to get more comfortable in front-end development. You'll inevitably encounter them in your career.

Advanced JavaScript

If you're sick of JavaScript, I don't have good news for you. Indeed, you may know how to use JavaScript to build cool apps, but that's not all. You should also know how it works under the hood and the advanced JavaScript mechanisms, such as the event loop, closures, asynchronous stuff, or the prototype chain.

Resources: You can go on Frontend Masters and watch a course from Will Sentance entitled JavaScript: the hard parts. You can also check out a course from Tyler McGinnis: Advanced JavaScript.
Blog posts: Reverse-Engineering Airbnb's Internationalization Library and Over 20 Resources to Advance Your JavaScript Skills
Practice: practicing advanced JS is a bit hard to do. It's more of a long-term thing. The more you'll code, the better you'll get. So just practice JS here!

Testing

When building apps, there's always a point when you're not confident when it comes to deploying it or adding a new feature. Knowing how to test your front-end apps is an excellent asset in your toolset. The Testing Library ecosystem will be your best friend when it comes to testing.

Resources: Kent C. Dodds is the go-to guy when it comes to testing. He has built a great course called Testing JavaScript.
Practice: Test one of your apps. Start small. You don't need to write elaborated tests right off the box! The goal is to get comfortable with tests.
Blog posts: How to Test JavaScript With Jest, The Complete Beginner's Guide to Testing React Apps

Accessibility

You need to know how to build apps with accessibility in mind. Developers often forget accessibility, but it shouldn't be the case. Think of all your users, including those who may be blind, colorblind, or use a voice reader.

Resources: Another course from Frontend Masters by Marcy Sutton: Accessibility in JavaScript applications
Practice: make an accessibility audit in one of your previous apps. Spot the problems and replace them with accessible solutions.

Performance

Our world moves fast. We want everything right now. That's the same for apps; users can't stand a slow app. On top of that, it's terrible for your business. Learn how you can build performant apps.

Resources: Yet another course from Frontend Masters by Steve Kinney: Web Performance
Blog posts: 3 Easy Ways to Boost Your Web Application Performance

SEO

Without search engines, you can't find anything on the internet. SEO is about optimizing your sites so that anyone can quickly discover your website with the right keywords.

Resources: Ahrefs, one of the reference tool for SEO, has some great guides such as the following: SEO Basics: Beginner’s Guide to SEO Success
Practice: if you already have a portfolio, improve its SEO.

SSR

As of today, there are two main ways of rendering an application: on the client or the server. React and Vue render on the client by default, but that's not good for SEO. Lots of companies are looking into apps that render on the server like Next or Nuxt.

Resources: Wes Bos created a great course that's both on React, Next.js, and GraphQL: Advanced React. It'll make you build an online store app!

TypeScript

TypeScript is JavaScript but with types. More and more developers, especially in medium to large companies, appreciate the additional safety layer that TypeScript provides. Knowing it is a solid point for getting hired!

Resources: Did I already mention Frontend Masters? There's a course from Mike North on it called TypeScript 3 Fundamentals. If you want the quick option, you can check out: TypeScript in 5 minutes from the official docs.

UI/UX Design

Usually, this is not your job. These skills are for designers mostly. Designers create mockups, and it's your task to make them fully interactive. However, It's worth it to know how to build a mockup and play with colors, shadows, spacing, or components.

On top of that, start-ups can't always afford a designer. Thus, knowing how to design, even if it's not much, is a big +1 for them!

Resources: Refactoring UI is a great book on design. I've heard lately of Shift Nudge for getting the best UI skills. It's pricey, but it's worth it, in my opinion.
Practice: design is like any skill. The more you'll practice, the better you'll get, period. For that, you can tackle the Daily UI challenge.
Blog posts: How to Suck Less at Colors as a Developer and Why Learning Design Is Important for Front-End Developers

Databases and servers

Once again, this won't be your job. However, it's also up to you to integrate into your front-end app the data you get from the server. It may be worth it to know how you can build a basic API to understand better what a back-end developer does in his day-to-day job.

Pheeeew! That's all for the skills. There are still skills to get like learning how to build PWAs, static site generators like Gatsby, GraphQL or Docker but that post would get too long 😅

Side projects

You have the required knowledge and built some small apps or web pages, that's great! Now it's time to put your skills to practice and to create some projects.

One crucial thing to remember here: one big project is better than a hundred small projects.

Indeed, when you apply for a company, they need to know if they can trust you and pay you for your work. Building a project from scratch, even if it's not perfect, is a great way to show that. Making a hundred small projects won't reveal how far you can go. Sure, It shows that you are passionate, but not that you're skilled! That's a common mistake you shouldn't fall into.

Building an app

Here are the steps to start with a side project:

Find an app/project idea. Read this post if you need help with finding ideas (self-promotion, again 🙃).
Build the project if it's feasible. Use the technologies and skills you learned (front-end framework, CSS skills, etc.) and put your code on GitHub. You may be asked by companies to show how you code, and GitHub is great for that.
Don't quit! Yes, your project will reach a point when the codebase becomes ugly, but that's the same for everyone, even for large companies.
Deploy the project. Make it available for everyone. Netlify or ZEIT Now will be your best friends for that.

Project ideas:

A Twitter clone
An app to manage the movies and series you watch
A chat app
A Todoist clone
Anything you think of?

If you don't feel confident in your back-end skills, look into Firebase. It's a powerful tool that is relatively easy to use.

Technical blog

It's also a great idea to start a blog and learn to write technical posts, even if you're not an expert in your field. Having such a blog shows both your writing and technical skills. On top of that, you reinforce your learning!

You can create a blog with Gatsby, in particular, with this blog starter. In terms of post ideas, it's up to you. The world is your oyster here. Pick a topic and write about it.

Portfolio

Finally, build a portfolio with:

A description
Your skills
Your projects
Your technical posts if you have some
How we can contact you or a contact form

Job search

Let's recap:

✅ You have the knowledge
✅ You built one or two big projects or even a blog
✅ You have a portfolio

Now is the time to find a job. That's a tough one because many companies are all looking for developers with at least five years of experience. Here are some tips for you:

If a company is looking for a developer with at least one or two years of professional experience, apply! Some companies put these kinds of criteria to have an entry barrier. You may be a great fit, so apply.
You don't have to match every skill the company is looking for. Really. If they list TypeScript and you don't know TypeScript, that's OK. You can still apply.
If you need to craft a motivational letter, personalize it. The more you craft it for the company, the more it will have an impact.
Attend meetups in your city or online. That's where you'll get contacts and exchange with other developers, product managers, or designers. Companies usually sponsor meetups to hire more people.

For the job search itself, you may find opportunities on LinkedIn, so you'll have to create a profile on it and put your projects there!

Interview

So you've been selected, and you have an interview? Awesome. But you don't know what to expect. You are not confident. Maybe you think that it's not possible, they will make a mistake by hiring you, you're an imposter. Don't think that way. Lots of developers believe they are not ready for the job. That's not the case. You built projects, you know how the technologies work, and that's valuable. Sure, you don't know it all, but nobody does.

I don't know what's the exact interview process for all companies. But I know how it usually goes:

You apply to a job or someone contacts you, usually someone from the Human Resources department.
You have a phone call, or you meet in person the HR. You talk about your previous experiences, who you are, what you're searching for, the company, etc.
You have a technical test, usually with a company's front-end developer, a tech lead, or the CTO. You'll have to answer technical questions. It's also possible that you have a take-home project to do and then give the company's source code. If that's the case, polish it!
You meet the founders of the company or persons leading the company. They usually want to know whom they hire, so you'll discuss the company, your motivations, etc. Depending on the company's size, it may not happen.
If all goes well, you get an offer! Don't necessarily take the company with the best offer. Salary is an essential part of the job, but your happiness, how you feel in the company, and your career path matters too!

Let me warn you: sometimes, the process can be quite long.

Here are some advice for you to succeed:

Be professional but stay relaxed. You're not interviewing for a bank. The first time I went to an interview, I was surprised at how chill the persons were. So, no pressure (Don't be too chill though, find the sweet spot 😄)
Show you're motivated by the project. Unfortunately, getting hired for a first job is hard because you don't have previous experiences. However, you can show how much you want the job and contribute to the company.
Adapt your speech to the person you're speaking to. Don't get too much in technical details if you talk to someone whose job is related to business.
Don't underestimate soft skills. The interviewer will try to see if you can fit for the job and whether he can work with you or not, especially the persons in tech! Show how great it would be to work with you: communicate, smile, and stay humble. If you need to know which soft skills to get, I wrote a post on the soft skills every developer should have.
Don't lie during interviews. If you don't know something, then you don't know. It's no big deal if you can't answer all the questions. Experienced developers don't like bull-shit developers.
Developers always make trade-offs. There's rarely a one-size-fits-all solution. Show that you are aware of that and think about what brings value to the company. It demonstrates that you have deep thoughts, and it's much appreciated.

OK, that was a long one. As said previously, becoming a developer is a long but rewarding path! I hope it gave you some insights into how you get a job.

Blog