- Урок 1. Подготовка к верстке
В данном видеоуроке Вы познакомитесь с макетом, который в последующих уроках будет сверстан. Увидите определение структуры проекта, способы экспорта изображений из фотошоп, в том числе и экспорта SVG-иконок. Показано скачивание используемых шрифтов для верстки, конвертация их при помощи сервиса Fontsquirrel и подключение локально к проекту.
- Урок 2. HTML-разметка для шапки сайта
В этом видео приступим к верстке и первоначально опишем HTML-структуру шапки сайта.
- Урок 3. Стилизация шапки сайта
В этом видео показана стилизация шапки сайта. Увидите, где использовать CSS Grid для по-строения сетки. Выстраивается верхняя часть шапки сайта в две колонки, при этом само меню будет реализовано при помощи Flexbox.
- Урок 4. Адаптивность шапки сайта
В этом видеоуроке увидите завершение работы над шапкой сайта, адаптировав ее под различные разрешения при помощи медиазапросов.
- Урок 5. Разметка для блока контента
В этом видео увидите написание HTML-разметки для блока контента.
- Урок 6. Стилизация блока с контентом
В данном видеоуроке показана стилизация блока с контентом. Увидите реализацию сетки при помощи CSS Grid по которой будут выстроены элементы согласно макету, а также добавлены стили, касающиеся внешнего вида элементов.
- Урок 7. Адаптивность блока с контентом
В данном видеоуроке доделывается блок с контентом с адаптацией его под различные разрешения при помощи медиазапросов.
- Урок 8. Полная верстка блока Instagram
В этом видеоуроке увидите реализацию верстки блока Instagram, а также добавление анимации для стрелки в шапке сайте и реализацию плавной прокрутки при клике на нее.
В этом видеоуроке завершается верстка страницы сайта. Увидите верстку подвала: начиная от HTML-структуры и заканчивая полным написанием стилей.
