Интенсивный онлайн‑курс
Профессиональный HTML и CSS,
уровень 2

28 марта — 29 мая 2019

Записаться на курс
Профессиональный HTML и CSS, уровень 2

HTML Academy — стандарт в обучении фронтендеров. Наша задача — готовить полноценных и востребованных специалистов, готовых работать в веб-индустрии.

Консультация по телефону
8 800 555-86-28

Как проходит онлайн‑курс

Начальный уровень: средний

Курс предназначен для тех, кто прошёл «Профессиональный HTML и CSS, уровень 1», или для верстальщиков, желающих поднять свои навыки.

Даты интенсива

Интенсив длится пять недель, c 28 марта по 29 мая. Каждую неделю проходят две живые лекции, после которых надо выполнять практические задания и работать с наставником.
Программа интенсива

Живые лекции

Живые лекции проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Преподаватель рассказывает лекцию, а студенты задают вопросы.

Записи лекций

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

Практика

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

Рабочий процесс

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

Личный наставник

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

Защита проекта

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

Что даёт курс

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

Информация о средних зарплатах получена на основе исследования SuperJob.

Наставники

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

Студент на интенсиве HTML Academy
Какой CSS-препроцессор мне выбрать, я пока не вижу между ними разницу.
Наставник на интенсиве HTML Academy
Пока можешь выбрать любой из них, так как базовые возможности у них очень похожи.
Наставник на интенсиве HTML Academy

Наставник рассказывает о своей работе

Привет, Максим.

Я буду твоим наставником и предлагаю познакомиться и обсудить самые важные моменты нашего с тобой общего пути обучения.

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

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

Конечно, верстать свой личный проект ты будешь не в одиночку. Для начала, примеры применения теории будут показаны на лекциях на примере учебного проекта. Эта вёрстка разобрана пошагово и оформлена в виде интерактивных демонстраций, с которыми можно будет поиграть, меняя те или иные свойства, а затем применить похожие подходы в вёрстке уже в своём проекте. Ну а я проверю, насколько верно ты применяешь эти навыки, и помогу решить как сверстать самые сложные блоки на наших с тобой консультациях.

О том, как будет строиться наша с тобой работа

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

Если с чем-то будут сложности, то в любой момент можно пересмотреть лекцию или пролистать презентацию лекции. Если же всё равно останутся непонятными какие-то вопросы, то ты сможешь написать мне, отправив свой код на проверку. Проверив код, я либо напишу комментарии к нему, либо предложу созвониться, чтобы его обсудить и найти решение вместе. Заодно, конечно же, проверю не только проблемный участок, но и весь остальной код. И если найду что-то, что можно улучшить или оптимизировать, сразу расскажу о том, как это может улучшить твою вёрстку и как это скажется на поддержке твоего сайта в будущем.

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

Вообще, конечно, вёрстка — это процесс творческий, то есть единственно верного решения нет. И у тебя, наверное, может появиться вопрос: если вариант вёрстки не один и все верстают немного по-своему, то откуда я узнаю, что в итоге мой код будет хорошим? В этом нам помогут мой опыт и список критериев. Этот список нужен для того, чтобы перепроверить твою вёрстку с помощью объективных правил. Мы будем постоянно с ними сверяться и в конце курса, перед защитой, тебе уже не нужно будет ничего исправлять, так как ты сразу будешь учиться верстать правильно.

В итоге, верстая личный проект, приводя твой код к наилучшему виду и проводя консультации, мы подготовим твой личный проект к сдаче случайному наставнику. Наставник выбирается системой проверки случайным образом, и я сам не знаю, кто это будет. Этот наставник работает по тем же критериям, и его задача — перепроверить код ещё раз свежим взглядом, и если будут какие-то неточности — выписать их и отправить проект на доработку. Я, естественно, не оставлю тебя без помощи и помогу исправить все недочёты и получить самый высший балл, какой только возможно.

Теперь о времени

У тебя в общей сложности есть пять часов на консультации в течение пяти недель интенсива. Эффективнее всего проводить две получасовых консультации в неделю. Если хорошо подготовить список вопросов, то ты очень удивишься, сколько вопросов можно успеть обсудить за полчаса! То время, которое не будет использовано на одной неделе, будет перенесено на следующие и ближе к концу курса оно нам очень пригодится.

Для проведения консультаций нам нужно добавить друг друга в скайпе. Буду ждать заявку на добавление, ссылка на мой профиль есть в интерфейсе. Также нам нужно договориться о днях и времени, когда мы будем проводить консультации. Напиши, в какие дни и в какое время тебе было бы удобно созваниваться?

