Master advanced HTML and CSS techniques with our comprehensive course tailored for beginner front-end developers. Through interactive simulators in the browser, you'll hone your skills in website layout programming.

What you'll learn

The HTML/CSS Advanced course will help you learn modern website design.

In HTML and CSS lessons you will learn:

How to layout blocks on a website using Grid
What is Flexbox and how Flexbox simplifies the positioning of blocks on a website
How to create adaptive layout
Learn to use the ::after and ::before pseudo-elements
How to connect external CSS styles to the site, as well as Javascript scripts and libraries
Learn to use the popular code editor Visual Studio Code
Explore the Grid System
Learn to embed video on your website
Learn CSS animation and also learn how to animate SVG elements

Having studied modern website layout, you will be able to create website layouts of any complexity. The KinoMonster website layout will be available in the popular design and prototyping program Figma.

Lessons

The HTML/CSS course offers a comprehensive program featuring video lessons, interactive tests, and simulators. These tools are designed to help you apply and reinforce your knowledge effectively

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
  Complete a Test01: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
  Complete a Test01:14
- 64
  Complete a Test01:18
6
CSS позиционирование HTML-элементов (базовое)
- 65
  CSS-свойства Margin, Padding, Box-sizing15:26
- 66
  Complete a Test01:02
- 67
  Complete a Test01:02
- 68
  Complete a Test02:31
- 69
  Complete a Test02: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
Being awarded a course completion certificate

Reviews (106)

Explore what students have to say about the HTML and CSS layout course. Read their reviews to get insights into their learning experience

Anatolii Kornylenko

2 years ago

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

Vitaly Illinskiy

2 years ago

Замечательные курсы! Во-первых - доступность. Я, пенсионер, могу себе позволить учиться, вторых таких курсов не знаю. Во-вторых изложение материала. Сергей, Вы педагог от Бога. Многие лета Вам и всяческих успехов в таком нужном деле! Виталий.

Никита Ковалевский

2 years ago

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

Alexander Valentey

2 years ago

Отличный курс, его будет вполне достаточно для верстки, я думаю, большинства сайтов. Есть практика в виде интерактивных заданий, но задания слишком простые и хотелось бы чего-нибудь более требовательного. Но комплексно курс очень хороший и качественный. Спасибо.

Тимофей Морозов

2 years ago

Просто бомба

Юрий Сулыгин

2 years ago

Курс отличный! После прохождения почувствовал у себя наличие неплохой базы для выполнения пусть небольших, но уже самостоятельных проектов. Однозначно 5 баллов!

Nikita Hurski

2 years ago

Супер курс

Александр Казаков

2 years ago

Отличный курс! Грамотная подача материала, местами было сложно и непонятно, но очень интересно! Я бы внес некоторые изменения на сайте - FructCode, чтобы можно было просматривать видеоуроки, как вместе с интерактивными заданиями, так и отдельно от них.

Алексей Владимирович Меньщиков

2 years ago

Отличный курс!!! Всё объясняется понятно и доступно.

Роман Дідич

3 years ago

Курс мне очень понравился.

student_VPUq_wh0

3 years ago

Понравился курс! Киномонстер получился намного интереснее, чем в прошлом курсе, но и сложнее. Теории по html и css тоже достаточно.

Vladyslav Kardash

3 years ago

Интересный курс. Под конец было сложно соглашаться с некоторыми решениями, показанными в уроках. Не совсем понятны длинные обращения к элементам.

FREQUENTLY ASKED QUESTIONS

The training is divided into video lectures, interactive tasks and tests. In video lectures you receive theoretical material and, with the help of interactive tasks, reinforce the theory in practice. You write code directly in the browser and instantly get the result of checking your code - whether it is correct or not. Almost every lesson has links to additional materials and source code.