Front End Developer – Roadmap

Front End Developer and Front End Engineer are the two standard titles, and the difference is mostly company culture rather than the work, though Engineer tends to signal a larger company and a higher band.

The framework-led titles are increasingly common and often more specific about what you will actually do: React Developer, React Engineer, JavaScript Developer, Next.js Developer. If you know the stack a company uses, searching its name finds roles that a generic search misses.

The interface-led titles usually mean closer collaboration with design: UI Developer, UI Engineer, Web Developer, Web Application Developer.

The mobile branch of this roadmap opens a second set: React Native Developer, Mobile Engineer, Cross-Platform Developer. React Native is the reason this roadmap covers mobile at all, and it means one skill set serves two job markets.

The progression above is Senior Front End Engineer, then Staff or Principal on the individual contributor track, or Front End Lead and Engineering Manager on the other. Front End Architect appears at larger organisations.

Two titles to read carefully. Full Stack Developer means this roadmap plus a backend, which is a genuine option but a longer path. UI/UX Developer sometimes means coding and sometimes means designing, so check the description rather than the title, because the skills barely overlap.

Fifteen months is the figure in the timeline below, and it assumes starting from scratch with steady part-time study. Where you start changes it considerably.

Coming from a design or no-code background, expect twelve to fifteen months. You already have the visual judgement that takes others months to develop, and the work is the programming.

Coming from another programming language, expect eight to ten months. The CSS section will be slower than you expect and the JavaScript faster, and the frameworks are where the real learning sits.

Coming from backend development, expect six to eight months. You have the engineering habits already, and the new material is the browser, the layout model and the component mindset.

Front end has one advantage over every other roadmap on datalad: the feedback loop is immediate. You change a line and see it. That makes the early months faster than they look on paper, and it is why the phase structure below front-loads the learning and leaves five months for building.

These are indicative annual ranges for permanent roles, and front end has the widest spread by company type of any role here, with agencies at the bottom, product companies in the middle, and large technology firms well above.

United Kingdom. Junior roles start around £25,000 to £35,000. Mid-level runs roughly £40,000 to £62,000. Senior engineers sit around £65,000 to £90,000, and lead or staff roles reach £90,000 to £125,000. London adds a significant premium.

Europe. Germany and the Netherlands run mid-level at roughly €50,000 to €72,000 and senior at €78,000 to €105,000. The Nordics are comparable or slightly higher, and remote roles for US companies sit above all of it.

United States. Junior roles run roughly $70,000 to $95,000. Mid-level sits around $100,000 to $140,000. Senior engineers reach $145,000 to $195,000, and staff or principal roles at large technology companies go considerably higher with equity.

Contract and freelance. Front end freelances better than almost any other role on this site, because the work is project-shaped and the results are visible. UK day rates typically run £350 to £700, and US rates $500 to $1,100.

The combination that moves you up the range fastest is React with TypeScript, and after that testing. Plenty of developers can build a component; far fewer write typed, tested components, and that is what senior interviews probe.

It suits career changers starting from nothing, designers who are tired of handing mockups to someone else, backend developers who want to own the whole product, and self-taught developers who can build things but have gaps they cannot name.

No prior programming is assumed. The CSS section starts at the beginning, and by design it comes first, because seeing your work appear on screen is the thing that keeps beginners going through the harder months that follow.

Every lesson is a main article, plus whichever of these fits it:

Code along is a hands-on build you follow yourself. Cheatsheet is a one-page reference to keep beside you. Feynman Technique is the same idea explained as simply as it can honestly be put. Video is the walkthrough.

Not every lesson has every component. Reference topics such as units and vendor prefixes need a cheatsheet rather than a build, and tooling topics need a walkthrough rather than an explainer.