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

Всё необходимое для профессиональной вёрстки и работы frontend-developer. Ты освоишь БЭМ, препроцессоры, SVG, сборку стилей с gulp и webpack, вёрстку по PerfectPixel и правильную организацию кода. Будешь активно использовать Git и github.
Вводный урок — бесплатно!
64
ак. часа
до 10
человек в группе
16
занятий
24 февраля
старт группы
Оставь заявку на бесплатный вводный урок!

Ключевые темы курса

  • Методология БЭМ.
  • Применение препроцессора SCSS на практике.
  • Работа с Git и GitHub.
  • Вёрстка с помощью Flexbox и Grid.
  • Профессиональные инструменты верстальщика.
  • Автоматизация и сборка проекта c помощью Gulp.
  • Flexbox для адаптивного дизайна.
  • Типографика.
  • Современные приёмы адаптивной верстки.
  • Обеспечение кроссбраузерности.
  • Подводные камни в вёрстке сайтов.
  • SVG изображения.
  • CSS фреймворк Bootstrap.
  • Вёрстка email шаблонов.
  • Разработка и использование модульных сеток.

Что даст прохождение курса?

Также ты научишься работать по методологии БЭМ и узнаешь тонкости профессиональной вёрстки, в том числе для email-рассылок. Особое внимание уделено работе с Git и GitHub.

После прохождения курса сможешь:

  • Использовать в работе препроцессор SCSS.
  • Настроить сборку стилей с помощью gulp.
  • Работать по методологии БЭМ.
  • Верстать шаблоны для email-рассылок.
  • Использовать SVG, в том числе с анимацией.
  • Профессионально работать с фреймворком Bootstrap 4.
  • Познакомишься с фреймворком Foundation for Emails 2.

Ты освоишь:

  • Работу с системой контроля версий Git и хостингом репозиториев GitHub.
  • Приёмы адаптивного дизайна и типографики (em, rem и др.).
  • Flexbox и CSS grid.
  • Кроссбраузерное тестирование.
  • Вёрстку с PerfectPixel.
Сертификат
По итогам ты получишь яркий сертификат!
Маленькие группы
В одной группе не больше 10-ти человек (чаще 7-8), преподаватель уделяет внимание каждому!
Спокойный темп занятий
Материал выдаётся дозировано, программа курса позволяет заниматься в комфортном режиме.
Повторное прохождение бесплатно
Не поняли сложную тему или пропустили урок? Не беда, пройдите бесплатно с другой группой!
Отработка материала
На занятиях очень много практики, в том числе самостоятельных работ.
Дополнительные материалы
После каждого занятия вы получите комплект дополнительных материалов для изучения.
Поддержка вне занятий
В онлайн-чате вы всегда можете задать вопрос и получить поддержку даже вне стен учебного центра.

Кому подойдёт этот курс

Кому этот курс не подходит

Этот курс не подходит:

  • Новичкам в веб-разработке.
  • Специалистам, которые уже используют в работе препроцессоры, SVG и умеют работать по методологии БЭМ.
  • Веб-разработчикам, которые плохо знают HTML и CSS и не умеют верстать макеты по PSD-шаблонам (в таком случае обрати внимание на наш курс по вёрстке для начинающих).
Возможно заинтересует курс по JavaScript и jQuery для начинающих или курс по Adobe Photoshop.

Подробная программа курса

Для каждого урока есть список теоретических тем и практических упражнений, а также итоги занятия.
Модуль 1

Git для верстальщика

Занятие 1. Подводные камни

Разбираемся с проблемами контекста наложения, позиционирования и специфичности селекторов

Теория:

  • Проблемы различных видов позиционирования
  • Правила расчета баллов специфичности
  • Правила использования селекторов
  • Использование ключевого слова !important
  • Контекст наложения и проблемы свойства z-index
  • Визуальные слои элементов с opacity и transform

Практика:

  • Исправление ошибок и проблемных мест в готовом макете
  • Разбор на практике принципов поиска ошибок