У меня есть несколько вопросов по поводу твоих начальных знаний и пожеланий:

  1. Какой у тебя уровень знаний на момент начала интенсива? Работаешь ли в веб-студии или может берёшь проекты на фрилансе? Завершены ли курсы по вёрстке первого уровня и JavaScript первого уровня?
  2. Удобнее ли тебе работать самостоятельно, или мне необходимо контролировать выполнение заданий, чтобы мы точно успевали всё сделать в срок?
  3. Установлены ли уже все необходимые программы, или нужна какая-то помощь в выборе и настройке?

Расскажу ещё немного о себе

Я не всегда был наставником и верстальщиком. До этого я попробовал несколько разных профессий и всё время что-то меня не устраивало: то зарплата, то невозможность делать реально полезные вещи, то коллектив. Когда я впервые столкнулся с необходимостью писать HTML-код и украшать его с помощью CSS, я сразу понял, что сочетание визуального искусства и написания кода мне очень по душе. Я видел, что могу создавать реальные вещи, которыми будут пользоваться, возможно, тысячи людей и от того, насколько хорошо я справлюсь со своей задачей, будет зависеть то, насколько удобно будет пользоваться моим сайтом.

Я долго пытался учиться этому самостоятельно, но только после того, как попал к наставнику (это было ещё до появления интенсивов HTML Academy), я смог научиться чему-то реальному и практическому. Месяц моего общения с наставником был эффективнее чем полгода самообразования. В тот момент, помню, мне было очень жалко потерянного времени.

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

Учебный процесс

Во время курса вы будете работать как профессиональные верстальщики: создадите разметку по методологии БЭМ, будете писать CSS-код на препроцессорах, сделаете адаптивную сетку, поработаете с адаптивной и ретиновой графикой и подготовите автоматизацию сборки проекта для публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник.
Создание разметки страницы по методологии БЭМ
Создание адаптивной сетки страницы
Подготовка адаптивных изображений
Автоматизация сборки проекта

Рабочий процесс

Начинаем работу
Хотим показать работу
Есть пулреквест?данет
У нас всё тип-топ?данет
Завершаем работу
Кекс
Репозиторий? Коммиты? Что здесь происходит?

Жми на иконки, чтобы увидеть подробное описание.

Учебные макеты

После прохождения интенсива вы сможете верстать макеты такого же уровня сложности, как специально разработанные для интенсива учебные макеты «Мишка», «Седона», «Пинк» и «Кэт энерджи».

Мобильная версия проекта «Мишка»Планшетная версия проекта «Мишка»Десктопная версия проекта «Мишка»
Мобильная версия проекта «Седона»Планшетная версия проекта «Седона»Десктопная версия проекта «Седона»
Мобильная версия проекта «Пинк»Планшетная версия проекта «Пинк»Десктопная версия проекта «Пинк»
Мобильная версия проекта «Кэт энерджи»Планшетная версия проекта «Кэт энерджи»Десктопная версия проекта «Кэт энерджи»

Теория

Интерактивные демонстрации
Интерактивные демонстрации
Пошаговые демонстрации вёрстки, в которых можно экспериментировать с кодом учебного проекта.
Живые лекции и скринкасты
Живые лекции и скринкасты
На онлайн-семинарах преподаватель рассказывает и показывает новый материал, а вы можете задавать вопросы. В скринкастах разбираются дополнительные вопросы.
Полезные статьи
Статьи
Полезные статьи для каждого раздела интенсива.

Практика

Курсы Академии
Курсы Академии
В интерактивных курсах вы знакомитесь с базовой теорией, а также закрепляете приёмы вёрстки, разобранные на живых лекциях.
Личный проект
Личный проект
Проект, который вы будете самостоятельно верстать на протяжении всего курса. В процессе вам будет помогать наставник.

Программа

Первая неделя

Введение

Теоретическая лекция
Теоретическая лекция
Понедельник с 19:00 до 21:00
Ведущий: Алексей Симоненко, опыт веб-разработки 18 лет

Познакомимся с рабочим процессом на интенсиве.

Как проходит курс. Организационные вопросы.

  • Обзор личных проектов.
  • Как работать с наставником.
  • Защита личного проекта и получение сертификата.

Рабочий процесс на интенсиве.

  • Зависимость заданий.
  • Настройки личных проектов.
  • Создание мастер-репозитория.
  • Структура личных проектов.
СкринкастыСкринкастыСтатьиСтатьи
  • 8 скринкастов о работе в системе контроля Гит.
  • Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.
ПроектЗадания
  • Выбираем наставника.
  • Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
  • Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.

Методологии вёрстки

Теоретическая лекция
Теоретическая лекция
Четверг с 19:00 до 21:30
Ведущий: Вадим Макеев

