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 (107)

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

Vladyslav Kardash

3 years ago

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

Иван Ермашов

3 years ago

Отличный курс. Все супер!!!

Роман Незнаєнко

3 years ago

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

Anna Vasileva

3 years ago

Полезный курс. Доступно и интересно всё объясняет

Евгений

3 years ago

Спасибо огромное, мне очень помог в обучении этот курс!!

student_5X1YqLbg

3 years ago

Супер курс! Узнал много о верстке сайтов и понял как верстать с помощью css grid и flexbox.

student_L8efDYX_

3 years ago

Много узнал деталей, которые облегчают написание кода (emmet, многострочный ввод). Но остались вопросы, можно ли, например, на практике использовать сетку для всего сайта? На практике она использовалась только для футера. Что делать с блоком hero если он отображается по разному при разном разрешении браузера? И так далее... нехватает подводных камней, как обстоят дела в реальных полевых условиях(работе). Но за свои деньги курс однозначно стоит.

student_Jw6CEVsI

3 years ago

Отличный курс! Очень много информации, которую объяснили доступным языком. Проект понравился!

Амангельды Кемалов

3 years ago

Все понятно, даже для новичка

student_aPnalwdy

3 years ago

Курс очень подробный, по сравнению с прошлым курсом HTML/CSS. Все понятно объясняется. Очень понравился учебный проект KinoMonster.

Ирина Ильина

3 years ago

Спасибо за курс! Много информации и практики.

FREQUENTLY ASKED QUESTIONS

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

Author

Сергей Никонов. Автор курса программирования HTML/CSS | FructCode

Sergei Nikonov

Founder of the FructCode project
Boasts over 15 years of expertise in web development
Worked in large companies in the USA and Europe on high-load web projects
Led numerous in-person and online seminars on web development

Leaders of the week (TOP 5)

Melon Mods

25367 xp

Nikolay Pochitalin

5031 xp

user_f63979

2010 xp

user_e30582

1700 xp

user_c8c5be

310 xp

Course HTML/CSS Advanced

Interactive HTML and CSS Course

What you'll learn

In HTML and CSS lessons you will learn:

Lessons

Reviews (107)

FREQUENTLY ASKED QUESTIONS

Author

Leaders of the week (TOP 5)