По итогам занятия:

  • Научитесь правильно использовать различные виды позиционирования
  • Узнаете о проблемах с контекстом наложения и научитесь их решать
  • Научитесь правильно использовать селекторы

Занятие 2. Git и GitHub, вёрстка форм

Осваиваем работу с системой контроля версий Git на примерах с вёрсткой форм

Теория:

  • Роль систем контроля версий в современной разработке
  • Основы работы с репозиторием
  • Базовые операции Git: Commit, Push, pull
  • Вопросы вёрстки различных элементов формы
  • Правильная организация стилей для формы
  • Приёмы вёрстки сложных форм
  • Проблема совместного использования textarea и fieldset

Практика:

  • Установка и настройка Git
  • Создание Git репозитория и публикация проекта на гитхабе
  • Вёрстка формы заявки на обучение
  • Решение задачи разработки универсальных стилей элементов различных типов в виде кнопок
  • Кастомизация checkbox и radio

По итогам занятия:

  • Изучите основы VCS Git
  • Научитесь правильно «коммитить» изменения и публиковать их на гитхабе
  • Разберётесь с вопросами вёрстки сложных форм
  • Научитесь стилизовать «радио-кнопки» и «галочки»
Модуль 2

БЭМ и препроцессоры

Занятие 3. БЭМ

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

Теория:

  • Вёрстка независимыми блоками
  • Основы методологии БЭМ
  • Блок, Элемент, Модификатор
  • Работа с внешней геометрией и позиционированием

Практика:

  • Вёрстка формы по методологии БЭМ
  • Вёрстка простого макета по БЭМ
  • Самостоятельная работа

По итогам занятия:

  • Познакомитесь с методологией БЭМ
  • Научитесь именовать классы по БЭМ
  • Освоите написание стилей для вёрстки независимых блоков

Занятие 4. Препроцессор SCSS и Gulp

Учимся использовать препроцессор и настраивать сборку стилей

Теория:

  • Базовые возможности SCSS: переменные, миксины, вложенные селекторы
  • Цветовые функции, работа с файлами
  • Структура стилей
  • Инструменты для сборки CSS
  • Минификация стилевых файлов
  • Autoprefixer

Практика:

  • Вёрстка учебного макета с применением препроцессора SCSS
  • Применение менеджера задач gulp для сборки стилей
  • Настройка автоматической перекомпиляции стилей
  • Самостоятельная работа

По итогам занятия:

  • Научитесь пользоваться основными возможностями препроцессора
  • Сможете использовать переменные, миксины и вложенные селекторы
  • Научитесь настраивать gulp для сборки проекта

Занятие 5. Адаптивный дизайн и отзывчивая типографика

Упрощаем вёрстку отзывчивых макетов

Теория:

  • Приёмы адаптации контента к разным экранам
  • mobile first vs desktop-first
  • Относительные единицы измерения: em, rem
  • Магия font-size 62.5%
  • Построение стилей для типографики
  • Правила применения относительных величин

Практика:

  • Вёрстка сетки товаров с относительными величинами
  • Вёрстка отзывчивых видео в iframe
  • Самостоятельная работа

По итогам занятия:

  • Освоите работу с относительными единицами измерения
  • Научитесь использовать на практике rem, em
  • Познакомитесь с несколькими полезными приёмами адаптивной вёрстки

Занятие 6. Flexbox и CSS Grid

Изучаем особенности flexbox и знакомимся с Grid

Теория:

  • Продвинутые возможности Flexbox
  • Проблемы применения Flex
  • Основы технологии CSS Grid
  • Линии, треки, ячейки, области
  • Распределение контента в сетке
  • Единица измерения fr
  • Совместное применение Flexbox и CSS Grid

Практика:

  • Вёрстка учебного макета с применением Flexbox и CSS Grid
  • Самостоятельная работа

По итогам занятия:

  • Изучите расширенные возможности Flexbox
  • Познакомитесь с Grid раскладкой
  • Сможете использовать display: grid для построения макета
