Верстка главной для интернет магазина в React JS
HTML-код
- Опубликовано: 1 авг 2024
- Сверстаем главную страницу для интернет магазина в React JS. Адаптив, стили, анимации.
Материалы будут опубликованы в Telegram канале: t.me/+friZxyBulgNmYjE6
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
ТАЙМ КОДЫ:
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 Завершение стрима. Общение в чате
![React для Новичков [2024] | с чего начать изучение React?](/img/1.gif)
пока учил реакт понял что забыл вёрстку
Жиза
жиза
@@JibekKyialbek_kyzy
Прекрасно тебя понимаю
Очень понравился стрим в таком формате, большое спасибо, верстала на одном дыхании, жду продолжения)🙏 Побольше бы таких проектов где верстка сразу в реакт)
отличное видео по верстке!!!Хотелось бы видеть больше такого контента! В идеале с адаптивом и на модулях
Очень круто, мне понравилось. Буду пробовать до верстать макет самостоятельно. Благодарю Вас 🙏
Огромное спасибо! Как всегда круто! 👍
спасибо огромное... Хотелось бы увидеть продолжения!!! Очень хорошо преподносите....
Спасибо за Ваш труд
Классный урок! Спасибо!
класс, надеюсь будет продолжение!
Спасибо,как всегда интересно.
Спасибо. познавательно и интересно.
Отличный стрим! Компонент с карточками очень полезен, прям посмотрел, и в слух сказал "... А что так можно было...))))". Очень полезный контент. Юрий огромное спасибо!!!!
Спасибо вам
А продолжение будет? Хотелось бы увидеть полную адаптацию. Видео класс...👍
Спасибо большое
Рахмет! за уроки!!! а дальше js будет?
Желал бы видеть верстку сайта с React JS логикой
уснул но вернулся
На самом деле есть расширение eCSStractor tsx for VSCode, после установки, он отлично переносит классы css
Юрий шарит за базу Арсена Маркаряна
неожиданно получается тоже офицер 😎
А я ясные дни, оставляю себе)
Здраствуйте! Стримы больше по РЕАКТУ не проводите? Я бы с удовольствием глянул.
А будут ли Redux и др. подобные вещи ?
есть сниппет почти с таким же названием только для react ecsstractor jsx
Скажите размеры в пикселях и шрифты в Фигме это отдельный макет или как то можно настроить в Фигме для отображения размеров ?
Чтобы eCSStractor работал с JSX надо в его настройке "Attribute name "class" or "className" for jsx" выбрать className
или плагин eCSStractor tsx
Что у Вас за тема в VSCode в данном уроке?
скачал макет, сделал копию фигма, но справа в углу не отображается вкладка inspect. Как сделать? Картинки норм скачал. Спасибо за урок.
Здравствуйте, почему при работе в реакте не работают авто теги?
Много лишней повторяющей информации 😊
1:16:40
eCSStractor tsx for VSCode
подскажите название тг канала не могу по ссылке зайти в тг
cсылку на макета можно пж
Привет! Хотелось бы увидеть Реакт+Редакс (тулкит достаточно)
пропиши реакт js пусть самурая. 1 часть смортри там редакс есть да и вообще реакт прокачаешь хорошо у Димыча
@@user-ke5fn6sm8u да я уже на next пишу 😅
@@monsherok 😉👍
Добрый день,Скажите пожалуйста,сколько стоит сделать сайт интенет магазин с оптимезацией и совсем остальным и был первым когда забиваешь запрос
Добрый день. Очень объемный вопрос. Сам по себе магазин может стоить от 400$ до 2-4 тыс $ и более. Зависит какой, как и у кого заказывать. А первое место в выдаче - это SEO продвижение, котрое стоит отдельныго бюджета каждый месяц, и это зависит от ниши и также может быть в пределах 400 - 2000$ в месяц, зависит от стратегии продвижения. Или реклама которая дает результат сразу, но оплата идет за каждый клик.
Почему-то у меня выдает ошибку
можно на Vite запилить
Vite не очень. У него шаг влево, шаг вправо ошибка
Фотографии скачать в формате PNG или SVG?
Если без прозрачного фона то JPG. SVG - для вектора, как правило это иконки.
Все не работает. Почему? Я в отчаянии.
Я, так как только начинаю в этом разбираться, хотел бы поинтересоваться, зачем нужно вообще использование React? Пояему нельзя сделать этот же проект чисто на html и css, для интерактива можно добаить простоц JS скрипт. Просто я действительно не понимаю, зачем нужен данный способ вёрстки
React нужен когда есть backend который по API отдает данные и мы пишем frontend который эти данные получает, зачастую в JSON формате и потом уже отрисовывает. Это действительно "отдельный" способ создания веб приложения и отличается от просто html шаблонов встроенных в CMS.
По идее смысла верстки инет магаза без ssr нет никакого, надо сразу next юзать тогда уж
А материалов я так и не нашел(
Сейчас CRA не стоит использовать, даже на офф сайте реакта убрали про CRA(технически и морально устарел)
О чем речь? Что за CRA? И что использовать вместо него?
@@user-rr6cu3ux3l create-react-app.Viteможешь использовать
привет, было же продолжение этого видео? не могу найти ни в телеграме ни на ютубе. подскажите удалили уже?
Здравствуйте. Продолжения не было.
@@WebCademy о, спасибо. Мне что то показалось что были видео, но ладно, сам продолжаю))) до этого вы дали уже нужные знания;) спасибо за такие видео! Очень полезно
2:23:59
можете скинуть мне это макет.
а в десять реал с сити играют ))
комментарий
здравствуйте, объясните новичку, зачем вообще это на рекакте писать? почему не просто html/css?
1. "модно" и "хайпово".
2. в последнее время стали появляться уникумы, которые мимо ванильного JS сразу React или Vue изучают. Т.е. JSX, т.е. жалкий огрызок JS.
Потому что ванильный JS - это для лузеров, а вот жалкие ~6% сайтов в мире (Vue + React)t - это для крутых программистов.
3. объективно все же немного проще и быстрее делать сайт на React, чем на ванильном JS, но... если не использовать всякую дичь типа Redux.
P.S.: Сейчас кто-нибудь подскажет актуальную мифологию на тему "все должно быть на фреймворках"
Конкретно данный стрим - практика верстки в React JS. По поводу данного макета - на стриме отвечал на этот вопрос. Если проект планируется как SPA - то логично делать его на фреймворке. Если нет и нужна верстка нескольких страниц которые потом будут поставлены на CMS - тогда стоит верстать обычные HTML страницы, можно с Gulp сборкой.
@@alext5030 че, не можешь найти работу верстальщиком?) раз так агришься на библиотеки и фреймворки(кстати, с таким комментом сразу выдал себя, что знания твои на нуле, максимум верстать умеешь)
в конце зависло упустил нужное (((
.