HTML Верстка корзины товаров HTML, SCSS, BEM naming

Опубликовано: 06 Октябрь 2024
на канале: ВебКадеми | Юрий Ключевский

13,825

601

Макет и код к уроку в описании. Поделитесь видео в соц сетях. Поддержите выпуск уроков. Адаптивная верстка корзины товаров на HTML, CSS Grid, SCSS, BEM naming.

✅ Верстка на CSS Grid
✅ Препроцессор SCSS
✅ Использование BEM naming
✅ Мобильная адаптация

Figma макет и готовый код с урока: https://webcademy.ru/blog/792/
Вторая часть. Добавление интерактива на React JS: • Проект на React JS. Корзина товаров. ...

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 14 Октября 2024 года.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 21 Октября 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews

Тайм коды:

00:00 Введение и макет
01:50 Курс по HTML верстке
02:10 Создание проекта
07:01 Шрифты
09:30 Разметка для секции, контейнер, заголовок
25:04 Блок с корзиной
30:02 Шапка для корзины
36:47 Подвал для корзины
41:45 Продукт
45:26 Экспорт изображений
47:41 Добавляем изображения в разметку
54:03 Счетчик для товара
1:03:50 2-й и 3-й товары
1:07:45 Отступы между колонками в сетке
1:09:08 Адаптивная верстка таблицы
1:22:00 Финал

Сайт: https://webcademy.ru/
Вконтакте: https://vk.com/webcademy
Telegram канал: https://t.me/webcademynews

Закрытый канал с исходниками: https://t.me/+9XtDDNBdHAk4Yjhi
Ссылка на макет и код с вебинара: https://t.me/c/1579074518/75