{"id":28339665,"url":"https://github.com/anashany2193/frontend-roadmap-junior-style","last_synced_at":"2026-01-31T23:42:01.375Z","repository":{"id":288665296,"uuid":"968835523","full_name":"AnasHany2193/Frontend-Roadmap-Junior-Style","owner":"AnasHany2193","description":"🚀 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!","archived":false,"fork":false,"pushed_at":"2025-04-18T20:37:59.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T22:07:17.432Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnasHany2193.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-18T20:30:26.000Z","updated_at":"2025-04-18T20:38:03.000Z","dependencies_parsed_at":"2025-04-20T12:45:34.580Z","dependency_job_id":null,"html_url":"https://github.com/AnasHany2193/Frontend-Roadmap-Junior-Style","commit_stats":null,"previous_names":["anashany2193/frontend-roadmap-junior-style"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AnasHany2193/Frontend-Roadmap-Junior-Style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnasHany2193%2FFrontend-Roadmap-Junior-Style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnasHany2193%2FFrontend-Roadmap-Junior-Style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnasHany2193%2FFrontend-Roadmap-Junior-Style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnasHany2193%2FFrontend-Roadmap-Junior-Style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnasHany2193","download_url":"https://codeload.github.com/AnasHany2193/Frontend-Roadmap-Junior-Style/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnasHany2193%2FFrontend-Roadmap-Junior-Style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28960755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T23:03:11.038Z","status":"ssl_error","status_checked_at":"2026-01-31T22:56:44.691Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-27T01:50:44.588Z","updated_at":"2026-01-31T23:42:01.364Z","avatar_url":"https://github.com/AnasHany2193.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-End Developer Roadmap\n\nThis 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.\n\nIt's written in a simple and casual style, just like how I'd explain it to a friend.\n\n---\n\n## Phase 1: The Basics – Start Here\n\n### Overview of the Path\n\nOsama Elzero's intro video explaining the front-end roadmap:  \nhttps://youtu.be/EB_9bmDrK0k\n\n### Learn HTML\n\nStart with the building blocks of the web:  \nhttps://youtube.com/playlist?list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji\n\n### Learn CSS\n\nLearn how to style pages properly:  \nhttps://youtube.com/playlist?list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe\n\n### Learn JavaScript\n\nStart writing real logic in your websites:  \nhttps://youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv\n\n### Git \u0026 GitHub\n\nUpload your projects and keep track of your code:  \nhttps://youtu.be/Q6G-J54vgKc\n\n---\n\n## Phase 2: Level Up\n\n### HTML \u0026 CSS Advanced\n\nA complete course from Jonas Schmedtmann:  \nhttps://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3\n\n### Tailwind CSS\n\nA utility-first CSS framework to write cleaner and faster styles:  \nhttps://youtu.be/lCxcTsOHrjo\n\n### Advanced JavaScript\n\nTo deepen your understanding of JS and build more complex apps:  \nhttps://www.udemy.com/course/the-complete-javascript-course\n\n---\n\n## Phase 3: React\n\n### Crash Course\n\nIf you're starting with React, watch this first:  \nhttps://youtu.be/LDB4uaJ87e0\n\n### Full React Course\n\nA detailed React course by Jonas Schmedtmann:  \nhttps://www.udemy.com/course/the-ultimate-react-course\n\n---\n\n## Front-End Performance\n\nLearn how to make your apps faster and more optimized:  \nhttps://youtube.com/playlist?list=PLH_t3aTgqQcAFpAc58kJ4QLIn9y_I9zP1\n\n---\n\n## TypeScript\n\nA crash course to start using TypeScript with your React projects:  \nhttps://youtube.com/playlist?list=PL4cUxeGkcC9gNhFQgS4edYLqP7LkZcFMN\n\n---\n\n## Practice with Real Projects\n\nBuild dashboards, charts, and explore some real-world examples:  \nhttps://youtu.be/jx5hdo50a2M\n\n---\n\n## Resume and Job Preparation\n\n- Resume Template (Overleaf):  \n  https://www.overleaf.com/latex/templates/jakes-resume/syzfjbzwjncs\n- Resume Checker (ATS):  \n  https://www.resumego.net/resume-checker/\n\n---\n\n## Learn Next.js\n\nA great full course from Maximilian Schwarzmüller:  \nhttps://www.udemy.com/course/nextjs-react-the-complete-guide\n\n---\n\n## Final Note\n\nThis roadmap is not a final reference or an official learning path.  \nIt's just a personal effort by a student who’s been learning and wanted to share the experience in a simple and honest way.  \nIf it helps even one person out there, then it did its job.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanashany2193%2Ffrontend-roadmap-junior-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanashany2193%2Ffrontend-roadmap-junior-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanashany2193%2Ffrontend-roadmap-junior-style/lists"}