Frontend
Frontend Learning Path (Updated 2022)
Notes before learning
- 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).
- Applying what you’re learning is a regular activity that you must do while learning anything in programming, code everything you learn.
- 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!
- 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.
- 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.
- 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
- [en][video] https://www.youtube.com/watch?v=7_LPdttKXPc
- [en][video] https://www.youtube.com/watch?v=Sfzo4xm5eX8
- [en][article] https://www.hp.com/us-en/shop/tech-takes/how-does-the-internet-work
- [ar][video] https://www.youtube.com/watch?v=w1GpaH8XIUE
HTML
- [en][video] https://www.youtube.com/watch?v=pQN-pnXPaVg
- [ar][video] https://www.youtube.com/watch?v=q3yFo-t1ykw
CSS
- [en][video] https://www.youtube.com/watch?v=1Rs2ND1ryYc
- [ar][video] https://www.youtube.com/watch?v=Z-5QVutAEW4
HTML and CSS Practice
Practice as much as you can, You could start with the next two resources:
- [en][video] https://www.youtube.com/watch?v=O7WbVj5apxU
- [ar][video] https://www.youtube.com/watch?v=cARGOrtiWt4
Javascript
- [en][video] https://www.youtube.com/watch?v=PkZNo7MFNFg
- [ar][video] https://www.youtube.com/watch?v=Ai_0ONyPay4
Javascript Practice
Practice as much as you can, You could start with the next two resources:
- [en][video] https://www.youtube.com/watch?v=3PHXvlpOkf4
React
- [en][video] https://www.youtube.com/watch?v=LlvBzyy-558
- [en][video] https://www.youtube.com/watch?v=MfIoAG3e7p4
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.
- Git
- state machine.
- Design Patterns
- learn other frontend frameworks.