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

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

Назар Шашков

1 year ago

Thanks!

Alexey Sereda

1 year ago

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

Yurii Monashnenko

1 year ago

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

Andrii Herasymchuk

1 year ago

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

Pavel Didenko

1 year ago

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

Богдан Плотников

1 year ago

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

Юра Старченко

1 year ago

Ну такой не плохой курс за эти деньги

Svitlana Moroz

1 year ago

Отличный курс, последние уроки сложноваты для восприятия. Но в целом отлично! Доступно и удобно.

Aleksandr Samoilenko

1 year ago

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

Сергей Жданович

1 year ago

Курс интересно сделан, иногда действия выполняются слишком быстро и не успеваешь понять что к чему, ДЗ на более поздних этапах могли бы быть сложнее. Радует, что Сергей выполняет не идеально, т.к. становится более понятно, почему что-то не работает. Ошибки вносят больше ясности в происходящее.

Vladyslav Merezhko

1 year ago

Курс сподобався дізнався багатонового та систематизував наявні та набуті знання. Дужк чекаю на доповнення курсі у розробці

stepan gudzovatiy

1 year ago

Cool

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.

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)

Марія Нехайчук

25677 xp

Микола Ридвановський

6520 xp

user_03417c

3975 xp

Alexandru Girbu

3214 xp

user_c026cd

1140 xp

Course HTML/CSS Advanced

Interactive HTML and CSS Course

What you'll learn

In HTML and CSS lessons you will learn:

Lessons

Reviews (99)

FREQUENTLY ASKED QUESTIONS

Author

Leaders of the week (TOP 5)