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.
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
- What is the Internet?
- How does the Internet work?
- How the Web works
- DNS Explained
- An overview of HTTP
- Introduction to the server side
- Web Hosting Services Explained
- Web Hosting 101
- 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.
3. HTML & CSS
- HTML & CSS is Hard
- CSS Grids and Flexbox for Responsive Web Design
- Everything You Need To Know About CSS Margins
- Single-direction margin declarations
- Learning HTML: Guides and tutorials (MDN)
- Learn to style HTML using CSS (MDN)
- CSS Float and Clear Explained
- Centering in CSS: A Complete Guide
- A Complete Guide to Flexbox
- A Complete Guide to Grid
- HTML Living Standard
- freeCodeCamp Responsive Web Design Projects
- Frontend Mentor
- Frontloops Markup
- Flexbox Froggy
- Grid Garden
- Grid Critters
- Grid by Example
5. DOM API
6. Server/Client, JSON, APIs, AJAX, REST
- Introduction to the server side
- Client-Server Overview
- What is JSON?
- Working with JSON
- Introduction to web APIs
- Fetching data from the server
- Learning to REST
- Third-party APIs
- Pick an API in this list: https://github.com/public-apis/public-apis. Build a web app using this API. Example: show the weather forecast in your city.
7. Bash, Git, Package manager, Bundlers
- Learn Enough Command Line to Be Dangerous
- Getting Git Right
- A Beginner’s Guide to npm — the Node Package Manager
- The Mystical & Magical SemVer Ranges Used By npm & Bower
- Having A Hard Time Understanding Webpack
- Webpack Documentation
- Introduction to Bash, VIM & Regex
- Git In-depth
- Webpack 4 Fundamentals