https://github.com/anashany2193/frontend-roadmap-junior-style
🚀 A complete, beginner-friendly Front-End Development roadmap with a fun and simple vibe. Includes free resources, crash courses, and pro tips to go from zero to junior developer!
https://github.com/anashany2193/frontend-roadmap-junior-style
Last synced: 6 months ago
JSON representation
🚀 A complete, beginner-friendly Front-End Development roadmap with a fun and simple vibe. Includes free resources, crash courses, and pro tips to go from zero to junior developer!
- Host: GitHub
- URL: https://github.com/anashany2193/frontend-roadmap-junior-style
- Owner: AnasHany2193
- Created: 2025-04-18T20:30:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-18T20:37:59.000Z (over 1 year ago)
- Last Synced: 2025-06-14T22:07:17.432Z (about 1 year ago)
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Front-End Developer Roadmap
This is a personal roadmap I created to guide anyone who wants to start learning front-end development from scratch. It's based on my own learning journey, and includes free resources, tips, and a few side notes to make things easier.
It's written in a simple and casual style, just like how I'd explain it to a friend.
---
## Phase 1: The Basics – Start Here
### Overview of the Path
Osama Elzero's intro video explaining the front-end roadmap:
https://youtu.be/EB_9bmDrK0k
### Learn HTML
Start with the building blocks of the web:
https://youtube.com/playlist?list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji
### Learn CSS
Learn how to style pages properly:
https://youtube.com/playlist?list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe
### Learn JavaScript
Start writing real logic in your websites:
https://youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv
### Git & GitHub
Upload your projects and keep track of your code:
https://youtu.be/Q6G-J54vgKc
---
## Phase 2: Level Up
### HTML & CSS Advanced
A complete course from Jonas Schmedtmann:
https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3
### Tailwind CSS
A utility-first CSS framework to write cleaner and faster styles:
https://youtu.be/lCxcTsOHrjo
### Advanced JavaScript
To deepen your understanding of JS and build more complex apps:
https://www.udemy.com/course/the-complete-javascript-course
---
## Phase 3: React
### Crash Course
If you're starting with React, watch this first:
https://youtu.be/LDB4uaJ87e0
### Full React Course
A detailed React course by Jonas Schmedtmann:
https://www.udemy.com/course/the-ultimate-react-course
---
## Front-End Performance
Learn how to make your apps faster and more optimized:
https://youtube.com/playlist?list=PLH_t3aTgqQcAFpAc58kJ4QLIn9y_I9zP1
---
## TypeScript
A crash course to start using TypeScript with your React projects:
https://youtube.com/playlist?list=PL4cUxeGkcC9gNhFQgS4edYLqP7LkZcFMN
---
## Practice with Real Projects
Build dashboards, charts, and explore some real-world examples:
https://youtu.be/jx5hdo50a2M
---
## Resume and Job Preparation
- Resume Template (Overleaf):
https://www.overleaf.com/latex/templates/jakes-resume/syzfjbzwjncs
- Resume Checker (ATS):
https://www.resumego.net/resume-checker/
---
## Learn Next.js
A great full course from Maximilian Schwarzmüller:
https://www.udemy.com/course/nextjs-react-the-complete-guide
---
## Final Note
This roadmap is not a final reference or an official learning path.
It's just a personal effort by a student who’s been learning and wanted to share the experience in a simple and honest way.
If it helps even one person out there, then it did its job.