Мы в сети

VK
FB

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

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

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

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

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

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

В видеокурсе находится вся необходимая информация, как для новичков, так и более продвинутых разработчиков, изучив которую, можно начать самостоятельно заниматься версткой сайтов c нуля на достаточно продвинутом уровне. Благодаря курсу новички в сжатые сроки могут изучить HTML, CSS и новейшие технологии верстки, чтобы в последующем постепенно начинать верстать более сложные макеты. В этом пособии на практике используются самые актуальные в 2019 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4. 

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

Технология CSS Grid. Руководство по адаптивной верстке. (Денис Булыга  - Webformyself)

Содержание:

  • Блок №1. Верстка макета Landing Page

В первой части курса вы познакомитесь с макетом Landing Page. Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов. Вы начнете с обзора того, что предстоит сверстать и увидите все составляющие макета. Далее будет показано несколько способов, как из макета Photoshop возможно экспортировать изображения для верстки. Вы увидите возможности автоматизации, пошаговую установку и настройку необходимых плагинов и, конечно же, настройку сборки при помощи Gulp 4, которую вы в дальнейшем сможете использовать для своей работы. Увидите описание HTML-разметки каждого из блоков, стилизацию и адаптацию их под различные разрешения экранов, чтобы верстка выглядела одинаково на различных устройствах. В итоге Вы увидите полноценную верстку Landing Page.

  • Урок 1. Обзор PSD-макета и готовой верстки Landing Page

В этом уроке будет показана готовая верстка страницы Landing Page и разобраны все блоки и элементы из которых состоит данная страница.

  • Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018

В данном уроке будет рассмотрено два способа экспорта изображений из графического редактора Photoshop CC 2018, а также создание иконок при помощи копирования SVG.

  • Урок 3. Установка Node Js, Gulp CLI и инициализация проекта

В текущем уроке Вы узнаете, как установить утилиты Node.js и Gulp CLI глобально на ваш компьютер. Вкратце рассмотрена структура файлов и папок, инициализация проекта, и установка всех необходимых модулей для дальнейшей работы.

  • Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4

В этом видео Вы увидите создание сборки на Gulp 4, в которой производится декомпозиция файлов и настройка таких задач как: компиляция SCSS кода в CSS, конкатенация и минификация скриптов, копирование и удаление файлов проекта.

  • Урок 5. Создание дополнительных задач по автоматизации

В данном видео сборка будет дополнена следующими задачами: минификация изображений, создание SVG-спрайтов, генерация изображений формата Web, установка слежения за изменением различных файлов и запуск сервера и автоматическая перезагрузка при помощи Browsersync.

  • Урок 6. Подготовка к верстке и детальный обзор проекта

Из этого урока вы узнаете, как в несколько шагов установить необходимые модули в проект и произвести его запуск, также детально рассмотрена вся структура проекта. Особое внимание уделяется написанию стилей.

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

В данном видеоуроке увидите написание HTML-разметки шапки сайта, логотипа и блока меню.

  • Урок 8. Полная стилизация шапки сайта

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

  • Урок 9. Создание разметки для блока баннера

В этом видео начнется работа над блоком баннера и создание для него всей необходимой структуру.

  • Урок 10. Стилизация баннера и написание собственного миксина

В текущем уроке Вы увидите написание полностью всего CSS-кода, включая медиа запросы для адаптивности. Также создается собственный миксин для стилизации кнопок.

  • Урок 11. HTML-структура блока с преимуществами

В текущем уроке Вы увидите написание полностью всего CSS-кода, включая медиа запросы для адаптивности. Также создается собственный миксин для стилизации кнопок.

  • Урок 12. Полная стилизация преимуществ

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

  • Урок 13. HTML-разметка блока с работами

В этом видеоуроке Вы узнаете о реализации блока Works.

  • Урок 14. Написание стилей для блока работ

В этом уроке создается необходимая сетка для блока при помощи CSS Grid и верстка элементов согласно макету.

  • Урок 15. Доступность интерактивных элементов и адаптация блока работ

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

  • Урок 16. Написание структуры для информационного блока

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

  • Урок 17. Полная стилизация информационного блока

В этом видео увидите стилизацию и адаптацию при помощи медиа запросов блок Responsive.

  • Урок 18. Создание разметки для блока скиллов

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

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

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

  • Урок 20. Анимация линий блока прогресса

