Мини - Курс "Верстка сайта на Grid. Быстрый старт"

Описание
Программа курса
Видео
События

Тематика
Веб – разработка | Создание сайтов и блогов

Издательство

WebForMySelf

Автор

Денис Булыга

БЕСПЛАТНО

ПРОЙТИ ОБУЧЕНИЕ

ПОДРОБНОЕ ОПИСАНИЕ

Автор(ы): Денис Булыга - 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-структуры и заканчивая полным написанием стилей.
Верстка сайта на Grid. Урок №1. Подготовка к верстке. (Денис Булыга - Webformyself)
06 августа 2019
Летняя распродажа 2019 года от команды WebForMySelf