[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 руб. Обзор видеокурса: Скрытый текст. Открывается зарегистрированным пользователям. ​ ​