Модуль 3

Практикум

Занятие 7. Вёрстка Landing page (промо-страницы)

Учимся использовать новые знания на практике

Теория:

  • Продолжаем работу с БЭМ
  • Применение модификаторов и миксов
  • Типовые ошибки в стилях
  • Насколько блоки должны быть независимы
  • Как использовать БЭМ в реальных проектах

Практика:

  • Вёрстка лендинг промо-страницы по БЭМ
  • Самостоятельная работа

По итогам занятия:

  • Научитесь использовать БЭМ при вёрстке реальных макетов
  • Освоите новые приёмы работы со стилями
  • Отработаете навыки вёрстки с препроцессором, сборкой через gulp и относительными величинами

Занятие 8. Практика

Знакомимся с PerfectPixel вёрсткой, отрабатываем её на практике

Теория:

  • PerfectPixel — особенности высокоточной вёрстки
  • Работа с готовой графикой в SVG
  • Повторение материала

Практика:

  • Продолжение работы над вёрсткой лендинг промо-страницы

По итогам занятия:

  • Отработаете полученные ранее знания и навыки
  • Научитесь использовать PerfectPixel для более точной вёрстки макетов
  • Сможете применять в вёрстке изображения в формате SVG

Занятие 9. Практика

Отрабатываем на практике изученный материал

Теория:

  • Приёмы написания мобильных стилей с помощью препроцессоров
  • Особенности вёрстки интерактивных компонент

Практика:

  • Завершение работы над вёрсткой лендинг промо-страницы
  • Добавление стилей для мобильной версии
  • Настройка combine-media-queries

По итогам занятия:

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

Занятие 10. Многостраничные веб-сайты и SEO

Разбираем нюансы вёрстки для многостраничных сайтов, знакомимся с основами SEO

Теория:

  • Особенности вёрстки многостраничных сайтов
  • Блоки с произвольным текстом
  • Основы SEO для верстальщика
  • Типовые SEO ошибки в вёрстке
  • Микроразметка Schema.org и OpenGraph
  • Теги и атрибуты для SEO: noindex, nofollow
  • Проверка структуры документа
  • Google PageSpeed Insights

Практика:

  • Внедрение микроразметки на промо-страницу
  • Начало вёрстки макета многостраничного веб-сайта
  • Самостоятельная работа

По итогам занятия:

  • Познакомитесь с тонкостями вёрстки многостраничных сайтов
  • Научитесь использовать микроразметку
  • Сможете корректно сверстать макет веб-сайта с учетом требования поисковых систем

Занятие 11. Практика

Отрабатываем на практике вопросы вёрстки многостраничных сайтов

Теория:

  • Повторение материала
  • Препроцессоры для HTML

Практика:

  • Продолжение вёрстки многостраничного макета
  • Создание анимационных эффектов
  • Самостоятельная работа

По итогам занятия:

  • Отработаете изученный ранее материал на практике
  • Освоите несколько новых анимационных эффектов

Занятие 12. Кроссбраузерность

Обсуждаем приёмы и способы решения проблем с кроссбраузерностью

Теория:

  • Решение проблем с кроссбраузерностью
  • Распространённые баги в браузерах
  • Принцип постепенной деградации
  • Принцип прогрессивного улучшения
  • Как обеспечить поддержку старых IE
  • Особенности экранов с высокой плотностью пикселей
  • Normalize, Reset и Reboot
  • AdBlock

Практика:

  • Работа с инструментами кроссбраузерного тестирования
  • Продолжение работы над вёрсткой многостраничного макета
  • Самостоятельная работа

По итогам занятия:

  • Познакомитесь с тонкостями решения проблем кроссбраузерности
  • Научитесь использовать несколько инструментов для кроссбраузерного тестирования
Модуль 4

Сетки и фреймворки

Занятие 13. Основы SVG

Учимся работать с векторной графикой

