Vue.js 3 на практике: Vite, Composition API, Pinia и тесты

На курсе разбираем современные подходы к клиентским приложениями на Vue.js 3: script setup и реактивность, маршрутизацию с guard’ами, управление состоянием в Pinia, работу с HTTP и обработку ошибок, анимации, модульные тесты на Vitest и Vue Test Utils.

Практика — два проекта: учебный таск-менеджер и фронтенд онлайн-пиццерии поверх готового API. Формат — теория → разбор → задачи. В чате отвечаем на вопросы и показываем типичные решения. #htmlacademy #levelup

📌 Программа и детали: https://htmlacademy.ru/levelup/vue

Сети и протоколы без магии: базовые знания, которые нужны фронтендеру
➿➿➿➿➿➿➿➿➿➿➿➿
Разберётесь, как данные реально идут по сети: от модели OSI и стека TCP/IP до различий между HTTP/1.1, HTTP/2 и HTTP/3; когда уместны WebSockets; как работает TLS и проверка сертификатов. С этими знаниями вы осознанно выбираете транспорт под сценарий и понимаете, что происходит при установке защищённого соединения.

Результат — меньше накладных расходов и быстрее метрики вроде TTFB/LCP, плюс снижение рисков уязвимостей за счёт корректной настройки шифрования и аутентификации. #htmlacademy #levelup

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

Webpack без боли: от конфигурации до оптимизации
➿➿➿➿➿➿➿➿➿➿➿➿
На курсе вы разберёте Webpack на практике: базовую конфигурацию (entry/output), перенос проекта на webpack, сборку многостраничных приложений, работу с плагинами и обработчиками, asset-modules, code splitting и оптимизации под production.

Каждый модуль — прикладные задачи: настройка npm-скриптов, подключение Babel, ESLint и Prettier, конфигурация плагинов и обработчиков, разделение dev и prod с source maps, уменьшение бандла (минимизация, выделение вендоров). После курса вы сможете добавлять сборщик в проект, создавать и поддерживать конфиги на рабочих проектах, собирать MPA и оптимизировать артефакты перед деплоем. #htmlacademy #levelup

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

Протоколы и сети: веб-безопасность
➿➿➿➿➿➿➿➿➿➿➿➿
Фронтенд-инженер должен понимать, как проявляются XSS, CSRF, SQL-инъекции и другие атаки в веб-приложениях, и уметь закрывать их на клиенте в связке с сервером. В этом курсе вы разбираете реальные модели угроз и отрабатываете практики, которые снижает уязвимость фронтенд-компонентов.

На курсе научитесь проектировать CSP под свой проект, безопасно работать с cookie и защищать сессии, валидировать формы и хешировать пароли с солью, распознавать и устранять XSS/SQLi/CSRF, разбираться с DoS/Slowloris, корректно настраивать CORS и понимать сценарии MitM. Формат — «теория + кейсы + практика с эталонными решениями + тесты», по итогам — чек-листы для внедрения в рабочий процесс. #htmlacademy #levelup

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

Мастер анимаций: CSS и JavaScript-анимации
➿➿➿➿➿➿➿➿➿➿➿➿
Анимация в интерфейсе — инструмент управления вниманием и смыслом. На курсе вы научитесь настраивать CSS-переходы (transition, transition-timing-function), писать @keyframes и использовать группу свойств animation, связывать эффекты с взаимодействием (клик, скролл), собирать типовые сценарии — открытие и закрытие меню, бесконечный слайдер, табы и аккордеон — а также применять 2D/3D-трансформации и параллакс.

Практика — через задания и пошаговые демонстрации. Отдельный блок — производительность и отладка: линейные и покадровые анимации, инструменты DevTools, оптимизация и учёт пользовательских настроек через медиазапросы prefers-reduced-motion и update. На выходе — умение делать анимации, которые помогают интерфейсу и стабильно работают на разных устройствах. #htmlacademy #levelup

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

