WebDesign Master
Курсы
CSS Grid: адаптивная верстка реального макета

CSS Grid: адаптивная верстка реального макета

Всем привет, дорогие друзья! Сегодня мы на реальном примере сверстаем крутой адаптивный макет, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и новыми возможностями CSS Grid. В конце видео мы протестируем верстку на реальном мобильном устройстве :-)

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

Результат HTML верстки: Смотреть

Полезные материалы и референсы:

  • Рефересны, исходники: Скачать с GitHub
  • Урок «Gulp для самых маленьких»
  • Урок «CSS Grid: Новый взгляд на адаптивную верстку сайтов»
  • Стартер для верстки данного примера (рекомендую использовать gulp-4): https://github.com/agragregra/Simple-Gulp-Start

Код кнопки из урока (button.sass):

.button
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 15px 45px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 2px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	cursor: pointer
	&::after
		transition: background-color .2s ease
		position: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32

Премиум уроки от 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