Теория:

  • Особенности векторной графики
  • Применение готовых SVG изображений в вёрстке
  • SVG спрайты
  • Базовые фигуры
  • Анимация SVG
  • Группировка слоёв
  • Градиенты

Практика:

  • Создание простого SVG изображения
  • Разработка SVG анимации с изменением формы
  • Самостоятельная работа

По итогам занятия:

  • Научитесь использовать векторную графику в вёрстке
  • Освоите разные способы подключения SVG
  • Сможете создавать анимационные эффекты в SVG

Занятие 14. Bootstrap

Изучаем построение сеток и знакомимся с Bootstrap

Теория:

  • Основы CSS фреймворка Bootstrap 4
  • Модульная сетка
  • Основные компоненты
  • Устройство исходного кода Bootstrap (на SCSS)
  • Варианты применения фреймворка
  • Кастомизация стилей Bootstrap

Практика:

  • Вёрстка учебной страницы с готовой сборкой фреймворка
  • Разработка макета с кастомизацией и собственной сборкой стилей

По итогам занятия:

  • Познакомитесь с фреймворком Bootstrap 4
  • Научитесь использовать как готовую сборку, так и собственную сборку с кастомизацией стилей

Занятие 15. Вёрстка Email шаблонов

Изучаем вопросы вёрстки писем для Email-рассылок

Теория:

  • Особенности вёрстки шаблонов писем
  • Нюансы отображения разметки для разных почтовых клиентов
  • Подходы к вёрстке email макетов
  • Фреймворк Foundation for Emails 2

Практика:

  • Вёрстка шаблона для email рассылки
  • Применение фреймворка для создания адаптивных email шаблонов
  • Тестирование свёрстанных писем в различных почтовых клиентах

По итогам занятия:

  • Познакомитесь с нюансами вёрстки для email рассылок
  • Сможете сверстать шаблоны с учетом особенностей почтовых клиентов
  • Научитесь использовать Foundation for Emails 2 для вёрстки адаптивных макетов

Занятие 16. Выпускной

Завершаем изучение курса, разбираем оставшиеся вопросы и повторяем материал

Теория:

  • Принципы разработки модульных сеток
  • Автоматическая генерация стилей с помощью препроцессора
  • Повторение изученного в ходе курса материала
  • Подведение итогов

Практика:

  • Создание собственной адаптивной модульной сетки
  • Самостоятельная работа

По итогам занятия:

  • Научитесь создавать собственные модульные сетки
  • Узнаете, куда двигаться дальше и что ещё нужно изучать
  • Подведёте итоги курса и получите комплект дополнительных учебных материалов
Подробный план занятия
/home/student/module_1/lesson_1>

Теория:

  • Проблемы различных видов позиционирования
  • Правила расчета баллов специфичности
  • Правила использования селекторов
  • Использование ключевого слова !important
  • Контекст наложения и проблемы свойства z-index
  • Визуальные слои элементов с opacity и transform

Практика:

  • Исправление ошибок и проблемных мест в готовом макете
  • Разбор на практике принципов поиска ошибок

По итогам занятия:

  • Научитесь правильно использовать различные виды позиционирования
  • Узнаете о проблемах с контекстом наложения и научитесь их решать
  • Научитесь правильно использовать селекторы

Сколько стоит прохождение курса?

Максимальный
  • Очное прохождение курса
  • Рабочее место за нашим ноутбуком (по желанию)
  • Учебные материалы
  • Онлайн-чат с преподавателем
  • Лицензионная копия программ JetBrains
  • Проверка домашних заданий и code-review
  • Help-day по средам
  • Гарантия трудоустройства (при освоении профессии)
  • 2 индивидуальных занятия с преподавателем
  • Дополнительные индивидуально подобранные задания
  • Возможность работать над личным проектом с помощью преподавателя
