DEV Community

Cover image for How to Become a Front-End Developer
Thomas Lombart
Thomas Lombart

Posted on • Updated on

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:

  1. Getting the knowledge
  2. Building projects
  3. Searching for a job
  4. 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!

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.

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.

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.

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.

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.

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.

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!

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!

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:

  1. Find an app/project idea. Read this post if you need help with finding ideas (self-promotion, again ๐Ÿ™ƒ).
  2. 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.
  3. 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.
  4. 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:

  1. You apply to a job or someone contacts you, usually someone from the Human Resources department.
  2. 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.
  3. 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!
  4. 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.
  5. 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.

Top comments (39)

Collapse
 
bahriddin profile image
Bahriddin Abdiev

Great read, Thomas. If I may suggest something: adding alternative free courses here or writing another similar article with references to the free courses could be an awesome help for people who can't afford.

Collapse
 
thomaslombart profile image
Thomas Lombart • Edited

Thank you ๐Ÿ˜Š
I focused on adding the best resources I could find for this article. I believe these are the ones that will be more useful and efficient for a front-end developer.
For free resources, I guess you have freeCodeCamp and some YouTube videos or blog posts.

Collapse
 
z2lai profile image
z2lai

Awesome breakdown of topics! I'm curious though, if you're unable to check all of those boxes, which of the following could you leave out and still get a frontend developer job:

  • testing
  • accessibility
  • performance
  • SEO

I left out mobile-first/responsive design as I'm assuming that's probably a requirement.

Collapse
 
thomaslombart profile image
Thomas Lombart • Edited
  • Testing is important. Most of the large companies test their software. Small companies tend to do it less though it really becomes a thing in front-end development.
  • Same for accessibility.
  • While performance is also important for an app, I think that we won't expect a beginner developer to know how to optimize an app from A to Z, some basics would do it (reducing images sizes maybe code-splitting?)
  • Same for SEO. It's also common in large companies to have web analysts that will cover SEO for you.

Note that it also depends on the company's technical values. Some teams really like to test extensively their code while others prefer to have a perfectly accessible app (for product needs for example). It's a thing you have to keep in mind when applying.

TL;DR: focus first on testing and accessibility. Then, tackle performance and SEO.

Collapse
 
shadowtime2000 profile image
shadowtime2000

imao react and vue aren't frameworks they are libraries something like next or nuxt is a framework, because it defines the exact structure and architecture of your project.

Collapse
 
thomaslombart profile image
Thomas Lombart

The line between framework and library is kind of blurry for Vue and React. Vue calls itself a progressive framework while React defines itself as a JavaScript library. In the end, they have the same purpose: make it easier to build a user interface.

I used the term framework here to simplify the technical jargon ๐Ÿ™‚

Collapse
 
msrazavi profile image
MaryamSadat Razavi

Nice and helpful!

Collapse
 
thomaslombart profile image
Thomas Lombart

Thank you!

Collapse
 
arthkate profile image
Arthur Kateeba

I see React and Vuejs are you pick... thats do you have to say about Angular. Why is it not the most preferred of the 3 and yet Google encourages devs to lesrn it.

Collapse
 
thomaslombart profile image
Thomas Lombart

Google has built Angular so it's logical they encourage developers to learn it. Old and large companies will tend to use Angular because it suits their needs. But when it comes to small or medium companies, you'll likely find way more jobs with React (and a bit with Vue).

Angular tends to be less used as of today. Every developer surveys confirm that ๐Ÿ™‚

Collapse
 
arthkate profile image
Arthur Kateeba

Thanks... Now I know, while framework I will choose.

Collapse
 
mrcode profile image
Sibusiso Shongwe

Thank you very much for sharing this, I really found it very useful to my career journey, thank you man, God bless you

Collapse
 
malbonagenio profile image
MalbonaGenio

Amaizing article, thanks for sharing it. The amount of diversity in the resources really helps to beginners like me to get the ropes and have some guidance.

Collapse
 
thomaslombart profile image
Thomas Lombart

Thanks a lot! Be careful not to fall into the tutorial hell, you often have the illusion of knowledge watching/reading courses. The best way to grow as a developer is to practice ๐Ÿ™Œ

Collapse
 
klasss4web profile image
OCHADE EMMANUEL

Thank you very much for this guidance, really appreciate...
May I suggest your next topic sir?

Collapse
 
thomaslombart profile image
Thomas Lombart

Thanks! Go ahead ๐Ÿ™‚

Collapse
 
klasss4web profile image
OCHADE EMMANUEL

Thanks for the privilege.
Object oriented programming or functional programming, which is leading and most used by senior devs... personally I like object oriented programming

Collapse
 
realamritkdk profile image
Amrit Khadka

Thank you so much for pointing out lots of tools necessary under front-end dev belt. I do really appreciate it.
Btw, I have a question to let me know.
I'm a front-end developer with 2 years of experience. But, I feel like sometimes demotivated or used to afraid to face challenging projects and I feel like to quite.
How do I pass through it?

Collapse
 
killianfrappartdev profile image
Killian Frappart

This is a great article, thank you very much for sharing your experience!

Collapse
 
thomaslombart profile image
Thomas Lombart

Thanks for the kind words Killian!

Collapse
 
brymmobaggins profile image
Ibrahim Bakare

This is awesome.

Collapse
 
shelomohkhual profile image
Shelomoh

Really great!

Collapse
 
micahlt profile image
Micah Lindley

Great post! It might be worth mentioning that ZEIT Now has been rebranded as Vercel. ๐Ÿ˜

Collapse
 
thomaslombart profile image
Thomas Lombart

Indeed! Thanks for the heads up ๐Ÿ™‚

Collapse
 
reehah profile image
ALADE-RAJI FAR'HAH

I'm new to programming and this roadmap really helps a lot. I hope to be a good frontend developer someday. Thanks Thomas.

Collapse
 
thomaslombart profile image
Thomas Lombart

Thank you!

Collapse
 
konaduu profile image
Abena konadu

Thanks so much for the post
Iโ€™ve researched on roadmaps for front end development and I always feel overwhelmed with information and resources that I have no idea about
Again thanks so much

Collapse
 
thomaslombart profile image
Thomas Lombart

Thanks! It's great to have so many resources on front-end development. But it's true that it's overwhelming.