В этом видеоуроке создается JavaScript-функция, при помощи которой будет реализована плавная анимация линий прогресса элементов при прокрутке страницы.

  • Урок 21. HTML-структура блока новостей

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

  • Урок 22. Полная стилизация блока с новостями

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

  • Урок 23. HTML-разметка блока карусели

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

  • Урок 24. Стилизация карусели и подключение плагина OwlCarousel

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

  • Урок 25. HTML-разметка блока контактов

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

  • Урок 26. Полная стилизация блока контактов

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

  • Урок 27. Полная реализация подвала

В этом уроке завершается верстка страницы Landing Page.

  • Блок №2. Верстка главной страницы сайта студии

Во второй части курса показана верстка главной страницы сайта студии. Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов. Этот блок является более сложным по сравнению с предыдущим, т.к. его реализация будет полностью «резиновой», используя при этом адаптивную типографику, SVG-спрайты, ретинизацию изображений и многие другие возможности, о которых вы узнаете в данном блоке. Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков. В результате, используя уже готовую сборку проекта при помощи Gulp 4 из предыдущего блока курса, вы полностью увидите процесс верстки главной страницы сайта студии.

  • Урок 1. Обзор макета

В данном уроке Вы увидите PSD-макет, который в последующих уроках будет верстан. Также вкратце рассказано о некоторых особенностях, которые будут использоваться при его верстке.

  • Урок 2. Экспорт SVG из Adobe Illustrator

В этом видео увидите еще один способ сохранения векторных изображений при помощи графического редактора Adobe Illustrator.

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

В данном видеоуроке Вы познакомитесь со структурой проекта.

  • Урок 4. HTML-разметка шапки сайта

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

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

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

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

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

  • Урок 7. Улучшение типографики

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

  • Урок 8. Создание разметки для блока меню

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

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

В данном уроке увидите написание CSS-стилей для блока меню и кнопки гамбургера.

  • Урок 10. Доработка меню

В этом уроке увидите завершение реализации блока меню с добавлением JavaScript-кода.

  • Урок 11. HTML-разметка блока проектов

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

  • Урок 12. Стилизация блока проектов. Часть 1

В данном видео Вы увидите стилизацию блока проектов. Создается сетка, распределение по ней всех элементов, а также добавление для каждого элемента фонового изображения.

  • Урок 13. Стилизация блока проектов. Часть 2

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

  • Урок 14. Стилизация блока проектов. Часть 3

В этом видео размещается информация внутри элементов на свои места согласно дизайн макета.

  • Урок 15. Адаптация блока проектов

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

  • Урок 16. HTML-разметка блока студио

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

  • Урок 17. Стилизация блока студио. Часть 1

В этом видео увидите начало стилизации блока студио, создание сетки для данного блока и написание CSS для некоторых внутренних элементов.

  • Урок 18. Стилизация блока студио. Часть 2

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

  • Урок 19. Адаптация блока студио

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

  • Урок 20. HTML-разметка блока с новостями

В данном видео увидите начало работы над блоком новостей и создание необходимой HTML-разметки данного блока.

  • Урок 21. Стилизация блока новостей

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

  • Урок 22. Адаптация блока новостей

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

  • Урок 23. Разметка подвала

В данном видеоуроке увидите написание HTML-структуры подвала страницы сайта.

  • Урок 24. Полная стилизация подвала сайта

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

  • Урок 25. Подключение Google maps

В данном видео познакомитесь с API Google Maps, при помощи которого будет подключена и настроена Google-карта для страницы сайта.

БОНУСЫ

  • Бонус 1. Премиум-курс «Учебник по основам HTML для начинающих»

Автор: Андрей Бернацкий

Учебник призван заложить фундамент и дать базовые основы языка гипертекстовой разметки текста HTML всем новичкам, включая наиболее востребованные в верстке теги. Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом объем материалов будет приемлемым для качественного усвоения и запоминания, не забивая и без того перегруженную голову новичка лишними деталями. Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике. В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

  • Бонус 2. Премиум-курс «Учебник по основам CSS для начинающих»

Автор: Андрей Бернацкий

При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS. В учебнике по основам CSS для начинающих подробно изучаются необходимые для создания сайтов CSS-свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что поможет закрепить знания из курса на практике. Разделы CSS, которые изучаются в учебнике: способы подключения CSS к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.

  • Бонус 3. Премиум-курс «Верстка сайта для начинающих»

