Guest
От HTML до Next JS и API. Пройдемся по стеку технологий и посмотрим как развивалась веб-разработка. 👨🏼💻 Канал в ТГ: 9XtDDNBdHAk4Yjhi Программы ВебКадеми: 📦 HTML верстальщик: 🛠️ Frontend разработчик: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 🌍 Сайт ВебКадеми: . . . ТАЙМ КОДЫ: 00:00 — Ожидание 00:26 — Старт стрима, проверка звука 02:15 — Приветствие, 1 сентября, планы нового сезона 02:50 — Тема: путь фронтенда от вёрстки до 03:00 — Почему «сайт = куча npm-пакетов» и что сегодня делаем 04:19 — План: вёрстка JS API, формат стрима 07:08 — Выбор проекта: блог vs каталог → берём каталог 10:25 — Разбор референса каталога (листинг/карточка) 11:19 — Где и как подключаем AI в процессе 11:33 — Тема стрима: от HTML до JS и API на практике 12:21 — Теория: статические страницы, зачем фреймворки 16:17 — Фронтенд vs Бэкенд: роли и взаимодействие 19:18 — Клиентский рендеринг (React): как это работает 20:15 — Серверный рендеринг и : зачем и когда 21:20 — План реализации: листинг карточка фильтры 31:04 — create-next-app: создаём проект 33:24 — npm run dev, первый запуск в браузере 36:21 — Где смотреть скрипты: / документация 37:01 — Первая правка страницы, «Hello WebCademy» 42:00 — EditorConfig шрифт Inter через next/font 45:43 — Шапка: структура (logo/nav/search/user) 53:25 — Компонент Logo и next/image 1:03:07 — Компонент Card: интерфейсы TS, пропсы 1:10:12 — Стили карточки, форматирование цены 1:17:07 — Сетка товаров (CSS Grid) 1:44:18 — Устанавливаем JSON Server, готовим 1:50:35 — Старт JSON Server на :3050, проверка эндпоинтов 1:51:04 — Тест GET запросов: категории/цвет/цена 1:52:33 — Делает компонент клиентским: перенос fetch в useEffect 2:01:10 — Структура фильтра: категории/цвет/размер/цена 2:05:10 — Чекбоксы категорий: setFilter, добавление/удаление значений 2:20:53 — Стейт products, отрисовка списка по данным API 2:25:19 — Сборка query-строки из фильтра, запросы к API 2:27:07 — Перезапуск JSON Server и проверка фильтров 2:29:22 — Фильтрация по цене: price_lte/price_gte 2:31:20 — Что доделаем в следующий раз (цвет/размер и т.д.) 2:33:59 — README: команды запуска и структура 2:34:24 — Приглашение на программы, как получить консультацию 2:35:12 — Финал
