Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Видеокурс
Бесплатный видеокурс "Верстка сайта на Grid. Быстрый старт ". (Денис Булыга - Webformyself)
Бесплатный видео урок

Бесплатный видео урок Бесплатный видеокурс "Верстка сайта на Grid. Быстрый старт ". (Денис Булыга - Webformyself)

Страница автора - Денис Булыга  - Webformyself
Страница автора

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

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

Смотреть видео:

Верстка сайта на Grid. Урок №1. Подготовка к верстке. (Денис Булыга - Webformyself)

Содержание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Страница курса - Верстка сайта на Grid. Быстрый старт. (Денис Булыга  - Webformyself)
  • Похожие видеокурсы по теме:
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видеокурс
  • Смотрите бесплатное видео по теме:
    Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)
    Промо ролики видеокурса JavaScript. Быстрый старт. (Владилен Минин - Webformyself)
    Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
    Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
    Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
    Это бесплатный видео курс Верстка сайта на Grid. Быстрый старт. (Денис Булыга  - Webformyself)

Добавить комментарий


Защитный код
Обновить