INTERLAB
Как делать · 03

Frontend-разработка

HTML, CSS, JavaScript, TypeScript, React, Next.js, Vue, Tailwind, формы, состояние, тесты и скорость.

Прочитано: 0 / 18HTMLCSSJavaScriptTypeScriptReactХуки ReactNext.jsTailwind CSSФормы и валидацияУправление состояниемVueТестирование frontendДоступность вебаПроизводительность вебаАрхитектура frontend

HTML

  1. Основы✓

    HTML: семантическая разметка, которую понимают браузеры, поиск и скринридеры

    Семантическая разметка — это выбор HTML-тегов по смыслу содержимого, а не по внешнему виду: шапка — header, меню — nav, основное содержимое — main, заголовки — h1–h6 без пропусков уровней, действие — button, переход — a. Из такой разметки браузер строит дерево доступности, по которому скринридер перемещается между областями и заголовками. Проверяют разметку валидатором (Nu Html Checker или html-validate) и деревом доступности в DevTools.

    Начальный · 10 мин чтения

CSS

  1. Пошаговый урок✓

    CSS-раскладка: Flexbox и Grid на реальных блоках

    Flexbox раскладывает элементы в одном направлении — в ряд или в колонку — и распределяет между ними свободное место; им удобно собирать шапку, меню и строку кнопок. Grid работает сразу с колонками и рядами, поэтому подходит для сеток карточек и макета страницы. Адаптивную сетку карточек без медиазапросов даёт одна строка: grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)).

    Начальный · 8 мин чтения · практика ~45–90 мин

JavaScript

  1. Пошаговый урок✓

    JavaScript в браузере: DOM и события

    DOM — это дерево объектов, в которое браузер превращает HTML: JavaScript находит в нём элементы через document.querySelector, меняет их текст (textContent), классы (classList) и атрибуты и создаёт новые через createElement. На действия пользователя подписываются методом addEventListener; событие всплывает от элемента к родителям, поэтому один обработчик на списке может обслуживать все его кнопки — это называется делегированием. Форму обрабатывают в событии submit: event.preventDefault() отменяет перезагрузку, new FormData(form) собирает значения полей.

    Начальный · 7 мин чтения · практика ~45–90 мин
  2. Пошаговый урок✓

    Асинхронный JavaScript: промисы, async/await и fetch

    Асинхронный код в JavaScript строится на промисах: промис — объект-обещание результата, который сейчас ожидает, а позже выполняется со значением или отклоняется с ошибкой. async/await позволяет писать с промисами как с обычным кодом и ловить ошибки через try/catch. fetch отклоняет промис только при сбое сети или отмене, поэтому статус ответа проверяют через response.ok; независимые запросы запускают одновременно через Promise.all или Promise.allSettled, а отменяют — через AbortController и AbortSignal.timeout().

    Средний · 7 мин чтения · практика ~1,5–3 ч

TypeScript

  1. Пошаговый урок✓

    TypeScript с нуля: типы, интерфейсы, дженерики

    TypeScript — это JavaScript с описанием типов: компилятор tsc проверяет программу до запуска и находит опечатки в именах полей, забытые проверки на undefined и необработанные варианты. Сами типы при запуске стираются — выполняется обычный JavaScript. Для старта достаточно установить пакет typescript, включить strict в tsconfig.json и описать данные через type и interface.

    Начальный · 9 мин чтения · практика ~45–90 мин

React

  1. Пошаговый урок✓

    React: компоненты, JSX и props

    Компонент React — это функция JavaScript с именем с заглавной буквы, которая возвращает разметку JSX. Данные в компонент передаются через props — объект с параметрами, который компонент читает, но не меняет. Списки рисуют через map с уникальным key у каждого элемента, а условный контент — обычными if, ? : и &&.

    Начальный · 7 мин чтения · практика ~45–90 мин

