Фронтенд на автопилоте: AI / HTML Academy - агенты на практике

• Обзор популярных AI-ассистентов для кодинга (GitHub Copilot, ChatGPT, Cursor и др.) и их возможности.
• Обзор Cursor: Работа с режимами, взаимодействие с терминалом, знакомство с горячими клавишами, выбор ИИ-моделей.
• Создание нового проекта на базе шаблона: инициализируем приложение «Интернет-магазин» (Фронтенд фреймворк + Vite).
• Конфигурирование окружения: генерация типовых конфигурационных файлов (например, vite.config.js).
• Установка редактора кода Cursor и настройка AI-ассистента. Разворачивание с помощью этого ассистента начального проекта интернет-магазина. Создание базовых правил по работе AI-асситента при созаднии новой функциональности.
• Тестирование по основным возможностям AI-инструментов, принципам настройки окружения, правилам формулирования запросов.

• Техники эффективного «prompt engineering»: как сформулировать запрос к AI, чтобы получить корректный и оптимальный код.
• Реализация UI и бизнес-логики.
• Контроль качества ответов: стратегии проверки сгенерированного кода.
• Рефакторинг с подсказками: практикуем улучшение существующего кода.
• Реализация возможности добавления товаров в корзину и удаления из неё, в агентском режиме.
• Тестирование по основам генерации кода по запросу, методам проверки AI-кода, приёмам рефакторинга с помощью ассистента.

• Генерация unit-тестов средствами AI с использованием описания функциональности или контрактов функций.
• Тестирование краевых случаев: привлечение AI для придумывания нетривиальных сценариев.
• Инструменты в тестировании: обзор возможностей фреймворков (Jest, Vitest) в сочетании с AI.
• Code Review: применение ассистента для анализа готового кода на наличие проблем.
• Написание тестов с помощью AI для функциональности корзины и каталога, проверка тестов с помощью умышленных ошибок.
• Тестирование по покрытию кода тестами, типам граничных случаев, использованию AI для улучшения надежности и качества кода, основам AI-assisted code review.

• Автодокументирование кода: генерацияю описания функций и компонентов.
• Подготовка пользовательской документации.
• Подключение стороннего API.
• Обработка ответов и ошибок интеграции.
• Дополнение проекта интеграцией геокодинга адресов доставки.
• Генерация с помощью AI раздела «API» в документации проекта, описывающий новый модуль.
• Тестирование по генерации документации, шагам интеграции API, способам использования AI при изучении новых инструментов.

• AI как помощник код-ревьюера: практика использования AI-ассистента для анализа диффа (изменений) в pull request.
• Генерация сопроводительных материалов, таких как описания для коммитов или release notes.
• Планирование: возможности использования ассистента при разбиении большой задачи на подзадачи.
• Проведение ревью кода с помощью AI.
• Генерация с помощью AI сообщений для коммитов и pull request.
• Финальный тест по всему курсу.

HTML Academy - HTML и CSS. Профессиональная вёрстка сайтов

• 
  
  
  • Обзор личных проектов.
  • Техническое задание и критерии качества.
  • Структура курса.
  • Авторы, кураторы, наставники.
  • Работа с наставником.
  • Защита личного проекта.

• 
  
  
  • Из чего состоит сайт в интернете: сервер, браузер, вёрстка.
  • Кто делает сайты: дизайн, вёрстка, бэкенд.
  • Ответственность верстальщика: удобство, доступность, перфоманс.

• 
  
  
  • Редакторы и инспекторы графики: Figma, Photoshop.
  • Редакторы кода, браузеры, отладчики.
  • Система контроля версий.
  • Процесс работы над проектом.

• 
  
  
  • Анализ макета.
  • Структура проекта.

• 
  
  
  • Парные и одиночные теги.
  • Вложенность и дерево документа.
  • Типы атрибутов.

• 
  
  
  • Метаданные и подключение ресурсов.
  • Контент страницы.
  • Теги для вывода и подключения.

• 
  
  
  • Стандарты и спецификации.
  • Категории тегов.
  • Разбор правил вкладывания

• 
  
  
  • Выделение блоков из макета.
  • Уникальные и повторяющиеся блоки.
  • Создание переменных для цветов.

