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
- Conclusion
A little context
Historically, front-end developers worked extensively with HTML and CSS and with a little bit of JavaScript sprinkled in for good measure. Nowadays, as the web has evolved and matured, applications and websites have become increasingly more complex. With this increase in complexity, the scope of responsibility of modern front-end developers has shifted. It has caused a slight, albeit noticeable, divide in the type of front-end developer. On one side, you have a developer, whose work is heavily focused around JavaScript and the many libraries and frameworks that are built with it. On the other side, we have developers whose work is targeted more toward HTML, CSS, design, and accessibility. You may see these types of front-end developer roles termed ‘UX’ or ‘UI’ developers. Those front-end developers, who live largely within JavaScript-land, are increasingly referred to as front-end ‘application developers’ or ‘engineers’.
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
As a front-end developer, your job and your ultimate focus is to make things work well within the browser - with the end goal to deliver a pleasant, performant, and accessible experience for users. Regardless of the myriad of skills that are listed for front-end developer (and its variations) job adverts, HTML, CSS, and JavaScript are the fundamental technologies the browser uses to transform basic text content into the web page you see within your browser. Whether you work directly with these languages (for instance, HTML may come for a templating language, or CSS may be produced using a preprocessor) or not, having a solid understanding of them is vital for doing a good job.
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 rattling through each of these technologies, you should start with the basics - the very foundations of the front-end; HTML, CSS, and JavaScript.
HTML
Often overlooked, and probably deserves a little more attention than it gets. Make sure you have a solid understanding of HTML. It’s the very first file the browser parses before building out the rest of a website. It’s also the fundamental technology that provides meaning and structure to a webpage. You shouldn’t be focusing on memorising every element in the markup language, more importantly, you should understand its role in the front-end ecosystem, and how its semantic nature and structure can play a crucial part in making websites and applications more accessible to its users. You’ll also be using JavaScript often to alter the output of HTML in the browser, if you don’t know HTML; you will struggle to effectively alter it with Javascript.
CSS
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).
JavaScript
In the past, jQuery (a small and still very popular library) was enough to get the job done JavaScript-wise. It was more than sufficient to handle any basic client-side logic - for instance, toggling element visibility or basic animations. However, due to the incredible growth and proliferation of the JavaScript language, an enormous JavaScript ecosystem has developed. The growth of front-end frameworks and libraries such as Angular, React, and Vue is a direct result of this. So much so, it’s almost hard to imagine the front end without it. Even if you’re a more design-focused front-end developer you will need to interact with JavaScript at some point.
Front-end frameworks have certainly introduced more complexity into the front-end skillset, ultimately they require developers to have a much deeper understanding of programming concepts such as higher-order functions and functional programming. Frameworks generally require developers to manage and utilise a larger set of tools and concepts. A few examples would be:
- Build tools (general framework tooling)
- Client-side routing
- Component driven design patterns
- State management
- Testing (unit, integration, and end-to-end)
This is not to say that these types of concepts have/are not used outside of frameworks and libraries. It's just that more often than not we find these concepts and patterns baked-into the frameworks and libraries as part of their overall coding philosophy and paradigm. One thing is for absolute certain, you need to have a solid foundation and understanding of JavaScript if you want to become a JavaScript focused front-end developer. That sounds a little self-evident given the above are all JavaScript frameworks and libraries. But the thing is, when dealing with the likes of React, Vue, and Angular a lot of the time you have to follow a fairly restrictive and directed coding approach (for instance, React relies heavily on functional programming concepts), mainly because this is prescribed by the frameworks themselves. This isn’t necessarily a bad thing, we may write code the ‘Angular way’ or the ‘React way’ because in the long run, it’s easier and quicker to build maintainable and performant applications and websites. But there is a caveat to this. These frameworks and libraries can often create a layer of abstraction over plain old JavaScript behind the scenes - which may not be ideal for a beginner. Given this, your best approach is to develop a solid understanding of JavaScript before reaching for a framework. This is incredibly beneficial for a couple of reasons:
- You'll learn said framework much quicker
- You’ll be able to pick up new JavaScript frameworks and libraries quickly
- You’ll be able to debug JavaScript issues more effectively
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.
I'm not suggesting you don't learn a front-end framework. I just believe you shouldn't learn it for learning's sake - and certainly not before you've developed a reasonable understanding of JavaScript. Ultimately, there is one prevailing topic that we have to manage as front-end developers, and that is keeping up with the forever changing landscape and the increasing number and scope of technologies used to build websites. It’s been termed ‘front-end fatigue’ in the past. I would say it is our approach to learning (along with some other less talked about skills), that will enable us as front-end developers to adapt and also to enjoy learning new tooling, frameworks, and libraries as they inevitably appear.
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).
Now, this situation will be much easier for you if you have a deep and thorough understanding of JavaScript and a great approach and process to learning new things. As a result, working with Web Components won’t be too difficult for you. Sure, it will take you some time to get to grips with the change of scenery and a new way of doing things but nothing you won’t be able to manage. Conversely, if you didn’t have a solid understanding of JavaScript, and instead you opted in your learning pathway to follow the ‘framework chaser’ approach, spending almost all of your time learning different frameworks, then you might just find yourself in a bit of a pickle.
Now, I’m not saying you wouldn’t ever be able to understand how Web Components work, I’m sure you would. All I’m suggesting is that it will be much easier for you if you focus on learning JavaScript in-depth, that’s what all of these frameworks and libraries are ultimately built with. I’m sure there will be some argument against this, especially from those who want to become solely React focused developers. That’s cool, but React will also evolve and change over time and new features will be released. Components in React were largely built using Classes, but after the release of Hooks, entire React applications are now built with only functional components. Both of these approaches require a solid knowledge of JavaScript.
What am I suggesting then?
Aside from having a thorough knowledge of the fundamental front-end technologies, (HTML, CSS, and JavaScript) it is also useful to have another set of less talked about skills. These skills – in my opinion – are just as, if not, more important. I’ve put my first-rate drawing skills to the test below and mapped out my own skill diagram.
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.
Final thoughts
Learning front-end development shouldn’t be a stressful, overwhelming experience. By focusing on learning too many technologies you will end up developing a broad and shallow understanding. In my opinion, you are best placed, developing a deep and thorough knowledge of HTML, CSS, and JavaScript, whilst working on additional skills that are often less talked about – namely, your learning ability, debugging skills, ability to read source code, ask good questions and your communicative skills. If you feel ready to pick up a framework, only do so when you have a solid understanding of JavaScript. If you get caught up chasing the latest industry buzzwords you’ll end up losing sight of what it takes to become a great developer.
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.
Thank you for reading!
If you enjoy reading my content and want to support my work, please follow me on Twitter 😊
Top comments (2)
Great article! As a recent bootcamp graduate, I do feel very overwhelmed at times with the sheer amount of tech out there. There is only so much time in a day and some jobs seems to ask for everything under the sun.
I definitely agree that learning the fundamentals are super important. I’ve stopped using Bootstrap recently and am focusing now on pure css and sass.
I’ve also found that picking just React and going deep on it is helpful. Vs checking out Vue and Angular as well.
Thank you!
I agree with just focusing on one JS framework/library. If your JS skills are strong and you're able to understand React, then it will be easy for you to pick up other frameworks and libraries when you need to.