Продвинутый HTML + CSS (семинары)

Ссылка на розовый макет

https://www.figma.com/file/yHsIRRU0iIcTs731DSrC01/shop-(Copy)?node-id=0%3A1&mode=dev

Урок 1. Препроцессы

1. В предыдущем курсе вам удалось реализовать главную страницу интернет-магазина. Вам необходимо открыть данный проект Устанавливаем 3 расширения (если вы этого не сделали на семинаре): a. Live Sass Compiler b. Sass c. Live Server
2. Перевести все стили из css в SCSS
3. Приступаем к созданию страницы каталога
4. Не забываем, что у вас уже готова шапка сайта и подвал страницы, плюс у вас уже есть блок из 3х товаров, осталось добавить изображение и под ним описание
5. Адаптив создавать не нужно, только десктопную версию

Урок 2. Новые возможности HTML5

1. Вам необходимо создать страницу каталога
2. Обязательно использовать препроцессоры
3. Не забыть добавить выпадающие блоки сортировки
4. У вас уже есть созданные шапка и подвал сайта, данные элементы должны быть переиспользованы с главной страницы интернет-магазина
5. Адаптив создавать не нужно, только десктопную версию

Урок 3. Новые возможности CSS3

1. Создать страницу корзины
2. Использовать препроцессоры
3. Добавить эффекты наведения, на все кнопки и ссылки на сайте
4. Добавить плавность перехода, при наведении на элементы
5. Адаптив создавать не нужно, только десктопную версию

Урок 4. Методология БЭМ

1. Создать страницу регистрации
2. Использовать препроцессоры
3. Добавлять эффекты наведения на все кнопки и ссылки
4. Добавлять плавность перехода при наведении на элементы
5. Адаптив создавать не нужно, только десктопную версию

Урок 5. Адаптивная вёрстка

1. Создать планшетную версию для всех 5 страниц интернет-магазина
2. Проверить работу сайта на разрешении 768px
3. Проверить работу сайта на разрешении 1024 px

Урок 6. Продвинутая работа с анимацией, создаем игру на HTML/CSS

1. Создать мобильную версию для всех 5 страниц интернет-магазина
2. Проверить работу сайта на разрешении 375px
3. Проверить работу сайта на разрешении 425 px
4. Проверить сайта на валидность