Коротка відповідь. Маршрут у frontend виглядає так: HTML → CSS → JavaScript і DOM → Git/GitHub → HTTP і доступність → React → TypeScript і тести → власні проєкти. Порядок важливий: кожен наступний крок спирається на попередній, і саме пропуски в базі найчастіше валять кандидатів на співбесідах. Нижче – весь шлях із поясненням «чому так» і одна наскрізна задача, яка росте разом із тобою.

Чим насправді займається frontend-розробник

Усе, що ти бачиш і клікаєш на сайті, – зона відповідальності frontend: розмітка й стилі, логіка інтерфейсу, запити до сервера, швидкість завантаження, робота на телефоні, доступність для людей із клавіатурою чи скрінрідером. Це інженерна робота з видимим результатом – і саме видимість результату робить frontend найпопулярнішою точкою входу в розробку.

Що вчити по порядку і чому

  1. HTML – скелет сторінки. Семантичні теги, форми, таблиці. Без нормального HTML далі все хитається.
  2. CSS – зовнішній вигляд і розкладка: flexbox, grid, адаптивність. Тут з'являється перша реальна складність.
  3. JavaScript + DOM – поведінка: події, зміна елементів, дані. Найбільший і найважливіший блок; довідник – MDN.
  4. Git і GitHub – збереження історії та публікація коду. Вчи одразу, як тільки з'явився перший проєкт (офіційна документація Git).
  5. HTTP і доступність – як браузер спілкується з сервером і як зробити інтерфейс придатним для всіх. Дві теми, які відрізняють «верстальника з туторіалів» від майбутнього інженера.
  6. React – коли вже вмієш робити інтерфейси без нього. Тоді react.dev читається як розв'язання знайомих проблем, а не як магія.
  7. TypeScript і тести – професійна норма сучасних команд; додаються поверх упевненого JS.

Одна задача, яка росте разом із тобою

Найкращий спосіб пройти маршрут – не десять розрізнених туторіалів, а один продукт, який еволюціонує. Візьмемо трекер витрат.

Етап 1 – статична сторінка (HTML + CSS)

Список витрат і форма додавання. Ніякої логіки – лише розмітка й стилі:

<main>
  <h1>Мої витрати</h1>
  <form id="expense-form">
    <input name="title" type="text" placeholder="На що витратив" required />
    <input name="amount" type="number" min="0" required />
    <button type="submit">Додати</button>
  </form>
  <ul id="expense-list">
    <li>Кава – 85 грн</li>
    <li>Проїзд – 20 грн</li>
  </ul>
</main>

Мета етапу: семантика, адаптивність, охайні стилі без фреймворків.

Етап 2 – жива логіка (JavaScript + DOM)

Форма реально додає витрати, список зберігається в localStorage:

const form = document.querySelector('#expense-form');
const list = document.querySelector('#expense-list');

const saved = JSON.parse(localStorage.getItem('expenses') ?? '[]');
saved.forEach(renderExpense);

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const expense = {
    title: data.get('title'),
    amount: Number(data.get('amount')),
  };
  saved.push(expense);
  localStorage.setItem('expenses', JSON.stringify(saved));
  renderExpense(expense);
  form.reset();
});

function renderExpense(expense) {
  const item = document.createElement('li');
  item.textContent = `${expense.title} – ${expense.amount} грн`;
  list.append(item);
}

Мета етапу: події, робота з даними, перші edge cases (порожнє поле, від'ємна сума – що з ними робити?).

Етап 3 – той самий продукт на React

Коли ручна робота з DOM почала муляти (оновити суму тут, перемалювати список там), ти готовий зрозуміти, НАВІЩО React:

import { useState } from 'react';

type Expense = { id: number; title: string; amount: number };

export function ExpenseTracker() {
  const [expenses, setExpenses] = useState<Expense[]>([]);
  const total = expenses.reduce((sum, item) => sum + item.amount, 0);

  function addExpense(title: string, amount: number) {
    setExpenses((previous) => [
      ...previous,
      { id: Date.now(), title, amount },
    ]);
  }

  return (
    <main>
      <h1>Мої витрати: {total} грн</h1>
      <ExpenseForm onAdd={addExpense} />
      <ul>
        {expenses.map((expense) => (
          <li key={expense.id}>
            {expense.title} – {expense.amount} грн
          </li>
        ))}
      </ul>
    </main>
  );
}

Зверни увагу: підсумкова сума total тепер рахується сама з даних – у DOM-версії тобі довелося б оновлювати її вручну. Це і є головна ідея React: описуєш, ЯК інтерфейс залежить від даних, а не КОЛИ що перемалювати.

Головні помилки переходу до React

  • React до JavaScript. Хуки поверх нерозуміння замикань і асинхронності – це заучування заклинань. Спершу база.
  • Пропуск етапу «без фреймворка». Хто не мучився з ручним DOM, той не розуміє, яку проблему React вирішує, – і на співбесіді це чутно одразу.
  • Копіювання туторіалів без змін. Змінюй задачу під себе: інші поля, інша логіка, свої edge cases.
  • useEffect на все підряд. Найпоширеніший маркер поспішного переходу; докладніше – у розборі типових питань React-співбесіди.

Що перевіряють у Junior Frontend

Коротко: впевнений JS без фреймворка, розуміння свого ж коду, вміння зверстати адаптивну сторінку, базовий Git, здатність міркувати вголос. Повна матриця тем – в окремій статті що повинен знати Junior Frontend.

План на 8 навчальних спринтів

По два тижні на спринт, без прив'язки «скільки місяців до роботи» – темп у всіх різний:

  1. HTML + CSS: статична адаптивна сторінка.
  2. CSS поглиблено: flexbox, grid, макет із двох колонок.
  3. JS-основи: типи, функції, масиви, об'єкти.
  4. DOM і події: інтерактивний мініпроєкт (етап 2 вище).
  5. Асинхронність і HTTP: запити до відкритого API, стани завантаження й помилки.
  6. React: компоненти, props, state (етап 3 вище).
  7. React у ширину: списки, форми, робота з API.
  8. Портфоліо: доведення двох проєктів до стану «можу показати» – як саме, дивись у статті про портфоліо Junior-розробника.

Наприкінці кожного спринта – працюючий результат у GitHub. Не «пройшов курс», а «зробив річ».

Практичне завдання

Почни трекер витрат сьогодні: етап 1 за цим текстом, дедлайн – тиждень. Далі не перескакуй: кожен етап має завершитися робочою версією, яку ти можеш пояснити. Один продукт, три технологічні шари – і в тебе з'явиться не лише навичка, а й історія для першої співбесіди.