Автор: Андрей Бернацкий

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

  • Бонус 4. Премиум-курс «HTML5. Основы»

Автор: Андрей Бернацкий

В данном премиум-курсе рассматриваются основы HTML5, наиболее востребованные и актуальные в процессе верстки. HTML5 - это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, о чем детально рассказано в самом курсе. HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками. В уроках курса продемонстрированы важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

  • Бонус 5. Премиум-курс «CSS3. Основы»

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

В данном премиум-курсе рассматриваются основы CSS3, наиболее востребованные и актуальные в процессе верстки. Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов. Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Данный видеокурс от команды Webformyself поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

  • Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»

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

В данном премиальном видеокурсе будут разобраны теоретические основы и практические аспекты, касающихся реализации адаптивной верстки. Адаптивная верстка подразумевает под собой верстку, при которой внешний вид сайта удобен для взаимодействия с пользователем на различных устройствах, будь то планшет, мобильный телефон, ноутбук или настольный компьютер. Иначе говоря, при адаптивной верстке блоки сайта динамически подстраиваются под различные разрешения экрана. Также в уроках курса рассмотрены различные техники при работе с медиазапросами, изображениями, текстом, видео и другими различными элементами.

  • Бонус 7. Премиум-курс «CSS Grid Layout»

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

В уроках премиального видеокурса мы познакомимся с очень популярным модулем под названием CSS Grid Layout, который позволяет строить двумерные сетки и создавать довольно удобные и гибкие пользовательские интерфейсы. В рамках курса будут рассмотрены основные понятия, которые нужно освоить для дальнейшей работы и осознания того из чего состоят сетки. Также мы постепенно погрузимся в изучение работы различных свойств, предназначенных для создания grid-контейнера, разметки, размеров колонок и рядов, именования grid-линий и многих других возможностей для работы с grid-элементами и grid-контейнером. По окончанию теоретической части вас ожидает практика для закрепления полученных знаний. Повторяя шаг за шагом по материалам уроков курса, вы сможете сверстать макет при помощи технологии Grid.

  • Бонус 8. Премиум-курс «Flexbox»

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

В новом премиальном видеокурсе рассматривается CSS-модуль Flexbox, используя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block. Если вы имеете какие-то начальные знания в области верстки, то это будет плюсом при прохождении курса, однако и новички могут осваивать данную технологию с нуля. На протяжении курса изучаются все основные свойства, которые нам предоставляет Flexbox, а также по шагам разобраны необходимые в процессе верстки полезные функции модуля. В каждом уроке разбирается не только теория, но и приводятся примеры, касающиеся изучаемых CSS-свойств Flexbox. В практической части курса показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями.

  • Бонус 9. Премиум-курс «Препроцессор Sass»

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

CSS-препроцессор Sass — это профессиональный инструмент, который должен освоить каждый web-разработчик. Написание кода с его использованием становится более простым и понятным, однако это является далеко не основным преимуществом препроцессора. Первое и, наверное, самое главное преимущество препроцессоров в том, что ваша разработка ускоряется в несколько раз, при этом множество однотипных операций можно выполнить всего лишь одной строкой кода. Помимо этого, появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.

  • Бонус 10. Мини-курс «Построение сеток при помощи Masonry»

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

В данном бонусном мини-курсе вы узнаете о JavaScript-библиотеке Masonry, при помощи которой можно создавать сетку и компактно располагать элементы внутри нее по вертикали, при этом анализируя их высоту. Также узнаете о возможных параметрах данного плагина и увидите подключение и построение сетки для макета из второго блока курса.

  • Страница курса - Технология CSS Grid. Руководство по адаптивной верстке. (Денис Булыга  - Webformyself)
  • Похожие видеокурсы по теме:
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
    Видеокурс Бесплатный видео урок
  • Смотрите бесплатное видео по теме:
    Промо ролики видеокурса Angular 4 быстрый старт, первые результаты. (Владилен Минин - Webformyself)
    Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
    Промо ролики видеокурса VUE JS – быстрый старт, первые результаты. (Владилен Минин - Webformyself)
    Это бесплатный видео курс Верстка сайта на Grid. Быстрый старт. (Денис Булыга  - Webformyself)
    Промо ролики видеокурса Препроцессоры. Быстрый старт. (Владилен Минин - Webformyself)
    Промо ролики видеокурса Создание Telegram бота. (Владилен Минин - Webformyself)

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


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