В этом видеокурсе находится вся необходимая информация, как для новичков, так и более продвинутых разработчиков, изучив которую, можно начать самостоятельно заниматься версткой сайтов c нуля на достаточно продвинутом уровне. Благодаря курсу новички в сжатые сроки могут изучить HTML, CSS и новейшие технологии верстки, чтобы в последующем постепенно начинать верстать более сложные макеты.
CSS Grid — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки. Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого. Она представляет собой набор горизонтальных и вертикальных линий, которые образуют сетку, состоящую из рядов и колонок. Технология основана на разделении пространства для макета на столбцы и строки, а также на использовании предсказуемого поведения размеров. Grid позволяет точно позиционировать и масштабировать блоки контента в областях сетки, получаемых при пересечении этих столбцов и строк. Таким образом, получаем очень гибкое поведение верстки при адаптации.
Курс включает в себя 52 урока общей продолжительностью чуть более 13 часов без учета бонусов, в которых содержится все необходимая и исчерпывающая теоретическая база для старта в изучении материалов курса! Вы получите два практических блока в которых показана верстка двух PSD-макетов с нуля с использованием последних Web-технологий.
Блок №1. Верстка макета Landing Page В первой части курса вы познакомитесь с макетом Landing Page. Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов. Вы начнете с обзора того, что предстоит сверстать и увидите все составляющие макета. Далее будет показано несколько способов, как из макета Photoshop возможно экспортировать изображения для верстки. Вы увидите возможности автоматизации, пошаговую установку и настройку необходимых плагинов и, конечно же, настройку сборки при помощи Gulp 4, которую вы в дальнейшем сможете использовать для своей работы. Увидите описание HTML-разметки каждого из блоков, стилизацию и адаптацию их под различные разрешения экранов, чтобы верстка выглядела одинаково на различных устройствах. В итоге Вы увидите полноценную верстку Landing Page.
Блок №2. Верстка главной страницы сайта студии Во второй части курса показана верстка главной страницы сайта студии. Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов. Этот блок является более сложным по сравнению с предыдущим, т.к. его реализация будет полностью «резиновой», используя при этом адаптивную типографику, SVG-спрайты, ретинизацию изображений и многие другие возможности, о которых вы узнаете в данном блоке. Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков. В результате, используя уже готовую сборку проекта при помощи Gulp 4 из предыдущего блока курса, вы полностью увидите процесс верстки главной страницы сайта студии.
Бонусы: Верстка-Мастер. От теории до верстки популярных шаблонов Веб-дизайнер – профессионал. Создание востребованных макетов
