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

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

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

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

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