1-й модуль
День первый
Основы разметки веб-страниц
- Структура Html документа
- Первая веб-страница с помощью языка разметки Html
- Знакомство с редактором Sublime Text 3
Результат занятия: создали первую веб-страницу, изучили базовые способы разметки текста путем использования тегов.
Практическое задание: создать веб-страницу с помощью языка разметки Html.
День второй
Элемент div и атрибуты тегов
- Работа с веб-инспектором
- Создание многостраничного сайта
- Изучение новых элементов и атрибутов тегов
Результат занятия: научились добавлять ссылки и картинки на сайт, добавили атрибуты тегам
Практическое задание: создать первый многостраничный сайт.
День третий
Каскадные таблицы стилей
- Знакомство с каскадными таблицами стилей
- Создание стилей HTML-элементов
- Использование селекторов
- Установка и работа с плагином Emmet и добавить текст Lorem
Результат занятия: научились изменять цвет фона и цвет текста HTML-элементам, пользоваться двумя типами селекторов, создавать текст Lorem с помощью плагина Emmet
Практическое задание: изменить внешний вид страницы, используя CSS свойства.
День четвертый
Создание сайта Jaguar
- Создание многостраничного сайта Jaguar
- Создание файловой структуры проекта
- Работа с внешними и внутренними отступами элементов
Результат занятия: научились работать с внешним файлом CSS, познакомились с внешними и внутренними отступами элементов.
Практическое задание: создать многостраничный сайт Jaguar.
2-й модуль
День первый
Box model в CSS
- Блочная модель в CSS
- Создание блоков необычной формы
- Работа со свойством box-sizing для изменения способа вычисление ширины и высоты элемента
Результат занятия: научились создавать блоки необычной формы, использовать свойство box-sizing со значением border-box для правильного вычисления ширины элемента и задавать размеры элементам в разных единицах измерения
Практическое задание: создать карточки с текстом, используя разные значения свойства box-sizing.
День второй
Продвинутая работа с текстом в CSS
- Разные типы шрифтов
- Выбор шрифтов для сайтов
- Создание новых стилей, позволяющих настраивать отображение текста на продвинутом уровне
Результат занятия: создали страницу с использованием разных типов шрифтов, улучшили вид и читаемость текста, используя пройденные свойства.
Практическое задание: создать страницу с использованием основных типов шрифтов.
День третий
Позиционирование элементов в CSS
- Работа со свойством float
- Типы позиционирования элементов на странице
- Свойство position
Результат занятия: научились работать со свойствами float и position, создавать обтекание картинок текстом
Практическое задание: создать веб-страницу и разместить на ней элементы, используя свойства float и position
День четвертый
Создание страницы блога
- Создание страницы блога
- Свойства позиционирования элементов для размещения меню и постов на странице
- Семантические теги
Результат занятия: научились работать с семантическими тегами, используя свойства позиционирования, расставили основные компоненты блога на странице
Практическое задание: создать страницу блога, используя семантические теги
3-й модуль
День первый
Псевдоклассы и работа с изображениями в CSS
- Использование фоновых картинок на веб-странице
- Псевдоклассы hover, active и visited
- Изменение стиля одно элемента при активации псевдокласса у другого элемента
- Создание background patterns
Результат занятия: научились работать с фоновыми картинками, изучили свойства для работы с картинками
Практическое задание: добавить внешние изменения элементам при наведении на них курсора мыши.
День второй
FlexBox в CSS
- Работа с CSS Flexible Box Layout
- Свойства для выравнивания элементов в Flex контейнере
- Обучающая игра flex-frog
Результат занятия: научились работать с технологией Flex для создания гибких макетов, прошли игру flex-frog для закрепления пройденного материала
Практическое задание: пройти игру flex-frog для закрепления пройденного материала
День третий
Разработка сайта Sneakers shop. Часть 1
- Создание структуры сайта с моделями
- Подключение к сайту шрифта
- Свойства шапки сайта и ее дочерних элементов
- Функции для создания градиентного фона страницы
Результат занятия: создали структуру сайта с моделями, подключили шрифт к сайту.
Практическое задание: выбрать и скачать картинки с моделями, добавить тень шапки сайта
День четвертый
Разработка сайта Sneakers shop. Часть 2
- Завершение работы над сайтом
- Создание блока с карточками
- Изменение поведение элементов при наведении на них
- Технология FlexBox для позиционирования карточек
Результат занятия: создали сайт с карточками моделей
Практическое задание: добавить галерею, используя технологию FlexBo
4-й модуль
День первый
Grid Layout в CSS
- Знакомство с Grid системой
- Создание страницы с использованием Grid сетки
- Свойства для продвинутой работы с Grid ячейками
Результат занятия: изучили систему двухмерного макета (CSS Grid Layout), научились позиционировать Grid ячейки на странице.
Практическое задание: пройти игру grid garden для закрепления пройденного материала.
День второй
Псевдоэлементы after и before
- Псевдоэлементы before и after
- Комбинирование картинки с текстом внутри
- Элементы с псевдоэлементами first-letter и first-line
Результат занятия: научились работать с псевдоэлементами before, after, firstletter и first-line, комбинировать псевдоэлементы с разными свойствами для создания красивых блоков
Практическое задание: создать элемент с использованием псевдоэлементов after и befor.
День третий
Анимации и трансформации в CSS
- CSS трансформации
- Применение трансформаций Html-элементам
- Создание анимированных блоков в CSS
- Применение временных функций для ключевых кадров
Результат занятия: научились работать с трансформациями в CSS, создавать бесконечные анимации в CSS.
Практическое задание: создать кнопку, добавить ей трансформации при наведении.
День четвертый
Практика в создании анимаций в CSS
- Применение анимации и трансформации на практике
- Создание анимированной орбитальной системы планет нашей Солнечной системы
Результат занятия: создали страницу с демонстрацией движения планет в Солнечной системе и анимированный фон.
Практическое задание: создать анимированную орбитальную систему планет нашей солнечной системы.
5-й модуль
День первый
Создание интернет магазина
- Что такое интернет магазин?
- Создание структуры проекта
- Настройка проекта
Результат занятия: начали создавать интернет-магазин.
Практическое задание: выбрать иконки, которые будут использоваться на сайте.
День второй
Создание шапки интернет-магазина
- Переменные в CSS и способы их использования
- Подключение шрифтов во внешнюю таблицу стилей, используя функцию url
- Шапка интернет-магазина, ее стилизация
- Добавление дополнительной функциональности меню с помощью языка программирования JavaScript
Результат занятия: настроили глобальные переменные в проекте, создали многофункциональную шапку с меню, подключили Javascript файл для добавления дополнительной функциональности меню.
Практическое задание: добавить изменение фона шапки сайта при прокрутке страницы
День третий
Создание первого экрана с главным продуктом
- HTML-структура презентационного блока
- Grid система для правильного отображения элементов
- Значения CSS свойств с помощью переменных
- Стилизация элементов
Результат занятия: создали презентационную часть интернет магазина
Практическое задание: создать презентационную часть интернет магазина
День четвертый
Создание блока с популярными товарами
- HTML-разметка для блока с товарами
- Стилизация для карточек товаров
- Grid-сетка для позиционирования карточек
- Стилизация блока с историей компании
Результат занятия: создали блок с популярными товарами и историей компании
Практическое задание: добавить внешние и внутренние отступы элементам в блоке с историей компании
6-й модуль
День первый
Создание слайдера с отзывами покупателей.
- Блок с отзывами
- Способы создания прокручиваемых контейнеров в CSS
- Свойства scroll-behavior и scroll-snap-type
- Точки привязки в слайдере
Результат занятия: создали слайдер с отзывами клиентов с помощью HTML и CSS.
Практическое задание: добавить точки привязки основным секциям сайта и создать автоматический scroll до этих блоков при нажатии на кнопку.
День второй
Работа с формами и видео контентом.
- HTML5 теги для вставки видео-контента на сайт
- Стилизация секции с полноэкранным видео роликом
- Тег поля ввода - , и его атрибуты
- Тег для создания форм в Html
- Стилизация элемента ввода текста
Результат занятия: создали секцию с видео и блок с формой обратной связи
Практическое задание: создать форму обратной связи, задать стилизацию элементам
День третий
Создание отдельной страницы с галереей
- Нестандартная Grid сетка для страницы с галереей
- Добавление в сетку блоков с изображениями
- Псевдоэлементы и разные анимации блоков с изображениями
- CSS фильтры для улучшения визуального дизайна галереи
Результат занятия: создали отдельную страницу с фото-галереей
Практическое задание: с помощью разных типов позиционирования создать полупрозрачный необычный фон.
День четвертый
Адаптация контента под все виды устройств.
- Способы адаптирования контента под мобильные устройства
- Media queries для применения различных свойств одному элементу на устройствах с разной шириной
- CSS правила для трех видов устройств
Результат занятия: адаптировали сайт под планшеты и телефоны.
Практическое задание: используя media запросы, изменить значения свойств HTML-элементам для адаптации контента под все виды устройств
7-й модуль
День первый
Знакомство с фреймворком Tailwind SS.
- Что такое фреймворки, и как они ускоряют процесс разработки проекта
- Установка фреймворка Tailwind CSS и плагинов
- Концепты фреймворка Tailwind CSS
- Работа с типографией и цветами в Tailwind CSS
Результат занятия: создали первую веб-страницу с использованием фреймворка Tailwind CSS.
Практическое задание: создать блок с текстом, задать элементам стилизацию с помощью tailwind классов.
День второй
Tailwind классы для создания адаптивного сайта
- Работа c Tailwind классами для создания адаптивного сайта
- Классы для добавления эффектов hover и focus
- Классы для добавления теней элементам
- Классы для работы с размерами элементов
- Классы для работы с внешними и внутренними отступами элементов
Результат занятия: создали адаптивную страницу под все виды устройств.
Практическое задание: создать кнопки, добавить эффекты при нажатии на них с помощью классов Tailwind
День третий
Tailwind Flex Layout.
- Работа c Tailwind Flex Layout
- Классы для выравнивания дочерних элементов в Flex контейнере
- Создание карточки с ценой продукта
- Создание индикаторов прогресса
- Работа с псевдоэлементами в Tailwind CSS
Результат занятия: создали Flex контейнер с карточками товаров
Практическое задание: создать карточку с описанием товара.
День четвертый
Grid система в Tailwind CSS.
- Свойства row-span и col-span
- Свойства для автоматического заполнения элементами пустого пространства в Grid сетке
- Страница с командой проекта
Результат занятия: создали адаптивную страницу команды проекта с использованием системы Tailwind Grid.
Практическое задание: добавить grid элементам эффекты при наведении на ни
8-й модуль
День первый
Настройка проекта
- Настройка проекта сайта приложения “Manage”
- Создание адаптивной шапки сайта
- Создание меню Hamburger с использованием JavaScript
- Создание презентационной секции с продуктом
Результат занятия: создали первый экран сайта приложения “Manage”
Практическое задание: добавить фоновую картинку первому экрану.
День второй
Создание секции с описанием приложения
- Секция с описанием приложения и его преимуществами
- Адаптировать созданный блок под все виды устройств
- Секция с работой приложения
- ПрименитьTailwind фильтры к изображению
Результат занятия: создали две секции сайта “Manage”
Практическое задание: создать дополнительную секцию с историей создания приложения
День третий
Создание секции о команде проекта
- Секция о команде
- Слайдер с использованием Tailwind CSS и Javascript
- Карточки о сотрудниках
Результат занятия: создали секцию о команде проекта
Практическое задание: создать секцию с CTA кнопкой
День четвертый
Создание секции с ценами
- Создать секцию с ценами
- Создать адаптивный footer сайта
- Завершить работу над проектом
Результат занятия: завершили работу над проектом, создали сайт приложения “Manage”
Практическое задание: доработать проект, выложить сайт в интернет
9-й модуль
День первый
Начало работы над собственным проектом.
- Выбрать тему проекта
- Начать разработку собственного сайта
Результат занятия: выбрана тема, начата работа над проектом
Практическое задание: работа над проектом
День второй
Продолжение работы над проектом
- Продолжить работу над проектом
- Исправить ошибки в проекте
Результат занятия: создание страниц сайта
Практическое задание: работа над проектом
День третий
Подготовка презентации проекта.
- Описать свой проект
- Создать шаблон презентации для защиты проекта
- Завершить работу над проектом
- Выложить сайт в интернет
Результат занятия: подготовили презентацию, провели репетицию выступления.
Практическое задание: подготовить презентацию проекта, выложить сайт в интернет.
День четвертый
Защита проекта.
- Доработать презентацию проекта
- Защитить проект перед аудиторией
Результат занятия: завершили работу над проектом курса, презентовали его родителям.
Практическое задание: доработать проект, подготовить и провести презентацию.