DropoutDeveloper
Tools/Roadmap Generator/Frontend Developer
Free curated roadmap

Frontend Developer Roadmap

Ship interfaces people actually use: markup, styling, JavaScript, then a real framework.

14 Week168 h9 projects

This roadmap runs two free learning paths back to back. The GitHub path comes first, three weeks on version control, branches, issues, and opening a real pull request on a project you do not own. The Angular path follows, eleven weeks that start with HTML and CSS from scratch, move through JavaScript and TypeScript, then Angular itself, and finish with eight build projects that climb from a tic-tac-toe progressive web app to Amazon, WhatsApp, and a full-stack capstone. By the end you have a public commit history and eight deployed projects, which is the thing a hiring manager actually opens.

At ten hours a week the curated material sits at roughly twenty to twenty four weeks once you count the practice that is not on video. At twenty hours a week it compresses to about twelve to fourteen. Job ready, meaning someone can hand you a ticket and you finish it without hand holding, is usually six to nine months of steady work from a standing start. It is faster if you already write spreadsheet formulas or shell scripts without looking things up.

Order matters here. Do not skip the GitHub weeks because they feel slow. Every job runs on pull requests and you want that habit before your code is being reviewed for pay. Then HTML and CSS before any JavaScript, because a layout bug you cannot see is worse than a logic bug you can. Pick up TypeScript alongside the Angular basics, not before them. Leave the clone projects until after the third project, since they assume you can already wire a component to an API and read someone else's folder structure.

This track suits people who like seeing a result in the browser the same day, who can tolerate a slower start on fundamentals, and who want a framework that enforces structure instead of leaving every decision open. It fits career switchers from design, QA, and support especially well. It is the wrong track if you already know JavaScript and specifically want React, in which case use the React path and treat this as reference, or if you need a paid role in under three months with no prior coding, because this timeline does not bend that far.

What this roadmap covers

GitHub

3 Week

Go from your first commit to a real open-source contribution: Git and GitHub fundamentals, branches and issues, then actually open a pull request on a real project.

Start the free learning paths →

Angular

11 Week

Build and ship real Angular apps: a PWA, a to-do app, a live-API weather app, then level up by cloning Twitter, Amazon, and WhatsApp before a full-stack capstone.

Start the free learning paths →

The week-by-week plan

  1. Week 1: GitHub Basics

    GitHub

    Understand what GitHub is, how it fits with Git, and get comfortable with the core workflow.

    Watch

    Milestone What GitHub is and why developers use it

  2. Week 2: Branches, Issues & Collaboration

    GitHub

    Go beyond the basics: branch your work, track tasks with Issues, and understand how forking works.

    Watch

    Milestone What forking a repository means

  3. Week 3: Project: Contribute a Pull Request to a Real Open-Source Repo

    GitHub

    Put everything together: fork a real project, make a small improvement, and open your first pull request.

    Watch

    Milestone Finding a real repo and a beginner-friendly issue to work on

    Project checkpoint Put everything together: fork a real project, make a small improvement, and open your first pull request.

  4. Week 4: HTML / CSS

    Angular

    HTML and CSS are the building blocks of frontend development and you need to know the basics before touching a framework.

    Watch

    Milestone HTML basics and document structure

  5. Week 5: Javascript & TypeScript

    Angular

    The best way to learn coding is by getting your hands dirty and building projects. This full course walks through 15 small JavaScript/TypeScript-ready projects.

    Watch

    Milestone Build a counter, navbar, sidebar, and modal

  6. Week 6: Angular basics

    Angular

    Learn Angular fundamentals: components, data binding, routing, and calling APIs, before moving into real projects.

    Watch

    Milestone Angular installation and project setup

  7. Week 7: Project: Tic-Tac-Toe

    Angular

    Angular for Beginners - Let's build a Tic-Tac-Toe PWA.

    Watch

    Milestone Angular fundamentals through building a tic-tac-toe game

    Project checkpoint Angular for Beginners - Let's build a Tic-Tac-Toe PWA.

  8. Week 8: Project: To Do List

    Angular

    To Do List in Angular | Angular tutorial.

    Watch

    Milestone Angular basics through building a to-do list app

    Project checkpoint To Do List in Angular | Angular tutorial.

  9. Week 9: Project: Build an Angular Weather App

    Angular

    Angular Project Tutorial - Build an Angular Weather App From Scratch - Open Weather API Tutorial.

    Watch

    Milestone Calling a real public weather API from Angular

    Project checkpoint Angular Project Tutorial - Build an Angular Weather App From Scratch - Open Weather API Tutorial.

  10. Week 10: Project: Twitter Clone

    Angular

    Building a Twitter clone with Angular & Firebase (Workshop).

    Watch

    Milestone Building a mini Twitter clone with Angular and Firebase

    Project checkpoint Building a Twitter clone with Angular & Firebase (Workshop).

  11. Week 11: Project: Amazon Clone

    Angular

    Build an Amazon Clone with ANGULAR for Beginners.

    Watch

    Milestone This project is split into multiple parts. Work through the full series.

    Project checkpoint Build an Amazon Clone with ANGULAR for Beginners.

  12. Week 12: Project: WhatsApp clone

    Angular

    WhatsApp clone on (MEAN) ANGULAR, MongoDB, Express, Node and Ionic for beginners.

    Watch

    Milestone Building a full MEAN stack app (MongoDB, Express, Angular, Node)

    Project checkpoint WhatsApp clone on (MEAN) ANGULAR, MongoDB, Express, Node and Ionic for beginners.

  13. Week 13: Project: Cryptocurrency price tracker

    Angular

    Angular Project - Cryptocurrency price tracker | Angular HTTP Client | Angular Material UI.

    Watch

    Milestone Fetching live data with Angular HttpClient

    Project checkpoint Angular Project - Cryptocurrency price tracker | Angular HTTP Client | Angular Material UI.

  14. Week 14: Project: Cafe Management System

    Angular

    Cafe Management System (Angular, Node.js, MySQL Database) Complete Project (step by step): a mega project that pulls together everything from this path.

    Watch

    Milestone Building a full-stack CRUD app: Angular + Node.js + MySQL

    Project checkpoint Cafe Management System (Angular, Node.js, MySQL Database) Complete Project (step by step): a mega project that pulls together everything from this path.

Resources and structure are drawn from the free Dropout Developer learning paths.

Get this as a dated plan

Run the same roadmap through the generator with your weekly hours and a target date to get a dated schedule you can copy, download, or print.

Open the roadmap generator Start the free learning paths

FAQ

Is Angular still worth learning in 2026?

Yes for employability. Angular is the default in enterprise, banking, and government contracting, and those employers hire steadily. The concepts you learn, components, dependency injection, typed templates, and reactive state, carry over to React and Vue with about a week of adjustment.

Can I get a frontend job without a degree?

Yes. Frontend is one of the most portfolio-driven roles in software. Eight deployed projects with clean commits and one polished flagship beat a degree with no public work. Most hiring managers check the repositories before they read the resume.

How many projects do I actually need?

Three that are genuinely yours and finished, one of them polished enough to demo in an interview without apologising for it. The clone projects in this path exist to teach patterns. The flagship should solve a real problem you have.

Should I learn React or Angular first?

Whichever has more jobs where you live. Read three months of local listings before deciding. If it is close, Angular teaches structure that makes picking up React afterwards fast, and going the other way is rougher.

What comes after this roadmap?

Accessibility, performance budgets, and one testing library in real depth. After that, either go deeper on frontend architecture or add Node from the backend roadmap and move toward full stack.

Compare with the static roadmap on roadmap.sh →