Приёмы создания надёжной вёрстки.

Зачем нужны методологии.

  • Порядок в коде.
  • Работа в команде.
  • Недостатки технологий.

Обзор подходов к вёрстке.

  • Классический подход.
  • Независимые блоки.
  • Атомарный подход.
  • Компоненты и модули.

Методология БЭМ.

  • Зачем всё так усложнять.
  • Как разбить интерфейс на блоки.
  • Элементы и модификаторы.
  • Ошибки и узкие места.

Разбор учебного проекта по БЭМу.

СтатьиСтатьи
  • Статьи о методологиях и стилях кодирования, которые помогут вам делать качественную разметку.
ПроектЗадания
  • Задание на тренировку разметки по методологии БЭМ: «для выделенного элемента выберите класс из списка».
  • Задание на разметку страниц личного проекта.
Вторая неделя

Препроцессоры и автоматизация

Практическая лекция
Практическая лекция
Понедельник с 19:00 до 21:00
Ведущий: Вадим Макеев

Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.

Стили на стероидах.

  • Обзор препроцессоров.
  • Фантазийный CSS.
  • Новые возможности CSS.

Основные возможности.

  • Сравнение Less и Sass.
  • Переменные и математика.
  • Вложенные селекторы.
  • Операции с цветами.

Дополнительные возможности.

  • Подключение файлов.
  • Примеси и расширения.
  • Организация кода.
  • Сборка стилей.

Настройка окружения.

  • Система сборки на Node.js.
  • Сборщик Gulp.
  • Автоматизация сборки и вотчеры.
КурсыКурсыСтатьиСтатьи
  • 2 практических курса о работе препроцессора Less.
  • Статьи о подходах к архитектуре CSS-кода, о возможностях препроцессоров и о настройках окружения для автоматизации.
ПроектЗадания
  • Забрать обновление Кекса из мастер-репозитория.
  • Начать вёрстку личного проекта с помощью препроцессора.

Адаптивные сетки

Практическая лекция
Практическая лекция
Четверг с 19:00 до 21:30
Ведущий: Александр Першин, к.т.н., опыт веб-разработки 12 лет

Узнаем как создавать адаптивные сетки с использованием флексбоксов.

Создание сеток на флексбоксах.

  • Введение во флексбокс.
  • Флекс-контейнер, флекс-элементы, флекс-оси.
  • Алгоритм расчёта размеров флекс-элементов.
  • Выравнивание и распределение флекс-элементов вдоль осей.
  • Однострочный и многострочный флекс-контейнер, управление флекс-рядами.
  • Особенности флексов при создании сеток.

Адаптивные сетки.

  • Принципы «перестройки сетки».
  • Медиавыражения, макро- и микробрейкпоинты.
  • Организация кода разных версий страницы: мобильной, планшетной и десктопной.
  • «Проблема двух вьюпортов» на мобильных.
  • Настройка вьюпорта.

Создаём адаптивные сетки БЭМ-блоков учебного проекта с помощью флексбоксов.

ДемонстрацииИнтерактивные демонстрации

3 интерактивных демонстрации адаптивных сеток. Экспериментируйте с ними самостоятельно.

КурсыКурсыСтатьиСтатьи
  • 3 практических курса для закрепления приёмов построения сеток.
  • Статьи, которые помогут вам разобраться с адаптивностью, сложностями медиавыражений, особенностями вьюпорта.
ПроектЗадание

Задание на создание адаптивных сеток для всех страниц и состояний личного проекта.

Третья неделя

Адаптивные декоративные элементы

Практическая лекция
Практическая лекция
Понедельник с 19:00 до 21:30
Ведущий: Александр Першин

Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.

Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.

Переход от фиксированных сеток к резиновым. Тонкости флексбокса.

  • Отличие «резины» от «фикса».
  • Переход от пикселей к процентам.
  • Резиновые колонки с точными размерами на флексбоксе.
  • flex-grow для создания «неточных» резиновых колонок.
  • Флекс-контейнер внутри флекс-контейнера и резиновые по высоте элементы.
  • Когда использовать резиновые сетки и насколько они дороже фиксированных.

Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.

ДемонстрацииИнтерактивные демонстрации

6 интерактивных демонстраций адаптивной вёрстки блоков на флексбоксах.

СтатьиСтатьи

Статьи о тонкостях работы флексбоксов.

ПроектЗадание

Задание на завершение адаптивной вёрстки страниц личного проекта.

Адаптивная графика

Теоретическая лекция
Теоретическая лекция
Четверг с 19:00 до 21:00
Ведущий: Александр Першин

Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.

