Курс на Stepik
Обложка курса «Продвинутая вёрстка с HTML, CSS, Figma» на Stepik
1 390 ₽

Продвинутая вёрстка с HTML, CSS, Figma ★ 3.000

Открыть на
STEPIK.ORG

Продвинутая вёрстка с использованием HTML и CSS. Научитесь делать адаптивную вёрстку, используя современные подходы.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Продвинутая вёрстка с HTML, CSS, Figma»Учеников на курсе 68
Сертификаты, выданные на курсе «Продвинутая вёрстка с HTML, CSS, Figma»Сертификатов выдано 0
Отзывы о курсе «Продвинутая вёрстка с HTML, CSS, Figma»Отзывов получено 2
Рейтинг курса «Продвинутая вёрстка с HTML, CSS, Figma»Рейтинг курса 3.000
Уроки в курсе «Продвинутая вёрстка с HTML, CSS, Figma»Количество уроков 63
Тесты в курсе «Продвинутая вёрстка с HTML, CSS, Figma»Количество квизов 32
Время прохождения курса «Продвинутая вёрстка с HTML, CSS, Figma»Время прохождения курса —
Стоимость курса «Продвинутая вёрстка с HTML, CSS, Figma»Стоимость курса 1 390 ₽ —
Обновления курса «Продвинутая вёрстка с HTML, CSS, Figma»Обновления курса — —
Дата публикации курса «Продвинутая вёрстка с HTML, CSS, Figma»Дата публикации курса — ———
Последнее обновление курса «Продвинутая вёрстка с HTML, CSS, Figma»Последнее обновление — ———
Сложность normal — ———

Содержание курса

Разделы в курсе «Продвинутая вёрстка с HTML, CSS, Figma» 8 разделов Уроки в курсе «Продвинутая вёрстка с HTML, CSS, Figma» 63 урока Тесты в курсе «Продвинутая вёрстка с HTML, CSS, Figma» 32 теста Время прохождения курса «Продвинутая вёрстка с HTML, CSS, Figma» 12 ч. Последнее обновление курса «Продвинутая вёрстка с HTML, CSS, Figma» обн. 1 год назад

1. Git и настройка проекта

5 уроков
Закрытый
1.1 Консоль. Создание проекта ↗
23
23
21м 34с
1
Закрытый
1.2 Основы работы с GitHub ↗
15
15
6м 49с
0
Закрытый
1.3 Подключение NPM и работа с ним ↗
14
14
13м 17с
1
Закрытый
1.4 Работа с gulp ↗
15
15
28м 51с
0
Закрытый
1.5 Домашнее задание ↗
12
9
3м 4с
0

2. Методологии вёрстки и семантика

3 урока
Открытый
2.1 Вёрстка макета с БЭМ ↗
29
29
32м 32с
0
Закрытый
2.2 Вёрстка формы ↗
11
11
12м 18с
0
Закрытый
2.3 Домашнее задание ↗
11
8
3м 55с
0

3. Препроцессоры. Графика. Шрифты

7 уроков
Закрытый
3.1 Вёрстка элементов макета ↗
11
11
13м 8с
0
Закрытый
3.2 Работа с препроцессорами ↗
11
11
18м 2с
0
Закрытый
3.3 Настройка и подключение шрифтов ↗
10
10
19м 55с
0
Закрытый
3.4 Оптимизация скрипта ↗
9
9
1м 29с
0
Закрытый
3.5 Настройка элементов страницы ↗
9
9
22м 12с
0
Закрытый
3.6 Оптимизация изображений ↗
8
8
14м 39с
1
Закрытый
3.7 Тестирование ↗
9
7
-
0

4. Концепции вёрстки. Адаптивность

5 уроков
Закрытый
4.1 Настройка базовой стилизации ↗
10
10
30м 30с
0
Закрытый
4.2 Настройка стилей footer ↗
8
8
14м 35с
0
Закрытый
4.3 Настройка сетки блоков ↗
9
9
6м 3с
0
Закрытый
4.4 Адаптивная вёрстка под разные типы экранов ↗
9
9
38м 37с
0
Закрытый
4.5 Тестирование ↗
8
7
-
0

5. Медиа выражения

