Мастер класс по FlexBox вёрстке

Дорогие друзья, приглашаю вас на свой мастер-класс по вёрстке с помощью FlexBox! FlexBox - новый способ разбивки контента на блоки, пришедший на смену и/или в помощь стандартным методам вёрстки.

Основные преимущества FlexBox:

  • полностью резиновая модель вёрстки
  • адаптивный сайт без media-запросов
  • удобные выравнивания элементов по горизонтали и вертикали
  • изменение порядка HTML-элементов прямо из CSS
  • с 2014 года поддержка всеми новыми браузерами
  • простой и лаконичный CSS-код на выходе

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

Программа мастер-класса

 
Урок 1 — теория FlexBox
  1. Причины появления FlexBox
  2. Примеры неудобств в привычной вёрстке
  3. Поддержка браузерами
  4. Понимание flex-осей
  5. Резервирование места
  6. Управление сжатием
  7. Управление выравниванием
  8. Изменение направления контента
  9. Изменение порядка элементов
  10. Феерическая адаптивность
 
Урок 2 — вёрстка макета
  1. Разбор дз с первого урока
  2. Легко прижимаем подвал к низу
  3. Вертикальный поток обёрток
  4. Привычная wrap-техника
  5. Анализ макета: margin vs display: flex
  6. flex: 1 1 auto; — чудеса адаптивной вёрстки
  7. Анализ динамического изменения количества элементов
  8. rem - телефоны скажут спасибо
  9. flex + media-запросы
  10. Примеры, когда не стоит использовать flex
На выходе вы получите макет, свёрстанный с помощью FlexBox!

Уроки проходили онлайн и теперь доступны в записи.
Общая продолжительность мастер-класса составляет примерно 4 часа 53 минуты.
После первого урока выдаётся домашнее задание, которое разбирается в начале второго занятия.

Отзывы учеников о Дмитрии

Проурзин Алексей
Проурзин Алексей

До Дмитрия я изучал HTML, CSS, JS, PHP по видеокурсам других авторов и пытался как-то дополнить свои знания по всяческим форумам и т.п. Но, попав к Дмитрию, я понял важную вещь: большая часть того, что я знал – это то, как НЕ надо программировать и делать сайты. Дмитрий же научил и показал, как действительно надо правильно программировать, сильно углубил и привёл в порядок мои знания по web-программированию.

Другие авторы не могли дать ни полноты знаний, ни чёткого понимания, что нужно изучать и что делать, чтобы развиваться. А Дима умеет объяснить материал очень доступно и понятно, а главное в лёгкой форме, которая вызывает заинтересованность в изучении предмета.

Прочитать отзыв полностью
Хачатурян Ирина
Хачатурян Ирина

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

Со временем появились свои клиенты, сейчас работаю на фрилансе, переехала в Израиль поближе к морю. Ни секунды не жалею что пошла на этот курс.

Прочитать отзыв полностью
Ролин Александр
Ролин Александр

Не достаточно просто оказаться в нужное время в нужном месте. Нужно еще оказаться в нужном окружении!

Первым делом я хочу выразить благодарность Дмитрию не только за актуальную и нужную информацию, качественную подачу материала, веселую и дружную компанию, но и за ту возможность которою я получил, обучаясь у Дмитрия, а именно - найти себя как программист, понять что веб-разработка это очень интересно и это именно то чем я хочу заниматься :)

Прочитать отзыв полностью
Александр Пронин
Александр Пронин

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

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

Прочитать отзыв полностью
Левченко Вячеслав
Левченко Вячеслав

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

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

Прочитать отзыв полностью
Александр Шишкин
Александр Шишкин

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

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

Прочитать отзыв полностью
Дмитрий Поддъяков
Дмитрий Поддъяков

На семинары, которые вел Дмитрий Лаврик попал чуть больше года назад. С тех пор прослушал много разных курсов у разных преподавателей по разным темам в области сайтостроительства. Лучшего преподавателя по PHP, html, CSS и JS я не знаю. Все доходчиво и внятно объясняет, очень полный разбор ДЗ. Отвечает на все вопросы слушателей. Если вопрос вдруг «не берется», то не жалеет своего времени на нахождение ответа. Если слушатель не понял текущее объяснение, то Дмитрий повторяет материал заново и по возможности по новому, что бы было понятно. К каждому занятию предоставляются файлы с примерами программ.

