[WebForMySelf] Технология CSS Grid. Руководство по адаптивной верстке (Денис Булыга)

​

Автор: Денис Булыга

Что такое верстка:
Верстка - это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов.
Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript.
Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.
Верстальщик — это профессия, в которой можно постоянно развиваться, и очень много смежных профессий в веб-разработке неразрывно связаны с версткой.

CSS Grid – высший пилотаж в верстке:
CSS Grid — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки.
Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого.
Она представляет собой набор горизонтальных и вертикальных линий, которые образуют сетку, состоящую из рядов и колонок. Технология основана на разделении пространства для макета на столбцы и строки, а также на использовании предсказуемого поведения размеров. Grid позволяет точно позиционировать и масштабировать блоки контента в областях сетки, получаемых при пересечении этих столбцов и строк. Таким образом, получаем очень гибкое поведение верстки при адаптации.

Возможности CSS Grid:
Фиксированные и гибкие размеры полос Фиксированные и гибкие размеры полос
Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения — fr, предназначенную для этой цели
Расположение элемента Расположение элемента
Вы можете размещать элементы в заданном месте, используя номера строк, имена, или путем привязки к области. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в сетке
Создание дополнительных полос для хранения контента Создание дополнительных полос для хранения контента
С Grid вы можете определить явную сетку с макетом, но спецификация также касается контента, размещенного за пределами объявленной области. При необходимости добавляются дополнительные строки и столбцы
Управление выравниванием Управление выравниванием
CSS Grid содержит функции, позволяющие точно, легко и интуитивно понятно контролировать, как именно элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid Layout
Управление перекрывающимся контентомУправление перекрывающимся контентом
CSS Grid позволяет поместить в одну ячейку сетки более одного элемента. Также области могут частично перекрывать друг друга. Управление перекрывающимся контентом можно удобно контролировать с помощью свойства z-index

Спойлер: Продолжение описания

Уроки курса:
Блок 1. Верстка макета Landing Page (6 часов 36 минут)
Урок 1. Обзор PSD-макета и готовой верстки Landing Page 4:59
Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018 7:27
Урок 3. Установка Node Js, Gulp CLI и инициализация проекта 7:07
Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4 27:22
Урок 5. Создание дополнительных задач по автоматизации 19:17
Урок 6. Подготовка к верстке и детальный обзор проекта 15:55
Урок 7. Создание HTML-разметки для шапки сайта 7:25
Урок 8. Полная стилизация шапки сайта 18:52
Урок 9. Создание разметки для блока баннера 4:58
Урок 10. Стилизация баннера и написание собственного миксина 22:48
Урок 11. HTML-структура блока с преимуществами 7:14
Урок 12. Полная стилизация преимуществ 21:11
Урок 13. HTML-разметка блока с работами 8:04
Урок 14. Написание стилей для блока работ 32:53
Урок 15. Доступность интерактивных элементов и адаптация блока работ 14:05
Урок 16. Написание структуры для информационного блока 3:37
Урок 17. Полная стилизация информационного блока 16:15
Урок 18. Создание разметки для блока скиллов 5:37
Урок 19. Стилизация блока со скиллами 20:08
Урок 20. Анимация линий блока прогресса 13:34
Урок 21. HTML-структура блока новостей 7:51
Урок 22. Полная стилизация блока с новостями 42:25
Урок 23. HTML-разметка блока карусели 4:35
Урок 24. Стилизация карусели и подключение плагина OwlCarousel 30:45
Урок 25. HTML-разметка блока контактов 7:09
Урок 26. Полная стилизация блока контактов 20:17
Урок 27. Полная реализация подвала 4:30

Блок 2. Верстка главной страницы сайта студии (6 часов 25 минут)
Урок 1. Обзор макета 3:56
Урок 2. Экспорт SVG из Adobe Illustrator 2:37
Урок 3. Подготовка к верстке 6:54
Урок 4. HTML-разметка шапки сайта 10:21
Урок 5. Стилизация шапки сайта 33:58
Урок 6. Адаптив шапки сайта 10:49
Урок 7. Улучшение типографики 10:42
Урок 8. Создание разметки для блока меню 3:32
Урок 9. Стилизация блока меню 25:15
Урок 10. Доработка меню 13:29
Урок 11. HTML-разметка блока проектов 19:15
Урок 12. Стилизация блока проектов. Часть 1 17:09
Урок 13. Стилизация блока проектов. Часть 2 18:53
Урок 14. Стилизация блока проектов. Часть 3 44:25
Урок 15. Адаптация блока проектов 32:22
Урок 16. HTML-разметка блока студио 16:26
Урок 17. Стилизация блока студио. Часть 1 23:08
Урок 18. Стилизация блока студио. Часть 2 12:22
Урок 19. Адаптация блока студио 19:32
Урок 20. HTML-разметка блока с новостями 6:47
Урок 21. Стилизация блока новостей 12:46
Урок 22. Адаптация блока новостей 8:34
Урок 23. Разметка подвала 3:13
Урок 24. Полная стилизация подвала сайта 16:43
Урок 25. Подключение Google maps 12:16

Бонусы:
Бонус 1. Премиум-курс «Учебник по основам HTML для начинающих»
Бонус 2. Премиум-курс «Учебник по основам CSS для начинающих»
Бонус 3. Премиум-курс «Верстка сайта для начинающих»
Бонус 4. Премиум-курс «HTML5. Основы»
Бонус 5. Премиум-курс «CSS3. Основы»
Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»
Бонус 7. Премиум-курс «CSS Grid Layout»
Бонус 8. Премиум-курс «Flexbox»
Бонус 9. Премиум-курс «Препроцессор Sass»
Бонус 10. Мини-курс «Построение сеток при помощи Masonry»

Доп. бонусы:
1. Курс «Верстка-Мастер. От теории до верстки популярных шаблонов» стоимостью 7970 руб.
2. Курс «Веб-дизайнер – профессионал. Создание востребованных макетов» стоимостью 5970 руб.

Обзор видеокурса:

Скрытый текст. Открывается зарегистрированным пользователям.

​

​

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