Курс на Stepik
Обложка курса «HTML и CSS — полный курс по вёрстке с нуля» на Stepik
3 999 ₽

HTML и CSS — полный курс по вёрстке с нуля ★ 4.826

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

Изучите все особенности HTML5 и CSS3, чтобы создавать современные адаптивные сайты на flexbox и CSS Grid

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «HTML и CSS — полный курс по вёрстке с нуля»Учеников на курсе 360
Сертификаты, выданные на курсе «HTML и CSS — полный курс по вёрстке с нуля»Сертификатов выдано 154
Отзывы о курсе «HTML и CSS — полный курс по вёрстке с нуля»Отзывов получено 23
Рейтинг курса «HTML и CSS — полный курс по вёрстке с нуля»Рейтинг курса 4.826
Уроки в курсе «HTML и CSS — полный курс по вёрстке с нуля»Количество уроков 168
Тесты в курсе «HTML и CSS — полный курс по вёрстке с нуля»Количество квизов 70
Время прохождения курса «HTML и CSS — полный курс по вёрстке с нуля»Время прохождения курса —
Стоимость курса «HTML и CSS — полный курс по вёрстке с нуля»Стоимость курса 3 999 ₽ —
Обновления курса «HTML и CSS — полный курс по вёрстке с нуля»Обновления курса — —
Дата публикации курса «HTML и CSS — полный курс по вёрстке с нуля»Дата публикации курса — ———
Последнее обновление курса «HTML и CSS — полный курс по вёрстке с нуля»Последнее обновление — ———
Сложность easy — ———

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

Разделы в курсе «HTML и CSS — полный курс по вёрстке с нуля» 23 раздела Уроки в курсе «HTML и CSS — полный курс по вёрстке с нуля» 168 уроков Тесты в курсе «HTML и CSS — полный курс по вёрстке с нуля» 70 тестов Время прохождения курса «HTML и CSS — полный курс по вёрстке с нуля» 20 ч. Последнее обновление курса «HTML и CSS — полный курс по вёрстке с нуля» обн. 1 год назад

1. Введение

5 уроков
Открытый
1.1 HTML и CSS ↗
972
324
5м 55с
21
Открытый
1.2 Как устроен курс ↗
1 031
293
9м 55с
25
Открытый
1.3 Обзор проектов ↗
763
266
2м 30с
13
Открытый
1.4 Обзор курсов ↗
679
679
2м 31с
12
Открытый
1.5 Перенос курса ↗
324
324
0м 17с
19

2. Настройка окружения

3 урока
Закрытый
2.1 Настройка окружения ↗
318
168
4м 27с
20
Закрытый
2.2 Настройки VSCode ↗
310
171
4м 28с
15
Закрытый
2.3 Создание первой страницы ↗
305
165
4м 46с
11

3. Знакомство с HTML

12 уроков
Закрытый
3.1 Структура HTML ↗
314
178
6м 59с
18
Закрытый
3.2 Параграфы и переносы ↗
308
171
5м 0с
16
Закрытый
3.3 Заголовки ↗
300
166
7м 45с
18
Закрытый
3.4 Инспектор Chrome ↗
297
163
6м 30с
15
Закрытый
3.5 Структура документа ↗
294
163
7м 28с
17
Закрытый
3.6 Списки ↗
292
156
7м 32с
16
Закрытый
3.7 Упражнение - Вёрстка статьи ↗
296
155
5м 1с
17
Закрытый
3.8 Ссылки ↗
285
152
5м 5с
18
Закрытый
3.9 Изображения ↗
274
146
7м 20с
14
Закрытый
3.10 Комментарии ↗
272
144
4м 36с
15
Закрытый
3.11 Упражнение - Вёрстка статьи 2 ↗
274
142
3м 28с
15
Закрытый
3.12 Тест - Знакомство с HTML ↗
279
269
1м 59с
9

4. Семантика и HTML5

8 уроков
Закрытый
4.1 Что такое HTML5? ↗
276
276
5м 37с
16
Закрытый
4.2 Блочные и строчные элементы ↗
270
140
7м 22с
13
Закрытый
4.3 Sup и sub ↗
267
133
4м 43с
11
Закрытый
4.4 Сущности HTML ↗
263
133
5м 13с
10
Закрытый
4.5 Семантическая разметка ↗
255
127
8м 36с
17
Закрытый
4.6 Упражнение - Разметка сайта ↗
258
130
11м 46с
16
Закрытый
4.7 Screen Readers ↗
253
128
9м 28с
11
Закрытый
4.8 Тест - Семантика и HTML5 ↗
257
253
1м 58с
10