Графика для экранов повышенной чёткости.

  • В чём разница между физическими и логическими пикселями.
  • Что такое «ретиновая» графика.
  • Приёмы ретинизации содержимого веб-страницы.

Адаптивная графика.

  • Тег на все случаи жизни — <picture>.
  • Ретинизация контентных изображений с помощью атрибута srcset.
  • Кадрирование изображений с помощью <source>.
  • Использование современных форматов графики с помощью <source>.
  • Изображения неопределённых размеров и <sizes>.

Ретинизируем и добавляем адаптивную графику в учебном проекте.

ДемонстрацииИнтерактивные демонстрации

2 интерактивные демонстрации адаптивной графики.

СтатьиСтатьи

Статьи о тонкостях адаптивной графики.

ПроектЗадания
  • Забрать обновление Кекса из мастер-репозитория.
  • Задание на ретинизацию изображений и подключение адаптивных изображений.
Четвёртая неделя

Векторная графика и оптимизация

Теоретическая лекция
Теоретическая лекция
Понедельник с 19:00 до 21:00
Ведущий: Виталий Зюзин, опыт веб-разработки 9 лет

Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.

Использование SVG.

  • Плюсы и минусы векторной графики.
  • Подключение SVG внешним ресурсом.
  • Встраивание SVG.

SVG-спрайты.

  • Зачем нужны, в каких случаях полезны.
  • Варианты реализации.

Стилизация SVG.

  • Что можно, а что нельзя.
  • Анимация.
  • Адаптивность.

Оптимизация и доступность SVG.

  • Особенности экспорта из Illustrator и Sketch.
  • Дожимаем и оптимизируем SVG.
  • Доступность.

Оптимизация растровой графики.

  • Сжатие lossless и с потерей качества.
  • Обзор формата webp и особенностей его применения.
ДемонстрацииИнтерактивные демонстрации

Интерактивная демонстрация примеров работы SVG.

КурсыКурсыСтатьиСтатьи
  • 2 практических курса о работе с SVG.
  • Статьи о тонкостях адаптивной графики, об особенностях векторной графики и почему разработчики должны выбирать правильные форматы графики.
ПроектЗадание

Задание на подключение разных версий изображений для разных состояний личного проекта.

Погружение в автоматизацию

Практическая лекция
Практическая лекция
Четверг с 19:00 до 21:00
Ведущий: Алексей Симоненко

Подготовим сборку проекта для его публикации.

Оптимизация.

  • Минификация CSS-кода.
  • Оптимизация изображений.
  • Сборка и минификация SVG-спрайта.

Как держать код для разработчика удобным, а для браузеров — быстрым.

СтатьиСтатьи
  • Статьи о погружении в автоматизацию: зачем это нужно и в чём разница между инструментами.
  • Набор необходимых инструментов для автоматизации с помощью Gulp.
ПроектЗадание

Задание на подготовку автоматизированной сборки проекта с необходимыми оптимизациями файлов личного проекта.

Пятая неделя

Производительность вёрстки

Теоретическая лекция
Теоретическая лекция
Понедельник с 19:00 до 21:00
Ведущий: Алексей Симоненко

Разберёмся с производительностью вёрстки и попробуем оптимизировать «узкие места».


  • Как подключать внешние шрифты лучше всего.
  • Отличается ли быстродействие сайта на десктопе от мобильного.
  • Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
  • Что нужно знать о перерисовке и перекомпоновке страниц.
СтатьиСтатьи
  • Статьи о производительности CSS-анимаций, оптимизации шрифтов и оптимизации SVG.
  • Статьи о производительности рендеренга вёрстки, подробнее о перерисовке и перерасчёте.

Сертификат

После курса вы получите сертификат.

Сертификат интенсива «Профессиональный HTML и CSS, уровень 2»

Об Академии

6лет на рынке обучения
67интенсивов проведено
6 984студента закончили курсы

Главная цель интенсивных курсов — готовить профессионалов для IT-индустрии.

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

28 марта — 29 мая 2019

Записаться и оплатить
Курс «HTML и CSS, уровень 2»

20 500 до 27 ноября18 500

Нажимая «Оплатить», вы подтверждаете своё согласие с условиями предоставления услуг.

Заполните, пожалуйста, ваши имя и электронную почту для регистрации.

После оплаты курса вам придёт письмо с инструкциями и ссылкой для доступа в интерфейс участника интенсива.

  • У нас есть образовательная лицензия
  • Выдаем сертификаты
  • Можно сделать налоговый вычет
  • Доступ к платным интерактивным курсам на время интенсива
  • Не уверены, какой курс выбрать? Проконсультируем по телефону: 8 800 555-86-28.