Курс HTML/CSS Advanced программирования верстки веб-сайтов для начинающих фронтэнд разработчиков с интерактивными тренажерами в браузере

О курсе

Курс HTML/CSS Advanced поможет вам изучить современную верстку веб-сайтов.

В уроках HTML и CSS вы узнаете:

Как верстать блоки на сайте с помощью Grid
Что такое Flexbox и как Flexbox упрощает позиционирование блоков на сайте
Как создавать адаптивную верстку
Научитесь использовать псевдоэлементы ::after и ::before
Как подключать внешние CSS-стили к сайту, а также Javascript скрипты и библиотеки
Научитесь пользоваться популярным редактором кода Visual Studio Code
Изучите Grid System
Научитесь встраивать видео на ваш сайт
Изучите CSS-анимацию, а также научитесь анимировать SVG элементы

Изучив современную верстку веб-сайтов, вы сможете создавать верстку веб-сайтов любой сложности. Макет сайта KinoMonster будет доступен в популярной программе для дизайна и прототипирования Figma.

План курса

Программа обучения состоит из видео уроков по HTML и CSS, а также включает интерактивные тесты и интерактивные тренажеры, позволяющие закрепить полученные вами знания на практике.

1
О курсе HTML/CSS Advanced
- 1
  О курсе HTML/CSS Advanced04:02
2
Установка программ для курса HTML/CSS Advanced
- 2
  Подготовка компьютера к работе (для Windows)11:18
- 3
  Подготовка компьютера к работе (для MacOS)15:35
3
Базовый HTML
- 4
  Базовая разметка HTML-страницы05:51
- 6
  Базовые HTML теги10:46
- 7
  Интерактивное задание тег h101:00
- 8
  Интерактивное задание тег параграф01:00
- 9
  Интерактивное задание тег i02:00
- 10
  Интерактивное задание тег del02:00
- 11
  Интерактивное задание тег mark02:00
- 12
  Интерактивное задание тег strong02:00
- 13
  HTML-теги img, video, iframe19:08
- 14
  Интерактивное задание тег img01:25
- 15
  Интерактивное задание тег video02:15
- 16
  Интерактивное задание тег iframe03:45
- 17
  HTML-тег a, встраивание ссылок на сайт, связанные ссылки14:47
- 18
  Интерактивное задание тег a (классическая ссылка)02:32
- 19
  Интерактивное задание тег a (классическая ссылка 2)02:12
- 20
  Интерактивное задание тег a (phone)02:17
- 21
  Интерактивное задание тег a (email)02:19
- 22
  HTML-теги ul, ol, li06:26
- 23
  Интерактивное задание тег ol01:15
- 24
  Интерактивное задание тег ul01:10
- 25
  Интерактивное задание тег ul nested02:16
- 26
  HTML формы: input, textarea, checkbox, radio, slider и другие35:28
- 27
  Интерактивное задание HTML-form: Input02:25
- 28
  Интерактивное задание HTML-form: Input 201:15
- 29
  Интерактивное задание HTML-form: Загрузка файлов02:34
- 30
  Интерактивное задание HTML-form: Выбор цвета02:12
- 31
  Интерактивное задание HTML-form: Numbers03:11
- 32
  Интерактивное задание HTML-form: Selected02:32
- 33
  Интерактивное задание HTML-form: Checkbox01:15
- 34
  Интерактивное задание HTML-form: Radio02:10
- 35
  Интерактивное задание HTML-form: Slider01:35
- 36
  Интерактивное задание HTML-form: Textarea02:12
- 37
  HTML таблицы: table, tr, th, tbody, thead, tfoot08:28
- 38
  Интерактивное задание HTML Tables 102:13
- 39
  HTML-теги div и span12:56
- 40
  Выполните тест01:03
4
HTML5 структура страниц верстки сайтов
- 41
  HTML5-теги: header, nav, section, main, article, aside11:08
- 42
  Интерактивное задание HTML5-теги: header, nav02:18
- 43
  Интерактивное задание HTML5-теги: main, section, footer03:11
5
Базовый CSS
- 44
  Знакомство с CSS: вынос css в отдельный файл, width, height, color, background26:25
- 45
  Интерактивное задание знакомство с CSS01:34
- 46
  CSS-селекторы: Способы задавать стили для HTML-элементов22:20
- 47
  Интерактивное задание HTML-selectors 102:21
- 48
  Интерактивное задание HTML-selectors 202:32
- 49
  Интерактивное задание HTML-selectors 302:18
- 50
  Интерактивное задание HTML-selectors 401:08
- 51
  Интерактивное задание HTML-selectors 502:13
- 52
  CSS псевдоклассы (pseudo classes) - Способы задавать стили для HTML-элементов21:31
- 53
  Интерактивное задание pseudo classes 102:28
- 54
  Интерактивное задание pseudo classes 201:55
