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

20 сентября — 21 ноября 2021

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

Запишитесь на консультацию

Оставьте свои контакты, мы свяжемся с вами и ответим на все вопросы.

*Обязательное поле
Записаться на консультацию

Почему курс профессиональный

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

Чтобы добиться такого качества обучения, мы используем профессиональную триаду «критерии-проекты-наставники»:

НаставникиПроверкой ваших проектов на соответствие критериям качества занимаются наставники, которые являются профессиональными разработчиками.

Критерии качестваПрофессиональные критерии качества мы разрабатываем совместно с компаниями и профессиональным сообществом.

Настоящие проектыВ течение обучения вы выполняете настоящие проекты.

Настоящие проекты

В течение обучения вы выполняете настоящие проекты.

В чём отличие от тренажёров?

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

Как проходит
обучение на курсе

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

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

Учим делать правильно

Ориентировочная зарплата выпускника

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

* Информация о медианных зарплатах получена на основе исследования компании «Хабр Карьера» в первом полугодии 2021 года.

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

До старта курса — 3 дня. Осталось 5 мест, торопитесь!

Наставники — это опытные профессионалы, работающие в индустрии

Профессиональный наставник

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

Чтобы отбирать таких специалистов, мы построили уникальную систему привлечения и фильтрации.

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

Процесс отбора наставника

  1. Формальные требования

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

  2. Собеседование

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

  3. Регулярная обратная связь

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

Процесс работы с наставником

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

Привет. У меня последний блок с товарами почему-то выравнивается неправильно, всё перепробовала. Взглянешь?
Давай сегодня созвонимся и разберёмся вместе?
Голосовая консультация с наставником

Детальная обратная связь

Ревью кода — это привычная практика, используемая в крупных компаниях, когда более опытный разработчик проверяет код менее опытного. Львиную долю обратной связи вы получите от наставника в виде ревью кода. Он прочитает каждую строчку, оставит комментарии и поможет сделать ваше решение правильным.

Голосовые консультации

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

Что входит в программу курса

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

Учебные проекты

Во время курса вы будете работать над учебными проектами «Седоной» и «Девайсом», а на комфортном тарифе к ним добавится более сложный проект «Глейси».

В течение курса вы успеете разработать и защитить один проект, а на комфортном тарифе можете защитить два проекта.

Учебный проект «Глейси»
Учебный проект «Девайс»
Учебный проект «Седона»

Отзывы компаний

Мы давно зарекомендовали себя в профессиональном сообществе. Нас и наших выпускников знают не только разработчики, но и крупные компании. Вот несколько отзывов от компаний о наших курсах и выпускниках.

В Авито нет верстальщиков, только фронтенд-разработчики разных уровней. Чтобы попасть к нам на работу младшим разработчиком, человек должен обладать определёнными навыками. Это уверенное владение базовыми технологиями: HTML, CSS и JavaScript, понимание того, как работает браузер, знание, как делать проекты кроссбраузерными, как работает API, DOM и другие важные основы. Кроме этого мы ценим ответственность, умение играть в команде, желание развиваться и инициативность.

Мне, как наставнику на курсах и бывшей студентке, известны стандарты качества Академии и то, как строится работа. Всё максимально приближено к реальным условиям — используется система контроля версий Git, есть разбивка проекта на этапы (своеобразные итерации), обязательное ревью кода наставниками и неумолимый дедлайн. Большое внимание уделяется доступности интерфейсов, а это полезно для всей отрасли.

В целом программа обучения в Академии построена грамотно для старта. Она помогает подготовить универсального бойца, который сможет качественно заниматься разработкой и в студии, и в крупной продуктовой компании. Если человек защитился на 100%, то это показатель, что у него всё в порядке с обучаемостью, мотивированностью и личными качествами, которые понадобятся в будущем на работе. А дальше уже всё зависит от активности и способности доказать свои умения делом.

Яна Крикливая разработчик клиентской части, Авито

Авито

Авито Интернет-сервис для размещения объявлений о товарах, услугах, вакансиях и резюме на рынке труда.

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

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

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

Сейчас в команде работает выпускник Академии Павел и я им доволен. Необходимые базовые навыки, понимание семантики, работа с чистым CSS — всё это на хорошем уровне, а что касается JavaScript — он быстро ориентируется, если делал что-то похожее — вспоминает. Он был сразу готов взять и начать работать.

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

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

