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

Интерактивный онлайн курс
от Дмитрия Лаврика.

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

О мероприятии
Бесит адаптивная вёрстка?
Или мучаешься с bootstrap?
Тебе помогут:
css3 calc less scss npm gulp autoprefixer новая супер сетка
Хочу верстать легко
До и после обучения
6 групп видео 6 групп видео с подробной структурированной информацией
7 вебинаров 7 вебинаров с разбором домашних работ по средам в 19:00 по Москве
> 5 тренажёров > 5 тренажёров для закрепления важных пройденных тем между уроками
все материалы ВСЕ материалы исходные коды и видео записи занятий
Это мероприятие для тех, кто
Основы программирования
Владеет основами вёрстки, в том числе, адаптивной
Навыки веб-разработчика
Периодически бесится при создании адаптивной вёрстки
Основы программирования
Хочет освоить классный инструмент и стать мастером
Программа мероприятия
16.02
  • Вводный вебинар
  • Техническая информация
  • Доступы в группы и к тренажёрам
  • Обзор программы курса
  • Обзор вспомогательных инструментов
#1
  • Основы Flexbox
  • Основная и вспомогательная оси
  • Тонкости выравнивания элементов
  • Адаптивка без media-запросов
  • Расчёт размеров элемента
23.02
  • Разбор домашних работ
  • ?

    Чем отличается поведение соседних flex-элеметов с flex-grow 1, 0 и 10000, 1

    Фокусы flex-grow
  • ?

    Некоторые варианты решения ДЗ№1 пункта №1 не нравятся древнему браузеру

    Нюансы в IE 11
  • ?

    Перестановка элементов на разном размере экрана при его увеличении и уменьшении

    Погрешность расчёта размеров
  • Код без media-запросов: за и против
#2
  • ?

    Мир переворачивается и привычные flex-свойства начинают работать в другом направлении

    Flex-direction: column
  • ?

    Новый столбец сам по себе не создаётся

    Нюансы переноса элементов
  • Вертикальные и горизонтальные отступы
  • Смена порядка следования элементов
  • ?

    Примеры, для удобного решения которых нужен Grid Layout

    Задачи, для которых flex неудобен
02.03
  • Разбор домашних работ
  • ?

    Когда используем flex, а когда нужен Grid Layout

    Общие выводы по технологиям
  • Необходимость автоматизации мелочей
  • Моральная подготовка к node.js
#3
  • ?

    С тех пор, как появился NPM, мир сильно изменился. Появились тысячи пакетов, решающих различные задачи.

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

    Node.js и NPM - основы магии
  • ?

    Вы ещё минифицируете код руками? Ставите отдельные программы для компиляции кода препроцессоров? — Это прошлый век.

    Gulp - гениальное изобретение, которое само по себе увеличивает скорость вёрстки раза в два, делая за нас всю рутинную работу.

    Gulp - сборка проекта
  • ?

    Пишете префиксы вручную? — Ок, мазохизм ещё никто не опроверг. :)

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

    Autoprefixer - кроссбраузерность
  • ?

    Всё ещё пишите код в одном файле? Или в разных, а потом соединяется вручную?

    Плагин concat легко автоматизирует сборку разных файлов в один.

    Concat - соединение файлов
  • Sourcemaps - удобная отладка
09.03
  • Разбор домашних работ
  • Плагин Clean CSS
  • ?

    Забавный плагин для Gulp, который исправляет косяки организации кода.

    Иногда получается куча одинаковых media-запросов, которые будут напрягать браузер. Их надо сгруппировать, разумеется не вручную.

    Group CSS Media Queries
  • Неудобства плагина concat
  • Чего не хватает в чистом CSS
#4
  • Основы CSS-препроцессоров
  • Иерархическое написание
  • Переменные и примеси
  • Написание кода на LESS
  • Написание кода на SASS (SCSS)
16.03
  • Разбор домашних работ
  • Синтаксисы разных препроцессоров
  • LESS vs SCSS
  • Препроцессоры vs постпроцессоры
#5
  • ?

    Установка плагина генерации сетки.

    Настройка gulp под оптимальную генерацию CSS-кода из сетки.

    npm i smart-grid - поехали!
  • ?

    Принципы разбиения макета на колонки и создание отступов между ними.

    Генерация произвольного количества колонок.

    Основы создания сетки
  • ?

    Как лучше? — Как дизайнер попросит!

    Реализуем оба варианта!

    Отступы в px или в %
  • ?

    Что лучше ставить между колонками в сетки?

    Вопрос сложный. А правильный ответ - должны быть доступны и тот, и другой варианты.

    Margin - лучше для большинства задач, а padding нужен если фоны соприкасаются.

    Margin и padding варианты
  • ?

    Определение количества колонок, отступов, брейкпоинтов, произвольных свойств и многого другого :)

    Настройка свойств сетки
23.03
  • Разбор домашних работ
  • Нюансы fields и offset
  • Резиновые и обычные элементы
  • Row и col без size
#6
  • ?

    Сетка готова - надо бы и потренироваться :)

    Создание адаптивки за считанные минуты.

    Вёрстка макета
  • ?

    Получаем на выходе чистый код, практически неотличимый от написанного человеком вручную!

    Оптимизация кода
  • ?

    Иерархическое препроцессорное написание кода противоречит концепции независимых элементов на странице

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

    Иерархия селекторов vs BEM
  • Дополнительные приёмы вёрстки
  • Кроссбраузерность
30.03
  • Разбор домашних работ
  • Подведение итогов курса
  • Ответы на финальные вопросы
  • Направление дальнейшего развития
Уровень вёрстки
До
Резюме до
Хочу стать круче
После
Резюме после
О преподавателе
Дмитрий Лаврик

