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

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

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

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

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

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

Сертификат

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

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

Shape 2 copy 2
Вадим Матвеев
Дизайнер интерфейсов Яндекс.Деньги
Пятилетний опыт работы в дизайне. В прошлом проектировал мобильные приложения, сейчас сфокусировался на вебе. Любит хорошую типографику и приятные микроанимации. Верит, что все дизайнеры будут верстать в ближайшем будущем.
Николай Громов
Веб-технолог, фрилансер
Разработчик с феноменальным опытом более 14 лет. Николай является наиболее опытным преподавателем в школе и делится своими знаниями на курсах верстки.
Андрей Гурылев
Front-end разработчик Wrike
Cпикер, ментор в javascript-сообществе NodeSchool и front-end разработчик компании Wrike. Андрей верстает с 2007 года и когда-то учился верстать еще на стандарте HTML4.
Shape 2 copy 3

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

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

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

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

Контакты

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