How to Become a Front-end Developer in 2019
Tags: frontend, guide, learning, path
Published: 2019-09-30 15:05:09

---
title: How to Become a Front-end Developer in 2019
published: true
tags: front-end, guide, learning, path
canonical_url: https://www.dimitrimarion.com/blog/2019/08/28/how-to-become-front-end-developer/
---


 **This guide is also available as a Trello board** : [Front-end Learning Path 2019](https://trello.com/b/t11rpjld/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](https://frontendmasters.com/books/front-end-handbook/2019/). The handbook is really good, but I think it is a bit overwhelming as a beginner who doesn’t know where to begin.

<!--more-->

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](https://youtu.be/QjKH1J77gjI). 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) or [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox) can easily be used for layout instead of [Bootstrap](https://getbootstrap.com). 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](https://frontendmasters.com). 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](https://online-learning.harvard.edu/course/cs50-introduction-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:

- [What Is a Front-end Developer?](https://frontendmasters.com/books/front-end-handbook/2019/#2)
- [Internet Fundamentals](http://internetfundamentals.com/)

### Other Resources:

- [What is the Internet?](https://youtu.be/Dxcc6ycZ73M)
- [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
- [How the Web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
- [DNS Explained](https://youtu.be/72snZctFFtA)
- [An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)
- [Introduction to the server side](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction)
- [Web Hosting Services Explained](https://firstsiteguide.com/tools/hosting/)
- [Web Hosting 101](https://www.udemy.com/course/web-hosting-101/)
- [What is a browser engine?](https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/)

## 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:

- [Complete Intro to Web Development, v2](https://frontendmasters.com/courses/web-development-v2/)

### Deeper Dive:

- [Being a Web Developer](https://yellowshoe.com.au/standards/)
- [So, You Want to be a Front-End Engineer](https://youtu.be/Lsg84NtJbmI)
- [Planning a Front-end JS Application](https://youtu.be/q4zEGkjTBFA)

## 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:

- [HTML & CSS is Hard](https://internetingishard.com/html-and-css/)
- [CSS Grids and Flexbox for Responsive Web Design](https://frontendmasters.com/courses/css-grids-flexbox/)
- [Everything You Need To Know About CSS Margins](https://www.smashingmagazine.com/2019/07/margins-in-css/)
- [Single-direction margin declarations](https://csswizardry.com/2012/06/single-direction-margin-declarations/)

### Other Resources:

- [Learning HTML: Guides and tutorials (MDN)](https://developer.mozilla.org/en-US/docs/Learn/HTML)
- [Learn to style HTML using CSS (MDN)](https://developer.mozilla.org/en-US/docs/Learn/CSS)
- [CSS Float and Clear Explained](https://youtu.be/xara4Z1b18I)
- [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [HTML Living Standard](https://html.spec.whatwg.org/multipage/)

### Practice:

- [freeCodeCamp Responsive Web Design Projects](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects)
- [Frontend Mentor](https://www.frontendmentor.io)
- [Frontloops Markup](https://frontloops.io)
- [Flexbox Froggy](https://flexboxfroggy.com)
- [Grid Garden](https://cssgridgarden.com/)
- [Grid Critters](http://www.gridcritters.com/)
- [Grid by Example](https://gridbyexample.com/learn/)

### Deeper Dive:

- [How to Section Your HTML](https://css-tricks.com/how-to-section-your-html/)
- [CSS in Depth Book](https://www.manning.com/books/css-in-depth)
- [CSS In-Depth, v2](https://frontendmasters.com/courses/css-in-depth-v2/)

## 4. Javascript

### Getting Started:

- [Getting Started with JavaScript, v2](https://frontendmasters.com/courses/getting-started-javascript-v2/)

### Other Resources:

- [You Don’t Know JS (book series)](https://github.com/getify/You-Dont-Know-JS)
- [Eloquent Javascript](http://eloquentjavascript.net/index.html)

### Deeper Dive:

- [JavaScript: From Fundamentals to Functional JS, v2](https://frontendmasters.com/courses/js-fundamentals-functional-v2/)
- [Ten Things A Serious JavaScript Developer Should Learn](https://benmccormick.org/2017/07/19/ten-things-javascript/)

## 5. DOM API

### Getting Started:

- [The Document Object Model](http://eloquentjavascript.net/14_dom.html)
- [Handling Events](http://eloquentjavascript.net/15_event.html)
- [Bubbling and capturing](https://javascript.info/bubbling-and-capturing)

### Other Resources:

- [DOM (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
- [Introduction to events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)
- [HTML/JS: Making webpages interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js)
- [DOM Living Standard](https://dom.spec.whatwg.org/)
- [UI Events](https://w3c.github.io/uievents/)

### Practice:

- [Frontloops Elements](https://frontloops.io)
- Build a simple to-do list app
- [Javascript 30](https://javascript30.com)

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

### Getting Started:

- [Introduction to the server side](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction)
- [Client-Server Overview](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview)
- [What is JSON?](https://mijingo.com/lessons/what-is-json/)
- [Working with JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON)
- [Introduction to web APIs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
- [Fetching data from the server](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
- [Learning to REST](http://rest.learncode.academy/)
- [Third-party APIs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)

### Pratice:

- Pick an API in this list: [https://github.com/public-apis/public-apis](https://github.com/public-apis/public-apis). Build a web app using this API. Example: show the weather forecast in your city.

### Deeper Dive:

- [Using XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
- [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [CORS (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
- [CORS Explained](https://alazierplace.com/2019/06/cors-cross-origin-communication-in-the-modern-web/)
- [Developers don’t understand CORS](https://fosterelli.co/developers-dont-understand-cors)

## 7. Bash, Git, Package manager, Bundlers

### Getting Started:

- [Learn Enough Command Line to Be Dangerous](https://www.learnenough.com/command-line-tutorial/basics)
- [Getting Git Right](https://www.atlassian.com/git)
- [Modern JavaScript Explained For Dinosaurs](https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
- [An introduction to how JavaScript package managers work](https://www.freecodecamp.org/news/javascript-package-managers-101-9afd926add0a/#.hu6knvct3)
- [A Beginner’s Guide to npm — the Node Package Manager](https://www.sitepoint.com/beginners-guide-node-package-manager/)
- [The Mystical & Magical SemVer Ranges Used By npm & Bower](https://www.telerik.com/blogs/the-mystical-magical-semver-ranges-used-by-npm-bower)
- [Having A Hard Time Understanding Webpack](http://web.archive.org/web/20180119022215/https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/)
- [Unbundling the JavaScript module bundler](https://slides.com/lucianomammino/unbundling-the-javascript-module-bundler-dublinjs#/)
- [Webpack Documentation](https://webpack.js.org/guides/getting-started/)

### Deeper Dive:

- [Introduction to Bash, VIM & Regex](https://frontendmasters.com/courses/bash-vim-regex/)
- [Git In-depth](https://frontendmasters.com/courses/git-in-depth/)
- [Webpack 4 Fundamentals](https://frontendmasters.com/courses/webpack-fundamentals/)
- [Minipack: a simplified example of a modern module bundler written in JavaScript](https://github.com/ronami/minipack)

## 8. Front-End architecture

### Getting Started:

- [New to JAMstack? Everything You Need to Know to Get Started](https://snipcart.com/blog/jamstack)
- [JAMstack](https://jamstack.org/)

### Deeper Dive:

- [JavaScript Stack from Scratch](https://github.com/verekia/js-stack-from-scratch)