Чему вы научитесь
Вёрстка сайтов
Flexbox, SVG, BEM.
Инструменты разработчика
VSCode, Emmet, live-server.
Базовый JavaScript
Реализация фильтра, меню, слайдшоу.
Размещать сайт на хостинг
Деплой на Github Pages.
Программа обучения
Первые 8 уроков бесплатны, чтобы вы могли оценить качество материалов.
Последний урок также бесплатный, чтобы вы могли посмотреть домашнее задание.
Подготовка
- Обзор проекта
- Необходимые программы
- Hello World
Необходимая теория
- HTML. Теги
- Emmet
- Основная структура
- Id и class
- BEM
- Первая секция. Разметка
- Работа с путями
- CSS. Теория
- Св-ва позиционирования. Flexbox
- Св-ва позиционирования. Position
- Блочная модель
Стилизация
- Начало стилизации. Normalize
- Цвет. Составные свойства
Первая секция
- Первая секция. Стилизация
- Подключение шрифтов
- Первая секция. Позиционирование
- Первая секция. Текст
- Переиспользование блоков
- Блок обертка
Вторая секция
- Вторая секция. Фильтр
- CSS Переменные
- Вторая секция. Элементы
- Вторая секция. Выравнивание списка
- Вторая секция. Геометрический элемент
Третья секция
- Третья секция. Разметка
- Третья секция. Стилизация
Остальные секции
- Секция меню
- Иконки соц. сетей. SVG
Реализация элементов на Javascript
- Боковое меню. Верстка
- Боковое меню. Класс для состояний
- Подключение скриптов
- Боковое меню. Реализация
- Слайдер. Верстка
- Слайдер. Реализация
- Фильтр. Селектор
- Фильтр. Сортировка
Деплой
- Деплой. GitHub Pages
- Отображение на мобильных
Задание
