fullstackpilot Logo
fullstackpilot Logo
JavaScriptfront-end developmentweb developmenthow to learn js

A simple roadmap for Front End development in 2022

Martin Milo
By on

You decided to get into Front End development, but you have no idea where to start. That's okay; I've been there, done that. Let me show you a simple roadmap for Front End development that will give you a clear path to follow.

Table of Contents

Why should you listen to me in the first place?

I'm a self-taught developer and had no mentor in my first year. I've spent hundreds of hours learning by myself (a lot could have been saved if I knew certain things beforehand). I got a full-time job as a Front End developer in about 6 months since I focused solely on programming, and then I quickly got into a startup. I spent the last three years developing both Front End and Back End and learned a lot from great people that are part of a team.

No, this is not a show-off. I could have been far better off had I studied computer science at university, had a mentor, or had a better learning structure. And since I know exactly where I made some mistakes along the way, I want to help you avoid them.

Intro - Why am I writing this article?

There are hundreds of resources on this topic in all formats, but I think most of them lack simplicity. You're instantly thrown into a world full of weird-sounding keywords that don't make any sense to you. It's like showing grammar books to little kids who can barely speak.

Don't worry, I'll make this as simple as it could be. It's going to be written as if you've put "Front End Development" in Google's search bar for the very first time.

Front End development roadmap step-by-step

  1. The requirements for a fresh start in Front End web development
  2. Overview to get from zero to basic proficiency in Front End development
  3. Why no IDE?
  4. Focus on core concepts
  5. What about React, Angular, or Vue? When should I use these?
  6. Requirements for a professional Front End environment

What is Front End web development

In a nutshell, the Front End (in the context of the web) is what user sees when they visit a website or web app. It's the graphical UI (user interface) and interactions you might take on a particular website.

You can build the UI with HTML and CSS and add interactions using JavaScript.

A quick analogy to real-world - let's imagine a car, and break it into 3 parts

  • Car skeleton - main supporting structure - HTML
  • Car body (interior & exterior) parts - an appearance that can also have a convenient use case - CSS
  • Car electronics (heated seats, air conditioning, radio, think of all components that a driver can interact with) - you may not need them, but they are pretty useful - JavaScript

Hey, but where's the engine? Remember, we're focusing on Front End - what the user sees. An engine and other mechanical components that a car needs to run are somewhat Back End (hidden under the hood).

The HTML is a must since it's the skeleton that holds everything else together. CSS adds styles and makes things much nicer, and while you can build a website without it, I would not recommend it. You probably wouldn't buy a car that has no doors and roof.

Finally, JavaScript as electronics adds valuable interactions. Same way as you nowadays hardly find any car without any electronics, you probably won't find many websites that lack JavaScript entirely. For a simple blog displaying a piece of content, though, you may not need it.

1. The requirements for a fresh start in Front End web development

To recap, you need 3 things - HTML, CSS, JavaScript, though you don't need all 3 to build a basic website.

At this point, a lot of resources for beginners throw at you all sorts of tools, libraries, frameworks, and whatnot. I'm not sure if they intend to confuse you or scare you off, but let's have a look at what tools you really need to get started:

  • Laptop or computer - While you can learn stuff on a smartphone, I won't recommend it as it doesn't exercise your muscle memory.
  • A modern browser - I recommend Chrome or Firefox (my personal choice goes for Firefox Developer Edition)
  • Text editor - Just the basic one you already have installed on your computer

That's it. Forget about IDE, terminal, and everything else you've heard you need for now. Sure, they are extremely useful, even for learning. But if you don't want to go crazy, for now, I recommend you take baby steps.

One valuable skill far beyond coding is touch typing. It's not a requirement to get started, but in the long run, it saves you a massive amount of time any time you write stuff.

2. Overview to get from zero to basic proficiency in Front End development

Now that you have the tools you need, you can start learning. Do that in this order HTML -> CSS -> JavaScript. There are hundreds if not thousands of articles and videos to start with either of these. You can find them by typing something like "How to start with XYZ" or "XZY basics." in Google or on YouTube.

One particular resource I recommend is MDN Web Docs. It's a great resource with many code examples and instructions to follow. Although it might be a bit too overwhelming for a start, I recommend searching videos if you quickly lose focus when reading.

Don't compare yourself with others regarding the speed of progress. Everyone learns at a different pace. If you set yourself up for getting into Front End development, I recommend spending around 20-30% time on HTML + CSS and the rest on JavaScript.

Beware videos with titles similar to this "Learn COOL_TECH in 10 minutes". These types of videos are good for a quick overview of what you can expect from a particular language or technology. Do not expect anything beyond that, and don't spend too much time watching these.

As there's no way you'll be able to drive a car in 10 minutes, there's just no way you'll learn any programming language in that amount of time. It doesn't matter if it's 5/10/30 minutes or even an hour.

Watch and read stuff and always try to blend in coding. Are you watching how to position certain elements on a page? Good. Open your text editor and write some code. Are you reading how to remove elements on click with JavaScript? Cool, now before you jump on to the next article or video, open the browser's console and try it out by yourself.

3. Why no IDE?

Okay, I didn't include this in the requirements because you don't need an IDE as you start. Your focus should be somewhere else - learning concepts, understanding what's going on, writing plain HTML and CSS in any basic text editor, and opening file in a browser to see the changes. As you get into JavaScript, you might include script tags into your code or execute pieces of code directly in your browser's console.

