Five-stage roadmap
Frontend Engineering
You do not need to collect next-stage tools before you are ready. Sequence does not slow you down; it removes random detours.
- 1 · FoundationBuild the vocabulary and problem-solving habits the rest of the path assumes.
- 2 · CoreLearn the concepts that make this career distinct from simply writing code.
- 3 · PracticalMeet the inconvenient parts tutorials often skip: setup, failure, feedback and deployment.
- 4 · Professional EngineeringMake your work readable, testable, reviewable and safe for another person to depend on.
- 5 · Later / SpecializationChoose depth because a real project or question now demands it—not because a roadmap poster had empty boxes.
Roadmap stage
1 · Foundation
Build the vocabulary and problem-solving habits the rest of the path assumes.
What to learn
- Semantic HTML
- CSS layout and responsive design
- JavaScript and the DOM
Enough for now
You can build small programs, use Git, debug basic failures and explain what your code does.
Practical task
Build one small command-line or browser program without copying an entire tutorial.
Roadmap stage
2 · Core
Learn the concepts that make this career distinct from simply writing code.
What to learn
- Accessibility
- State and data fetching
- Browser performance
Enough for now
You can explain the main trade-offs and solve a bounded problem without a recipe.
Practical task
Rebuild a familiar exercise with one changed constraint and document your reasoning.
Roadmap stage
3 · Practical
Meet the inconvenient parts tutorials often skip: setup, failure, feedback and deployment.
What to learn
- Build from a design
- Test keyboard and mobile flows
- Measure and fix performance
Enough for now
You have one small, working artifact and can demonstrate a failure you found and fixed.
Practical task
Complete the linked career experiment, then improve it after one deliberate failure or review.
Roadmap stage
4 · Professional Engineering
Make your work readable, testable, reviewable and safe for another person to depend on.
What to learn
- Clean code and naming
- Testing and testability
- Code smells, refactoring and boundaries
- Defensive programming at external boundaries
Enough for now
You can explain a design choice, review a peer’s change and refactor without changing behavior.
Practical task
Find one pain point in your project, add a characterization test, then refactor it.
Roadmap stage
5 · Later / Specialization
Choose depth because a real project or question now demands it—not because a roadmap poster had empty boxes.
What to learn
- Design systems
- Advanced rendering
- Frontend architecture
Enough for now
Choose one depth area, state why it matters now and produce one evidence-backed result.
Practical task
Write a one-page depth plan tied to a real system, research question or role requirement.
From skills to a destination
Where could you take this?
The career roadmap explains what to learn. A goal guide helps you put those skills to work. Start with one—not every route at once.
You read the roadmap—now gather evidence
Test whether you actually like the work.
Apply engineering practice to your final-year project →
Connect this roadmap to an internship or junior-role cycle →