Курс на 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. Исходники и ссылки