Dimitri Marion

How to Become a Front-end Developer in 2019

This guide is also available as a Trello board: Front-end Learning Path 2019.

Here’s a detailed learning path of what I think is the best way to learn front-end web development. This learning path has a lot of similarities with the Front-end handbook. The handbook is really good, but I think it is a bit overwhelming as a beginner who doesn’t know where to begin.

If you’re surprised there is no mention to the most used framework or library, it’s on purpose. You should learn the underlying technologies before learning the abstraction. It’s not even necessary to use frameworks or libraries nowadays for certain tasks thanks to the latest web standards and javascript. For example, CSS Grid or Flexbox can easily be used for layout instead of Bootstrap. You’ll be a better developer in the end and you’ll really understand what’s happening behind the scenes.

You’ll see a lot of mentions to Frontend Masters. I’m not affiliated with them in any way, I just think it’s one the best resources out there to learn web development.

This learning path assumes you have zero programming experience although this guide won’t teach you computer science. If you have zero prior programming experience, it may be good to take a course like CS50: Introduction to Computer Science. If you’re already a software developer or have some knowledge of web development, you may skip what you’re already familiar with, like for example section 1 explaining how the internet/web works.

It’s important to learn but it’s equally important to practice what you’ve learned. That’s why you’ll also find resources to practice or ideas of projects you can work on.

The only resources you should not skip (assuming you’re not already familiar with the subject studied in a section) are the one labeled “Getting Started”. They represent the basics that every Front-end developer should know. If you want to go further or come back to a subject you’re already familiar with, there are the resources labeled “Deeper Dive”. The resources labeled “Other Resources” covers the same subjects as in “Getting Started” or subjects that are not fundamentals.

1. Internet/Web Fundamentals

Getting Started:

Other Resources:

2. General Front-end

The following course will give you a good introduction on how to develop a web app and a basic understanding of how to use git and bash but without going into a lot of details. You’ll find that some of the next resources in this guide will cover the same subjects but that’s not a problem. It’s always good to review what you’ve already learned. It will also provide you with a good overview of what web development is so that you can learn each next subject knowing how all the pieces fit together.

Getting Started:

Deeper Dive:

3. HTML & CSS

Don’t rush learning HTML & CSS. I know you want to build a cool dynamic website but you should have a solid understanding of HTML & CSS before learning Javascript. It’s especially true with CSS, you can get very frustrated when you’re not able to get the result you want. For example, CSS won’t apply the margin you want but that often comes from a misunderstanding or lack of knowledge of margin collapsing. The key to mastering CSS is to practice a lot.

Getting Started:

Other Resources:

Practice:

Deeper Dive:

4. Javascript

Getting Started:

Other Resources:

Deeper Dive:

5. DOM API

Getting Started:

Other Resources:

Practice:

6. Server/Client, JSON, APIs, AJAX, REST

Getting Started:

Pratice:

Deeper Dive:

7. Bash, Git, Package manager, Bundlers

Getting Started:

Deeper Dive:

8. Front-End architecture

Getting Started:

Deeper Dive: