Учись, когда удобно

Вёрстка сайта на Grid. Быстрый старт

Вёрстка сайта на Grid. Быстрый старт

Видео-курс по созданию сайтов своими руками Дениса Булыги под названием „Вёрстка сайта на Grid. Быстрый старт“ с канала WebForMySelf.

В этом цикле уроков адаптивной вёрстки автор курса покажет вёрстку PSD-макета с использованием современных Web-технологий на чистом HTML и CSS без применения препроцессоров, средств автоматизации и других каких-либо дополнительных возможностей.

Макет, в целом, является довольно простым. На его примере мы разберём множество современных возможностей. А именно, при вёрстке данного макета сайта мы будем использовать Flexbox и CSS Grid Layout.

Для каждого элемента будут использоваться плавные эффекты при наведении. Создадим CSS-анимацию, реализуем плавный переход при клике на анимированную стрелку. Для социальных иконок в подвале будем использовать SVG-спрайт. И немного времени уделим доступности.

Все эти возможности будут реализованы только на основе HTML и CSS. То есть, никаких сборок, проектов, автоматизаций, препроцессоров и прочего применяться в этом миникурсе не будет.

Давайте начинать…

Содержание видео-курса „Вёрстка сайта на Grid. Быстрый старт“:

  1. Подготовка к вёрстке
  2. HTML-разметка для шапки сайта
  3. Стилизация шапки сайта
  4. Адаптивность шапки сайта
  5. Разметка для блока контента
  6. Стилизация блока с контентом
  7. Адаптивность блока с контентом
  8. Полная вёрстка блока Instagram
  9. Вёрстка подвала

Год

Страна

Язык

Продолжительность