5. Таблицы

5 уроков
Закрытый
5.1 Создание таблиц ↗
258
127
9м 9с
15
Закрытый
5.2 Доступность таблиц ↗
247
128
6м 35с
12
Закрытый
5.3 Colspan, rowspan ↗
245
123
6м 11с
12
Закрытый
5.4 Упражнение - Вёрстка таблицы ↗
241
114
7м 11с
13
Закрытый
5.5 Тест - Таблицы ↗
241
235
1м 39с
7

6. Формы

12 уроков
Закрытый
6.1 Form ↗
248
131
10м 30с
15
Закрытый
6.2 Input ↗
241
125
8м 33с
17
Закрытый
6.3 Label ↗
233
122
10м 29с
9
Закрытый
6.4 Кнопки ↗
230
120
7м 45с
11
Закрытый
6.5 Name ↗
232
120
8м 49с
11
Закрытый
6.6 Упражнение - Поиск YouTube ↗
231
116
5м 34с
10
Закрытый
6.7 Radio, Checkbox, Select ↗
224
112
11м 56с
11
Закрытый
6.8 Range ↗
220
220
4м 16с
10
Закрытый
6.9 Textarea ↗
219
219
4м 31с
8
Закрытый
6.10 Валидация форм ↗
224
110
14м 44с
12
Закрытый
6.11 Упражнение - Форма контактов ↗
220
108
7м 53с
12
Закрытый
6.12 Тест - Формы ↗
222
213
1м 18с
9

7. Основы CSS

8 уроков
Закрытый
7.1 Для чего нужен CSS ↗
227
114
6м 10с
13
Закрытый
7.2 Способы стилизации ↗
221
113
10м 44с
11
Закрытый
7.3 Цвет и фон ↗
216
114
5м 1с
12
Закрытый
7.4 Работа с цветами ↗
215
111
14м 39с
10
Закрытый
7.5 Упражнение - Цвета формы ↗
212
108
6м 47с
11
Закрытый
7.6 Стилизация текста ↗
211
109
12м 7с
12
Закрытый
7.7 Font family ↗
212
111
10м 38с
13
Закрытый
7.8 Тест - Основы CSS ↗
219
210
1м 58с
8

8. Работа с Figma

4 урока
Закрытый
8.1 Разбор интерфейса ↗
215
106
10м 44с
12
Закрытый
8.2 Компоненты и свойства ↗
194
100
11м 12с
8
Закрытый
8.3 Экспорт графики ↗
190
100
8м 43с
6
Закрытый
8.4 Измерение расстояний ↗
188
99
4м 27с
9

9. CSS Selectors

8 уроков
Закрытый
9.1 Выбор элементов ↗
200
106
6м 58с
11
Закрытый
9.2 ID элемента ↗
195
105
6м 38с
10
Закрытый
9.3 Выбор по классу ↗
192
105
6м 1с
13
Закрытый
9.4 Выбор по атрибуту ↗
193
105
5м 46с
12
Закрытый
9.5 Упражнение - Стиль страницы ↗
191
97
10м 30с
9
Закрытый
9.6 Дочерние элементы ↗
188
101
7м 21с
10
Закрытый
9.7 Соседние элементы ↗
190
99
4м 11с
10
Закрытый
9.8 Тест - CSS Selectors ↗
192
190
0м 29с
5

10. Псевдоклассы и элементы

6 уроков
Закрытый
10.1 Псевдоклассы ↗
191
99
11м 53с
10
Закрытый
10.2 Псевдоклассы с параметрами ↗
186
98
9м 36с
9
Закрытый
10.3 Псевдоэлементы ↗
184
97
6м 24с
9
Закрытый
10.4 Стили списков ↗
182
93
9м 41с
9
Закрытый
10.5 Упражнение - Дизайн списка ↗
177
93
7м 16с
8
Закрытый
10.6 Тест - Псевдоклассы и элементы ↗
181
179
1м 39с
4

11. Каскад

