# Як стати Frontend-розробником: маршрут від HTML до React

> Покроковий маршрут у frontend: що вчити по порядку і чому саме так, одна задача, що еволюціонує від статичної сторінки до React-застосунку, типові помилки переходу до фреймворка.

- Автор: Юра Скиба (https://cookiesoftware.io)
- Опубліковано: 2026-09-24
- Категорія: Старт в IT
- Canonical: https://cookiesoftware.io/blog/yak-staty-frontend-rozrobnykom

---

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

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

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

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

1. **HTML** – скелет сторінки. Семантичні теги, форми, таблиці. Без нормального HTML далі все хитається.
2. **CSS** – зовнішній вигляд і розкладка: flexbox, grid, адаптивність. Тут з'являється перша реальна складність.
3. **JavaScript + DOM** – поведінка: події, зміна елементів, дані. Найбільший і найважливіший блок; довідник – [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
4. **Git і GitHub** – збереження історії та публікація коду. Вчи одразу, як тільки з'явився перший проєкт ([офіційна документація Git](https://git-scm.com/doc)).
5. **HTTP і доступність** – як браузер спілкується з сервером і як зробити інтерфейс придатним для всіх. Дві теми, які відрізняють «верстальника з туторіалів» від майбутнього інженера.
6. **React** – коли вже вмієш робити інтерфейси без нього. Тоді [react.dev](https://react.dev/learn) читається як розв'язання знайомих проблем, а не як магія.
7. **TypeScript і тести** – професійна норма сучасних команд; додаються поверх упевненого JS.

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

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

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

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

```html
<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:

```js
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:

```tsx
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-співбесіди](/blog/react-interview-guide).

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

Коротко: впевнений JS без фреймворка, розуміння свого ж коду, вміння зверстати адаптивну сторінку, базовий Git, здатність міркувати вголос. Повна матриця тем – в окремій статті [що повинен знати Junior Frontend](/blog/shcho-povynen-znaty-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-розробника](/blog/junior-developer-portfolio).

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

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

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