- 55
  Интерактивное задание pseudo classes 302:31
- 56
  Интерактивное задание pseudo classes 403:15
- 57
  Интерактивное задание pseudo classes 502:28
- 58
  Интерактивное задание pseudo classes 601:49
- 59
  Интерактивное задание pseudo classes 702:43
- 60
  Интерактивное задание pseudo classes 802:16
- 61
  Инструменты разработчика браузера Google Chrome07:56
- 62
  Комментарии в HTML и в CSS08:20
- 63
  Выполните тест01:14
- 64
  Выполните тест01:18
6
CSS позиционирование HTML-элементов (базовое)
- 65
  CSS-свойства Margin, Padding, Box-sizing15:26
- 66
  Выполните тест01:02
- 67
  Выполните тест01:02
- 68
  Выполните тест02:31
- 69
  Выполните тест02:33
- 70
  Интерактивное задание html-тег margin02:19
- 71
  Интерактивное задание html-тег padding02:21
- 72
  Интерактивное задание box-sizing02:50
- 73
  CSS-свойства display: block, inline, inline-block, none09:59
- 74
  Интерактивное задание display 102:37
- 75
  Интерактивное задание display 202:28
- 76
  Position: absolute, relative, static, fixed, sticky and z-index15:37
- 77
  Интерактивное задание position 102:29
- 78
  Интерактивное задание position 202:46
7
CSS позиционирование Flexbox
- 79
  Позиционирование flexbox: justify-content, align-items и другие24:32
- 80
  Интерактивное задание flexbox 102:09
- 81
  Интерактивное задание flexbox 202:07
- 82
  Интерактивное задание flexbox 302:32
- 83
  Интерактивное задание flexbox 402:45
- 84
  Интерактивное задание flexbox 502:39
- 85
  Интерактивное задание flexbox 602:42
8
Позиционирование CSS Grid
- 86
  Введение в CSS Grid01:37
- 87
  Свойство grid-template-columns. Горизонтальное позиционирование.05:38
- 88
  Интерактивное задание Grid: grid-template-columns 102:25
- 89
  Интерактивное задание Grid: grid-template-columns 201:45
- 90
  Интерактивное задание Grid: grid-template-columns 302:18
- 91
  Свойства column-gap, row-gap. Grid отступы.02:53
- 92
  Интерактивное задание Grid: column-gap, row-gap01:19
- 93
  Интерактивное задание Grid: gap01:33
- 94
  CSS функция repeat() и единица измерения fraction (fr)02:06
- 95
  Интерактивное задание Grid: fraction (fr)02:30
- 96
  Интерактивное задание Grid: CSS function Repeat()02:35
- 97
  CSS функция MinMax()01:40
- 98
  Интерактивное задание Grid: CSS function MinMax()02:10
- 99
  Свойство grid-template-rows. Вертикальное позиционирование.02:34
- 100
  Интерактивное задание Grid: grid-template-rows 102:14
- 101
  Свойство grid-auto-rows02:14
- 102
  Интерактивное задание Grid: grid-auto-rows02:12
- 103
  Свойство grid-auto-flow02:28
- 104
  Свойства grid-column и grid-row, ключевое слово span11:31
- 105
  Интерактивное задание Grid: grid-column и grid-row 101:03
- 106
  Интерактивное задание Grid: grid-column и grid-row 201:18
- 107
  Интерактивное задание Grid: grid-column и grid-row 301:49
- 108
  Свойства justify-content, align-content и place-content03:15
- 109
  Интерактивное задание Grid: justify-content, align-content, place-content01:48
9
Позиционирование CSS Grid. Практическая часть
- 110
  Свойства grid-template-areas: Верстка макета сайта с одной колонкой22:52
- 111
  Интерактивное задание Grid: grid-template-areas 102:12
- 112
  Свойства grid-template-areas: Верстка макета сайта с двумя колонками04:44
- 113
  Интерактивное задание Grid: grid-template-areas 204:21
- 114
  Свойства grid-template-areas: Верстка макета сайта состоящего из 3х колонок06:54
- 115
  Интерактивное задание Grid: grid-template-areas 302:18
10
Подключение шрифтов для сайта
- 116
  Подключение шрифтов для сайта (простой способ)07:43
- 117
  Интерактивное задание fonts 101:54
- 118
  Подключение шрифтов для сайта (продвинутый способ)13:54
- 119
  Интерактивное задание fonts 202:54
11
Адаптивная (responsive) верстка сайтов
- 120
  Введение00:58
- 121
  Единицы измерения: px, проценты, em, rem16:28
- 122
  Интерактивное задание px, проценты01:24
- 123
  Интерактивное задание (проценты, em) 02:10
- 124
  Интерактивное задание (em, rem)02:50
- 125
  Единицы измерения: vw и vh14:47
- 126
  Интерактивное задание (vh)02:45
- 127
  Что такое @media query12:16
