WebDesign Master
Курсы
CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

Всем привет. Сегодня мы рассмотрим новейшую технику адаптивной верстки сайтов с использованием CSS Grid. Технология совершенно новая и официально стала поддерживаться современными браузерами только в середине 2017 года. Так что данный материал имеет сугубо академическое назначение. Использовать CSS Grid на реальных проектах или нет - решать вам. Однако этот инструмент, спецификация которого еще не остыла после горячего пресса, в некотором роде, является прорывом в создании адаптивных интерфейсов. Интересно? Вперед в будущее!

CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Примеры CSS Grid из видео:

  • Пример №1: https://codepen.io/agragregra/pen/WEPLja
  • Пример №2: https://codepen.io/agragregra/pen/VzggZQ
  • Пример №3: https://codepen.io/agragregra/pen/ZJwwOO
  • Пример №4: https://codepen.io/agragregra/pen/wqNNpw
  • Пример №5: https://codepen.io/agragregra/pen/prGGBe

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP)
  • Создание крутого 3D сайта с анимацией прокрутки
  • Создание потрясающей галереи на HTML, CSS и JavaScript
  • Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном
  • Создание крутого Swiper-слайдера от А до Я | Материалы курса
  • Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы

Разделы

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Верстка
  • CMS

Полезное

  • Настройка WSL
  • Окружение без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp
2022 © WebDesign Master