20 мая
12:00
Королева, 2а
Мастер-класс по вёрстке
«Анализ существующих методов и механизмы их применения»
Евгений Иванов
Frontend-разработчик
в Digital Zone
в Digital Zone
Спикер
Евгений рассказал, что такое вёрстка, какие механизмы существуют на данный момент. Разобрал на примерах основы FlexBox и Grid.
Сравнил самые популярные способы раскладки макетов и рассказал в каких случаях использовать каждый из них.
Сравнил самые популярные способы раскладки макетов и рассказал в каких случаях использовать каждый из них.
Благодарим всех посетивших мероприятие!
Ссылки на полезные материалы по итогу:
Ссылки на полезные материалы по итогу:
Были на мастер-классе?
Пожалуйста, расскажите нам о своих впечатлениях,
поделитесь замечаниями и пожеланиями — learning.fabit@gmail.com
Будем рады любой обратной связи.
поделитесь замечаниями и пожеланиями — learning.fabit@gmail.com
Будем рады любой обратной связи.
Фото
Видео
Материалы по мастер-классу:
- Доклад «Обзор существующих механизмов раскладки» Google Документы
- Презентация «Обзор существующих механизмов раскладки» Google Презентации
Программа мероприятия
- Что такое раскладка
- Какие механизмы раскладки у нас есть
- Табличная верстка
- Что такое табличная верстка
- Небольшой пример верстки 2-х колоночного макета
- Плюсы и минусы
- В каких случаях нужно использовать
- Блочная верстка
- Что такое блочная верстка и ее преимущества
- Пример раскладки блоков на float
- Пример верстки 2-х колоночного макета на float
- Плюсы и минусы
- Сравнение с предыдущим способом раскладки
- В каких случаях использовать
- Inline-block верстка
- Что это такое
- Пример раскладки блоков
- Пример верстки 2-х колоночного макета на inline-block
- Плюсы и минусы
- Сравнение с предыдущими способами раскладки
- В каких случаях использовать
- FlexBox
- Что это такое flexbox
- Подробный поэтапный разбор всех свойств flexbox на примере раскладки блоков
- Пример верстки 2-х колоночного макета на flexbox
- Сравнение с предыдущими способами раскладки
- В каких случаях использовать
- Grid-layout
- Что это такое
- Подробный поэтапный разбор основных свойств Grid-layout на примере раскладки блоков
- Пример верстки 2-х колоночного макета на Grid
- Сравнение с предыдущими способами раскладки
- В каких случаях использовать Grid а в каких Flex
- Завершающий пример верстки 2-х колоночного макета в котором будет показано в каких случаях следует использовать каждый из вышеупомянутых способов раскладки.
Вступительное слово спикера
Эра CSS-вёрстки длится не так уж и долго. Сначала все сайты не имели никаких раскладок. Даже графика была редкостью. Затем в веб-страницы стали приходить бизнес, индустрия развлечений, СМИ и др., а требования к представлению информации существенно выросли.
Несмотря на огромное обилие различных возможностей, в 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.
В основном занимаюсь 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—∞ ООО «Фабрика информационных технологий»