Прочитать отзыв полностью
Дмитрий Картушин
Дмитрий Картушин

“Был бы ученик, учитель найдётся!”

И он нашёлся. Когда я пришёл на первый курс по PHP к Дмитрию, функции вызывали у меня шок, объекты - трепет, ООП – ужас. Дмитрий как раз и помогает побороть страхи перед кажущимся сложными конструкциями языка. Доходчиво объясняет, что к чему и вот Вы уже перебираете массивы, объявляете экземпляры классов и тд. На выходе получая как минимум собственный блог или сайт визиту.

Прочитать отзыв полностью
Игорь Кузьмин
Игорь Кузьмин

Дмитрий - замечательный преподаватель.
Объясняет просто и доходчиво. Я проходил его курсы по PHP и javascript. Знания, которые я получил помогли мне при устройстве на работу. Во всех уроках рассматривается большое количество примеров, что очень облегчает понимание материала. Хочу сказать спасибо Дмитрию за его труд и уверен, что еще не раз приду для учебы на новых курсах.

Прочитать отзыв полностью
Игорь Легостаев
Игорь Легостаев

Когда я пришел на курсы по PHP, то на тот момент у меня уже были некоторые знания, которые хотелось просто освежить, но преподавателем оказался Дмитрий Лаврик, который своим позитивом, изменил мой взгляд на программирование и простым человеческим языком объяснил довольно сложные вещи (как потом оказалось c 0 до «Своей CMS»).

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

Прочитать отзыв полностью
Лашков Дмитрий
Лашков Дмитрий

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

Вы тоже влюбитесь в этого обаятельного человека и талантливого преподавателя уже на первом семинаре. Не ленитесь и Дмитрий уверенно проведет вас к высотам IT мастерства.

Прочитать отзыв полностью
Елена Дранникова
Елена Дранникова

Очень понравился курс "супер CMC с нуля". Это действительно "СУПЕР"! После этого курса перевела свой сайт на Димину CMS, мой сайт преображался по мере получения знаний от HTML до "супер CMS".

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

Прочитать отзыв полностью
Владмир Габдуллин
Владмир Габдуллин

Буквально пол года назад я узнал, что Дмитрий открыл свою школу, где регулярно преподает сам. Моей радости не было предела ))) Сейчас я стараюсь не пропускать ни одного вебинара с его участием, так как у Лаврика есть грамотный ответ на любой вопрос. Он также старается уделять внимание всем ученикам группы, так что если у вас на потоке большая группа, за это можно не переживать, вы получите разжеванный ответ и на свой вопрос. Всем рекомендую NTSchool, только здесь вы получите современные ответы на ваши вопросы!

Прочитать отзыв полностью
Станислав Берендеев
Станислав Берендеев

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

А в прошлом году случайно наткнулся на web junior 2014, записался. Преподавателем был у нас Лаврик Дмитрий. Стоило мне позаниматься буквально несколько лекций и на меня нашло озарение! Я не когда не думал что может быть все так легко и просто.

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

Прочитать отзыв полностью
Власовец Виталий
Власовец Виталий

Основной вопрос найти не подходящий курс, а преподавателя, который имеет практический опыт разработки, массу интересных выполненных проектов и при этом может доходчиво представить свои навыки – научить. Поэтому выбор курсов Дмитрия Лаврика закономерен. С одной стороны, на практических семинарах очень детально, подробно на примерах рассматриваются основные аспекты изучаемой темы, уточняются нюансы. При этом заявленное двухчасовое занятие запросто растягивается на 3-4 часа до прояснения всех аспектов.

Прочитать отзыв полностью
Хочу больше отзывов

Часто задаваемые вопросы.

1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда?
Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке <= IE8 речи быть не может. При этом я рекомендую не зацикливаться на старых браузерах, а изучать новые и удобные технологии.
2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом?
Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется.
3. Это онлайн или в записи?
В записи. В онлайне этот мастер-класс уже прошёл в августе 2015.

Приобрести мастер-класс в записи

Записывайтесь — flexbox-вёрстка рулит :)