Верстка сайта HTML + SCSS + JS — Часть 4: Страница каталога (макет Reel To Real)

Привет! Новый мастер-класс (марафон) на канале. Верстаем интернет-магазин из 8 страниц с помощью Gulp.

Макет: https://www.figma.com/design/ibU1GHXYJYxMPXxH76yC0I/yt-hifi-shop?node-id=0-1&t=0iUOmoA8zKD1Yhvi-1
Готовый код: https://boosty.to/maxgraph
Страница с таймкодами UI-элементов: https://verstaem.online/master-class/reel-to-real/

Содержание:
00:00 - Компонент "Наверх"
03:21 - Компонент "Cookie"
16:20 - Верстка измененной шапки
24:25 - Компонент хлебных крошек
31:30 - Верстка каталога
41:50 - Компонент фильтров
43:23 - Компонент чекбокса
53:35 - Компонент радиокнопки
01:02:00 - js аккордеона
01:13:27 - Компонент цены (инпуты + ползунок)
01:53:09 - Правая часть каталога
01:55:30 - Компонент селекта
02:09:00 - Сетка товаров
02:11:50 - Компонент пагинации
02:19:00 - Аутро
Доп. контент и поддержка канала:
❤️ https://boosty.to/maxgraph
❤️ https://www.donationalerts.com/r/maxdenaro

Полезные ссылки:
🤌 Макеты для верстки: https://verstaem.online/projects/
🤌 Задачки по верстке с решениями: https://verstaem.online/tasks/
🤌 Курс по верстке html-писем: https://verstaem.online/courses/html-emails/
🤌 Канал с полезностями в телеграм: https://t.me/maxgraph
🤌 Чат для верстальщиков: https://t.me/maxgraph_chat

🤙 ВК Видео: https://vk.com/video/@maxgraph

👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
Подписывайся: https://www.youtube.com/@maxgraph?sub_confirmation=1

#верстка #html #css

Видео Верстка сайта HTML + SCSS + JS — Часть 4: Страница каталога (макет Reel To Real) канала MaxGraph - cайты как страсть