If you insist, and you just want to have a nice dark theme with code that has characters distinguished by colors, fine. But please, do not set yourself busy by adding dozens of plugins and auto-completion tools. These tools are great when you know what's going on, but they are in the way of learning.

It's like teaching kids an alphabet but at the same time skipping a few characters now and then due to some auto-completion. I'm not trying to make your life harder, but if you want to get good, you have to understand what's going on instead of relying on auto-completion.

4. Focus on core concepts

There are many concepts to learn, but you don't have to dive deep into every single concept you encounter.

For instance, starting with HTML, focus mainly on elements, attributes, layout, classes, and link and image tags. As you encounter classes, you'll get into CSS and add styles to the structure. Put your focus on flexbox, selectors in general, and hierarchy (in other words specificity).

How do I know that I mastered the basics (HTML & CSS) and can move on?

In a nutshell, you should position various elements on a page and make them look nicer. If you know that, it's much easier to tackle responsiveness, i.e., adjusting the web for smaller devices and vice-versa.

As you move towards JavaScript, ignore all libraries or frameworks for now. Start with understanding variables, data types, functions, and loops. You can learn these by doing. Perhaps a good way to make this process fun is to just look at DOM and then use the available functions to play with your favorite websites in a browser's console. Select certain elements, hide them on click/hover, and so on. You can add interactions to your websites, read stuff from the prompt and display it for the user.

Create a basic to-do list. Show a timer and display a certain message after every 10 seconds. The possibilities are endless. Make it fun, and don't follow everything you find. Try things by yourself first as you get better, only then seek the solutions.

5. What about React, Angular, or Vue? When should I use these?

Look, you don't have to be an expert in JavaScript to move to any of these. But you would be so much better off if you had a good understanding of the core concepts and could already write code in plain JavaScript. Overall, it's good to know how to break functionality into functions and smaller pieces, how conditionals and loops work, and how to transform the data.

Now even if you check ✅ these requirements, it depends. For learning purposes, go for it; otherwise, you might have better options depending on the use case.

6. Requirements for a professional Front End environment

So you've learned HTML with CSS, and you know how to add JavaScript to your code to make stuff interactive. Perhaps you've already touched a few libraries or even used one of the big three - React, Angular, or Vue. Cool, but you still need to learn a thing or two to pass the bar as a professional.

  • GIT (version control in general) & GitHub - absolute must
  • IDE - pick one (VSCode/Atom/Sublime or other) and play around with a setup & add few plugins that helps you (always treat it as a tool to make your life easier, not harder)
  • SPA (single page application) - What it is, what it solves. I recommend trying out React and building a simple web app with it.
  • API - how API works, especially REST API. You don't have to build an API, as that's a job for Back End developers, though you should understand how to fetch, transform and display the data and send requests to change it. You can play around with JSON Placeholder (which is a free fake API for testing and prototyping).
  • Authentication & Authorization - Check out what the JWT stands for and how you store and use these tokens on Front End
  • State management - How do you manage state in your application? What are the options (libraries) you can choose from
  • Testing - How do you test your JavaScript code? Difference between Unit, Integration and E2E tests
  • CSS precompilers & CSS frameworks - When it comes to precompilers (Sass/Less), check out what they solve. Regarding frameworks, just pick one (Bootstrap or Foundation, for instance), get familiar with it, and focus on how it structures the component library. Make a comparison with other frameworks but don't spend too much time learning it in detail since the job you get might involve a completely different CSS framework (or none at all)
  • Kanban boards - Get familiar with kanban boards in general. Perhaps try out Trello/Notion.
  • Figma/Framer/Sketch - Briefly check what you'll get from your designer as you get involved

Relevant post: What is single page application application application (SPA)

Front End development is a broad term, and the jobs in this field have different requirements. Beware that companies mix the words and sometimes don't know the difference between websites and web apps (or single-page applications).

So what exactly should you expect? There are 2 types of jobs

  • Website Front End Developer - You are responsible for creating either specific components, pages, or the whole website. You get the design from your fellow web designer and apply it by writing code. The website does not rely heavily on JavaScript, but few widgets and components, or perhaps interactions written in JavaScript to handle specific actions.
  • Web app (SPA or hybrid) Front End Developer - You are responsible for creating and maintaining a web app or SPA (single page application) written in JavaScript - for example, React with a bunch of other libraries that complement it. Your responsibility, in this case, is much broader, as you now have to additionally handle authentication, authorization, routing, state management, testing, and so on. Web apps require much more interactions than static websites, and because the Front End codebase is so much larger, you have to make architectural decisions to keep it easy to change and maintain.

Obviously, the bar for the first job is so much lower than the second one. But so are the salary expectations and the number of job opportunities.

Summary

Get comfortable with HTML, CSS, and JavaScript. Learn the basics and core concepts of JavaScript and DOM. Don't memorize anything. Write code instead (try to avoid copy-pasting, and by all means avoid autocompletion features for now). Once you can build a website and are comfortable making your own layouts with ease, start adding interactions with JavaScript.

By then, you can already dive into professional Front End development requirements. Stay on track for a while, and you're able to land your first job. Congrats.

I hope you enjoy the journey if you get involved in Front End development! I would highly appreciate your feedback.

Share: