Последние поступления

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

    Последние новости

    • Мастер-класс. Основы цветокоррекции 2.0 в Adobe Photoshop. (Евгений Карташов)
    • Скидка 40%. Программирование на JavaScript с Нуля до Гуру 2.0. (Михаил Русаков)
    • Скидка на видеокурсы - Волшебные коллажи, 12 сказочных коллажей, Fatalism Start 2020, Fatalism Neon, Fatalism Art. (Фотошоп-мастер)

      Мы в сети

      VK
      FB

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

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

      Видеокурс
      Бесплатный видеокурс "Верстка сайта на 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)
      Страница курса - Верстка сайта на Grid. Быстрый старт. (Денис Булыга  - Webformyself)

      ПОПУЛЯРНЫЕ КНИГИ, КУРСЫ И ТРЕНИНГИ

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

      БЕСПЛАТНОЕ ВИДЕО, МИНИ - КУРСЫ

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