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

- Консоль. Создание проекта
- Основы работы с GitHub
- Подключение NPM и работа с ним
- Работа с gulp
- Домашнее задание

- Вёрстка макета с БЭМ
- Вёрстка формы
- Домашнее задание

- Вёрстка элементов макета
- Работа с препроцессорами
- Настройка и подключение шрифтов
- Оптимизация скрипта
- Настройка элементов страницы
- Оптимизация изображений
- Тестирование

- Настройка базовой стилизации
- Настройка стилей footer
- Настройка сетки блоков
- Адаптивная вёрстка под разные типы экранов
- Тестирование

- Вёрстка footer
- Адаптивная вёрстка с медиа выражениями
- Добавляем адаптивную вёрстку в проект
- Вёрстка блока About
- Адаптивная вёрстка блоков
- Адаптивная вёрстка footer
- Тестирование

- Делаем Header
- Настройка padding в Header
- Отступы элементов в адаптивной вёрстке
- Делаем git rebase
- Резиновая вёрстка - введение
- Резиновая вёрстка блоков с изображениями
- Убираем полосы прокрутки
- Оптимизация резиновой вёрстки
- Тестирование

- Оптимизируем резиновую вёрстку под маленькие экраны
- Оптимизация резиновой вёрстки хедера под мобильную версию
- Оптимизация резиновой вёрстки для оставшихся блоков
- Ретинизация
- Настройка резиновой картинки
- Настройка отображения изображения в зависимости от размера экран
- Знакомство с классом grid
- Настройка ретинизации через стили css
- Меняем картинки для ретины
- Делаем всплывающую форму при помощи grid
- Создаём и подключаем в проект svg-спрайты
- Тестирование

- Разбор домашнего задания по вёрстке картинок
- Разбор вёрстки форм
- Разбор Bootstrap
- Подключение Bootstrap кнопки
- Делаем навигационную панель при помощи Bootstrap
- Правка стилей Bootstrap
- Делаем слайдер/карусель с использованием Bootstrap
- Создание модального окна при помощи Bootstrap
- Доделываем модальное окно
- Разбор сетки Bootstrap
- Подключение и настройка Swiper
- Продолжаем настраивать Swiper
- Настройка автоматизации сборки
- Рекомендации по доработке кнопки
- Тестирование