How to Become a Front-End Developer
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.
- Practice: You should be able to build a first small app, such as a to-do app or a countdown.
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.
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 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
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.
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.
- 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!
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.
- 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.
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.
- Practice: make an accessibility audit in one of your previous apps. Spot the problems and replace them with accessible solutions.
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
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.
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!
- 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.
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.
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.
- 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.
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!
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
- ✅ 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!
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.