Курс на Stepik
Обложка курса «Основы вёрстки с HTML и CSS» на Stepik
990 ₽

Основы вёрстки с HTML и CSS ★ 4.167

Открыть на
STEPIK.ORG

Хотите научиться верстать сайты, используя HTML и CSS? Этот курс проведёт вас через все основы, позволяющие с лёгкостью применять HTML и CSS на практике. Вы сверстаете на практике сайт по макету, переданному вам дизайнером, получив в конце курса грамотно свёрстанный сайт. Если вы программист, этот курс позволит вам продвинуться в изучении front-end разработки, а также перейти к изучению back-end разработки, которая так или иначе зачастую касается фронта.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Основы вёрстки с HTML и CSS»Учеников на курсе 702
Сертификаты, выданные на курсе «Основы вёрстки с HTML и CSS»Сертификатов выдано 0
Отзывы о курсе «Основы вёрстки с HTML и CSS»Отзывов получено 6
Рейтинг курса «Основы вёрстки с HTML и CSS»Рейтинг курса 4.167
Уроки в курсе «Основы вёрстки с HTML и CSS»Количество уроков 66
Время прохождения курса «Основы вёрстки с HTML и CSS»Время прохождения курса —
Стоимость курса «Основы вёрстки с HTML и CSS»Стоимость курса 990 ₽ —
Обновления курса «Основы вёрстки с HTML и CSS»Обновления курса — —
Дата публикации курса «Основы вёрстки с HTML и CSS»Дата публикации курса — ———
Последнее обновление курса «Основы вёрстки с HTML и CSS»Последнее обновление — ———
Сложность easy — ———

Содержание курса

Разделы в курсе «Основы вёрстки с HTML и CSS» 8 разделов Уроки в курсе «Основы вёрстки с HTML и CSS» 66 уроков Время прохождения курса «Основы вёрстки с HTML и CSS» 11 ч. Последнее обновление курса «Основы вёрстки с HTML и CSS» обн. 1 год назад

GitHub, Figma, Макет

8 уроков
1. Знакомство с GitHub ↗
2. Создание и клонирование репозитория ↗
3. Изменения, commit, push ↗
4. Макет и знакомство с Figma ↗
5. Картинки и их экспорт ↗
6. Расширения VSCode ↗
7. Форматы картинок, иконки. Знакомство с index.html ↗
8. Исходники первого модуля. Домашнее задание ↗

Теги и начало вёрстки макета

9 уроков
1. Базовые теги. Консоль devtools ↗
2. Разновидности тегов. Табличные теги. ↗
3. Заголовки и списки ↗
4. Разметка блока Header ↗
5. Разметка секций услуг. Тег section. ↗
6. Разметка секции "Отзывы" ↗
7. Разметка подвала (footer). Тег div. ↗
8. Подведение итога ↗
9. Исходники модуля и Домашнее задание ↗

Знакомство с CSS

5 уроков
1. Введение в стили CSS ↗
2. Практика: добавляем и применяем CSS ↗
3. Перенос с макета ссылок и цветов ↗
4. Перенос шрифтов ↗
5. Исходники и Домашнее задание ↗

Отступы, devtools, блочные элементы

7 уроков
1. Разбор ДЗ ↗
2. Стили и devtools. Вкладки styles & computed ↗
3. Блочные и строчные элементы ↗
4. Padding ↗
5. Margin ↗
6. Практика: перенос отступов в различных блоках с макета ↗
7. Исходники и Домашнее Задание ↗

Флексбоксы

9 уроков
1. Разбор ДЗ - Вёрстка блока About ↗
2. Разбор ДЗ - Блоки Clients, Advantages ↗
3. Разбор ДЗ - Блок Footer ↗
4. Флексбокс. Концепция и зачем применяется ↗
5. Флексбокс. Управление по осям ↗
6. Флексбокс. order, flex-direction, flex-wrap ↗
7. Делаем кнопку и блок About на флексах. Часть 1 ↗
8. Делаем кнопку и блок About на флексах. Часть 2 ↗
9. Исходники и Домашнее Задание ↗

Формы, группировки, селекторы

12 уроков
1. Разбор ДЗ Блоки services и clients ↗
2. Разбор ДЗ - Блок Преимущества ↗
3. Разбор ДЗ - Блок футера ↗
4. Формы. Поля ввода и их типы ↗
5. Формы. Checkbox, Label ↗
6. Группировка. Fieldset, legend, radiobutton ↗
7. Атрибуты value, checked, placeholder. Отправка формы ↗
8. Селекторы и их вес ↗
9. Форма с элементами ввода ↗
10. placeholder и кнопки ↗
11. Пояснение к ДЗ ↗
12. Исходники и Домашнее Задание ↗

Позиционирование и поведение

7 уроков
1. Разбор ДЗ: Оформляем popup ↗
2. Позиционирование, position absolute ↗
3. Псевдоэлементы. position fixed. Позиционирование popup ↗
4. Поведение элементов. Кнопки и ссылки ↗
5. Практика. Кнопки и ссылки. ↗
6. Делаем поведение в блоке service ↗
7. Исходники и Домашнее Задание ↗

Завершение проекта

9 уроков
1. Блок About ↗
2. Блок Clients ↗
3. Футер ↗
4. Ревью ↗
5. Popup ↗
6. Inputs ↗
7. Radio Buttons ↗
8. JS Popup ↗
9. Исходники и ссылки ↗