Мастер анимаций: SVG-анимации
➿➿➿➿➿➿➿➿➿➿➿➿
SVG — стандарт векторной графики в вебе. На курсе мы системно разбираем анимацию векторных изображений: CSS, SMIL и JavaScript. Практикуем GSAP, Anime.js, Snap.svg и KUTE.js. Двигаемся от transform к анимации контуров и траекторий, морфингу, маскам, фильтрам, паттернам и анимации графиков.

После курса вы умеете готовить и оптимизировать SVG, выбирать подходящую технику, собирать таймлайны, анимировать текст, иконки, главные экраны, делать обводку и закрашивание, морфить пути, анимировать диаграммы, отлаживать и ускорять анимации. Понимаете границы SVG и когда переходить к Canvas и D3.js. #htmlacademy #levelup

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

AI-ассистенты — рабочий инструмент фронтендера
➿➿➿➿➿➿➿➿➿➿➿➿
Курс про практику разработки с ИИ-агентами в реальных задачах. На сквозном проекте «интернет-магазин с корзиной» (React + Vite, MUI) вы учитесь формулировать промпты под фичи, генерировать и рефакторить код, писать тесты, документировать, подключать внешние API и привлекать ИИ к ревью кода — с разбором ограничений и командных правил.

Инструменты рассматриваем без фанатизма: сравниваем актуальных ассистентов и их сценарии применения; основная ценность — устойчивый навык «coding with AI» в продакшене. Формат — модули в самостоятельном темпе: теория → продуктовые кейсы → практика → тест. #htmlacademy #levelup

Ключевые слова, которые вы встретите: Cursor, GPT, Claude Sonnet, Gemini, GitHub Copilot.

📌 Записаться на курс

Дизайн для фронтендеров

Разработчику важно понимать принципы интерфейсного дизайна и пользовательского опыта — так вы сможете самостоятельно дорабатывать макеты: собирать адаптив, добавлять состояния и править огрехи без потери качества.

Курс учит прикладной «дизайнерской грамотности» разработчика: работе с Figma (стили, компоненты, библиотеки), сетке и вертикальному ритму (включая 8px-подход), типографике и иерархии, цвету и контрастности с учётом доступности, адаптиву без готовых макетов, безопасной UI-анимации и базовым UX-паттернам. #htmlacademy #levelup

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

📎 работать в Figma со стилями, компонентами и библиотеками;
📎 строить сетку (8px), держать выравнивание и вертикальный ритм;
📎 собирать резиновую вёрстку и адаптив без готовых макетов, продумывать крайние состояния;
📎 добавлять состояния интерактивных элементов и уместно анимировать UI.

🔵 Записаться на курс

Паттерны проектирования
➿➿➿➿➿➿➿➿➿➿➿➿
Качественная архитектура начинается не с фреймворка, а с мышления. На курсе системно разбираем фундаментальные шаблоны: порождающие (Singleton, Factory Method, Abstract Factory, Builder, Object Pool, Prototype), структурные (Adapter, Bridge, Decorator, Facade, Composite, Proxy), поведенческие (Chain of Responsibility, Command, Iterator, Mediator, Observer, State, Strategy, Visitor, Memento, Template Method) и архитектурные MV* (MVC, MVP, MVVM).

Всё подано в контексте JavaScript и фронтенд-разработки: продуктовые кейсы и практические задания показывают, как применять паттерны на практике — от адаптации «кривых» внешних данных (Adapter) и кэширования без дублирования (Decorator) до ограничения доступа (Proxy), управления состояниями интерфейса и тёмной темой (State), реакций на изменения без «костылей» (Observer) и фильтров в реальном времени (MVVM).

Это курс для будущих инженеров, которые устали от «спагетти» и хотят понимать, почему архитектура работает — а не просто «как заставить код заработать». После него вы начинаете видеть проект как систему взаимосвязей: где фабрика уместна, где декоратор экономит усилия поддержки, а где MV*-подход помогает организовать UI на годы вперёд. #htmlacademy #levelup

🌷 Записаться на курс