Want to become a frontend developer but feel lost among HTML, CSS, JavaScript, TypeScript, React, Next.js and everything else? This roadmap breaks the journey into stages: for each one, we cover what to learn, which mini-project to build and how to tell when you're ready to move on. Don't rush — working through the steps in order gets you there faster than trying to learn everything at once.

1. HTML and CSS: the foundation of everything

Every page you see in a browser is built with HTML and CSS. Frameworks come and go, but these two stay — so the time you invest in this stage will pay off many times over.

HTML and semantics

HTML describes the structure of a page. The goal isn't to memorize tags but to learn to pick a tag for its meaning: <nav> for navigation, <main> for the main content, <button> for a button — not <div> for everything. Semantic markup makes a site understandable both to search engines and to people who use screen readers.

  • heading hierarchy, lists, links, images and the alt attribute;
  • semantic tags: header, nav, main, section, article, footer;
  • forms: input types, label, basic validation;
  • accessibility basics.

CSS: Flexbox, Grid and responsive design

CSS controls how a page looks. Focus above all on layout — that's where frontend developers spend most of their time.

  • selectors, the cascade, the box model, colors and fonts;
  • Flexbox — one-dimensional layouts in a row or column: menus, cards, button groups;
  • Grid — two-dimensional layouts: page skeletons, galleries;
  • responsive design: media queries and the mobile-first approach;
  • CSS variables, transitions and simple animations.

Mini-project: a one-page landing site built from a ready-made design — for a café or a gym, say. It should look equally polished on a phone, a tablet and a desktop.

You're ready for the next step if: you look at a simple design and immediately see how to build it with Flexbox or Grid, you pick semantic tags without thinking twice, and your page doesn't fall apart on a mobile screen.

You can work through this stage with a mentor in our HTML & CSS course. One of the most reliable free references is MDN Web Docs.

2. JavaScript: the DOM, async code and fetch

JavaScript brings a page to life: button clicks, form validation, loading data from a server. It's the longest and most important stage of the frontend path — every framework is built on JavaScript.

  • language basics: variables, types, conditions, loops, functions;
  • arrays and objects, the map, filter and reduce methods;
  • the DOM: finding and changing elements, handling events;
  • asynchronous code: callbacks, Promises, async/await;
  • fetching data with fetch, JSON and error handling;
  • modules (import/export) and modern ES2015+ syntax.

For example, here's how you might load a list of users from an API:

async function loadUsers() {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('Error: ' + response.status);
  return response.json();
}

Mini-project: a weather forecast or movie search page using a public API — with a search form, a loading indicator and an error message. For extra practice, build a to-do list that stores its data in the browser's localStorage.

You're ready for the next step if: you can write a small interactive page from scratch without libraries, explain in your own words how async/await works, and track down a problem on your own from an error message in the console.

Our JavaScript course will help you learn the language systematically. And if you want to see code run line by line, visit the "How Does It Work?" section — it has 100 free animated lessons, including ones on JavaScript.

3. Git and GitHub: take control of your code

Git keeps the version history of your code, and GitHub is the platform where code lives online and where teams collaborate on it. We've made this a separate stage, but you can start using Git from your very first HTML page — the sooner, the better.

  • command-line basics;
  • commit, branch, merge and resolving conflicts;
  • GitHub repositories, Pull Requests and code review;
  • publishing a static site on GitHub Pages.

Mini-project: push all your previous projects to GitHub and write a README for each. Build a new feature on a separate branch and merge it into the main code through a Pull Request.

You're ready for the next step if: you use Git every day, write clear commit messages and know how to go back to a previous version when something goes wrong.

The official documentation and the free book "Pro Git" are at git-scm.com. You can get hands-on with Git in our Git & GitHub course.

4. TypeScript: more reliable code

TypeScript adds static typing to JavaScript. Your editor flags errors while you're still writing code, before they ever reach the browser, and in large projects the code becomes noticeably easier to read and change. TypeScript is used very widely in modern React, Vue and Next.js projects.

  • basic types, unions, type and interface;
  • typing function parameters and return values;
  • generics;
  • types for data coming from an API.