- 128
  Интерактивное задание media query03:17
12
Практическая часть: Знакомство с Figma
- 129
  Знакомство с макетом KinoMonster в Figma05:13
- 130
  Знакомство с макетом KinoMonster в Figma 210:14
13
Практическая часть: Создаем Header (верхняя часть сайта)
- 131
  Создание Header (Верхняя часть сайта)42:09
- 132
  Интерактивное задание Header02:04
- 133
  Интерактивное задание Header 202:19
14
Практическая часть: Создаем Footer (нижняя часть сайта)
- 134
  Создаем Footer27:21
- 135
  Интерактивное задание Footer02:45
15
Практическая часть: Создаем блок фильмов и сериалов
- 136
  Создаем блок с фильмами и сериалами16:55
- 137
  Интерактивное задание (фильмы и сериалы)02:13
- 138
  Добавляем анимацию в постеры09:17
- 139
  Интерактивное задание анимация постеров03:20
- 140
  Создаем блок On Now19:58
16
Практическая часть: Создаем блок Hero
- 141
  Создаем блок Hero19:16
- 142
  Добавляем градиенты в блок Hero10:52
- 143
  Добавляем точки для карусели (блок hero)08:43
- 144
  Делаем функционал смены слайдов в блоке hero25:01
- 145
  Делаем функционал автоматической смены слайдов в блоке hero09:13
- 146
  Интерактивное задание Hero02:22
- 147
  Улучшаем блок Hero и Header16:16
- 148
  Интерактивное задание Hero/Header02:19
17
Практическая часть: Адаптируем верстку под мобильные устройства
- 149
  Адаптируем header под мобильные устройства30:08
- 150
  Интерактивное задание Header (Адаптивная верстка)02:39
- 151
  Адаптируем блок hero под мобильные устройства16:19
- 152
  Интерактивное задание Hero (Адаптивная верстка)01:40
- 153
  Адаптируем блоки grid под мобильные устройства08:50
- 154
  Интерактивное задание Grid (Адаптивная верстка)02:47
18
Практическая часть: Страница просмотров фильмов и сериалов
- 155
  Создаем страницу с просмотром фильмов (часть 1)22:56
- 156
  Интерактивное задание страница Movie (часть 1)01:50
- 157
  Создаем страницу с просмотром фильмов (часть 2)16:54
- 158
  Интерактивное задание страница Movie (часть 2)03:45
19
Практическая часть: Страница Login и Register
- 159
  Создаем страницы Login и Register (часть 1)20:11
- 160
  Интерактивное задание страницы Login и Register (часть 1)02:17
- 161
  Создаем страницы Login и Register (часть 2)21:02
- 162
  Интерактивное задание страницы Login и Register (часть 2)03:48
Получение сертификата об окончании курса

Отзывы (107)

Отзывы о курсе верстки HTML и CSS.

Roma Lypko

2 years ago

Спасибо за данный курс, отличная подача материала. Надеюсь что вы будете продолжать создавать такой же качественный, обучающий контент.

Denys Merenkov

2 years ago

Отличный курс! спасибо!

Lolita Shamonova

2 years ago

Курс понравился, поняла, в каких темах не хватает знаний, хотелось бы больше практики.

Тимур Сотников

2 years ago

Базовано 10/10

Александр Семичев

2 years ago

Доступно и интересно, хотелось бы больше заданий.

Pavlo Oslam

2 years ago

Отличный курс, удобный и понятный

Евгений Макидон

2 years ago

Курс очень крутой. Много информации, которую тебе подают, а ты бери и просто запоминай и не ленись)))

Nataliia Veselova

2 years ago

Спасибо большое за курс! Получила много полезной информации. Разобралась во многих вещах, которые до этого были непонятными. Практическая часть c версткой сайта и написанием java script-кода для меня была сложнее, чем предыдущие уроки курса. Хотелось бы, чтобы задания для закрепления материала были сложнее. В целом курс очень информативный и стоит того, чтобы его прошел каждый, кто начинает изучать веб-разработку.

Назар Шашков

2 years ago

Thanks!

Alexey Sereda

2 years ago

Отличный курс, мне понравился, всё доступно и понятно. Особенно приятно было когда были допущены ошибки, поскольку новичкам будет полезно учиться решать подобные проблемы, а вы наглядным примером показали как это делать.

Yurii Monashnenko

2 years ago

Початковий курс HTML/CSS Advanced подається зрозуміло і засвоюється достатньо легко!

Andrii Herasymchuk

2 years ago

Чудовий курс для навчання!

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Обучение разделено на видео лекции, интерактивные задания и тесты. В видео лекциях вы получаете теоретический материал и с помощью интерактивных заданий закрепляете теорию на практике. Вы пишите код прямо в браузере и мгновенно получаете результат проверки вашего кода - верно или нет. Практически в каждом уроке есть ссылки на дополнительные материалы и исходный код.