20 мая
12:00
Королева, 2а

Мастер-класс по вёрстке
«Анализ существующих методов и механизмы их применения»
Евгений Иванов
Frontend-разработчик
в Digital Zone

Спикер
Евгений рассказал, что такое вёрстка, какие механизмы существуют на данный момент. Разобрал на примерах основы FlexBox и Grid.

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

Ссылки на полезные материалы по итогу:
Были на мастер-классе?
Пожалуйста, расскажите нам о своих впечатлениях,
поделитесь замечаниями и пожеланиями — learning.fabit@gmail.com

Будем рады любой обратной связи.

Фото

Видео

Программа мероприятия
  1. Что такое раскладка
  2. Какие механизмы раскладки у нас есть
  3. Табличная верстка
    1. Что такое табличная верстка
    2. Небольшой пример верстки 2-х колоночного макета
    3. Плюсы и минусы
    4. В каких случаях нужно использовать
  4. Блочная верстка
    1. Что такое блочная верстка и ее преимущества
    2. Пример раскладки блоков на float
    3. Пример верстки 2-х колоночного макета на float
    4. Плюсы и минусы
    5. Сравнение с предыдущим способом раскладки
    6. В каких случаях использовать
  5. Inline-block верстка
    1. Что это такое
    2. Пример раскладки блоков
    3. Пример верстки 2-х колоночного макета на inline-block
    4. Плюсы и минусы
    5. Сравнение с предыдущими способами раскладки
    6. В каких случаях использовать
  6. FlexBox
    1. Что это такое flexbox
    2. Подробный поэтапный разбор всех свойств flexbox на примере раскладки блоков
    3. Пример верстки 2-х колоночного макета на flexbox
    4. Сравнение с предыдущими способами раскладки
    5. В каких случаях использовать
  7. Grid-layout
    1. Что это такое
    2. Подробный поэтапный разбор основных свойств Grid-layout на примере раскладки блоков
    3. Пример верстки 2-х колоночного макета на Grid
    4. Сравнение с предыдущими способами раскладки
    5. В каких случаях использовать Grid а в каких Flex
  8. Завершающий пример верстки 2-х колоночного макета в котором будет показано в каких случаях следует использовать каждый из вышеупомянутых способов раскладки.
Вступительное слово спикера
Эра CSS-вёрстки длится не так уж и долго. Сначала все сайты не имели никаких раскладок. Даже графика была редкостью. Затем в веб-страницы стали приходить бизнес, индустрия развлечений, СМИ и др., а требования к представлению информации существенно выросли.

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

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

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

Для начала давайте поговорим о том что такое раскладка и какие инструменты нам доступны для работы с ней. Рассмотрим их плюсы и минусы и разберемся в каких случаях их применять.
О спикере
Евгений Иванов
Frontend-разработчик в Digital Zone
Более 5-лет практического опыта frontend-разработки.

В основном занимаюсь frontend разработкой различных веб-проектов, версткой и имплементацией макетов, написанием различных javaScript решений, с применением jQuery, React или Vue. Оптимизацией рабочего процесса коллектива с помощью написания разнообразных Gulp и Webpack решений.

Работал как в крупных так и в небольших IT-компаниях, длительное время работал фрилансером.

На данный момент работаю в компании Digital Zone на должности frontend-разработчика.

Стек технологий:
HTML/HTML5, CSS/CSS3, JavaScript/ES6, Jquery, BEM, Less, Scss, Sass, Styles, Jade/Pug, Responsive, FlexBox Grid-layout, SVG, Gulp, Handlebars, Ajax, Json, верстка-email, EsLint, Babel, React, Redux, Symfony-2, Twig, Npm, Bower, Yarn, Webpack, Node, Vue.
Получайте уведомления о новых мероприятиях на почту
Подписывайтесь на аккаунты ФИТ.Университета в социальных сетях:
© 2007—∞ ООО «Фабрика информационных технологий»