Skip to content

✅ Frontend Roadmap

Must-read Books

  • Стив Макконнелл — Совершенный код
  • В.Ф.Фило Феррейра — Теоретический минимум по Computer Science: Сети, криптография и Data Science
  • В.Ф.Фило Феррейра — Теоретический минимум по Computer Science: Всё, что нужно знать программисту
  • Адитья Бхаргава — Грокаем алгоритмы
  • Чарльз Петцольд — Код. Тайный язык компьютерного аппаратного и программного обеспечения
  • Роберт Мартин — Чистый код. Создание, анализ и рефакторинг
  • Роберт Мартин — Чистая архитектура. Искусство разработки программного обеспечения
  • Эрик Эванс — Предметно-ориентированное проектирование. Структуризация сложных программных систем
  • Chip Huyen - AI Engineering. Building Applications with Foundation Models

1. Fundamentals of Programming and basic tools

Data Types

  • Primitive types (numbers, strings, booleans)
  • Compound types (arrays, objects, structs)
  • Reference vs. value types
  • Static vs. dynamic typing

Variables and Scope

  • Variable declaration and naming
  • Scope (global, local, block)
  • Variable lifecycle
  • Closures

Operators and Expressions

  • Arithmetic operators
  • Logical operators
  • Comparison operators
  • Ternary operator and conditional expressions

Control Flow

  • Conditional statements (if, else, switch)
  • Loops (for, while, do while, for...of)
  • Control keywords (break, continue, return)

Functions

  • Function declaration and invocation
  • Parameters and return values
  • Default parameters
  • Pass by value vs. pass by reference
  • Recursion

Basic Data Structures

  • Arrays and collections
  • Dictionaries / hash maps / objects
  • Stack and queue (basic understanding)

Algorithmic Thinking

  • Sequence → Branching → Loop
  • Task decomposition
  • Pseudocode writing
  • Basic optimization techniques

Error Handling

  • try/catch/finally
  • Exceptions

Programming Paradigms

  • Imperative programming
  • Object-oriented basics (objects, classes, inheritance)
  • Functional programming basics (pure functions, higher-order functions, immutability)

Code Quality Principles

  • Readability and clarity
  • Reusability (SOLID, DRY, KISS)
  • Commenting and documentation

Development Environment

  • Running code (compilation, interpretation)
  • Using code editors (e.g., VS Code, terminal)
  • Basic debugging techniques (console.log, breakpoints)

Basic tools

  • HTML:
    • Structure
    • Semantics
    • Forms
  • CSS:
    • Selectors
    • Cascade
    • Positioning
    • Flexbox
    • Grid
  • JavaScript Basics
    • Variables and types
    • Loops and conditionals
    • Functions

2. Advanced JavaScript

Core Concepts:

  • DOM manipulation
  • Events
  • this
  • Hoisting

Async Programming:

  • Callbacks
  • Promises
  • Async/await

Modules and Bundling:

  • ESModules
  • CommonJS

Browser APIs:

  • Fetch
  • localStorage / sessionStorage
  • History API
  • Clipboard / Geolocation

3. Developer Tools

Git:

  • Standard Git features (init, clone, commit, push, pull)
  • Branching, merging, rebasing
  • Revert, reset, stash
  • Amend
  • Worktree
  • Dangerous but useful:
    • HEAD manipulations
    • Cherry-picking
    • Force push (when and why)

GitHub:

  • Pull requests and code reviews
  • GitHub Projects / Issues

Frontend Dev Workflow Tools:

  • Webpack / Vite dev mode
  • React Developer Tools
  • Lighthouse / Web Vitals in Chrome DevTools
  • Prettier, ESLint

Terminal & NPM:

  • CLI basics (cd, mkdir, touch, ls, etc.)
  • npm / yarn commands
  • Understanding package.json structure

Common Tools:

  • Postman (API testing)
  • OpenAPI / Swagger (API specification)

4. Modern CSS

Preprocessors:

  • Sass / SCSS

Methodologies:

  • BEM
  • Atomic CSS
  • OOCSS

Utility-first CSS:

  • Tailwind CSS

Responsive Design:

  • Media queries
  • Mobile-first approach

5. React Basics

  • JSX
  • Functional components
  • Props and state
  • useState / useEffect
  • Conditional rendering
  • Forms and event handling
  • Lifting state up
  • Prop drilling
  • Component folder structures (e.g. FSD)

6. Advanced React

Hooks:

  • useContext
  • useRef
  • useMemo / useCallback

Routing:

  • React Router

Custom Hooks:

  • Encapsulate side effects and logic

State Management:

  • Redux (Toolkit)
  • Zustand
  • RTK Query / React Query

7. Testing

Unit Testing:

  • Jest basics
  • Mocking and spies

Component Testing:

  • React Testing Library

E2E Testing:

  • Cypress / Playwright

8. Build Tools

  • Webpack
  • Loaders (babel-loader, css-loader)
  • DevServer
  • Optimization (tree shaking, code splitting)
  • Vite
  • HMR (Hot Module Replacement)
  • Plugin system
  • Babel
  • PostCSS
  • Bundle analysis tools (e.g., webpack-bundle-analyzer)

9. Deployment

Containerization:

  • Docker
  • Multi-stage Dockerfile
  • Containers

CI/CD pipelining:

  • GitHub Actions
  • Build/lint/test workflows
  • Automatic deployments

Lightweight platforms:

  • Vercel
  • GitHub integration
  • Env vars and preview builds
  • Netlify
  • Deployment configuration
  • Redirects and headers

Static deployment:

  • GitHub Pages
  • gh-pages branch
  • mkdocs gh-deploy

Configuration:

  • .env files
  • Secret management in CI/CD

Performance:

  • Lighthouse audits
  • Core Web Vitals

10. Patterns & Architecture

  • Separation of concerns
  • Reusable and modular components
  • Feature-Sliced Design (FSD)
  • Module aliasing (@shared, @entities, etc.)

11. Advanced Topics

  • SSR / SSG: Next.js or Remix
  • i18n (i18next)
  • Accessibility (a11y)
  • Web security basics (XSS, CSRF, CORS)
  • PWA (Progressive Web Apps)

12. Portfolio & Career Growth

Projects:

  • Clean README files
  • Project using external API
  • Project using state manager
  • Project using AI

Growth:

  • Contribute to open source
  • Documented personal roadmap (e.g., MkDocs)