Frontend web developer
A 9-step frontend roadmap: semantic HTML, CSS and responsive design, modern JavaScript, Git, React with TypeScript, API calls and state management, performance, SEO and accessibility, and a deployed portfolio project. Afterwards you can work as a fresher or junior frontend developer at software companies or agencies, or build websites freelance. Suits self-learners who enjoy building interfaces.
Start here
Step 1: How the web works & semantic HTML
One short lesson per step, 10–15 minutes on a phone. No sign-up needed.
Hands-on roadmap
Roadmap
- Step 1Lesson
How the web works & semantic HTML
Browsers, HTTP, DNS, domains; setting up VS Code and Chrome DevTools; semantic tags, forms, images with alt text; using div for everything hurts SEO and screen readers.
- Step 2Skill
CSS, Flexbox, Grid & responsive design
Box model, selectors, Flexbox, Grid, mobile-first media queries; Tailwind CSS; turning Figma designs into pixel-accurate layouts on phones and desktops.
Requires: How the web works & semantic HTML
No English content for this step yet.
- Step 3Skill
Modern JavaScript & DOM manipulation
Variables, functions, arrays, objects, ES6+, event handling, fetch, async/await, Promises; debugging with DevTools; common async mistakes and == versus ===.
Requires: CSS, Flexbox, Grid & responsive design
No English content for this step yet.
- Step 4Skill
Git, GitHub & teamwork
Commits, branches, merges, pull requests, resolving conflicts; clear commit messages; code review; GitHub Issues or Jira in the Scrum process common at local companies.
Requires: Modern JavaScript & DOM manipulation
No English content for this step yet.
- Step 5Skill
React, TypeScript & Next.js
Components, props, state, hooks, routing; TypeScript for props and API data; Next.js App Router and server rendering; project folder structure and reusable components.
Requires: Git, GitHub & teamwork
No English content for this step yet.
- Step 6Skill
API calls, forms & state management
REST, JSON, loading and error states; TanStack Query, Zustand or Redux Toolkit; forms with React Hook Form and validation; token login, never storing secrets in the frontend.
Requires: React, TypeScript & Next.js
No English content for this step yet.
- Step 7Skill
Performance, SEO, accessibility & testing
Lighthouse, Core Web Vitals, image optimization, lazy loading; meta tags and structured data; keyboard navigation and contrast; tests with Vitest and Testing Library.
Requires: API calls, forms & state management
No English content for this step yet.
- Step 8Project
Portfolio project: a deployed shop website
Build a small shop site with product listing, search, cart, login and a real API; deploy to Vercel with a domain; a clear README and a clean GitHub repo.
Requires: Performance, SEO, accessibility & testing
No English content for this step yet.
- Step 9Assessment
Technical interviews & fresher applications
Review common JavaScript, React and CSS questions; complete a 3–5 day take-home test; a one-page CV with portfolio; apply via TopCV, ITviec and LinkedIn.
Requires: Portfolio project: a deployed shop website
No English content for this step yet.