39 900 руб.
29 900 руб.
Скидка 25% действует до 28 декабря
Оптимальный
  • Очное прохождение курса
  • Рабочее место за нашим ноутбуком (по желанию)
  • Учебные материалы
  • Онлайн-чат с преподавателем
  • Лицензионная копия программ JetBrains
  • Проверка домашних заданий и code-review
  • Help-day по средам
  • Гарантия трудоустройства (при освоении профессии)
  • 2 индивидуальных занятия с преподавателем
  • Дополнительные индивидуально подобранные задания
  • Возможность работать над личным проектом с помощью преподавателя
33 900 руб.
25 400 руб.
Скидка 25% действует до 28 декабря
Стартовый
  • Очное прохождение курса
  • Рабочее место за нашим ноутбуком (по желанию)
  • Учебные материалы
  • Онлайн-чат с преподавателем
  • Лицензионная копия программ JetBrains
  • Проверка домашних заданий и code-review
  • Help-day по средам
  • Гарантия трудоустройства (при освоении профессии)
  • 2 индивидуальных занятия с преподавателем
  • Дополнительные индивидуально подобранные задания
  • Возможность работать над личным проектом с помощью преподавателя
25 900 руб.
19 400 руб.
Скидка 25% действует до 28 декабря

* Во все тарифы включена услуга «помощь с трудоустройством выпускников»:
  • Помощь с написанием резюме
  • Тестовое собеседование
  • Помощь в поиске вакансии
Мы помогаем с поиском работы
Организуем стажировки
Делимся лайфхаками по прохождению собеседований

Получи персональную скидку!

Узнай окончательную стоимость с учётом персональных скидок

Запишись на курс заранее

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

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

Сделай пост в ВК или в Instagram о том, что идёшь к нам на курсы.

Вместе дешевле! Приходи с друзьями

Приходи на курс с другом или родственником — каждый получит скидку.

Забронируй несколько курсов

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

Расписание занятий

Группа
Расписание
Время занятий
Вечерняя группа по будням
Начало с 24 февраля
Пн
Вт
Ср
Чт
Пт
Сб
Вс
19:00 — 22:00
Интересует другое расписание?
Узнайте о новых группах и индивидуальных занятиях у администратора по телефону 8 (812) 914-88-40.

Преподаватели

Мы трепетно относимся к нашим преподавателям, приглашаем вести занятия только опытных специалистов-практиков, тренируем и обучаем их, чтобы гарантировать высокое и стабильное качество подачи материала.
Юрий Горин
Анна Лисененкова
Веб-разработчик с 10-летним стажем, практик, преподаватель, выпускница мат-меха СПБГУ.

С 2007 года работаю с реальными клиентами из Санкт-Петербурга, других городов России и ближнего зарубежья. Это более 200 крупных компаний. Пишу ТЗ, веду проекты, верстаю.

С 2013 года параллельно с основной деятельностью разрабатываю курсы по вёрстке и SEO, в которых стараюсь передать весь свой практический опыт.

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

Основной стек технологий:

  • HTML, CSS, JavaScript, JQuery
  • Препроцессоры LESS, SASS (SCSS)
  • БЭМ
  • Gulp

Мой стиль наставничества — индивидуальный подход и неравнодушие.

https://vk.com/ankhena

Спросите преподавателя!

Задайте вопрос преподавателю совершенно бесплатно

Консультация может быть вам полезна, если:

  • Вы уже знаете часть материала и не уверены, подходит ли вам курс
  • Вы не уверены, что у вас хватит базовых знаний для прохождения курса
  • Вы уже изучали что-то самостоятельно, но у вас возникли сложности
Заявка на консультацию
Оставьте заявку на консультацию с преподавателем по телефону или лично в учебном центре

Отзывы наших учеников

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

Скажу честно, было сложновато учиться из-за работы и тотальной нехватки времени. Много практических заданий, помогающих закрепить и понять материал.
Общение в онлайн-чате и дополнительный материал сильно помогают. В общем — всё отлично!
Клим Бочарников
Хочу поблагодарить за грамотную и последовательную подачу информации
Курс действительно очень полезный, поскольку рассматриваются актуальные и наиболее широко используемые в данный момент приемы верстки, принципы работы с макетами, а также возможные проблемы и способы и решения.

