Front-End Roadmap

One of the most common questions I get asked is how to get started with front-end development and transition into a web dev career.

It's a great question. And the answer used to be simple:

  1. Learn HTML and CSS
  2. Learn JavaScript
  3. Apply for jobs

But the front-end landscape has changed quite significantly in the last few years - which is both a blessing and a curse.

Websites have gotten more powerful, but also more complex. The amount of stuff you can do in a browser nowadays was unheard of 10 years ago. The JavaScript ecosystem has evolved to include modern frameworks like React, Vue and Angular. CSS is mostly used through preprocessors like SCSS, a framework like Tailwind, or through a CSS-in-JS solution.

Don't get me wrong: this newfound power and capability is a good thing. All of these tools do amazing things for front-end developers, despite their added complexity.

But it does make it a lot trickier for new developers looking to learn and break into the field. There's no "cookie-cutter" path anymore because there's so many options.

With that said, I have my own idea of the optimal roadmap for new front-end developers. This is based on the path I took as well as what I see working in the industry. It's also the skills my company look for when hiring new front-end devs:

  1. Learn HTML and CSS (semantics, accessibility, forms, layouts)
  2. Learn JavaScript + basic DOM manipulation and data fetching
  3. Learn a JS framework. I recommend Vue because I think it's easier to get started with, but React or Svelte are great choices too.
  4. Dive into SCSS and Tailwind. You don't need to learn them in detail, but understand how they work.
  5. Learn basic Git concepts like adding/committing files, branching, pushing and pulling. The rest you can learn as you go.
  6. Pick up a metaframework like Nuxt (if you chose Vue in step 3) or Next (if you chose React) or SvelteKit (if you chose Svelte).
  7. Apply for jobs

Now this may look like a lot. And that's because it is.

Front-end has gotten a lot more complex over time, and it can be overwhelming when looking at a long list like this. But this is the reality of what is expected of a front-end developer in 2022. At least it's better to be well-informed and prepared (even if that list looks scary!)

The good news is that all of these things can be learned with the right approach - and that approach is to build lots of projects along the way.

That's always been the best way to learn in my experience. To learn HTML and CSS, build a simple portfolio website. Then add some JavaScript to manipulate it with a carousel. Use your framework of choice to build a small app around something you're passionate about, and style it with Tailwind or SCSS.

The more you build, the quicker you'll learn. And before you know it these tools will become second nature to you and you'll be an amazing front-end hire for any company.

Just keep at it 🔥

​