• 
  
  
  • Подключение стилей на страницу.

• 
  
  
  • Разделение контента и интерфейса.
  • Именование классами и по тегам.
  • Селектор, блок правил, свойство-значение.
  • Сложные и простые селекторы.
  • Почему используются классы.

• 
  
  
  • Какие свойства наследуются, какие нет.
  • Чем font-size отличается от background-color.
  • Каскадирование и специфичность.

• 
  
  
  • Измерение блоков в Figma.

• 
  
  
  • Использование системных шрифтов.
  • Подключение шрифтов проекта.
  • Использование и настройка Google Fonts.
  • Использование шрифтов в стилях.

• 
  
  
  • Обзор редакторов: Photoshop, Illustrator, Sketch, Figma.
  • Обзор инспекторов: Zeplin, Avocode.
  • Выбор подходящего инструмента.

• 
  
  
  • Страницы, фреймы, слои, инспектор.
  • Параметры блоков: прозрачность, фон, тени, координаты.
  • Параметры текста: семейство, начертание, размер.

• 
  
  
  • Растровая, векторная и генерируемая графика.
  • Форматы GIF, JPEG, PNG, WebP и SVG.
  • Выбор формата по детализации изображения.
  • Настройки экспорта графики из Figma.

• 
  
  
  • Установка Squoosh и SVGOMG на десктоп.
  • Оптимальные настройки Squoosh и SVGOMG.
  • Пакетная оптимизация графики.

• 
  
  
  • Структура папок для хранения графики.
  • Пути к ресурсам на примере графики.

• 
  
  
  • Направляющие, колонки, строки и отступы.
  • Сетка как основа, но не строгое правило.

• 
  
  
  • Устройство шаблонов: строки, колонки, линии, отступы.
  • Ручная и автоматическая раскладка.
  • Спецификация Box Alignment и выравнивание внутри сетки.

• 
  
  
  • Устройство, типы и переключение блочной модели.
  • Явная и автоматическая ширина, центрирование.

• 
  
  
  • Оси: основная, поперечная, направление.
  • Расположение на основной и поперечной оси.
  • Растяжение, сужение, базовый размер флексов.

• 
  
  
  • Особенности систем раскладки.
  • Ситуации, подходящие для гридов.
  • Ситуации, подходящие для флексов.
  • Совместное использование.

• 
  
  
  • Отличия контентной и оформительской графики.
  • Вставка оформительской в стили и разметку.
  • Программируемая графика, уместное использование.

• 
  
  
  • Теория близости и оптическая компенсация.
  • Типографика и характеристики текста.

• 
  
  
  • Состояния и события элементов интерфейса.
  • Переходы, анимация, плавность интерфейса.

• 
  
  
  • Колонки для текста и блоков, перетекание и запреты.
  • Обтекание блоков текстом, схлопывание и клиаринг.

• 
  
  
  • Изменение числа элементов в списках.
  • Вставка картинок и видео.
  • Длинные и короткие слова, многострочность и переносы.

• 
  
  
  • Сверстаем текстовую страницу проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS.
  • Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
  • Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

• 
  
  
  • Неконтрастные цвета, подложки для текста.
  • Универсальный доступ, условия и физиология.
  • Альтернативные средства: поисковики, режимы чтения, скринридеры.

• 
  
  
  • Встроенные интерактивные элементы.
  • Ориентиры и навигация в скринридерах.

• 
  
  
  • Мышь и ховер.
  • Клавиатура и фокус.
  • Клавиатура и голос.

• 
  
  
  • Кнопки-ссылки.
  • Радиокнопки, чекбоксы, селект.

• 
  
  
  • Заголовки областей контента.
  • Подписи к контентным элементам: картинки, видео, фреймы.
  • Доступная инлайновая вставка SVG.
  • Формы и подписи к полям.
  • Добавление подписей в сложных случаях: заголовки, иконки.

• 
  
  
  • Дерево доступности в браузерных отладчиках.
  • Расширения для проверки доступности: aXe, Siteimprove.
  • Демонстрация скринридера.

