Если учиться, то только на практике и с максимальным результатом — так, как на этом курсе. Практикующий разработчик объяснит вам все основы создания веб-страниц. В каждом модуле вы сможете попрактиковаться в HTML и CSS, а в конце курса получите грамотно свёрстанный вами сайт.
- GitHub, Figma, макет
Знакомство с GitHub.Создание и клонирование репозитория.Изменения, commit, push.Макет и знакомство с Figma.Картинки и их экспорт.Расширения VS Code.Форматы картинок, иконки. Знакомство с index.html.Исходники первого модуля. Задание для самопроверки.
- Позиционирование и поведение
Разбор задания: оформляем popup.Позиционирование, position absolute.Псевдоэлементы. Position fixed. Позиционирование popup.Поведение элементов. Кнопки и ссылки.Практика. Кнопки и ссылки.Делаем поведение в блоке service.Исходники модуля. Задание для самопроверки.
- Флексбоксы
Разбор задания «Вёрстка блока About».Разбор задания «Блоки Clients, Advantages».Разбор задания «Блок Footer».Флексбокс: концепция и применение.Флексбокс: управление по осям.Флексбокс: order, flex-direction, flex-wrap.Делаем кнопку и блок About на флексах. Часть 1.Делаем кнопку и блок About на флексах. Часть 2.Исходники модуля. Задание для самопроверки.
- Позиционирование и поведение
Разбор задания: оформляем popup.Позиционирование, position absolute.Псевдоэлементы. Position fixed. Позиционирование popup.Поведение элементов. Кнопки и ссылки.Практика. Кнопки и ссылки.Делаем поведение в блоке service.Исходники модуля. Задание для самопроверки.
- Завершение проекта
Блок About.Блок Clients.Футер.Ревью.Popup.Inputs.Radio Buttons.JS Popup.Исходники и ссылки.
- Теги и начало вёрстки макета
Базовые теги. Консоль devtools.Разновидности тегов. Табличные теги.Заголовки и списки.Разметка блока Header.Разметка секций услуг. Тег section.Разметка секции «Отзывы».Разметка подвала (footer). Тег div.Подведение итогов.Исходники модуля. Задание для самопроверки.
- GitHub, Figma, макет
Знакомство с GitHub.Создание и клонирование репозитория.Изменения, commit, push.Макет и знакомство с Figma.Картинки и их экспорт.Расширения VS Code.Форматы картинок, иконки. Знакомство с index.html.Исходники первого модуля. Задание для самопроверки.
- Формы, группировки, селекторы
Разбор задания «Блоки services и clients».Разбор задания «Блок „Преимущества“».Разбор задания «Блок футера».Формы. Поля ввода и их типы.Формы. Checkbox, Label.Группировка. Fieldset, legend, radiobutton.Атрибуты value, checked, placeholder. Отправка формы.Селекторы и их вес.Форма с элементами ввода.Placeholder и кнопки.Исходники модуля. Задание для самопроверки.
- Отступы, devtools, блочные элементы
Разбор задания.Стили и devtools. Вкладки styles & computed.Блочные и строчные элементы.Padding.Margin.Практика: перенос отступов в различных блоках с макета.Исходники модуля. Задания для самопроверки.
- Флексбоксы
Разбор задания «Вёрстка блока About».Разбор задания «Блоки Clients, Advantages».Разбор задания «Блок Footer».Флексбокс: концепция и применение.Флексбокс: управление по осям.Флексбокс: order, flex-direction, flex-wrap.Делаем кнопку и блок About на флексах. Часть 1.Делаем кнопку и блок About на флексах. Часть 2.Исходники модуля. Задание для самопроверки.
- Формы, группировки, селекторы
Разбор задания «Блоки services и clients».Разбор задания «Блок „Преимущества“».Разбор задания «Блок футера».Формы. Поля ввода и их типы.Формы. Checkbox, Label.Группировка. Fieldset, legend, radiobutton.Атрибуты value, checked, placeholder. Отправка формы.Селекторы и их вес.Форма с элементами ввода.Placeholder и кнопки.Исходники модуля. Задание для самопроверки.
- Отступы, devtools, блочные элементы
Разбор задания.Стили и devtools. Вкладки styles & computed.Блочные и строчные элементы.Padding.Margin.Практика: перенос отступов в различных блоках с макета.Исходники модуля. Задания для самопроверки.
- Завершение проекта
Блок About.Блок Clients.Футер.Ревью.Popup.Inputs.Radio Buttons.JS Popup.Исходники и ссылки.
- Теги и начало вёрстки макета
Базовые теги. Консоль devtools.Разновидности тегов. Табличные теги.Заголовки и списки.Разметка блока Header.Разметка секций услуг. Тег section.Разметка секции «Отзывы».Разметка подвала (footer). Тег div.Подведение итогов.Исходники модуля. Задание для самопроверки.
- Знакомство с CSS
Введение в стили CSS.Практика: добавляем и применяем CSS.Перенос с макета ссылок и цветов.Перенос шрифтов.Исходники модуля. Задание для самопроверки.
- Знакомство с CSS
Введение в стили CSS.Практика: добавляем и применяем CSS.Перенос с макета ссылок и цветов.Перенос шрифтов.Исходники модуля. Задание для самопроверки.