5 уроков
Закрытый
11.1 Каскад CSS ↗
185
91
7м 57с
10
Закрытый
11.2 Специфичность стилей ↗
179
91
15м 55с
12
Закрытый
11.3 Important ↗
176
93
6м 5с
9
Открытый
11.4 Наследование в CSS ↗
392
133
8м 42с
8
Закрытый
11.5 Тест - Каскад ↗
179
174
1м 57с
4

12. Блочная модель

7 уроков
Закрытый
12.1 О блочной модели ↗
183
92
5м 9с
9
Закрытый
12.2 Ширина и высота ↗
168
91
9м 57с
7
Закрытый
12.3 Границы ↗
169
87
12м 17с
8
Закрытый
12.4 Padding ↗
165
88
9м 31с
7
Закрытый
12.5 Margin ↗
162
87
5м 17с
6
Закрытый
12.6 Упражнение - Добавление отступов ↗
166
83
18м 23с
7
Закрытый
12.7 Тест - Блочная модель ↗
167
162
1м 0с
6

13. Поток документа

7 уроков
Закрытый
13.1 Поток документа ↗
168
89
5м 41с
8
Закрытый
13.2 Float ↗
164
90
9м 57с
8
Закрытый
13.3 Display ↗
163
88
11м 3с
7
Закрытый
13.4 Position ↗
164
87
15м 0с
8
Закрытый
13.5 Text-align ↗
161
87
6м 59с
9
Закрытый
13.6 Упражнение - Label формы ↗
156
83
18м 51с
6
Закрытый
13.7 Тест - Поток документа ↗
160
154
1м 7с
6

14. Единицы измерения

5 уроков
Закрытый
14.1 Проценты ↗
161
84
1м 43с
9
Закрытый
14.2 Em ↗
155
82
8м 14с
7
Закрытый
14.3 Rem ↗
154
82
6м 36с
8
Закрытый
14.4 Vh и vw ↗
152
80
6м 9с
8
Закрытый
14.5 Тест - Единицы измерения ↗
157
151
1м 8с
5

15. Анимация

6 уроков
Закрытый
15.1 Transition ↗
157
79
8м 16с
10
Закрытый
15.2 Transition timing functions ↗
144
77
11м 49с
13
Закрытый
15.3 Анализ анимации ↗
146
75
4м 24с
7
Закрытый
15.4 Transform ↗
145
77
1м 45с
7
Закрытый
15.5 Animation ↗
146
78
11м 11с
7
Закрытый
15.6 Тест - Анимация ↗
150
144
1м 55с
4

16. Адаптивная вёрстка

8 уроков
Закрытый
16.1 Что такое адаптивная вёрстка ↗
152
78
5м 29с
7
Закрытый
16.2 Media выражения ↗
146
79
9м 58с
11
Закрытый
16.3 Max и min width ↗
143
74
6м 48с
11
Закрытый
16.4 Шрифты и vmin ↗
143
74
4м 18с
5
Закрытый
16.5 Calc ↗
142
77
6м 20с
8
Закрытый
16.6 Min и max ↗
138
73
6м 35с
8
Закрытый
16.7 Clamp ↗
137
72
5м 27с
7
Закрытый
16.8 Тест - Адаптивная вёрстка ↗
143
138
1м 45с
5

17. CSS Flexbox

16 уроков
Закрытый
17.1 О flexbox ↗
150
76
4м 55с
10
Закрытый
17.2 Введение во Flexbox ↗
145
74
5м 50с
10
Закрытый
17.3 Работа с flex-direction ↗
141
77
4м 12с
6
Закрытый
17.4 Flex-wrap ↗
137
75
7м 17с
9
Закрытый
17.5 Порядок элементов ↗
138
72
6м 5с
8
Закрытый
17.6 Flex-flow ↗
138
73
2м 59с
6
Закрытый
17.7 Justify-content ↗
138
76
9м 43с
8
Закрытый
17.8 Align-items ↗
136
74
5м 24с
5
Закрытый
17.9 Align-content ↗
132
71
5м 20с
5
Закрытый
17.10 Align-self ↗
134
70
3м 45с
6
Закрытый
17.11 Размеры и flex ↗
131
73
5м 50с
7
Закрытый
17.12 Flex-grow, flex-shrink и flex-basis ↗
132
70
10м 39с
10
Закрытый
17.13 Flex-wrap с flex-basis ↗
129
69
6м 12с
9
Закрытый
17.14 Gap row-gap column-gap ↗
128
67
8м 1с
7
Закрытый
17.15 Auto margin ↗
128
66
4м 55с
5
Закрытый
17.16 Тест - CSS Flexbox ↗
133
126
3м 50с
7

