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:

• How does the internet work?

• What is HTTP?

• Browsers and how they work?

• DNS and how it works?

• What is a Domain Name?

• What is hosting?

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.

– MDN Web Docs

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)

• Free course by Educative.io

• MDN’s Javascript free course

• 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)

• React learning path by Frontend Masters

• Vue learning path by Frontend Masters

• 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.