Содержание пакета (2 курса)
1. Основы вёрстки с HTML и CSS 4.167
1. GitHub, Figma, Макет
8 уроков
👁
2 100
👤
1 653
Закрытый
1.1
Знакомство с GitHub
↗
278
278
11м
7
Закрытый
1.2
Создание и клонирование репозитория
↗
208
208
4м
1
Закрытый
1.3
Изменения, commit, push
↗
185
185
9м
5
Открытый
1.4
Макет и знакомство с Figma
↗
768
321
9м
10
Закрытый
1.5
Картинки и их экспорт
↗
176
176
19м
5
Закрытый
1.6
Расширения VSCode
↗
170
170
5м
3
Закрытый
1.7
Форматы картинок, иконки. Знакомство с index.html
↗
155
155
9м
4
Закрытый
1.8
Исходники первого модуля. Домашнее задание
↗
160
160
1м
2
2. Теги и начало вёрстки макета
9 уроков
👁
1 183
👤
1 183
Закрытый
2.1
Базовые теги. Консоль devtools
↗
175
175
12м
8
Закрытый
2.2
Разновидности тегов. Табличные теги.
↗
140
140
7м
5
Закрытый
2.3
Заголовки и списки
↗
139
139
7м
2
Закрытый
2.4
Разметка блока Header
↗
131
131
20м
5
Закрытый
2.5
Разметка секций услуг. Тег section.
↗
130
130
7м
3
Закрытый
2.6
Разметка секции "Отзывы"
↗
120
120
16м
4
Закрытый
2.7
Разметка подвала (footer). Тег div.
↗
116
116
11м
6
Закрытый
2.8
Подведение итога
↗
113
113
2м
3
Закрытый
2.9
Исходники модуля и Домашнее задание
↗
119
119
0м
4
3. Знакомство с CSS
5 уроков
👁
524
👤
524
Закрытый
3.1
Введение в стили CSS
↗
118
118
22м
5
Закрытый
3.2
Практика: добавляем и применяем CSS
↗
108
108
7м
3
Закрытый
3.3
Перенос с макета ссылок и цветов
↗
104
104
30м
4
Закрытый
3.4
Перенос шрифтов
↗
94
94
23м
6
Закрытый
3.5
Исходники и Домашнее задание
↗
100
100
0м
3
4. Отступы, devtools, блочные элементы
7 уроков
👁
551
👤
551
Закрытый
4.1
Разбор ДЗ
↗
87
87
35м
5
Закрытый
4.2
Стили и devtools. Вкладки styles & computed
↗
83
83
3м
3
Закрытый
4.3
Блочные и строчные элементы
↗
80
80
4м
3
Закрытый
4.4
Padding
↗
77
77
7м
2
Закрытый
4.5
Margin
↗
76
76
23м
2
Закрытый
4.6
Практика: перенос отступов в различных блоках с макета
↗
75
75
27м
4
Закрытый
4.7
Исходники и Домашнее Задание
↗
73
73
0м
1
5. Флексбоксы
9 уроков
👁
615
👤
615
Закрытый
5.1
Разбор ДЗ - Вёрстка блока About
↗
79
79
9м
2
Закрытый
5.2
Разбор ДЗ - Блоки Clients, Advantages
↗
70
70
6м
2
Закрытый
5.3
Разбор ДЗ - Блок Footer
↗
64
64
13м
2
Закрытый
5.4
Флексбокс. Концепция и зачем применяется
↗
70
70
6м
1
Закрытый
5.5
Флексбокс. Управление по осям
↗
69
69
10м
2
Закрытый
5.6
Флексбокс. order, flex-direction, flex-wrap
↗
66
66
9м
3
Закрытый
5.7
Делаем кнопку и блок About на флексах. Часть 1
↗
66
66
12м
1
Закрытый
5.8
Делаем кнопку и блок About на флексах. Часть 2
↗
65
65
2м
1
Закрытый
5.9
Исходники и Домашнее Задание
↗
66
66
0м
3
6. Формы, группировки, селекторы
12 уроков
👁
716
👤
716
Закрытый
6.1
Разбор ДЗ Блоки services и clients
↗
65
65
7м
1
Закрытый
6.2
Разбор ДЗ - Блок Преимущества
↗
60
60
11м
3
Закрытый
6.3
Разбор ДЗ - Блок футера
↗
59
59
6м
1
Закрытый
6.4
Формы. Поля ввода и их типы
↗
61
61
8м
1
Закрытый
6.5
Формы. Checkbox, Label
↗
61
61
9м
1
Закрытый
6.6
Группировка. Fieldset, legend, radiobutton
↗
60
60
6м
3
Закрытый
6.7
Атрибуты value, checked, placeholder. Отправка формы
↗
60
60
9м
1
Закрытый
6.8
Селекторы и их вес
↗
61
61
13м
1
Закрытый
6.9
Форма с элементами ввода
↗
59
59
17м
2
Закрытый
6.10
placeholder и кнопки
↗
56
56
5м
1
Закрытый
6.11
Пояснение к ДЗ
↗
56
56
1м
1
Закрытый
6.12
Исходники и Домашнее Задание
↗
58
58
0м
1
7. Позиционирование и поведение
7 уроков
👁
371
👤
371
Закрытый
7.1
Разбор ДЗ: Оформляем popup
↗
56
56
17м
1
Закрытый
7.2
Позиционирование, position absolute
↗
55
55
9м
1
Закрытый
7.3
Псевдоэлементы. position fixed. Позиционирование popup
↗
54
54
15м
2
Закрытый
7.4
Поведение элементов. Кнопки и ссылки
↗
52
52
16м
1
Закрытый
7.5
Практика. Кнопки и ссылки.
↗
54
54
21м
3
Закрытый
7.6
Делаем поведение в блоке service
↗
50
50
10м
1
Закрытый
7.7
Исходники и Домашнее Задание
↗
50
50
0м
2
8. Завершение проекта
9 уроков
👁
490
👤
490
Закрытый
8.1
Блок About
↗
62
62
8м
2
Закрытый
8.2
Блок Clients
↗
47
47
9м
1
Закрытый
8.3
Футер
↗
49
49
10м
2
Закрытый
8.4
Ревью
↗
52
52
10м
1
Закрытый
8.5
Popup
↗
49
49
12м
3
Закрытый
8.6
Inputs
↗
53
53
9м
3
Закрытый
8.7
Radio Buttons
↗
51
51
19м
2
Закрытый
8.8
JS Popup
↗
59
59
13м
4
Закрытый
8.9
Исходники и ссылки
↗
68
68
0м
5
2. Продвинутая вёрстка с HTML, CSS, Figma 3.0
1. Git и настройка проекта
5 уроков
👁
79
👤
76
Закрытый
1.1
Консоль. Создание проекта
↗
23
23
21м
1
Закрытый
1.2
Основы работы с GitHub
↗
15
15
6м
0
Закрытый
1.3
Подключение NPM и работа с ним
↗
14
14
13м
1
Закрытый
1.4
Работа с gulp
↗
15
15
28м
0
Закрытый
1.5
Домашнее задание
↗
12
9
3м
0
2. Методологии вёрстки и семантика
3 урока
👁
51
👤
48
Открытый
2.1
Вёрстка макета с БЭМ
↗
29
29
32м
0
Закрытый
2.2
Вёрстка формы
↗
11
11
12м
0
Закрытый
2.3
Домашнее задание
↗
11
8
3м
0
3. Препроцессоры. Графика. Шрифты
7 уроков
👁
67
👤
65
Закрытый
3.1
Вёрстка элементов макета
↗
11
11
13м
0
Закрытый
3.2
Работа с препроцессорами
↗
11
11
18м
0
Закрытый
3.3
Настройка и подключение шрифтов
↗
10
10
19м
0
Закрытый
3.4
Оптимизация скрипта
↗
9
9
1м
0
Закрытый
3.5
Настройка элементов страницы
↗
9
9
22м
0
Закрытый
3.6
Оптимизация изображений
↗
8
8
14м
1
Закрытый
3.7
Тестирование
↗
9
7
0
4. Концепции вёрстки. Адаптивность
5 уроков
👁
44
👤
43
Закрытый
4.1
Настройка базовой стилизации
↗
10
10
30м
0
Закрытый
4.2
Настройка стилей footer
↗
8
8
14м
0
Закрытый
4.3
Настройка сетки блоков
↗
9
9
6м
0
Закрытый
4.4
Адаптивная вёрстка под разные типы экранов
↗
9
9
38м
0
Закрытый
4.5
Тестирование
↗
8
7
0
5. Медиа выражения
7 уроков
👁
55
👤
54
Закрытый
5.1
Вёрстка footer
↗
8
8
17м
0
Закрытый
5.2
Адаптивная вёрстка с медиа выражениями
↗
8
8
22м
0
Закрытый
5.3
Добавляем адаптивную вёрстку в проект
↗
8
8
17м
0
Закрытый
5.4
Вёрстка блока About
↗
7
7
13м
0
Закрытый
5.5
Адаптивная вёрстка блоков
↗
8
8
26м
0
Закрытый
5.6
Адаптивная вёрстка footer
↗
8
8
13м
0
Закрытый
5.7
Тестирование
↗
8
7
0
6. Относительные единицы. Резиновая вёрстка
9 уроков
👁
65
👤
64
Закрытый
6.1
Делаем Header
↗
9
9
24м
0
Закрытый
6.2
Настройка padding в Header
↗
7
7
1м
0
Закрытый
6.3
Отступы элементов в адаптивной вёрстке
↗
7
7
19м
0
Закрытый
6.4
Делаем git rebase
↗
7
7
2м
0
Закрытый
6.5
Резиновая вёрстка - введение
↗
7
7
2м
0
Закрытый
6.6
Резиновая вёрстка блоков с изображениями
↗
7
7
14м
0
Закрытый
6.7
Убираем полосы прокрутки
↗
7
7
6м
0
Закрытый
6.8
Оптимизация резиновой вёрстки
↗
7
7
3м
0
Закрытый
6.9
Тестирование
↗
7
6
0
7. Картинки адаптивные и резиновые. Спрайт. Грид
12 уроков
👁
84
👤
83
Закрытый
7.1
Оптимизируем резиновую вёрстку под маленькие экраны
↗
8
8
29м
0
Закрытый
7.2
Оптимизация резиновой вёрстки хедера под мобильную версию
↗
7
7
4м
0
Закрытый
7.3
Оптимизация резиновой вёрстки для оставшихся блоков
↗
6
6
29м
0
Закрытый
7.4
Ретинизация
↗
7
7
6м
0
Закрытый
7.5
Настройка резиновой картинки
↗
7
7
4м
0
Закрытый
7.6
Настройка отображения изображения в зависимости от размера экран
↗
7
7
3м
0
Закрытый
7.7
Знакомство с классом grid
↗
7
7
9м
0
Закрытый
7.8
Настройка ретинизации через стили css
↗
7
7
5м
0
Закрытый
7.9
Меняем картинки для ретины
↗
7
7
10м
0
Закрытый
7.10
Делаем всплывающую форму при помощи grid
↗
7
7
15м
0
Закрытый
7.11
Создаём и подключаем в проект svg-спрайты
↗
7
7
11м
0
Закрытый
7.12
Тестирование
↗
7
6
0
8. Бутстрап. Открытые формы. Слайдер
15 уроков
👁
98
👤
95
Закрытый
8.1
Разбор домашнего задания по вёрстке картинок
↗
8
8
12м
0
Закрытый
8.2
Разбор вёрстки форм
↗
7
7
19м
0
Закрытый
8.3
Разбор Bootstrap
↗
7
7
7м
0
Закрытый
8.4
Подключение Bootstrap кнопки
↗
6
6
1м
0
Закрытый
8.5
Делаем навигационную панель при помощи Bootstrap
↗
6
6
9м
0
Закрытый
8.6
Правка стилей Bootstrap
↗
6
6
1м
0
Закрытый
8.7
Делаем слайдер/карусель с использованием Bootstrap
↗
7
7
5м
0
Закрытый
8.8
Создание модального окна при помощи Bootstrap
↗
6
6
3м
0
Закрытый
8.9
Доделываем модальное окно
↗
6
6
1м
0
Закрытый
8.10
Разбор сетки Bootstrap
↗
6
6
6м
0
Закрытый
8.11
Подключение и настройка Swiper
↗
6
6
13м
0
Закрытый
8.12
Продолжаем настраивать Swiper
↗
6
6
7м
0
Закрытый
8.13
Настройка автоматизации сборки
↗
7
7
20м
0
Закрытый
8.14
Рекомендации по доработке кнопки
↗
7
7
0м
0
Закрытый
8.15
Тестирование
↗
7
4
0