Продвинутый курс HTML-вёрстки

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

Учебная программа

В течение всей программы вы будете работать над учебным проектом и выполнять практические задания.
Настройки окружения и Pug
  • Pug (Jade), возможности, примеры использования
  • Сочетание Pug (Jade) с методологиями
  • Миксины и интерполирование (функции, циклы)
  • Построение универсального шаблона
  • Собираем статический сайт с Pug
Gulp, NPM
  • Правильная структура приложения (исходники, сборка)
  • Инициализация проекта
  • Автоматизация, менеджер задач Gulp
  • Параллельное и последовательное выполнение задач в Gulp
  • Модули для сборки и автоматизации: оптимизация кода и графики, сборки препроцессоров, livereload
Sass, LESS, PostCSS
  • Импортирование
  • Переменные, вложения
  • @media
  • Амперсанд
  • Очередность написания в контексте селектора
  • Примеси
Git, Github и кодгайд
  • Алиасы, ключи
  • Работа с ветками: branch, checkout, status, log, fetch, merge
  • Методология: git flow
  • Создание страниц на Github Pages
  • Автоматическая проверка соответствия стилю кода
  • Chrome-расширения и нативный функционал для w3c-валидации и проверки доступности
  • PostCSS-плагины для тестирования допустимых стилей, добавления префиксов (stylelint, stylefmt, doiuse, colorguard, cssstats)
  • Внедрение stylelint в рабочий проект
  • Gulp-плагины для доработки вёрстки (авто-типографы, автофиксы и прочее)
  • Визуальное регрессионное тестирование
Трансформации и анимации
  • CSS transform
  • 3D transform
  • transition, keyframes
  • наведение и скролл-эффекты
SVG
  • Векторная и растровая графика
  • Знакомство с SVG, способы импорта, оптимизация SVG
  • Встраивание SVG-объектов в DOM
  • Оформление SVG (прозрачность, сгибы, градиенты, обводки)
  • Анимация SVG на CSS
  • Библиотеки элементов, внедрение в страницу и внешним файлом
Оптимизация скорости загрузки страниц
  • Измерение скорости загрузки при помощи аудита в хроме и Page Speed
  • Имитация медленной сети и слабых устройств
  • Способы оптимизации растровых, векторных и анимированных изображений
  • Загрузка шрифтов: еще раз о проблемах, теперь с решениями.
  • Методы увеличения скорости загрузки/отрисовки (lazy-load и прочие)
Адаптивные изображения. Ретинизация графики. Гриды
  • Настройка картинок для адаптивной вёрстки
  • Адаптация картинок под ретина-дисплеи
  • Адаптив или респонсив, в чем разница?
  • Медиазапросы
  • CSS Grid
JavaScript часть 1
  • Взаимодействие JS с HTML и CSS: селекторы DOM, свойства DOM-объектов
  • Функции, переменные, условия, типы данных, циклы, отладка ошибок в консоли
  • События
JavaScript часть 2
  • Интерактивные карты, работа с API
  • Работа с формами
JavaScript часть 3
  • Валидация и отправка форм
  • HTTP, JSON, FormData
Стоимость обучения:
28 000
Если нет возможности оплатить весь курс, можно воспользоваться рассрочкой или кредитом от Альфа банка.

Справка о профессии

За время обучения вы получите навыки, необходимые в профессии:
SASS/LESS и PUG препроцессоры
SVG, работа с векторной графикой
Оптимизация скорости загрузки страниц
Адаптивные изображения, ретинизация графики
Тестирование верстки
Основы JavaScript

Сертификат

При успешном выполнении домашних заданий и сдаче проекта, вы получаете сертификат об окончании курса. Также каждый студент получает гарантированную скидку в 10% на все последующие курсы школы.
Сертификат
Курс
«Продвинутый курс HTML-вёрстки»
11занятий
1работа в портфолио
33часа

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

Shape 2 copy 2
Николай Громов
Веб-технолог, фрилансер
Разработчик с феноменальным опытом более 14 лет. Николай является наиболее опытным преподавателем в школе и делится своими знаниями на курсах верстки.
Гриша Маслечкин
Frontend-developer 4xxi
JS-programmer, ReactJS developer.
Shape 2 copy 3

Приятные мелочи

В процессе обучения вам также будут доступны:
Коворкинг с кофе и печеньками
Личный наставник (тьютор)
Тематические воркшопы
Воскресный helpday с практикой
Экскурсия в питерскую студию

Запишись сейчас

Оставь заявку и мы тебе перезвоним. У нас есть возможность оплаты в рассрочку, забронируй себе место.
По мере набора
вторник и пятница, 19:00 – 22:00
Кронверкский проспект, 23
Продвинутый курс HTML-вёрстки
Личные данные
Стоимость:
28000

Контакты

Остались вопросы? Мы готовы на них ответить.
Thumb
Света Лоленко
Продюсер курсов и методист направления программирования
Кронверкский проспект, 23
Горьковская
Этот сайт использует «cookies». Условия использования «cookies» см. в Пользовательском соглашении. Также сайт использует Интернет-сервис для сбора технических данных касательно посетителей с целью получения маркетинговой и статистической информации. Условия обработки данных посетителей сайта см. в Политике конфиденциальности.