Видеокурс "Верстка-Мастер. Полное руководство"
-
Тематика HTML и CSS | Веб – дизайн | Веб – разработка | Продающие страницы, Landing Page | Создание сайтов и блогов
Издательство
Автор
ПОДРОБНОЕ ОПИСАНИЕ
Автор(ы): Андрей Бернацкий
Овладейте современной адаптивной версткой с нуля а так же изучите новейшие стандарты: 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. Заключение
В данном уроке мы подведем итог по верстке наших макетов. Поговорим о том, как продолжить совершенствовать знания, какие есть способы повышения уровня практической верстки.