Видеокурс "Верстка-Мастер. Полное руководство"
5970
405
0
405

Видеокурс "Верстка-Мастер. Полное руководство"

  • Цена:
    5970

    ПОДРОБНОЕ ОПИСАНИЕ

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

    Овладейте современной адаптивной версткой с нуля а так же изучите новейшие стандарты: HTML5, CSS3, Sass, Gulp, Flexbox, Grid…

    В курсе Верстка-Мастер. Полное руководство реально много практики: три работы в портфолио по итогу. Все только то, что применяется в реальной жизни и востребовано

    • Часть №1. Основы HTML

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

    Узнаем, что такое HTML-документ, из каких частей он состоит. Рассмотрим теги для оформления текста, ссылок, картинок. Рассмотрим теги, с помощью которых можно делать формы для отправки данных. Узнаем, как можно вставить видео и аудио на HTML-страницу и многое другое, что нам еще может понадобиться при создании HTML-страниц.

    • Урок №1. Введение. Установки редактора

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

    • Урок №2. Обзор HTML-документа

    В уроке показано, что такое HTML-документ, из каких частей он состоит, и за что каждая часть отвечает.

    • Урок №3. Теги форматирования текста

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

    • Урок №4. Вставка изображений. Часть 1 - 2

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

    • Урок №5. Работа со ссылками

    Из урока вы узнаете, как делать ссылки на странице, а также какие ссылки бывают и как их создавать.

    • Урок №6. Списки

    Узнаете, как создавать вложенные списки и где они используются.

    • Урок №7. Таблицы

    Из урока вы узнаете, как создавать таблицы для отображения табличных данных, как строить нестандартные таблицы.

    • Урок №8. Формы. Часть 1 - 2

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

    • Урок №9. Вставка видео. Часть 1 - 2

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

    • Урок №10. Вставка аудио

    Из урока вы узнаете, как правильно вставить аудио на HTML-страницу и что для этого нужно предусмотреть.

    • Урок №11. Семантические теги

    В уроке познакомимся с семантическими тегами. Узнаем для чего они нужны, как их использовать и где применять.

    • Часть №2. Основы CSS

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

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

    • Урок №1. Подключение CSS

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

    • Урок №2. Назначение классов

    В данном уроке мы поговорим про назначение классов. Узнаете, для чего нужны классы, как классы назначать, какие классы бывают.

    • Урок №3. Свойства шрифта

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

    • Урок №4. Свойства текста

    Из урока вы узнаете про свойства, которые позволяют оформлять текст. Узнаете, как задавать цвет, выравнивание для текста и так далее.

    • Урок №5. Назначение фона

    В уроке вы увидите, как можно назначать фоновый цвет и фоновое изображение. Также узнаете, как фоновым изображением можно управлять.

    • Урок №6. Ширина, высота

    В данном уроке мы поговорим о ширине и высоте для HTML-блоков. Узнаем, как их назначать, рассмотрим различные варианты поведения контента блока в зависимости от ширины и высоты блока.

    • Урок №7. Рамка

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

    • Урок №8. Отступы

    В уроке мы познакомимся с отступами для блоков HTML. Узнаем, какие отступы могут быть. Увидим полную и сокращенную форму записи для описания отступов.

    • Урок №9. Центрирование

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

    • Урок №10. Единицы измерения

    Единиц измерения в CSS достаточно много. Некоторые практически не применяются, а без каких-то, напротив, не обойтись. Есть абсолютные и относительные единицы измерения и все это и многое другое мы рассмотрим в данном уроке.

    • Урок №11. Выравнивание

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

    • Урок №12. Видимость элементов

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

    • Урок №13. Блочные и строчные элементы

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

    • Урок №14. Позиционирование

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

    • Часть №3. Практика. Верстка сайта креативного агентства

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

    Будет показана верстка простой страницы сайта креативного агентства. При верстке страницы не используется ничего, что бы мы уже не изучили.

    • Урок №1. Введение. Обзор макета

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

    • Урок №2. Подготовка. Нарезка изображений

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

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

    В уроке показано, как определить шапку сайта, какой она должны быть. И создается сама HTML-разметка шапки сайта.

    • Урок №4. CSS-стили для всей страницы

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

    • Урок №5. CSS-стили для шапки сайта

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

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

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

    • Урок №7. CSS-стили для блока текста

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

    • Урок №8. HTML-разметка формы контактов

    Из урока вы узнаете, как создать форму для отправки контактов. Как назначать различные типы input и как сделать кнопку.

    • Урок №9. CSS-стили формы контактов

    В уроке рассматривается назначение стилей для формы. Назначаются стили для различных типов тега input. Рассматриваются особенности задания стилей для кнопки формы.

    • Урок №10. HTML-разметка подвала страницы

    В уроке показано, как создать разметку для подвала сайта.

    • Урок №11. CSS-стили подвала страницы

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

    • Урок №12. Заключение

    В данном уроке подводится итог верстки. Показывается, что можно сделать по-другому, что можно улучшить, что можно сделать проще, усовершенствовав свои знания.

    • Часть №4. Практика. Верстка лендинга мобильного приложения

    В данной части курса подразумевается, что вы уже знаете базовый HTML, CSS и вы умеете их применять при верстке страниц. У вас уже есть знания по более расширенному CSS3, и есть знания по Flex.

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

    • Урок №1. Введение

    В данном уроке мы познакомимся с инструментом для работы с макетами Figma. Рассмотрим варианты использования Figma. Откроем и рассмотрим наш макет в Figma.

    • Урок №2. Подготовка. Экспорт изображений

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

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

    Из данного урока вы узнаете, как создать HTML-разметку для шапки нашего лендинга.

    • Урок №4. Подключение reset.css

    В данном уроке мы познакомимся с файлом reset.css, узнаем для чего он нужен и что в нем находится. А также поговорим о том, где его взять и как он формируется.

    • Урок №5. CSS-стили для шапки сайта. Часть 1 - 2

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

    • Урок №6. HTML-разметка блока «О приложении»

    В данном уроке показано, как создать разметку для блока «О приложении», который состоит из двух колонок.

    • Урок №7. CSS-стили блока «О приложении»

    Из урока вы узнаете, как и какие стили нужно назначить для двухколоночного блока «О приложении», чтобы он выглядел так же, как и на макете.

    • Урок №8. HTML-разметка блока «Возможности»

    В данном уроке показано, как создать разметку для блока «Возможности», который состоит из трех колонок.

    • Урок №9. CSS-стили блока «Возможности»

    Из урока вы узнаете, как и какие стили нужно назначить для трехколоночного блока «Возможности», чтобы он выглядел так же, как и на макете.

    • Урок №10. HTML-разметка блока «Технологии»

    В данном уроке показано, как создать разметку для блока «Технологии», который состоит из четырех колонок.

    • Урок №11. CSS стили блока «Технологии»

    Из урока вы узнаете, как и какие стили нужно назначить для четырехкнопочного блока «Технологии», чтобы он выглядел так же, как и на макете. Кроме этого, узнаете еще один способ центрирования блоков.

    • Урок №12. HTML-разметка блока «Скачать»

    Поскольку данный блок выглядит так же, как и блок «О приложении» (он тоже состоит из двух колонок), мы за основу возьмем код блока «О приложении» и поправим его, чтобы контент блока был правильным.

    • Урок №13. CSS-стили блока «Скачать»

    В данном уроке мы создадим CSS-стили для блока «Скачать», выстроим все блоки так, как этого требует макет и создадим кнопки на скачивание приложения.

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

    В уроке показано, как создать разметку для блока контактов. Как сделать разметку для формы отправки своих данных.

    • Урок №15. CSS-стили блока контактов

    Из урока вы узнаете, как и какие стили назначать для блока контактов. Самое главное в этом уроке – это стили для формы обратной связи и кнопки. Как это все правильно оформить и будет рассмотрено в данном уроке.

    • Урок №16. HTML-разметка подвала страницы

    В данном уроке будет показано, как создать разметку для подвала сайта.

    • Урок №17. CSS-стили подвала страницы

    Из урока вы узнаете, как создать стили для подвала сайта, чтобы он выглядел, как на макете.

    • Урок №18. Адаптация макета. Часть 1 - 4

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

    • Урок №19. Адаптация макета. Часть 5. Заключение

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

    • Часть №5. Практика. Верстка лендинга подбора подарков

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

    У вас уже есть необходимые знания по CSS Grid, препроцессору Sass и Gulp.

    Макет сайта по подбору подарков, который мы с вами будем верстать, создан в популярной программе Figma.

    • Урок №1. Введение

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

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

    В уроке показано, как создать разметку для шапки сайта.

    • Урок №3. CSS-стили для шапки сайта. Часть 1 - 2

    Из урока вы узнаете, как лучше организовать файлы для создания стилей страницы, какие стили нужно назначить для шапки сайта.

    • Урок №4. Адаптация шапки сайта

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

    • Урок №5. HTML-разметка блока «О компании»

    Из урока вы узнаете, как создать разметку для блока «О компании» и что в ней нужно предусмотреть, чтобы можно было центрировать блоки по вертикали и горизонтали.

    • Урок №6. CSS-стили для блока «О компании». Часть 1 - 2

    На протяжении уроков показано, как создавать стили для части страницы «О компании». Поскольку структура блока двунаправленная, будем использовать Grid.

    • Урок №7. Адаптация блока «О компании»

    В данном уроке показано, как можно адаптировать блок «О компании» под различные устройства. Из урока вы узнаете, как при адаптации менять порядок следования блоков и зачем это нужно.

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

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

    • Урок №9. CSS-стили блока подарков

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

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

    Из урока вы узнаете, как адаптировать под различные устройства блок, внутри которого расположено еще четыре блока в один ряд.

    • Урок №11. HTML-разметка блока регистрации

    В данном уроке показано, как создать разметку для блока и как сделать кнопки регистрации.

    • Урок №12. CSS-стили блока регистрации

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

    • Урок №13. Адаптация блока регистрации

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

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

    В данном уроке показано, как создать разметку для нестандартного блока постов блога.

    • Урок №15. CSS-стили блока постов. Часть 1 - 2

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

    • Урок №16. Адаптация блока постов

    Из данного урока вы узнаете, как адаптировать блок с постами под различные разрешения. Узнаете, как при адаптации менять порядок следования блоков.

    • Урок №17. HTML-разметка подвала страницы

    В данном уроке показано, как создать разметку для подвала сайта.

    • Урок №18. CSS-стили подвала страницы

    Из урока вы узнаете, как создать стили для подвала сайта, чтобы он выглядел, как на макете.

    • Урок №19. Заключение

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

ПОХОЖИЕ ТОВАРЫ