Everything you need to know to become a front-end developer – an honest guide.
November 2020 - 15 minute read
Now, more than ever, people want to learn to code, with many hoping to be skilled enough to land themselves a job. A sizeable proportion of these individuals will be looking to become front-end developers. Even in these difficult times, the market still looks good - the ongoing skills shortage for developers isn’t going anywhere anytime soon.
With this said, due to the proliferation of coding boot camps and online self-teaching resources, the market for junior front-end developers is very competitive. I wouldn’t let this dishearten you; it just means you’re going to have to do a little more to make yourself stand out from the rest of the candidates applying for each position. This guide is intended for those thinking about learning front-end development and for those who have already started. We will define what a front-end developer does, and the skills necessary for the job. Knowing this will enable you to plan your learning processes more effectively and set realistic goals and expectations.
Table of contents
- The current front-end developer landscape
- Which skills should you learn
- Learn to focus on what matters
- The rarely talked about skills
A little context
It’s worth noting that this is not always the case. The split is not as refined as the one between the front end and back end - there are still plenty of ‘front-end developer’ titles on job adverts. I’ve drawn attention to this current trend, mainly because it may help shape which technologies you wish to focus on, and indeed later, what types of jobs you will apply for. Regardless of this distinction, front-end developers will always be confined to the browser – that is something we can be sure about.
Let's talk about skills
Several front-end developer pathway illustrations are quite useful for gaining a more holistic overview of what’s required for the modern front-end developer. As you can see from the one below, there are quite a number of technologies and concepts here, and this is not necessarily the route I would recommend. However, many of these skills you’ll commonly find listed in job descriptions.
Learning pathway courtesy of GitHub user Z8264
Before venturing into using CSS frameworks such as Bootstrap, Tailwind, etc., and preprocessors such as Sass and Less, make sure you know how to write CSS well. CSS can seem easy enough at first, but gosh it can be deceptively difficult. Ask any developer working on a large codebase with thousands of lines of badly written CSS. Poorly written CSS can cause code bases to become bloated and difficult to maintain. But if you rock up to a new job having a solid grasp of it, diving head-first into some bug fixes shouldn’t be too much of a challenge for you. Once you have a good level of understanding, then I would recommend looking into preprocessors (and frameworks if you wish).
- Build tools (general framework tooling)
- Client-side routing
- Component driven design patterns
- State management
- Testing (unit, integration, and end-to-end)
- You'll learn said framework much quicker
Do not try to learn everything
Probably by this point you might be feeling a little overwhelmed with it all. Maybe you had no idea where to start and what to learn in the first place and now you have all these crazy lists of technologies and complex diagrams and your brain is freaking out. Well, don’t panic just yet! Here’s the thing with all of these complex roadmaps and pathway diagrams, there are too many technologies to learn in a great level of detail – which is particularly relevant for newbie coders. What’s more, is having a broad but shallow understanding of many front-end technologies better than a deep and thorough understanding of the core, fundamental technologies? I would argue that it is not. I’m sure some would disagree.
Bear in mind, there is a real chance you’ll get a job somewhere and find out that you’re not going to necessarily be working with all of the latest trendy frameworks. Let us imagine you did in fact start work on a cool, hip, React project at a fictitious workplace. You work on it for six months and you begin to feel pretty comfortable with the project. Maybe the project has neared completion, it’s started to mature and you’re feeling pretty content. Suddenly, your boss calls you in for a meeting and tells you that the company needs you to jump onto another project starting next week. That project will be using Web Components (the native web approach to building components).
What am I suggesting then?
We’ve already covered code-related knowledge, so let’s talk a little about the rest of the skills:
1. Ability to learn
Your approach and ability to learn is critical to you becoming a great developer. Front end, back end, full stack, whatever stack, being an effective learner will enable you to keep up with changes in the tech landscape and also make you super valuable as an employee and prospective employee. Many of us believe our ability to learn is an innate skill that cannot be improved. This isn’t the case! I’ve written in more detail about this with some useful tricks and tips for improving your learning processes. If you are good at learning you'll embrace the chance to learn new things, and importantly, you'll be highly adaptable. Remember, a career in development means a career of learning - professional developers feel that way too.
2. Debugging skills
This one seems a little broad, but ultimately you’ll spend a lot of time as a developer debugging the code you’ve written and the code another developer wrote many years ago. In-depth knowledge of the codebase and the languages you are coding with will obviously help with this skill. Also having a methodological approach to debugging can be very useful. Being good at debugging code is almost a necessity rather than an option, it's about having the patience to test out your assumptions until you find the bug. As a front-end developer, you should be comfortable using the developer tools in whatever browser you like to code with (I prefer Chrome developer tools). Make use of the debugging features available such as breakpoints, debugger statements, and stepping through code.
3. Ability to read source code
More often than not you will be working on a pre-existing codebase. It may contain tens of thousands (maybe hundreds of thousands) of lines of code that many developers have written. Quite frankly it might be one giant, messy pile of spaghetti code.
Being able to read and make sense of source code will help you quickly become productive on projects and codebases. When working on a real project, most of your time will be spent reading, not writing code. Becoming good at reading source code is a fast way to not only get to grips with the codebase and project at hand but to also learn and improve in general.
4. Asking the right questions
This one might seem a little silly, but it’s a very important one - particularly for junior developers. It’s not only the practice of asking the right questions that is important but it’s also when to ask the right questions that is equally important. When you’re working on a real project you’ll most likely be working with a team of developers. Some developers are easier to work with than others (this goes for working with people in general) and to ensure you keep your teammates on your side, make sure you don’t ask a question every two seconds. Prove that you’ve spent some time trying to solve a problem yourself. It might be useful to write down what approach you have taken, what didn’t work, what you think the problem might be, and if you have an inclination toward a potential solution. This shows whoever you are asking a few things:
- You actually care about trying to solve something independently
- You’ve made an effort
When I first started as a junior front-end developer, (depending on what I was working on) I would often use what I termed the 30-minute rule. Essentially, I would give myself 30 minutes to try and solve whatever I was stuck on. If I had made no progress, hit a real roadblock, and exhausted my own research, I would ask another developer for help (admittedly I was also super lucky to work with an awesome, talented, and extremely helpful team of developers at Potato). This way, we save some company time and money by solving something a little quicker. Your team will thank you in the long run because you managed to unblock yourself and carry on with your work.
5. Communication skills
This skill ties in with what I mentioned above. Being able to communicate when you’re stuck (‘blocked’ as it is termed in the industry) will be crucial to you and your team delivering work and meeting deadlines on time. Being able to communicate early on when you do not understand a particular task or goal will also help to ensure you are more effective as a developer and you that you don’t stress yourself out too much.
There is more to communicating than just being able to raise any issues or blockers you may have. Being friendly and approachable, whilst being able to effectively explain complex concepts in an easy to understand way, will help others better understand you. This is also a really important skill for those looking to one day become mentors.
My advice might seem a little contradictory. On one hand, I'm telling you that the tech landscape is constantly changing and you need to be able to adapt to this, and on the other, I'm suggesting you focus on learning the core technologies. Trying to learn everything is a fast way to burn yourself out. If you can learn the fundamentals inside out and work on the other less talked about skills, the world will become your oyster. You'll be able to learn and adapt to whatever's thrown your way.
One thing is for certain, you will always be required to learn new things; you’ll never get to a point where that will suddenly stop. As my good friend Heraclitus said many moons ago, "the only constant in life is change". Some employers may be looking for a candidate that is an expert in many different frameworks and libraries. Likewise, a lot of great employers will also be looking for developers who have excellent foundational knowledge, are highly adaptable, quick learners, and who are ready to dive into a codebase and get up to speed and contribute quickly.