7 уроков
Закрытый
5.1 Вёрстка footer ↗
8
8
17м 17с
0
Закрытый
5.2 Адаптивная вёрстка с медиа выражениями ↗
8
8
22м 35с
0
Закрытый
5.3 Добавляем адаптивную вёрстку в проект ↗
8
8
17м 5с
0
Закрытый
5.4 Вёрстка блока About ↗
7
7
13м 45с
0
Закрытый
5.5 Адаптивная вёрстка блоков ↗
8
8
26м 17с
0
Закрытый
5.6 Адаптивная вёрстка footer ↗
8
8
13м 20с
0
Закрытый
5.7 Тестирование ↗
8
7
-
0

6. Относительные единицы. Резиновая вёрстка

9 уроков
Закрытый
6.1 Делаем Header ↗
9
9
24м 46с
0
Закрытый
6.2 Настройка padding в Header ↗
7
7
1м 37с
0
Закрытый
6.3 Отступы элементов в адаптивной вёрстке ↗
7
7
19м 37с
0
Закрытый
6.4 Делаем git rebase ↗
7
7
2м 18с
0
Закрытый
6.5 Резиновая вёрстка - введение ↗
7
7
2м 11с
0
Закрытый
6.6 Резиновая вёрстка блоков с изображениями ↗
7
7
14м 31с
0
Закрытый
6.7 Убираем полосы прокрутки ↗
7
7
6м 55с
0
Закрытый
6.8 Оптимизация резиновой вёрстки ↗
7
7
3м 21с
0
Закрытый
6.9 Тестирование ↗
7
6
-
0

7. Картинки адаптивные и резиновые. Спрайт. Грид

12 уроков
Закрытый
7.1 Оптимизируем резиновую вёрстку под маленькие экраны ↗
8
8
29м 34с
0
Закрытый
7.2 Оптимизация резиновой вёрстки хедера под мобильную версию ↗
7
7
4м 7с
0
Закрытый
7.3 Оптимизация резиновой вёрстки для оставшихся блоков ↗
6
6
29м 36с
0
Закрытый
7.4 Ретинизация ↗
7
7
6м 18с
0
Закрытый
7.5 Настройка резиновой картинки ↗
7
7
4м 30с
0
Закрытый
7.6 Настройка отображения изображения в зависимости от размера экран ↗
7
7
3м 15с
0
Закрытый
7.7 Знакомство с классом grid ↗
7
7
9м 26с
0
Закрытый
7.8 Настройка ретинизации через стили css ↗
7
7
5м 14с
0
Закрытый
7.9 Меняем картинки для ретины ↗
7
7
10м 6с
0
Закрытый
7.10 Делаем всплывающую форму при помощи grid ↗
7
7
15м 51с
0
Закрытый
7.11 Создаём и подключаем в проект svg-спрайты ↗
7
7
11м 40с
0
Закрытый
7.12 Тестирование ↗
7
6
-
0

8. Бутстрап. Открытые формы. Слайдер

15 уроков
Закрытый
8.1 Разбор домашнего задания по вёрстке картинок ↗
8
8
12м 57с
0
Закрытый
8.2 Разбор вёрстки форм ↗
7
7
19м 0с
0
Закрытый
8.3 Разбор Bootstrap ↗
7
7
7м 19с
0
Закрытый
8.4 Подключение Bootstrap кнопки ↗
6
6
1м 14с
0
Закрытый
8.5 Делаем навигационную панель при помощи Bootstrap ↗
6
6
9м 57с
0
Закрытый
8.6 Правка стилей Bootstrap ↗
6
6
1м 3с
0
Закрытый
8.7 Делаем слайдер/карусель с использованием Bootstrap ↗
7
7
5м 23с
0
Закрытый
8.8 Создание модального окна при помощи Bootstrap ↗
6
6
3м 0с
0
Закрытый
8.9 Доделываем модальное окно ↗
6
6
1м 51с
0
Закрытый
8.10 Разбор сетки Bootstrap ↗
6
6
6м 46с
0
Закрытый
8.11 Подключение и настройка Swiper ↗
6
6
13м 45с
0
Закрытый
8.12 Продолжаем настраивать Swiper ↗
6
6
7м 20с
0
Закрытый
8.13 Настройка автоматизации сборки ↗
7
7
20м 25с
0
Закрытый
8.14 Рекомендации по доработке кнопки ↗
7
7
0м 25с
0
Закрытый
8.15 Тестирование ↗
7
4
-
0