18. Практика flexbox

4 урока
Закрытый
18.1 Подключение шрифтов ↗
130
66
8м 59с
4
Закрытый
18.2 Google Fonts ↗
126
64
6м 37с
5
Закрытый
18.3 Упражнение - Вёрстка hero ↗
127
58
16м 29с
8
Закрытый
18.4 Упражнение - финал вёрстки ↗
127
62
11м 18с
10

19. Методологии и практики

4 урока
Закрытый
19.1 Зачем методологии ↗
126
67
5м 31с
6
Закрытый
19.2 БЭМ ↗
128
67
18м 4с
7
Закрытый
19.3 SMACSS ↗
125
67
11м 34с
7
Закрытый
19.4 Custom Properties ↗
120
64
9м 17с
9

20. Проект - Вёрстка страницы школы

11 уроков
Закрытый
20.1 Подготовка проекта ↗
126
60
5м 44с
8
Закрытый
20.2 Вёрстка шапки ↗
118
57
23м 3с
8
Закрытый
20.3 Шрифты и адаптив шапки ↗
110
54
1м 40с
10
Закрытый
20.4 Упражнение - Hero ↗
110
50
19м 58с
8
Закрытый
20.5 Адаптив Hero ↗
104
50
12м 54с
7
Закрытый
20.6 Aria атрибуты ↗
103
51
11м 44с
8
Закрытый
20.7 Вёрстка футера ↗
101
51
13м 6с
7
Закрытый
20.8 Стилизация футера ↗
101
48
16м 13с
5
Закрытый
20.9 Адаптив футера ↗
103
48
6м 20с
6
Закрытый
20.10 Упражнение - Блог ↗
104
49
32м 32с
5
Закрытый
20.11 Упражнение - Адаптив блога ↗
100
44
4м 7с
5

21. CSS Grid

15 уроков
Закрытый
21.1 Подготовка проекта ↗
118
62
6м 22с
8
Закрытый
21.2 Template и gap ↗
111
62
8м 39с
7
Закрытый
21.3 Grid-auto-flow ↗
107
59
4м 26с
5
Закрытый
21.4 Ширина колонок ↗
107
58
6м 27с
6
Закрытый
21.5 Ширина элементов ↗
103
57
7м 59с
6
Закрытый
21.6 Положение элементов ↗
104
58
7м 16с
4
Закрытый
21.7 Именованные линии ↗
101
55
6м 42с
6
Закрытый
21.8 Auto-fit и auto-fill ↗
101
55
5м 28с
5
Закрытый
21.9 Адаптивный grid ↗
102
54
6м 8с
4
Закрытый
21.10 Order ↗
99
55
3м 19с
5
Закрытый
21.11 Justify и align ↗
100
52
9м 6с
5
Закрытый
21.12 Заполнение grid ↗
98
52
7м 42с
5
Закрытый
21.13 Template-areas ↗
98
51
12м 17с
5
Закрытый
21.14 Лучшие практики ↗
99
50
8м 53с
4
Закрытый
21.15 Тест - CSS Grid ↗
100
93
2м 56с
2

22. Проект - Практика Grid

8 уроков
Закрытый
22.1 Разбор макета ↗
112
47
8м 51с
6
Закрытый
22.2 Упражнение - Вёрстка сетки ↗
89
43
11м 8с
6
Закрытый
22.3 Overflow и white-space ↗
84
44
7м 9с
4
Закрытый
22.4 Scrollbar ↗
85
41
4м 15с
4
Закрытый
22.5 Упражнение - Вёрстка карточки ↗
81
40
19м 8с
4
Закрытый
22.6 Адаптив списка курсов ↗
78
40
6м 19с
3
Закрытый
22.7 Упражнение - Нам доверяют ↗
86
38
15м 27с
3
Закрытый
22.8 Финальный адаптив ↗
95
40
10м 44с
0

23. Финал курса

1 урок
Закрытый
23.1 Куда дальше? ↗
123
52
2м 37с
8