Дмитрий Лаврик

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

"Если уж вы дочитали досюда, значит, вас хотя бы раз в жизни бесили либо адаптивная вёрстка, либо дизайнеры, требующие соблюдения сетки, либо bootstrap, когда из-за его классов становился не виден остальной HTML-код :)

Новый способ, которому я хочу вас научить, использует в себе всю мощь современных технологий: flexbox и функция calc из CSS3, один из препроцессоров на выбор (LESS, SCSS, SASS, Stylus), сборщик проектов gulp и пара его чудесных плагинов.

Всё это даёт невероятный прирост в скорости и качестве вёрстки!"

Отзывы о курсе
Игорь Гиматов
Игорь Гиматов

Если Вы используете bootstrap, понимаете его минусы и хотите использовать самые современные технологии, то данный курс однозначно для Вас. Детально изучить flexbox, научиться использовать NPM, Gulp да еще и за 4 урока - это дорогого стоит!

Вишенкой на торте этого курса является конечно же Smartgid. С помошью этого чудесного инструмента смог усовершенствовать и в тоже время многократно упростить свою верстку, а также значительно сократить время верстки лендингов.

Материал подается простыми словами с множеством примеров, что делает его предельно понятным. Однозначно рекомендую этот курс тем, кто хочет повысить свою эффективность и продвинуться в ряде современных технологий.

Костюченков Сергей
Костюченков Сергей

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

Но эту работу можно делать быстрее и качественнее...

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

Прошел курс с удовольствием, жажду новых знаний.

Мне нравится #Супер_сетка_Лаврика

Литвин Сергей
Литвин Сергей

На курс по продвинутой верстки попал с вебинара. Очень заинтересовала возможность улучшить навыки по flexbox, научиться правильно настраивать и делать свои сборки на Gulp ну и конечно делать свои сетки под нужды каждого конкретного проекта и получат на выходе чистый, минимально необходимый код причем автоматически скомпилированный и неотличимый от человеческого.

Обучение прошло отлично. Намного улучшил знания и навыки по flexbox. Разобрался со сложными свойства flex-grow, flex-shrink, flex-basis. Теперь могу сделать адаптивный сайт без единого медиа запроса.

Ушел страх использования Node.js, Gulp и npm. Прокачаны skill-ы так сказать ;-) Скорость верстки сайтов увеличилась на порядок. Что очень радует :-)

Огромная благодарность Дмитрию Лаврику за его просветительский труд в сфере Web технологий.

Константин Соловьев
Константин Соловьев

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

Для меня самый главный плюс - это адаптивность. Раньше я долго делал именно верстку для мобильных устройств. Сейчас я это делаю буквально за несколько строк кода.

Ну и многое конечно зависит от преподавателя. Дмитрий излагает материал четким, доступным языком. В его рассказе нет "воды". Планирую в дальнейшем также пройти курс по JS под его началом.

Мне все понравилось, за курс оценка 5+.

Василий Горюнов
Василий Горюнов

В целом вебинар мне понравился. ни на минуту не усомнился в профессиональности преподавателя и полезности материал.

Надо сказать, что я получил огромный запас знаний как по верстке и программированию, так и по использованию npm и gulp. Уверен, что это поможет мне в дальнейшем очень сильно прокачать свои навыки в веб-разработке. В общем полезность всего мероприятия для меня зашкаливает.

Также стоит отметить талант Дмитрия объяснять казалось бы сложные и нуднейшие вещи понятным и общедоступным языком, сохраняя немалую долю позитива на занятиях. Из минусов могу только отметить использование в качестве примера одного и уже заезженного макета, хотелось бы конечно посмотреть побольше реальных примеров. А так, очень рекомендую этот вебинар всем, кто мучается с бутстраповской адаптивной версткой по сетке.

Сапронова Виктория
Сапронова Виктория

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

Дмитрий умеет донести и разжевать материал так, что не ухватить его невозможно)

Его вебинары – это как клуб давнейших приятелей, которые пришли поболтать и узнать что-то новое. Его уроки дают огромную теоретические и практическую подкованность, что конкурировать на рынке труда уже не составляет труда.

Спасибо огромное Диме и его команде за помощь в обучении)

Сергей Котенко
Сергей Котенко

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

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

Хочу поблагодарить Дмитрия за интересную подачу информации, и за предоставление возможности обмена опытом с другими участниками семинара!

Светлана Холодняк
Светлана Холодняк

Вроде бы уже сама что-то могу реализовывать - т.е. уровень далеко не нулевой, но каждый раз, послушав Диму, узнаю что-то новое, даже по казалось бы элементарным темам!

А что же говорить о том, когда Дима дает нам ИНСТРУМЕНТ! Это вообще неоценимые знания! С Димой не закиснешь в болоте стандартных решений.

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

Андрей Пикулик
Андрей Пикулик

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

Карен Егиязарян
Карен Егиязарян

Очень классно, понятно и самое главное, что все из этого курса можно применять на практике.

Доволен, спасибо Дмитрию за его труды, очень хороший специалист в области WEB и преподаватель!!

Лебеденко Кирилл
Лебеденко Кирилл

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

Курс очень информативен, Дмитрий не только давал знания, который он заявлял в описании, но и касался интересных приёмов, которыми буду пользоваться дальше! В общем приятно когда ведёт курс такой развитый и интересный человек!

Оралбаев Есжан
Оралбаев Есжан

Добрый день!

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

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

Спасибо за курс!

Леонид Добривечер
Леонид Добривечер

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

Федор Ванчугов
Федор Ванчугов

Прекрасный курс.

Курс этот дал хороший толчок для дальнейшего развития!

Хочу больше отзывов