Сергей Чикирев Wrike Website Team Lead

Wrike

Wrike Популярный сервис для управления проектами и совместной работы.

Мы в Ostrovok.ru постоянно ищем талантливых ребят: наш продукт быстро развивается и лишние фронтендерские руки (желательно «золотые») нужны всегда. Хорошего специалиста найти не так просто, поэтому мы уже несколько раз обращались к Академии, когда подбирали джуниоров.

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

Спасибо Академии за хорошо подготовленных специалистов.

Ostrovok.ru

Ostrovok.ru Интернет-сервис по бронированию более 900 000 отелей.

Мы регулярно отправляем своих сотрудников на тренинги, семинары, интенсивы и всячески открыты к образовательным программам, так мы и познакомились с HTML Academy.

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

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

Валерия Шемякина Менеджер по обучению Ozon.

Ozon

Ozon Крупнейший российский интернет-магазин.

HTML Академия — лучшее, что происходило с ИТ-образованием в России.

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

Они много работали с сообществом, чтобы понять какие именно знания нужны на работе. Круто насколько всё приближено к реальной разработке.

Андрей Ситник

Андрей Ситник Автор множества проектов с открытым исходным кодом. Создатель PostCSS, Autoprefixer и Logux_io.

К нам на вакансию фронтенд-разработчика пришёл выпускник Академии. Знания, полученные на интенсивах по JavaScript и вёрстке помогают ему решать задачи с минимальными трудозатратами.

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

ГиперМетод

ГиперМетод Ведущий разработчик решений для организации дистанционного обучения, управления знаниями и учебным процессом, развития и оценки персонала в компаниях и учебных заведениях.

Огромное спасибо HTML Academy за крутых выпускников! Три человека брали к себе на стажировку, в последующем два из них остались у нас на постоянной работе. Классные ребята с хорошим бэкграундом! Академия обучает сильных специалистов!

NORDMOUNT

NORDMOUNT Внедрение, кастомизация и интеграция Salesforce на рынках США и западной Европы.

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

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

Обучение Участие в живых лайвах, работа над проектом с личным наставником.

Раздел 1

Старт

Лайв
ЛайвПонедельник с 19:00 до 21:00

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

  • Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
  • Узнаем, кто такие авторы, кураторы и наставники курса.
  • Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
  • Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
  • Разберём процесс работы над проектом и его защиту.
СтатьиСтатьи
  • Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы браузеров, Git и GitHub.
ПроектыПроекты
  • Выбираем наставника.
  • Настраиваем инструменты разработки, создаём репозитории проектов.
  • Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.
Раздел 2

Разметка

Лайв
ЛайвЧетверг с 19:00 до 21:00

Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.

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

Интерактивные демонстрации по разметке учебного проекта.

ТренажёрыТренажёрыСтатьиСтатьи
  • Тренажёры для знакомства с HTML.
  • Статьи о том, как правильно создавать семантическую HTML-разметку.
ПроектыПроекты
  • Получаем макеты в Figma.
  • Создаём и размечаем страницы проекта.
Вторая неделя
Раздел 3

Графика и базовая стилизация

Лайв
ЛайвЧетверг с 19:00 до 21:00

Экспортируем графику из макета и выполним базовую стилизацию страниц проекта.

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

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

ТренажёрыТренажёрыСтатьиСтатьи
  • Статьи про базовые возможности и эффективную работу в Figma и про особенности графических форматов.
  • Тренажёры для знакомства с базовым синтаксисом CSS, возможностями по стилизации текста и управлению фоном.
ПроектыПроекты
  • Экспортируем растровую и векторную графику из Figma.
  • Подключаем контентную графику в разметку.
  • Выполняем базовую стилизацию: текстовые параметры, фоны крупных блоков, текстуры.
Третья неделя
Раздел 4

Сетки страниц на флексах

Лайв
ЛайвЧетверг с 19:00 до 21:00

Построим крупные сетки страниц с помощью флексов.

  • Разберёмся в блочной модели и познакомимся с типами боксов.
  • Научимся анализировать сетки на макетах и определять крупные сетки страниц.
  • Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.
ДемонстрацииИнтерактивные демонстрации

Интерактивные демонстрации по созданию крупных сеток страниц учебного проекта.

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

