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:
- 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.
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:
- HTML & CSS is Hard
- CSS Grids and Flexbox for Responsive Web Design
- Everything You Need To Know About CSS Margins
- Single-direction margin declarations
Other Resources:
- 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
Practice:
- freeCodeCamp Responsive Web Design Projects
- Frontend Mentor
- Frontloops Markup
- Flexbox Froggy
- Grid Garden
- Grid Critters
- Grid by Example
Deeper Dive:
4. Javascript
Getting Started:
Other Resources:
Deeper Dive:
- JavaScript: From Fundamentals to Functional JS, v2
- Ten Things A Serious JavaScript Developer Should Learn
5. DOM API
Getting Started:
Other Resources:
Practice:
- Frontloops Elements
- Build a simple to-do list app
- Javascript 30
6. Server/Client, JSON, APIs, AJAX, REST
Getting Started:
- 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
Pratice:
- 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.
Deeper Dive:
7. Bash, Git, Package manager, Bundlers
Getting Started:
- Learn Enough Command Line to Be Dangerous
- Getting Git Right
- Modern JavaScript Explained For Dinosaurs
- An introduction to how JavaScript package managers work
- 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
- Unbundling the JavaScript module bundler
- Webpack Documentation
Deeper Dive:
- Introduction to Bash, VIM & Regex
- Git In-depth
- Webpack 4 Fundamentals
- Minipack: a simplified example of a modern module bundler written in JavaScript
Top comments (1)
How much HTML,CSS is enough to move on to JavaScript?