Хуки React

  1. Пошаговый урок✓

    React: состояние и useState

    Состояние — это память компонента между отрисовками: useState возвращает текущее значение и функцию, которая сохраняет новое и просит React перерисовать компонент. Значение внутри одной отрисовки — неизменный снимок, поэтому обновление на основе предыдущего значения пишут функцией setCount(c => c + 1). Объекты и массивы в состоянии не мутируют, а заменяют новыми, а общее для нескольких компонентов состояние поднимают в ближайшего общего родителя.

    Начальный · 7 мин чтения · практика ~45–90 мин
  2. Глубокий разбор✓

    useEffect: синхронизация с внешним миром и когда он не нужен

    useEffect синхронизирует компонент с системой вне React — таймером, подпиской, сетью, API браузера: код эффекта выполняется после того, как React обновил экран, а функция очистки отменяет его перед следующим запуском и при удалении компонента. Зависимости не выбирают: в массив попадают все props, состояние и переменные компонента, которые читает эффект, и это проверяет линтер. Если внешней системы нет — данные можно вычислить при рендере или действие вызвано кликом, — эффект не нужен.

    Средний · 8 мин чтения

Next.js

  1. Пошаговый урок✓

    Next.js App Router: страницы, макеты и маршруты

    В App Router маршрут — это папка внутри app/: файл page.tsx делает её адресом, layout.tsx задаёт общий каркас, который не перерисовывается при переходах, а папка в квадратных скобках ([slug]) создаёт динамический маршрут. Переходы делают через <Link> — Next.js заранее загружает страницу и меняет только изменившуюся часть. Файлы loading, error и not-found задают состояния загрузки, ошибки и «не найдено», а metadata и generateMetadata — title и description каждой страницы.

    Средний · 10 мин чтения · практика ~1,5–3 ч
  2. Пошаговый урок✓

    Next.js: серверные компоненты, загрузка данных и Server Actions

    В App Router компоненты по умолчанию серверные: они могут читать базу и секреты напрямую, а в браузер уходит только результат. Клиентским компонент становится директивой "use client" — она нужна для состояния, обработчиков событий и браузерных API. В Next.js 16 с Cache Components данные по умолчанию не кэшируются: их либо кэшируют через "use cache" с cacheLife и cacheTag, либо оборачивают компонент в <Suspense> и догружают потоком. Изменения делают через Server Actions — функции с "use server", которые после записи вызывают updateTag и сами проверяют ввод и права пользователя.

    Средний · 10 мин чтения · практика ~3–6 ч

Tailwind CSS

  1. Пошаговый урок✓

    Tailwind CSS: утилиты, адаптивность и тема

    Tailwind CSS — набор маленьких классов-утилит (p-6, flex, text-lg), из которых стиль собирается прямо в разметке. Сборщик просматривает файлы проекта и генерирует CSS только для классов, которые реально встречаются. В версии 4 настройка живёт в CSS: @import "tailwindcss" подключает фреймворк, @theme задаёт цвета, шрифты и брейкпоинты как переменные, а префиксы md:, hover: и dark: включают стиль только на нужной ширине экрана, в нужном состоянии или в тёмной теме.

    Начальный · 10 мин чтения · практика ~45–90 мин

Формы и валидация

  1. Руководство✓

    Формы и валидация в React

    Правила проверки удобнее всего описать одной схемой Zod и использовать её дважды: в форме через React Hook Form и zodResolver и на сервере через safeParse — проверка в браузере экономит время пользователя, а защищает данные только серверная. Ошибку показывайте после ухода из поля (mode: "onTouched"), связывайте с полем через aria-invalid и aria-describedby, а кнопку на время отправки блокируйте по isSubmitting.

    Средний · 8 мин чтения · практика ~1–2 ч

Управление состоянием

  1. Сравнение✓

    Управление состоянием: локальное, Context, Zustand и серверное

    Начинайте с useState в компоненте, которому нужно значение, и поднимайте его к общему родителю, когда значение нужно соседям. Context — способ доставить значение глубоко без пропсов, а не стор; Zustand нужен, когда клиентское состояние меняют и читают из далёких частей приложения; данные с сервера держите в кэше TanStack Query, а фильтры и страницы — в URL. Глобальный стор не должен хранить то, что уже лежит на сервере или в адресной строке.

    Средний · 6 мин чтения

