Вы соберёте фронтенд онлайн-пиццерии с конструктором заказа и таск-менеджер с досками для командной работы. Два проекта на Vue.js 3 поверх готового API. Бэкенд уже написан, фокус целиком на фронтенде.

На курсе разбираем Composition API и реактивность, роутинг с защитой маршрутов, Pinia для управления состоянием, работу с сервером и анимации переходов. Отдельный раздел по тестированию на Vitest и Vue Test Utils.

Вопросы обсуждаем в чате, показываем типичные решения. #htmlacademy #levelup

🎁 Программа и детали

fetch() отправляет запрос — а что происходит дальше, между вашим кодом и сервером?

На курсе «Протоколы и сети: основы» разбираем весь путь: модель OSI, стек TCP/IP, разницу между HTTP/1.1, HTTP/2 и HTTP/3, работу TLS и сертификатов. Отдельный раздел — WebSockets и когда они действительно нужны.

Четыре кейса и две практические задачи: от предварительного открытия TCP-соединений до оптимизации проекта под HTTP/2. #htmlacademy #levelup

🎁 Смотреть программу

Конфиги webpack часто копируют из проекта в проект, а когда что-то ломается — гуглят каждую строку отдельно. Знакомо?

На курсе разбираемся, как устроена сборка изнутри: от entry и output до разделения кода и оптимизации под рабочее окружение. Настраиваете Babel и ESLint, подключаете обработчики и плагины, учитесь разделять окружения и уменьшать размер итоговой сборки.

После курса — сможете собирать и поддерживать конфигурации webpack самостоятельно. #htmlacademy #levelup

🔜 Подробнее

Вы когда-нибудь настраивали Content-Security-Policy для рабочего проекта? Тема, которую фронтенд-разработчики откладывают — пока в баг-трекере не появится репорт про XSS.

Курс «Протоколы и сети: веб-безопасность» — шесть разделов по конкретным группам уязвимостей. XSS, CSRF, SQL-инъекции, DoS, MitM — каждую разбираете на кейсе, пишете защиту и сверяете с эталонным решением. Отдельные практики: настройка CSP, безопасная работа с cookie, хеширование паролей с солью, корректный CORS.

На выходе — чек-листы безопасности по каждому разделу. Готовый артефакт для проекта. #htmlacademy #levelup

☝️ Смотреть программу

«Мастер анимаций: CSS и JavaScript-анимации»

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

72 примера. Движемся от переходов по ховеру до 3D-трансформаций и параллакса со скроллом. Параллельно — отладка: в DevTools ловим просадки по кадрам и оптимизируем рендеринг. Отдельно — prefers-reduced-motion для пользователей, которым движения мешают.

Порядок обучения — от простого к сложному: transition, затем @keyframes и animation, а на финише — JavaScript для интерактивных сценариев. #htmlacademy #levelup

🎁 Смотреть программу

Мастер анимаций: SVG-анимации

На курсе мы собрали три подхода в одном месте. Разберём анимацию SVG через CSS, SMIL и JavaScript, освоим библиотеки KUTE.js, Anime.js, Snap.svg и GSAP. Вы научитесь подбирать инструмент под задачу, готовить и оптимизировать SVG, понимать, когда честнее перейти на Canvas.

Внутри — 50 примеров с пошаговым разбором: кастомный курсор, морфинг форм и иконок, анимация по таймлайну, эффект закрашивания, анимация графиков и диаграмм, работа с SVG-масками, фильтрами и паттернами. Каждый можно повторить и адаптировать под свой проект. #htmlacademy #levelup

🎁 Смотреть программу

После курса вы соберёте микроанимации для состояний :hover и :focus, морфинг SVG-логотипа через анимацию атрибута d, прорисовку иллюстрации через stroke-dasharray и stroke-dashoffset, Canvas-сцены с физикой и собственными функциями плавности, шейдерные эффекты на GLSL (цветовые фильтры, маски, displacement, шум Перлина), трёхмерные сцены на Three.js с Camera Rig и шейдерной постобработкой — без сторонних анимационных библиотек.

Разберётесь в пайплайне отрисовки браузера и поймёте, почему transform и opacity не вызывают пересчёт раскладки и перерисовку, а left запускает их заново. Узнаете, как читать prefers-reduced-motion, отлаживать FPS в DevTools и применять 12 принципов анимации Disney к интерфейсам.

В WebGL увидите, что происходит между вершинным и фрагментным шейдером, как передавать данные через attributes, uniforms и varying. В Three.js научитесь изолировать движения через Group, делать сжатие и растяжение с сохранением объёма и проектировать Camera Rig под конкретную задачу.

А ещё GSAP, Snap.svg и PixiJS — чтобы наверняка. #htmlacademy #levelup

🎁 Подробнее