• 
  
  
  • JavaScript-движки в браузерах и не только.
  • Отличия DOM и HTML-дерева.
  • Работа с DOM: поиск элементов и сохранение в переменных.
  • Создание функций, вызов и передача параметров.

• 
  
  
  • Обзор требований технического задания учебного проекта.
  • Подключение JavaScript-файлов на страницу.
  • Настройка компонентов.

• 
  
  
  • Статистика по студентам и проектам.
  • Сложности в процессе.

• 
  
  
  • Что вы узнали в процессе.
  • Что вы уже можете делать.
  • Место на профессиональном пути.

• 
  
  
  • Варианты развития.
  • Профессии Академии.
  • Навыки и курсы.
  • Акселератор и Лига А.

HTML Academy - Онлайн-курс «Подготовка вёрстки для CMS» (2022)

Пройдя курс, вы сможете:

• Понимать, как делить интерфейс на блоки и модули
• Понимать принципы работы основных систем управления контентом
• Проверять и готовить интерфейс под изменение контента
• Работать с графикой, текстами и формами

Типовые задачи, которые вы научитесь решать после курса «Подготовка вёрстки для CMS»:

• Разбивка страниц на блоки и компоненты
• Подготовка текста под работу с WYSIWYG
• Создание форм, которые будут генерироваться на лету
• Правильная организация CSS- и jаvascript-кода
• Подготовка графики под работу с системами управления контента
• Подготовка вёрстки под изменение контента

HTML Academy - Онлайн-курс «Протоколы и сети: основы» (2022)

Фронтенд-разработчики работают с данными, которые путешествуют по сетям и передаются разными протоколами.
Понимать как всё это устроено необходимо, чтобы лучше решать типовые задачи.

Пройдя курс вы сможете:

• Лучше понимать разницу между протоколами и их влияние на решение задач
• Проще работать с данными, которые приходят с сервера
• Снизить риск возникновения уязвимостей в вашем коде

Программа курса

Раздел 1
Архитектура, атаки и составляющие безопасности
--- Что такое веб-сервер
--- Модель OSI
--- Архитектура TCP/IP
--- Атаки на уязвимости

Раздел 2
Защита данных
--- SSL
--- TLS
--- Аутентификация по сертификатам

Раздел 3
HTTP, HTTP/2, HTTP/3
— В чём отличие между протоколами и как их сравнивать?
— WebSockets

HTML Academy - Vue.js для опытных разработчиков

После завершения курса вы узнаете особенности и тонкости работы с фреймворком VueJS, его отличия от других фреймворков, и научитесь работать с ним, даже если раньше никогда его не использовали. Курс ориентирован на работу с актуальной сейчас 2 версией VueJS с учетом востребованности знаний при работе с 3 версией. Курс подойдет тем, кто уже умеет работать с jаvascript и ES6.

Программа курса:

Раздел 1

Основы синтаксиса и базовых возможностей Vue JS

• Особенности фреймворка VueJS. Сравнительный анализ с ReactJS и Angular 2+.
• Компонент Vue и хуки жизненного цикла.
• Настройка проекта с использованием Vue CLI.
• Файловая структура проекта.
• Структура компонета Vue (Template, Script, Style).
• Связывание данных между шаблоном, скриптами и стилями.
• Виды и использование условных операторов (v-if, v-show).
• Работа со списками. Взаимоотношение между v-for и v-if. Избежание базовых ошибок при работе со списками.
• Виды и обработка событий.

Раздел 2

Взаимодействие между компонентами Vue JS

• Виды взаимосвязей между компонентами.
• Передача параметров в дочерний компонент.
• Отправка событий в родительский компонент.
• Использование v-model между компонентами.
• Обзор работы хуков жизненного цикла при взаимодействии компонентов.

Раздел 3

Углубленное понимание Vue JS

• Директивы: виды и использование.
• Как работает реактивность компонента.
• Свойства компонента (this свойства).
• Данные и методы компонента.
• Глобальный доступ и изменение экземпляра Vue.
• Обзор Composition API.
• Работа с vue-router.
• Добавление middleware.

Раздел 4

Чистая архитектура проекта Vue

• Принципы Solid и их применение во Vue.
• Принцип единственной ответственности.
• Принцип открытости/закрытости.
• Принцип подстановки Б.Лисков.
• Принцип разделения интерфейсов.
• Принцип инверсии зависимостей.