Vue

  1. Пошаговый урок✓

    Vue 3 с нуля: компоненты и реактивность

    Vue 3 — JavaScript-фреймворк, в котором интерфейс описывается HTML-шаблоном, а изменения состояния автоматически попадают в DOM. Новое приложение создаётся командой npm create vue@latest, компоненты пишутся в файлах .vue с блоком <script setup>, состояние объявляется через ref, производные значения — через computed. Данные идут в дочерний компонент через props, обратно — через события emit.

    Начальный · 6 мин чтения · практика ~45–90 мин

Тестирование frontend

  1. Пошаговый урок✓

    Тестирование фронтенда: Vitest и Testing Library

    Фронтенд тестируют на двух уровнях: чистые функции — обычными unit-тестами в Vitest, компоненты — через Testing Library так, как ими пользуется человек: находят элементы по ролям и подписям, кликают и печатают через user-event и проверяют то, что видно на экране. Сеть в таких тестах подменяют — через vi.stubGlobal для fetch или через MSW на уровне сетевых запросов. Хороший тест падает, когда сломалось поведение, и молчит, когда вы просто переписали код внутри компонента.

    Средний · 8 мин чтения · практика ~1,5–3 ч

Доступность веба

  1. Руководство✓

    Доступность в коде: семантика, фокус, ARIA

    Доступный интерфейс начинается с нативных элементов: <button>, <a>, <label>, <dialog> уже умеют фокус, клавиатуру и правильные роли. ARIA нужна там, где нативного элемента нет, — например, для вкладок, — и тогда вы обязаны сами реализовать клавиатуру по шаблону WAI-ARIA APG. Проверка — автоматическая (axe в тестах Playwright) плюс ручная: axe находит только часть проблем, а клавиатурные ловушки и потерянный фокус ловят тесты клавиатуры и человек.

    Средний · 8 мин чтения · практика ~1–2 ч

Производительность веба

  1. Основы✓

    Скорость сайта и Core Web Vitals: что измерять и как ускорить

    Скорость сайта Google оценивает тремя метриками Core Web Vitals: LCP (как быстро появляется главный элемент, хорошо — до 2,5 с), INP (как быстро страница реагирует на действия, хорошо — до 200 мс) и CLS (насколько «прыгает» вёрстка, хорошо — до 0,1). Проверить свой сайт можно бесплатно в PageSpeed Insights. Чаще всего сайт тормозят тяжёлые картинки, шрифты, сторонние скрипты и отсутствие кеширования.

    Средний · 5 мин чтения

Архитектура frontend

  1. Глубокий разбор✓

    Архитектура фронтенда: структура проекта, слои и границы

    Архитектура фронтенда — это договорённость о том, где лежит код и кто кого может импортировать. Рабочая основа для растущего проекта: группировать код по фичам, внутри фичи разделять интерфейс, логику и доступ к данным, открывать фичу наружу только через публичный API (index.ts) и запрещать импорт «вверх» — из общих модулей в фичи. Эти правила стоит проверять линтером, а не держать в голове: React и Next.js структуру не навязывают, поэтому её поддерживает только команда.

    Продвинутый · 8 мин чтения

Траектории с этим направлением

JavaScript с нуля · 9 →Вёрстка: HTML и CSS · 7 →React · 8 →Next.js · 7 →React Native + Expo · 9 →← Все направления
Расскажите о задаче — мы изучим запрос и свяжемся с вами

Есть задача?
Обсудим и оценим — бесплатно.

Расскажите о продукте или проблеме. Предложим архитектуру, срок и стоимость первой версии после изучения задачи.

  • Оценка объёма и рисков до старта
  • NDA — по вашему или нашему шаблону
  • Старт работ в течение недели
Написать в WhatsApp

Не присылайте через форму пароли, ключи доступа и исходный код — безопасную передачу доступа обсудим отдельно.

Нажимая кнопку, вы соглашаетесь с обработкой персональных данных.