2. Каталог курсов
  3. Архив курсов
  4. /Бесплатный видеокурс Верстка сайта на Grid. Быстрый старт (Денис Булыга, WebForMySelf)

Бесплатный видеокурс "Верстка сайта на Grid. Быстрый старт "

БЕСПЛАТНО
Бесплатный видеокурс Верстка сайта на Grid. Быстрый старт (Денис Булыга, WebForMySelf)

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

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

    • Урок 1. Подготовка к верстке

    В данном видеоуроке Вы познакомитесь с макетом, который в последующих уроках будет сверстан. Увидите определение структуры проекта, способы экспорта изображений из фотошоп, в том числе и экспорта SVG-иконок. Показано скачивание используемых шрифтов для верстки, конвертация их при помощи сервиса Fontsquirrel и подключение локально к проекту.

    • Урок 2. HTML-разметка для шапки сайта

    В этом видео приступим к верстке и первоначально опишем HTML-структуру шапки сайта.

    • Урок 3. Стилизация шапки сайта

    В этом видео показана стилизация шапки сайта. Увидите, где использовать CSS Grid для по-строения сетки. Выстраивается верхняя часть шапки сайта в две колонки, при этом само меню будет реализовано при помощи Flexbox.

    • Урок 4. Адаптивность шапки сайта

    В этом видеоуроке увидите завершение работы над шапкой сайта, адаптировав ее под различные разрешения при помощи медиазапросов.

    • Урок 5. Разметка для блока контента

    В этом видео увидите написание HTML-разметки для блока контента.

    • Урок 6. Стилизация блока с контентом

    В данном видеоуроке показана стилизация блока с контентом. Увидите реализацию сетки при помощи CSS Grid по которой будут выстроены элементы согласно макету, а также добавлены стили, касающиеся внешнего вида элементов.

    • Урок 7. Адаптивность блока с контентом

    В данном видеоуроке доделывается блок с контентом с адаптацией его под различные разрешения при помощи медиазапросов.

    • Урок 8. Полная верстка блока Instagram

    В этом видеоуроке увидите реализацию верстки блока Instagram, а также добавление анимации для стрелки в шапке сайте и реализацию плавной прокрутки при клике на нее.

    • Урок 9. Верстка подвала

    В этом видеоуроке завершается верстка страницы сайта. Увидите верстку подвала: начиная от HTML-структуры и заканчивая полным написанием стилей.

АКЦИИ, РАСПРОДАЖИ, СОБЫТИЯ