Course HTML/CSS Advanced

Interactive HTML and CSS Course

Take your website design skills to the next level with our HTML/CSS Advanced course. You will learn how to transform Figma designs into stunning, responsive web pages. This course will also cover topics such as transitions, flexbox, grid, and media queries.

5 / 140

161 lessons
60 videos
17 hours
Certificate

Start course

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

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

Narek Aramyan

1 year ago

Если ты думаешь, что ты знаешь HTML/CSS, без прохождения этого курса... то ты ошибаешься!)

Айтуар Жангазин

1 year ago

Очень полезный курс!

Daniils Lusnickis

1 year ago

Топ за свои деньги

Виталий Синявский

1 year ago

Отличный курс. Спасибо Вам, Сергей!

student_DyS7orcM

1 year ago

Достаточно интерактивный.

Денис Гиренко

1 year ago

Я значительно повысил свой уровень html/css, спасибо за новые знания!!! ;)

Сергей Касьянюк

1 year ago

Отличный курс для начинающих. Сергею благодарность за понятное объяснение материала. Класс!

Михайло Кащавцев

1 year ago

Спасибо большое за курс очень информативный и подробный, максимально понятный

Христо Горелков

1 year ago

Благодаря Сергею за усилия и опыт, которым он поделился с нами. Курс великолепен, я узнал много новых полезных вещей

Roma Lypko

1 year ago

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

Denys Merenkov

1 year ago

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

Lolita Shamonova

1 year 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.

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)

Ирина Ильина

32821 xp

user_7e6003

11672 xp

student_e7BcIqNg

11105 xp

user_6eda51

2380 xp

Евгений

2300 xp