Roadmap for Frontend Engineering
Ever wanted a step-by-step guide for learning frontend engineering? Are you tired of trying to figure out what the next thing you should be learning is? If so, this is for you.
I often get asked questions like: 👇🏼
What should I learn next to level up in my career?
What skills am I missing that I need to be a senior engineer?
How do I break into my first tech role?
I’ve totally been there…
There were so many times in my career where I spun my wheels wondering what else I needed to learn to get to the next level in my engineering skills.
Unfortunately... many of us don’t know where to start, or we get overwhelmed/confused taking courses and watching endless youtube videos.
I want to save you from the pain of spinning your wheels wondering what to learn, or focusing on things that don’t really matter in the big picture.
That’s why I created the complete roadmap for frontend engineering. 💡
Whether you are just breaking into tech, growing into mid-level, or looking to grow into a senior engineer, there is something here for you!
ok yes, not every skill is on here, but all the main ones are…
Let’s dive in to this roadmap of 25 skills to master frontend engineering! 💪
1. Basics of the Internet
First off, you will want to learn some of the basics of the internet. Yeah, it’s not exactly coding, but if you are just breaking into tech it will give you context and background needed to enter this web development world.
A few good places to start are learning / researching:
Roadmap.sh actually has a lot of great links / resources listed for this if you click around on their various bubbles in the roadmap.
2. Learn HTML
HTML is the underrated hero of the frontend. It’s literally the structure that holds together all the content we see on the web.
Back when I started web development, it wasn‘t as powerful. Many of the features you needed to create for a website or web app couldn’t be built with built-in elements. You had to sprinkle a ton of javascript everywhere to make things work.
I think that’s lingered today where we aren’t really sure what the difference is between an anchor tag, a button tag, or just using a <div> and slapping a click handler on it.
Really diving in to learn the ins-and-outs of semantic html will serve you well in the long term, and also give you users a better experience.
Did you know html can do:
Dropdowns with searchable text
Dialog boxes / modals
Progress meters
Accordions without JS
Showing the number keyboard on mobile for zip or phone fields
Not to mention we have <article>, <footer>, <header>, <nav> etc.
There’s a lot more html can do besides a bunch of nested divs. Learning how to write semantic html helps your users have a more accessible experience. We’ll talk more about this in the accessibility section below.
3. Learn the basics of CSS
CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
CSS is one of those languages you’ll need to learn in order to be a successful frontend developer. It’s not something you can just wing.
I know a lot of backend and fullstack engineers who struggle with CSS. It used to be much more confusing than it is now, and it’s worth putting in the time and effort to understand it once and for all.
If you are just starting out, I would focus on learning about selectors, classes, and then how to attach a stylesheet to an html file.
From there you can focus on:
Text – colors, fonts, weights, styles
The cascade – specificity and inheritance
The box model – inline, block, margin, padding, borders
Backgrounds and borders
Sizing items
Images, media, and forms
All things tables
Debugging
Organizing your styles
Layout – grids, flex, floats (don’t skip flex + grid, you’ll use them a lot)
Positioning and z-index
Mozilla actually has a nice free mini-course you can go through to learn all these topics. Educative also has one that looks good.
4. Everything version control
A lot of people skip this step, but learning how to “version control” your code is a life-saver.
Git is a version control system that developers use all over the world. It helps you track different versions of your code and collaborate with other developers.
If you are working on a project over time, you will want to keep track of which changes were made, by whom, and when those changes were made.
Think of git as endless undo/redo/history of your codebase.
Common repo hosting services (eg. places to store your code in the cloud) include GitHub, GitLab, and Bitbucket.
Pro-tip: GitHub is not git, it’s just a place to store your code with git history, so that other devs can access it.
I’ve shared a git mega cheatsheet here if you need a place to start.
5. Javascript is your friend
According to Wikipedia, as of 2024, 98.9% of websites use JavaScript on the client side for webpage behavior. It’s a must learn and master skill for frontend engineers.
It can be used to add basic interactivity to websites, or even build full blown web apps.
When you are first starting out, don’t try to learn React or jQuery because you hear everyone is using them. They are, but trying to start with those frameworks before you understand JS will be much more challenging and confusing in the long run.
There are many books, courses and tutorials you can use to learn JS, many of which are free! Here are some I’d recommend:
Treehouse’s Free JavaScript basics course (I took this one early on when I learned JS)
Learn Javascript Online (interactive editor + first 77 lessons are free!)
Eloquent Javascript (from zero to hero – free to read online)
You Don’t Know JS (deepen your JS knowledge – free to read online)
6. Advanced es6 Javascript
In 2015, Javascript felt like a whole new language. It went from needing jQuery to do advanced behavior, to being a fully capable language on its own.
Some of the biggest additions that I use every day in my work are:
Arrow functions
Template literals
Array methods (.map, .filter, .includes, .reduce, etc.)
Object methods (.keys, .values, .entries)
Object destructuring and spread
Classes
Promises + async/await
Here are a few resources to learn JS es6:
ES6 Online Tutorial (free blog-post style reading)
JavaScript es6 (free online tutorial)
Es6 for Everyone (Wes Bos’s premium in-depth course 27k engineers have taken)
7. Pick a framework: React, Vue, Angular, Svelte
As a frontend engineer, you won’t just be building websites, you’ll be building web apps. At the core of all modern web apps is a good framework.
According to the State of JS survey, React is currently the most popular framework. It’s a framework created by Meta that is used on over 14 million sites/apps.
React is then followed by Vue & Angular, and then Svelte is usage.
If you purely go off the current number of job postings, React is first, then Angular, and then Vue.
Personally I really enjoy using Vue – both professionally for the last 5 yrs, and personally on side projects. It’s a perfect blend of flexibility, out of the box tools, and is easy to learn and onboard new team members into.
(but don’t learn Vue just because I use it, make your own choice, and pick whatever looks interesting, and helps you accomplish your goals.)
To learn one of these frameworks, you’ll want to read a good book or take a deep-dive course on them. You’ll be using these frameworks so much that at some point you might forget they are using JS under the hood, and you’ll simply think “in react.”
Here are a few courses / tutorials I’ve heard good things about:
React docs (super through)
Vue 3 docs (these are amazing, and how I actually learned Vue)
Learn Svelte (interactive guide)
Epic React (by the legendary Kent C. Dodds)
The Joy of React (interactive learning experience by Josh Comeau)
8. Package Managers
When you are building a web app, you are going to pull from a lot of different libraries and high-quality packages others have built. Those could be React, Date-fns, Lodash, Axios, etc.
The classic way to use libraries on the web is to embed them with a <script> tag. However that quickly spirals out of control as you add more and more dependencies.
The MDN Web Docs have a good primer on package managers, and I really like this excerpt from their docs.
A good package manager will handle:
Finding all the correct package JavaScript files.
Checking them to make sure they don't have any known vulnerabilities.
Downloading them and putting them in the correct locations in your project.
Writing the code to include the package(s) in your application (this tends to be done using JavaScript modules, another subject that is worth reading up on and understanding).
Doing the same thing for all of the packages' sub-dependencies, of which there could be tens, or hundreds.
Removing all the files again if you want to remove the packages.
In addition, package managers handle duplicate dependencies (something that becomes important and common in front-end development).
The most popular javascript package managers are npm, yarn, and pnpm.
Here’s a helpful article that walks through some of the pros/cons of each.
9. Advanced state management
If you are going to build a medium-large web app, you’ll need to master state management. The big four – Angular, Vue, Svelte, React – all have their own version of how to manage state, but a lot of it is similar in practice.
There are four main types, from most simplistic to more complex and powerful.
Keep reading with a 7-day free trial
Subscribe to Level Up Software Engineering 🚀 to keep reading this post and get 7 days of free access to the full post archives.