👨💻
👨💻
👨💻
👨💻
Notes
twitterblog/personal siteYouTube
Search…
README
My Arabic Twitter Threads
Git
Problem Solving
Google Sheet Templates
Databases
MacOS
Frontend
Colors
UI frameworks for side projects
Design Systems
React
Articles
Assets & Illustrations
CLI
Firebase
Scripts
Technical Blogs
Backend
Productivity
Design Patterns
Programming Languages
Powered By GitBook
Frontend

Frontend Learning Path (Updated 2022)

Notes before learning

  1. 1.
    Most of online courses just introduce basic information of the X in its current version of X, they will not introduce everything, and you'll not learn everything from courses, Documentations is the most important source/guide that you have to learn how to use it to use their product (X).
  2. 2.
    Applying what you're learning is a regular activity that you must do while learning anything in programming, code everything you learn.
  3. 3.
    While learning or doing, you'll definitely struggle in doing things, I strongly recommend create a stackoverflow.com or reddit.com account and ASK the community, please don't hesitate to ask communities, Learn how to ask a good question it's a powerful skill!
  4. 4.
    Use coding communities like GitHub to share what you're coding with the public, It'll be a reference for you in the future as well, Although it'll help you to get job opportunities because people know you're sharing code about X.
  5. 5.
    Don't get distracted, You wanna learn X and you've asked someone, you got a resource, go with it, then apply! Don't spend your days getting the perfect resource to learn X, in tech you never stop learning, so just start with any and increase your knowledge then.
  6. 6.
    Don't compare yourself to others, you don't have the same abilities, time, environment, anything, you're completely different/unique, persistence is the common factor for success.

Path

Skip what you already know.
If you prefer learning from videos.

Introducing to internet

HTML

CSS

HTML and CSS Practice

Practice as much as you can, You could start with the next two resources:

Javascript

Javascript Practice

Practice as much as you can, You could start with the next two resources:

React

React Practice

​

What's next?

Now, you able to get your first job as frontend developer, you have a good portfolio (GitHub, LinkedIn, Stack overflow), you've built apps.
Some topics you can learn after that:
  • Micro frontends.
  • Design systems.
  • Testing.
  • Server side rendering.
  • state machine.
  • design patterns.
  • learn other frontend frameworks.
Previous
Setup your machine for development
Next
Colors
Last modified 4mo ago
Copy link
Edit on GitHub
Contents
Frontend Learning Path (Updated 2022)
Notes before learning
Path