type User = { id: number; name: string };

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

Mini-project: convert your project from the JavaScript stage to TypeScript: define types for the API response and fix the errors the editor finds.

You're ready for the next step if: you can read and understand type errors, you avoid any, and you're comfortable writing your own types.

Learn more in our TypeScript course.

5. A framework: React or Vue

A framework lets you build an interface out of reusable components. When starting out, pick one and learn it in depth: React has a broader ecosystem and a large community, while Vue is loved for its simple, readable syntax. The core ideas are similar, so switching to the other one later won't be hard.

  • components, props and state;
  • hooks in React (useState, useEffect), the Composition API in Vue;
  • working with lists, conditional rendering and forms.

Routing, state and data fetching

A real application has several pages and constantly exchanges data with a server. Once you have the framework basics down, move on to three topics:

  • routing — navigating between pages: React Router or Vue Router;
  • state management — data shared by several components: Redux Toolkit or Pinia;
  • data fetching — API requests, caching, loading and error states, for example with TanStack Query.

Mini-project: a small online store with filters, a product page and a cart (with data from a public API), or a multi-page task manager.

You're ready for the next step if: you plan up front how to split an app into components, you can explain where state should live, and you can build a multi-page app from scratch.

Courses: React and Vue.js. Official documentation: react.dev and vuejs.org.

6. Next.js, testing and deployment

Next.js and SSR basics

Next.js is a React-based framework. A regular React app builds the page in the browser, while Next.js can prepare it on the server first (SSR — server-side rendering). As a result, the page loads faster and search engines index it better.

  • the App Router and file-based routing;
  • the difference between Server and Client Components;
  • SSR, static generation and SEO metadata;
  • simple API routes.

Testing basics

Tests give you confidence that existing features still work after you make changes. To start, unit tests (Vitest or Jest) and component tests (Testing Library) are enough: check that a function returns the right result and that the right text appears on screen after a button click.

Deployment

If a project only runs on your own computer, nobody will ever see it. Static sites are easy to publish on GitHub Pages or Netlify, and Next.js apps on Vercel. Also get to grips with environment variables and automatic deployment from GitHub.

Mini-project: a blog or portfolio site in Next.js: article pages are rendered on the server, key features have a few tests, and the end result is a link that opens on the internet.

You're ready for the next step if: you can explain when SSR is needed, your project has tests, and your site redeploys automatically after every push.

Learn more in our Next.js course; testing with Vitest is covered in the React course.

7. Portfolio: proof of your skills

The most convincing argument for an employer is projects that are live on the internet and open-source code on GitHub. Quantity isn't what counts: a few polished, finished projects beat a pile of half-done ones.

  • every project gets a live link and a README: what it does, what it's built with and how to run it;
  • at least one project should serve a real user: a friend's small business or your own hobby;
  • pay attention to the mobile version, clean code and a readable commit history;
  • bring your projects, a short bio and your contact details together on one portfolio site.

You can start applying for jobs if: you can talk about each of your projects briefly and clearly, you have a tidy CV, and most of the requirements in job postings already look familiar. Don't wait to feel "completely ready" — that feeling usually never comes.

In our courses you'll build several portfolio projects, and once you finish, we help with your CV and job search.

The roadmap at a glance

StageKey topicsCourse
HTML & CSSsemantics, Flexbox, Grid, responsive designHTML & CSS
JavaScriptDOM, async/await, fetchJavaScript
Git & GitHubcommit, branch, Pull RequestGit & GitHub
TypeScripttypes, interfaces, genericsTypeScript
React or Vuecomponents, routing, state, data fetchingReact, Vue.js
Next.js, testing, deploymentSSR, unit tests, publishingNext.js, React (testing)
Portfolioprojects, README, CV—

The path may look long, but each stage builds on the one before, and every mini-project is another step toward your portfolio.

Not sure which stage you're at or where to go next? Come to a free trial lesson: meet the instructor, see how classes work, check your level and get help choosing a course. No strings attached. And if you already know JavaScript, the logical next step is the React course.