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

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

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

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

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Продвинутая вёрстка с HTML, CSS, Figma»Учеников на курсе 70
Сертификаты, выданные на курсе «Продвинутая вёрстка с 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 год назад

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

5 уроков
1. Консоль. Создание проекта ↗
2. Основы работы с GitHub ↗
3. Подключение NPM и работа с ним ↗
4. Работа с gulp ↗
5. Домашнее задание ↗

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

3 урока
1. Вёрстка макета с БЭМ ↗
2. Вёрстка формы ↗
3. Домашнее задание ↗

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

7 уроков
1. Вёрстка элементов макета ↗
2. Работа с препроцессорами ↗
3. Настройка и подключение шрифтов ↗
4. Оптимизация скрипта ↗
5. Настройка элементов страницы ↗
6. Оптимизация изображений ↗
7. Тестирование ↗

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

5 уроков
1. Настройка базовой стилизации ↗
2. Настройка стилей footer ↗
3. Настройка сетки блоков ↗
4. Адаптивная вёрстка под разные типы экранов ↗
5. Тестирование ↗

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

7 уроков
1. Вёрстка footer ↗
2. Адаптивная вёрстка с медиа выражениями ↗
3. Добавляем адаптивную вёрстку в проект ↗
4. Вёрстка блока About ↗
5. Адаптивная вёрстка блоков ↗
6. Адаптивная вёрстка footer ↗
7. Тестирование ↗

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

9 уроков
1. Делаем Header ↗
2. Настройка padding в Header ↗
3. Отступы элементов в адаптивной вёрстке ↗
4. Делаем git rebase ↗
5. Резиновая вёрстка - введение ↗
6. Резиновая вёрстка блоков с изображениями ↗
7. Убираем полосы прокрутки ↗
8. Оптимизация резиновой вёрстки ↗
9. Тестирование ↗

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

12 уроков
1. Оптимизируем резиновую вёрстку под маленькие экраны ↗
2. Оптимизация резиновой вёрстки хедера под мобильную версию ↗
3. Оптимизация резиновой вёрстки для оставшихся блоков ↗
4. Ретинизация ↗
5. Настройка резиновой картинки ↗
6. Настройка отображения изображения в зависимости от размера экран ↗
7. Знакомство с классом grid ↗
8. Настройка ретинизации через стили css ↗
9. Меняем картинки для ретины ↗
10. Делаем всплывающую форму при помощи grid ↗
11. Создаём и подключаем в проект svg-спрайты ↗
12. Тестирование ↗

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

15 уроков
1. Разбор домашнего задания по вёрстке картинок ↗
2. Разбор вёрстки форм ↗
3. Разбор Bootstrap ↗
4. Подключение Bootstrap кнопки ↗
5. Делаем навигационную панель при помощи Bootstrap ↗
6. Правка стилей Bootstrap ↗
7. Делаем слайдер/карусель с использованием Bootstrap ↗
8. Создание модального окна при помощи Bootstrap ↗
9. Доделываем модальное окно ↗
10. Разбор сетки Bootstrap ↗
11. Подключение и настройка Swiper ↗
12. Продолжаем настраивать Swiper ↗
13. Настройка автоматизации сборки ↗
14. Рекомендации по доработке кнопки ↗
15. Тестирование ↗