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

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

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

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

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

Живые вебинары

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

Записи вебинаров

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

Практика

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

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

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

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

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

Что даёт курс

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

Младший верстальщик
30 000 
Уровень знаний младшего верстальщика
Фронтенд-разработчик
80 000 
Уровень знаний фронтенд-разработчика

Наставники

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

Студент на интенсиве HTML Academy
Привет, посмотри, пожалуйста, макет. Никак не могу понять почему блоки не выравниваются по высоте.
Наставник на интенсиве HTML Academy
Конечно, отправляй — сейчас гляну.
Наставник на интенсиве HTML Academy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Во время курса вы будете работать как настоящие верстальщики: создадите разметку, поработаете с графическим макетом в фотошопе, построите сетки страниц, оформите декоративные элементы и текстовое содержание, оптимизируете код и подготовите завершённый проект к публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник.
РазметкаФотошоп для верстальщикаСеткиДекоративные элементыОформление контента
Создание разметки страницы
Фотошоп для верстальщика
Создание сетки страницы
Оформление декоративных элементов
Оформление текстового содержания
12345

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

После прохождения интенсива вы сможете верстать макеты такого же уровня сложности, как специально разработанные для интенсива учебные макеты «Техномарт», «Глейси», «Нёрдс» и «Седона».

Во время курса вы можете работать с нашими или своими макетами.

Учебный макет «Техномарт»
Учебный макет «Глейси»
Учебный макет «Седона»

Теория

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

Практика

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

Программа

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

Вводная лекция про роль и место верстальщика в мире веб-технологий.

1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?

  • IP-адрес, сервер и веб-сервер, «виртуалхосты».
  • Доменные имена, URL-aдреса и система DNS.
  • Загрузка и «сборка» веб-страницы, TCP/IP, HTTP.
  • Приёмы оптимизации веб-страниц.

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

  • Системы контроля версий. Git и GitHub.
  • Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
  • Немного о браузерах, браузерных движках и различиях между ними.
КурсыКурсыСтатьиСтатьи
  • 5 практических курсов для знакомства с базовым синтаксисом HTML и CSS.
  • Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы веб-браузеров и начать работать с системами контроля версий.
ПроектыПроекты
  • Выбираем наставника.
  • Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
  • Отрабатываем процесс выполнения заданий. Вносим изменения в проект и отправляем их в GitHub.

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

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

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

1. Введение в HTML и CSS.

  • Синтаксис HTML.
  • Структура простейшего HTML-документа.
  • Синтаксис CSS. Базовые CSS-селекторы.
  • Наследование, каскадность и приоритеты в CSS.

2. Качественная разметка и стили кодирования.

  • Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
  • Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
  • Модульность разметки или использование «пространств имён».
  • Когда использовать <article>, <section> и <div>?
  • Зачем нужен стиль кодирования? Обзор популярных стайлгайдов.

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

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

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

КурсыКурсыСтатьиСтатьи
  • 4 практических курса для закрепления CSS-селекторов, каскадирования и наследования, тегов для создания таблиц и форм.
  • Статьи и стайлгайды, которые помогут вам делать качественную разметку.
ПроектыЗадания
  • Задания на тренировку разметки: «для выделенного элемента выберите тег или класс из списка».
  • Задания на разметку страниц учебного и личного проектов.

На выполнение заданий потребуется около восьми часов.

Вторая неделя
Фотошоп для верстальщика
Практический вебинар
Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Николай Громов, опыт веб-разработки 14 лет

Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

1. Типовые задачи верстальщика в фотошопе.

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

2. Обзор форматов графики в вебе.

  • PNG, JPEG, SVG, GIF.
  • Как выбрать подходящий формат?

3. Разбор графических макетов проектов.

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

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

На выполнение заданий потребуется около четырёх часов.

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

Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

1. Поток документа и блочная модель документа.

  • Понятие сетки и потока документа.
  • Блочные и строчные элементы и их особенности.
  • Свойства блочной модели: размеры, рамки и отступы.
  • Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

2. Как управлять потоком и строить сетки?

  • Свойство display. Управление типом элементов.
  • Свойство float и его особенности.
  • Построение сеток на «плавающих» элементах.
  • Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
  • Построение сеток на блочно-строчных элементах.