Лично от себя хочу поблагодарить Юрия за грамотную и последовательную подачу информации, умение передать суть того или иного приема или метода, а также за постоянную обратную связь и грамотно подобранные домашние задания, позволяющие на практике самостоятельно отработать и закрепить полученные знания.
Артем Прокопенко
Курс у меня совпал со стажировкой-работой на должности frontend разработчика в своей компании
Впечатления от курса самые прекрасные) Очень важно, когда преподаватель, по-настоящему, хочет научить, всегда готов помочь, делится теоретическими знаниями и практическим опытом, проверенными в собственной работе.

Так как данный курс у меня совпал со стажировкой-работой на должности frontend разработчика в своей компании, кое что сразу смотрела и применяла в работе на практике, кое-что сравнивала, домашние, к сожалению, делать не успевала…((
С нетерпением жду углубленных курсов по JS и PHP, надеюсь будет и по Seo.
Юлия Ичетовкина
Проба реальных проектов создает в голове целостную картину всей разработки
Проходя этот курс я уже работал в этой сфере и могу с уверенностью сказать, конкретно этот курс оказался очень информативным и полезным, он поднимает уровень на новую ступень именно профессиональной верстки. А проба реальных проектов (пусть и учебных, но всё же реальных) создает в голове целостную картину всей разработки. Каждое занятие новый интересный материал, курс пролетел очень быстро!!!
Я обязательно продолжу обучение!
Юрий, огромное спасибо!
Любомир Долгополов

Ответы на частые вопросы

Кто ведёт занятия? Что у вас за преподаватели?

Все наши преподаватели — практикующие специалисты: программисты, веб-разработчики, дизайнеры. Они — профессионалы своего дела, которые готовы поделиться своим опытом и знаниями с начинающими специалистами.

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

Возможны ли индивидуальные занятия по курсу?

Да, у нас есть индивидуальные занятия. Как правило, при общении один на один с преподавателем можно освоить материал гораздо быстрее и эффективнее, чем в группе.

Ты можешь пройти индивидуально как весь курс целиком, так и отдельные интересующие темы.

Узнать подробности об индивидуальных занятиях можно у наших администраторов по телефону 8 (812) 914-88-40.

Что делать, если мне не понравилось у вас?

Если вам что-то не понравилось, обязательно сообщите нашему администратору. Мы будем очень расстроены, но постараемся решить возникшие разногласия. В крайнем случае — вернём деньги согласно условиям договора.

Хватит ли заявленного времени в программе для освоения материала?

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

Ну, а если что-то вдруг пойдёт не так — мы предлагаем бесплатное повторное прохождение курса.

У вас нет нужного мне курса...

Если нужного вам курса сейчас нет в нашем каталоге, это ещё не означает, что мы не можем вам дать нужные навыки и знания.

Свяжитесь с нашим администратором — мы вместе что-нибудь придумаем.

Мне попадалась реклама более дешевых курсов...

Возможно где-то и дешевле, но у нас вы получите гораздо больше:

  • Занятия ведут опытные преподаватели-практики;
  • Программы курсов всё время обновляются, чтобы соответствовать требованиям работодателей;
  • Вы получаете финансовую гарантию трудоустройства, которая прописана в договоре;
  • Мы помогаем с трудоустройством не на словах, а на деле: с поиском вакансий, с написанием резюме, с подготовкой к собеседованиям;
  • У вас есть возможность безлимитно пожизненно пользоваться консультациями преподавателей в рамках help day (на тарифах Максимальный и Оптимальный).
А можно скидку?

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

Какой график работы в учебном центре?

Мы работаем семь дней в неделю. По будням — с 13:15 до 22:15, а по выходным с 9:30 до 22:30. Приходите! :)

Будет ли сертификат по окончании курса?

Разумеется, каждый ученик, освоивший всю программу курса, получит красивый сертификат, который с гордостью можно приложить к своему резюме :)