Онлайн обучение

Продвинутая верстка

Технологии необходимые для трудоустройства в веб-студию. Научитесь верстать объемные и сложные проекты.

Начните обучение уже сегодня
Записаться Подробности
Онлайн курс - Продвинутая верстка

Необходимые навыки для работы верстальщика в команде в веб-студии или удаленно. Уверенная работа даже с самыми масштабными проектами.

Технологии
которые вы изучите на курсе
Программа курса
Модуль 1. Терминал. Работа с Git и GitHub

Работа с Git и GitHub

  • Знакомство с Git
  • Репозиторий и коммиты
  • Ветвеление проекта. Работа с ветками
  • Работа с удаленным репозиторием
  • Учимся работать c request review
  • Файл gitignore
Модуль 2. Gulp cборка

Создание и настройка Gulp сборки

  • Установка Gulp
  • Первый Gulp таск
  • Последовательное и параллельное выполнение задач в Gulp
  • Cервер BrowserSync
  • Слежение за файлами
  • Подключение препроцессора SCSS в Gulp
  • Автоматическая простановка браузерных префиксов
  • Генерация sourcemaps для CSS файлов
  • Обработка ошибок
  • Форматирование CSS, группировка медиазапросов
  • Автоматическое подключение .scss файлов
  • Простая шаблонизация HTML
Модуль 3. Шаблонизатор PUG. Препроцессор SCSS

Основы работы с pug

  • Знакомство с pug. Подключение pug в gulp сборку
  • Уроки по работе с pug. Синтаксис. Комментарии, теги, текст, классы и id, атрибуты, вложенность.
  • Переменные в pug.
  • Подключение файлов
  • Наследование шаблонов
  • Миксины в pug
  • Работа с массивами
  • Циклы в pug

Верстка проекта с использованием PUG сборки

  • BEM naming, модульная верстка.
  • Создание мастер шаблона
  • Верстка шапки
  • Верстка миксина для поста в блоге
  • Миксины для кнопок
  • Пагинация
  • Виджеты и сайдбар
  • Подвал сайта
  • Вынесение данных в JSON файл
Модуль 4. Как организована командная работа в проекте

Как организована командная работа над проектом

  • Сборка для командной работы
  • UI-kit фреймворк для верстки
  • Оформление задач для команды
  • Контроль выполнения задач и статус проекта
  • Пример реализации задачи в проекте
  • Командная работа в GitHub. Ветвление проекта. Пулл реквесты.
  • Верстка компонентов проекта
  • Сборка страницы из готовых компонентов
Проекты
которые вы сделаете на курсе
Проект на курсе Продвинутая верстка
Gulp сборка для лендингов

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

Технологии используемые в проекте:
Gulp Sass
Проект на курсе Продвинутая верстка
Блог на шаблонизаторе Pug

Сверстаем блог с использованием HTML шаблонизатора PUG. Создание мастер шаблона для типовых страниц. Миксины для повторяющихся типовых элементов. Модульное разделение стилей в SCSS файлах. Две страницы, главная и страница с постом.

Технологии используемые в проекте:
Gulp Sass Pug BEM
Проект на курсе Продвинутая верстка
только в тарифе “Полный”
Сайт веб-разработчика

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

Технологии используемые в проекте:
Gulp Sass Pug BEM UI kit
Юрий Ключевский
Преподаватель курса —
Юрий Ключевский

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

  • Веб-разработчик: JavaScript, HTML, CSS, PHP.
  • Product designer, UI & UX дизайнер.
  • Опыт в веб-разработке: более 10-ти лет.
  • Преподавательский стаж: более 5 лет.
  • Опыт работы в международных IT компаниях, из TOP 10 в своей отрасли. США, Норвегия. Делаю дизайн и фронтенд для IT продуктов.

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

Записаться
Выберите удобный формат обучения

доступ открывается сразу после оплаты

Минимальный
2 недели с куратором
  • Работа с Git и GitHub
  • Gulp cборка для быстрой верстки лендингов
  • Учебный проект Лендинг
  • Gulp cборка для верстки объемных сайтов
  • Учебный проект Блог
  • Нюансы с Git в командной разработке
  • Контроль задач в команде
  • UI кит фреймворк для компонентов проекта
  • Верстка проекта с использованием UI kit
  • Помощь и ответы на вопросы в чате
Продажи закрыты
до Сентября 2023
Полный
4 недели с куратором
  • Работа с Git и GitHub
  • Gulp cборка для быстрой верстки лендингов
  • Учебный проект Лендинг
  • Gulp cборка для верстки объемных сайтов
  • Учебный проект Блог
  • Нюансы с Git в командной разработке
  • Контроль задач в команде
  • UI кит фреймворк для компонентов проекта
  • Верстка проекта с использованием UI kit
  • Помощь и ответы на вопросы в чате
Продажи закрыты
до Сентября 2023
Возможна оплата в рассрочку
Для жителей РФ. Купить курс можно в беспроцентную рассрочку через нашего партнера Тинькофф Банк. Оформите заявку на рассрочку от 2-х до 12-ти месяцев.
Ответы на вопросы
Что нужно знать, чтобы проходить данный курс?

Для прохождения курса вы должны знать HTML и CSS, уметь верстать макеты используя flexbox модель. Также желательно знание основ JavaScript.

Останутся ли видеозаписи после прохождения курса?

Да, записи уроков останутся на учебной платформе.

Чем отличается тариф "Минимальный" от "Полного"?

В "Минимальном" тарифе проверка ДЗ и обратная связь идет только 2 недели, в "Полном" – 4 недели. Также в тарифах разная программа. В "Минимальном" тарифе отсутствуют уроки по организации командной работы, работа с Git, постановка и контроль задач, а также большой командный проект.

Как сменить свой тариф?

Напишите в форму обратной связи на сайте или сообщите своему куратору на платформе. Скажите что хотите перейти на тариф "Полный". Вам отправят ссылку на оплату перехода на другой тариф.