3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.

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

Интерактивная демонстрация «Строим сетку учебного проекта». Поэкспериментируйте с сеткой самостоятельно.

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

Задания на создание сеток учебного и личного проектов.

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

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

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

1. Позиционирование.

  • Относительное позиционирование.
  • Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
  • Фиксированное позиционирование.
  • Управление порядком слоёв.

2. Другие важные приёмы.

  • Псевдоэлементы.
  • Спрайты.
  • normalize.css.
  • Подключение нестандартных шрифтов.

3. Завершаем вёрстку главной страницы учебного проекта.

ДемонстрацииИнтерактивная демонстрацияСкринкастыСкринкасты
  • Интерактивная демонстрация «Вёрстка главной страницы учебного проекта».
  • Скринкасты про использование спрайтов и иконочных шрифтов.
КурсыКурсыСтатьиСтатьи
  • 4 практических курса для закрепления навыков вёрстки декоративных элементов и создания типовых элементов веб-страниц.
  • Статьи о подключение нестандартных шрифтов.
ПроектыЗадания

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

На выполнение заданий потребуется около шести часов.

Оформление контента
Практический вебинар
Практический вебинар
Понедельник с 19:00 до 21:00
Ведущий: Александр Першин

Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

1. Практикуемся в вёрстке элементов содержимого.

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

2. Разбираем типовые случаи переполнения и способы борьбы с ними.

3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

ДемонстрацииИнтерактивная демонстрацияСкринкастыИнтерактивные демонстрации
  • Интерактивная демонстрация «Вёрстка текстовой страницы учебного проекта».
  • Интерактивная демонстрация «Вёрстка всплывающих окон учебного проекта».
  • Интерактивная демонстрация «Примеры переполнения».
  • Демонстрации и скринкасты вёрстки сложных элементов личных проектов.
КурсыКурсыСтатьиСтатьи
  • Практический курс о продвинутых возможностях оформления текстового содержимого.
  • Статьи о тонкостях оформления текстового содержимого и элементов форм.
ПроектыЗадания

Задания на завершение вёрстки учебного и личного проектов. Подготовка проектов к защите.

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

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

Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

1. Язык программирования JavaScript.

  • Роль программирования в жизни верстальщика.
  • Что такое DOM и зачем нам объект document.
  • Зачем нужен объект window.

2. Типовые случаи использования JavaScript.

  • Как найти любой элемент на странице.
  • Как реагировать на события, происходящие на странице.
  • Как менять CSS-стили у элементов.
  • Как использовать анимацию на странице.

3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

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

Интерактивная демонстрация «Добавляем JavaScript на главную страницу учебного проекта».

КурсыКурсыСтатьиСтатьи
  • Курсы по анимации и плавным переходам.
  • Статьи об опыте взаимодействия и принципам анимации в вебе.
ПроектыЗадания

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

На выполнение заданий потребуется около четырёх часов.

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

Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

1. Знакомство с прогрессивным улучшением и постепенной деградацией.

  • «Житейские» примеры двух подходов.
  • Этапы прогрессивного улучшения.
  • Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
  • Как добавлять улучшения независимыми и цельными слоями.
  • Прогрессивное улучшение и прокси-браузеры — друзья навсегда.

2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

3. Немного о минификации стилей и скриптов.

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

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

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

Статьи и видеозаписи докладов о прогрессивном улучшении.

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

Необязательные задания по переделке вёрстки в соответствии с прогрессивным улучшением и оптимизации кода проектов.

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

Сертификат

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

Сертификат курса «Базовый HTML и CSS»

HTML Academy

4года на рынке обучения
13интенсивов проведено
1 966студентов закончили курсы

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

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

12 500
До 29 августа
13 500
После 29 августа
14 500
После 16 сентября

Оплатить курс можно банковскими картами, электронными деньгами, через интернет-банкинг и наличными через терминал. Возможна оплата по безналичному расчёту. Нажмите «Записаться и оплатить курс», чтобы узнать больше.

Логотип VisaЛоготип Mastercard