Раздел 5

Работа с HTTP

• Подключение плагинов.
• Создание независимых модулей на примере http модуля.
• Использование fetch API.
• Использование axios.

Раздел 6

Анимации Vue JS

• Виды анимаций.
• Жизненный цикл анимаций.
• Примеры анимаций.

Раздел 7

Подключение и использование Vuex

• Для какие целей нам нужно глобальное хранилище.
• Подключение vuex к существующему проекту.
• Автоматическое подключение модулей к хранилищу.
• Структура модуля vuex.
• Изменение vuex с помощью mutations.
• Асинхронная работа с хранилищем: actions.
• Получение данных из хранилища: getters.

Раздел 8

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

• Зачем нужно тестирование?
• Тестирование компонентов с помощью Jest.
• Тестирование компонентов с помощью Mocha.
• Тестирование компонентов с помощью Karma.
• Тестирование асинхронного кода.
• Использование Vue-Router.
• Использование Vuex.

Раздел 9

Краткий обзор Nuxt JS

• Что такое Nuxt и для чего нужен рендер на стороне сервера.
• Отличие Nuxt от Vue. Структура Nuxt.
• Раутинг с Nuxt.
• Обзор fetch и asyncData.

HTML Academy - Проект на JavaScript «Бесконечная карусель товаров» (2020)

В этом проекте вы будете программировать виджет — карусель с товарами интернет-магазина. Виджет позволяет переключать картинки с товарами вперёд и назад. После последней картинки снова появляется первая.

Интерфейс состоит из блоков с изображениями и кнопками переключения «вперёд» и «назад». В эталонной реализации используются нативные браузерные API.

Тренировочный комплект включает:

• подробное техническое задание проекта;
• готовая для программирования вёрстка;
• автоматические тесты, которые проверяют правильность работы вашего проекта, а также качество кода;
• эталонная реализация на современных jаvascript, HTML и CSS;
• ссылки на полезные материалы.

Уровень сложности: лёгкий.
Материалы в разработке. Релиз в 2020 году.

HTML academy - Проект на JavaScript «Счётчик калорий» (2020)

Счётчик калорий

В этом проекте вы будете программировать одностраничное приложение, которое работает в браузере — счётчик калорий. Приложение позволяет рассчитать индивидуальную суточную норму калорий.

Интерфейс состоит из формы с полями ввода и полями для вывода результата. В эталонной реализации используются нативные браузерные API.

Тренировочный комплект включает:

• подробное техническое задание проекта;
• готовая для программирования вёрстка;
• автоматические тесты, которые проверяют правильность работы вашего проекта, а также качество кода;
• эталонная реализация на современных jаvascript, HTML и CSS;
• ссылки на полезные материалы.

Уровень сложности: лёгкий.

HTML Academy - Работа с DOM в JavaScript (2021)

Профессиональная задача:
Умение создавать, удалять, перемещать, управлять элементами HTML-страницы и отображать данные в шаблонах с помощью jаvascript.

Зачем нужен этот навык:
DOM (Document Object Model — «объектная модель документа») — это инструмент, с помощью которого jаvascript видит и может менять содержимое, структуру и оформление HTML-страницы. Все базовые манипуляции с веб-страницей из скриптов требуют знание этого программного интерфейса. Освоив навык, вы будете умело использовать нативные возможности JS-платформы для работы с DOM и будете знать её ограничения.

Состав навыка

• Углублённая теория.
• 9 кейсов разного уровня сложности.
• Эталонные решения кейсов, детальные разборы демонстрационных кейсов.

HTML Academy - Онлайн‑курс Анимация для фронтендеров

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.

Анимация для фронтендеров — новый курс HTML Academy. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере.

HTML Academy - JavaScript. Профессиональная разработка веб-интерфейсов. Уровень 1 [Обновлённый поток, ES6]

Почему курс профессиональный
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»

Что вас ждёт на обучении

• Живые лекции
  Лекции проходят по вторникам и пятницам с 19:00 до 21:00 по московскому времени. Запись лекции доступна на следующий день.
