Полные новички и студенты
Курс подойдет полным новичкам в сайтостроении, студентам и тем, кто решил сменить профессию, связать свою жизнь с веб-разработкой, вёрсткой и веб-дизайном
Как и куда мы будем двигаться
Подробная программа курса
Часть 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.
Заключение
В данном уроке мы подведем итог по верстке наших макетов. Поговорим о том, как продолжить совершенствовать знания, какие есть способы повышения уровня практической верстки.
