Верстка главной для интернет магазина в React JS

Сверстаем главную страницу для интернет магазина в React JS. Адаптив, стили, анимации.

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

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

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

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

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

ТАЙМ КОДЫ:

00:00 Старт стрима
07:00 Настройка окружения
17:51 Старт работы. Обзор стартового проекта
25:30 Нарезка графики. Используем готовую
28:07 Шрифты. Fontfascia и Google Fonts
30:25 Общие CSS стили
32:50 Общение с чатом

35:37 Компонент для шапки
44:02 Общение с чатом
45:40 Верстка шапки
52:45 Логотип
55:53 CSS переменные
57:14 Навигация
1:04:13 Общение с чатом

1:07:34 Секция Promo
1:36:00 Курсы ВебКадеми
1:38:40 Общение с чатом

1:41:55 Секция Brands
1:52:30 Секция New Arrivals
2:00:25 Компонент Card
2:14:40 Анимация ховера по карточке
2:19:03 Props. Передача свойств в компоненты
2:24:50 Завершение стрима. Общение в чате

[luv]

пока учил реакт понял что забыл вёрстку

[zhukovaOlya]

Очень понравился стрим в таком формате, большое спасибо, верстала на одном дыхании, жду продолжения)🙏 Побольше бы таких проектов где верстка сразу в реакт)

[gmowemb]

отличное видео по верстке!!!Хотелось бы видеть больше такого контента! В идеале с адаптивом и на модулях

[arslan-n]

Очень круто, мне понравилось. Буду пробовать до верстать макет самостоятельно. Благодарю Вас 🙏

[rvitalia]

спасибо огромное... Хотелось бы увидеть продолжения!!! Очень хорошо преподносите....

[VyacheslavChelnokov]

Отличный стрим! Компонент с карточками очень полезен, прям посмотрел, и в слух сказал "... А что так можно было...))))". Очень полезный контент. Юрий огромное спасибо!!!!

[Vladimir-lxfv]

А продолжение будет? Хотелось бы увидеть полную адаптацию. Видео класс...👍

[betcvdf]

Юрий шарит за базу Арсена Маркаряна
неожиданно получается тоже офицер 😎

[iddfcoi]

Рахмет! за уроки!!! а дальше js будет?

[lrmvtve]

Желал бы видеть верстку сайта с React JS логикой

[xotkinsrus]

Здравствуйте, почему при работе в реакте не работают авто теги?

[bevdjme]

скачал макет, сделал копию фигма, но справа в углу не отображается вкладка inspect. Как сделать? Картинки норм скачал. Спасибо за урок.

[jonydosh]

Скажите размеры в пикселях и шрифты в Фигме это отдельный макет или как то можно настроить в Фигме для отображения размеров ?

[kot]

А будут ли Redux и др. подобные вещи ?

[Paul-fegj]

На самом деле есть расширение eCSStractor tsx for VSCode, после установки, он отлично переносит классы css

[Hawk]

подскажите название тг канала не могу по ссылке зайти в тг

[pplvhhi]

Что у Вас за тема в VSCode в данном уроке?

[asdasd-hguz]

Здраствуйте! Стримы больше по РЕАКТУ не проводите? Я бы с удовольствием глянул.

[replixshop]

есть сниппет почти с таким же названием только для react ecsstractor jsx

[niksemenov]

Чтобы eCSStractor работал с JSX надо в его настройке "Attribute name "class" or "className" for jsx" выбрать className