• Практика
  После лекции вы выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал.
• Ревью кода
  После каждого задания ваш личный наставник проверяет качество работы, делится опытом и рассказывает, как можно сделать лучше.

Подходит ли вам этот курс

• Курс рассчитан на новичков. Для его прохождения достаточно завершить тренажеры по основам HTML, CSS и jаvascript.
• Объём заданий подобран так, чтобы даже занятые и работающие люди успевали выполнять их в срок, работая в комфортном режиме.
• Чтобы успешно пройти курс вам понадобится 15−20 часов в неделю или 2,5−3 часа в день. Занимайтесь равномерно в течение недели или погружайтесь в учёбу на выходных.
• Сроки итоговой защиты позволяют детально проработать обратную связь от проверяющего наставника и получить отлично выполненный личный проект.

Программа курса
Первая неделя
ОБУЧЕНИЕ
Участие в лайвах, работа над проектом с личным наставником.

Раздел 1
Знакомство c jаvascript
Рассмотрим схему работы на интенсиве, какие инструменты понадобятся. Разберём, что представляет собой язык jаvascript, причём здесь спецификация ECMAScript и браузер. Начнём разбирать основы jаvascript.
Как проходит курс. Организационные вопросы.

• Схема работы на курсе.
• Обзор проектов.

Язык jаvascript

• Спецификация ECMAScript.
• Что даёт jаvascript'у браузер.
• Строгий режим 'use strict'.
• Необязательные точки с запятой.

Основы jаvascript.

• Базовый синтаксис: круглые и фигурные скобки, операторы, зарезервированные слова.
• Переменные.
• Функции.
• Типы данных: примитивы.
• Приведение типов.

Практика

• Создание репозитория, форк, клонирование.
• Создание ветки, коммита, синхронизация репозиториев.
• Создание пулреквеста в Гитхабе.
• Тренажёры.

Раздел 2
Основные возможности jаvascript
Продолжим изучать основные конструкции jаvascript, особенно пристально — функции. Разберём нюансы объявления переменных. Немного затронем контекст выполнения this. Познакомимся с инструментами разработчика.
Вторая неделя

Раздел 3
Структуры данных и встроенные API
Познакомимся со сложными типами данных: массивами и объектами. Научимся создавать их и управлять ими. Затронем тему структур данных, и как их использование может облегчить разработчику жизнь. Рассмотрим встроенные в jаvascript объекты. Запустим и отладим код в консоли инструментов разработчика.

Раздел 4
Организация кода
Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, и при этом делать больше. Узнаем, что такое модули, как делить на них код и зачем.
Третья неделя

Раздел 5
DOM и события
Попробуем создавать, удалять, перемещать и управлять DOM-элементами. С помощью шаблонов отрисуем данные, созданные ранее. Рассмотрим динамическое взаимодействие с пользователем: как сделать так, чтобы страница начала реагировать на ввод текста в формы, нажатие на определённые элементы, прокрутки и прочее.

Раздел 6
Внешние API и сторонние библиотеки
Четвёртая неделя

Раздел 7
Асинхронность. Работа с сетью
Разберём понятие асинхронности и способы её достижения: колбэки и setTimeout, Promise. Взглянем на протокол HTTP и инструменты, которые позволяют делать запросы из браузера. Рассмотрим, как меняется взаимодействие пользователя с сайтом при начале работы с сетью, что может пойти не так, и что с этим делать.
Пятая неделя

Раздел 8
Обратная связь и оптимизация
Оптимизируем работу с данными и событиями в приложении. Реализуем понятную и приятную пользователю обратную связь интерфейса.

Раздел 9
Сборщики jаvascript
Познакомимся с такими программами, как сборщики, и узнаем, как они могут облегчить жизнь фронтенд-разработчику.

Шестая неделя
ЗАЩИТА ПРОЕКТАПодготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.
Первая неделя защиты
Начало подготовки к итоговой защите.

Седьмая неделя
Вторая неделя защиты
Первая оценка проекта проверяющим наставником по критериям качества.

Восьмая неделя
Третья неделя защиты
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.

Девятая неделя
Четвёртая неделя защиты
Внесение финальных правок и получение итоговой оценки.