Сетки компонентов на флексах

Лайв
ЛайвПонедельник с 19:00 до 21:00

Создадим мелкие сетки компонентов страниц при помощи флексов.

  • Разберём особенности мелких сеток.
  • Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
  • Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
ДемонстрацииИнтерактивные демонстрации

Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

ТренажёрыТренажёрыСтатьиСтатьи
  • Статьи, которые помогут разобраться с особенностями многострочных флексов.
  • Тренажёры для погружения в работу с флексами.
ПроектыПроекты
  • Описываем мелкие сетки компонентов страниц на флексах.
  • Сравниваем вёрстку с макетом.
Раздел 6

Сетки компонентов на гридах

Лайв
ЛайвЧетверг с 19:00 до 21:00

Создадим мелкие сетки компонентов страниц при помощи гридов.

  • Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
  • Разберём типовые ситуации, когда гриды подходят лучше флексов.
  • Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
ДемонстрацииИнтерактивные демонстрации

Интерактивные демонстрации по созданию мелких сеток компонентов страниц учебного проекта.

ТренажёрыТренажёрыСтатьиСтатьи
  • Тренажёры для знакомства с гридами.
  • Статьи, которые помогут разобраться с особенностями гридов.
ПроектыПроекты
  • Описываем мелкие сетки компонентов страниц на гридах.
  • Сравниваем вёрстку с макетом.
Пятая неделя
Раздел 7

Декоративные элементы

Лайв
ЛайвЧетверг с 19:00 до 21:00

Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.

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

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

ТренажёрыТренажёрыСтатьиСтатьи

Тренажёры для закрепления навыков создания декоративных элементов.

ПроектыПроекты
  • Добавляем мелкие декоративные и иконочные графические элементы.
  • Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
Шестая неделя

Защита проекта Подготовка проекта к итоговой защите и оценка его проверяющим наставником по критериям качества.

Раздел 8

Попапы, слайдеры, формы

Лайв
ЛайвПонедельник с 19:00 до 21:00

Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.

  • Научимся оформлять нестандартные элементы форм.
  • Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
  • Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
ДемонстрацииИнтерактивные демонстрации

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

ПроектыПроекты
  • Добавляем разметку и стилизацию всплывающих элементов и слайдеров.
  • Стилизуем формы и элементы форм.
  • Добавляем состояния интерактивных элементов.

Первая неделя защиты

Завершение работы над проектом и подготовка к итоговой защите.

Седьмая неделя
Раздел 9

Шлифовка

Лайв
ЛайвПонедельник с 19:00 до 21:00

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

  • Доработаем доступность и интерактивность интерфейса.
  • Протестируем контент на изменение количества и размеров элементов, текста и графики.
  • Проверим проект на соответствие макету и стайлгайду.
ДемонстрацииИнтерактивные демонстрации

Интерактивные демонстрации с тестированием и корректировками учебного проекта.

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

Вторая неделя защиты

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

Восьмая неделя

Третья неделя защиты

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

Девятая неделя

Четвёртая неделя защиты

Внесение финальных правок и получение итоговой оценки.

Раздел 10

Финал

Лайв
ФиналСреда с 19:00 до 20:00

Поговорим о том, как прошёл курс и куда вам двигаться дальше.

Результаты курса.

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

До старта курса — 3 дня. Осталось 5 мест, торопитесь!

Сертификат

После прохождения курса вы получите электронный сертификат

Образовательная деятельность осуществляется на основании государственной лицензии № 3026 от 6 июня 2017 года.

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

Статистика Академии

  • 9лет на рынке обучения
  • 117онлайн-курсов проведено
  • 17 888выпускников защитили проекты

Отзывы выпускников

Отчёт о 31 потоке читайте в нашем блоге.

20 сентября — 21 ноября 2021

Зарегистрироваться и оплатить
курс «HTML и CSS. Профессиональная вёрстка сайтов»

5 часов работы с личным наставником и два личных проекта на выбор.

20 сентября — 21 ноября 2021

Осталось 5 мест

$319

Нажимая «Оплатить», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями предоставления услуг».

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

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

  • У нас есть образовательная лицензия
  • Выдаём электронные сертификаты
  • Можно сделать налоговый вычет

Запишитесь на консультацию

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


*Обязательное поле