Тёмный

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

ВебКадеми | Юрий Ключевский
Подписаться 55 тыс.
Просмотров 61 тыс.
50% 1

Сверстаем главную страницу для интернет магазина в 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 Завершение стрима. Общение в чате

Опубликовано:

 

1 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 71   
@66luv6
@66luv6 6 месяцев назад
пока учил реакт понял что забыл вёрстку
@JibekKyialbek_kyzy
@JibekKyialbek_kyzy 5 месяцев назад
Жиза
@xvmmxv8049
@xvmmxv8049 5 месяцев назад
жиза @@JibekKyialbek_kyzy
@WmJuliet
@WmJuliet 4 месяца назад
Прекрасно тебя понимаю
@zhukovaOlya
@zhukovaOlya 10 месяцев назад
Очень понравился стрим в таком формате, большое спасибо, верстала на одном дыхании, жду продолжения)🙏 Побольше бы таких проектов где верстка сразу в реакт)
@user-gm7ow1em5b
@user-gm7ow1em5b Год назад
отличное видео по верстке!!!Хотелось бы видеть больше такого контента! В идеале с адаптивом и на модулях
@arslan-n
@arslan-n Год назад
Очень круто, мне понравилось. Буду пробовать до верстать макет самостоятельно. Благодарю Вас 🙏
@user-pd7ez2cu4g
@user-pd7ez2cu4g Год назад
Огромное спасибо! Как всегда круто! 👍
@rvitalia1
@rvitalia1 Год назад
спасибо огромное... Хотелось бы увидеть продолжения!!! Очень хорошо преподносите....
@_GreenSnake_
@_GreenSnake_ Год назад
Спасибо за Ваш труд
@user-lr6mv6tv2e
@user-lr6mv6tv2e Год назад
Классный урок! Спасибо!
@veraVera777
@veraVera777 Год назад
класс, надеюсь будет продолжение!
@alEL321
@alEL321 Год назад
Спасибо,как всегда интересно.
@sobakastar_proba
@sobakastar_proba Год назад
Спасибо. познавательно и интересно.
@VyacheslavChelnokov
@VyacheslavChelnokov Год назад
Отличный стрим! Компонент с карточками очень полезен, прям посмотрел, и в слух сказал "... А что так можно было...))))". Очень полезный контент. Юрий огромное спасибо!!!!
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Спасибо вам
@Vladimir-lx7fv
@Vladimir-lx7fv Год назад
А продолжение будет? Хотелось бы увидеть полную адаптацию. Видео класс...👍
@movieclips9175
@movieclips9175 4 месяца назад
Спасибо большое
@user-id9df4co8i
@user-id9df4co8i Год назад
Рахмет! за уроки!!! а дальше js будет?
@user-lr6mv6tv2e
@user-lr6mv6tv2e Год назад
Желал бы видеть верстку сайта с React JS логикой
@MenuMoscow
@MenuMoscow Год назад
уснул но вернулся
@Paul-fe2gj
@Paul-fe2gj Год назад
На самом деле есть расширение eCSStractor tsx for VSCode, после установки, он отлично переносит классы css
@user-be9tc8vd7f
@user-be9tc8vd7f 2 месяца назад
Юрий шарит за базу Арсена Маркаряна неожиданно получается тоже офицер 😎
@WebCademy
@WebCademy 2 месяца назад
А я ясные дни, оставляю себе)
@asdasd-hg3uz
@asdasd-hg3uz Месяц назад
Здраствуйте! Стримы больше по РЕАКТУ не проводите? Я бы с удовольствием глянул.
@kot19741
@kot19741 11 месяцев назад
А будут ли Redux и др. подобные вещи ?
@replixshop6903
@replixshop6903 Год назад
есть сниппет почти с таким же названием только для react ecsstractor jsx
@jonydosh1189
@jonydosh1189 7 месяцев назад
Скажите размеры в пикселях и шрифты в Фигме это отдельный макет или как то можно настроить в Фигме для отображения размеров ?
@niksemenov5490
@niksemenov5490 Год назад
Чтобы eCSStractor работал с JSX надо в его настройке "Attribute name "class" or "className" for jsx" выбрать className
@niksemenov5490
@niksemenov5490 Год назад
или плагин eCSStractor tsx
@user-pp1lv2hh5i
@user-pp1lv2hh5i 9 месяцев назад
Что у Вас за тема в VSCode в данном уроке?
@user-be9vd1jm7e
@user-be9vd1jm7e Год назад
скачал макет, сделал копию фигма, но справа в углу не отображается вкладка inspect. Как сделать? Картинки норм скачал. Спасибо за урок.
@xotkinsrus9383
@xotkinsrus9383 9 месяцев назад
Здравствуйте, почему при работе в реакте не работают авто теги?
@abautomixone5690
@abautomixone5690 2 месяца назад
Много лишней повторяющей информации 😊
@curious001
@curious001 10 месяцев назад
1:16:40 eCSStractor tsx for VSCode
@Hawk6895
@Hawk6895 Год назад
подскажите название тг канала не могу по ссылке зайти в тг
@user-wg1gr5wo1c
@user-wg1gr5wo1c 7 месяцев назад
cсылку на макета можно пж
@monsherok
@monsherok Год назад
Привет! Хотелось бы увидеть Реакт+Редакс (тулкит достаточно)
@user-ke5fn6sm8u
@user-ke5fn6sm8u 10 месяцев назад
пропиши реакт js пусть самурая. 1 часть смортри там редакс есть да и вообще реакт прокачаешь хорошо у Димыча
@monsherok
@monsherok 10 месяцев назад
@@user-ke5fn6sm8u да я уже на next пишу 😅
@user-ke5fn6sm8u
@user-ke5fn6sm8u 10 месяцев назад
@@monsherok 😉👍
@user-gh9kx3gh4x
@user-gh9kx3gh4x 8 месяцев назад
Добрый день,Скажите пожалуйста,сколько стоит сделать сайт интенет магазин с оптимезацией и совсем остальным и был первым когда забиваешь запрос
@WebCademy
@WebCademy 8 месяцев назад
Добрый день. Очень объемный вопрос. Сам по себе магазин может стоить от 400$ до 2-4 тыс $ и более. Зависит какой, как и у кого заказывать. А первое место в выдаче - это SEO продвижение, котрое стоит отдельныго бюджета каждый месяц, и это зависит от ниши и также может быть в пределах 400 - 2000$ в месяц, зависит от стратегии продвижения. Или реклама которая дает результат сразу, но оплата идет за каждый клик.
@user-lc8yv9rm8w
@user-lc8yv9rm8w 3 месяца назад
Почему-то у меня выдает ошибку
@kennyvision5789
@kennyvision5789 Год назад
можно на Vite запилить
@splcell
@splcell Год назад
Vite не очень. У него шаг влево, шаг вправо ошибка
@user-bz4tl4sv8o
@user-bz4tl4sv8o 3 месяца назад
Фотографии скачать в формате PNG или SVG?
@WebCademy
@WebCademy 3 месяца назад
Если без прозрачного фона то JPG. SVG - для вектора, как правило это иконки.
@user-yr6lv4vc7v
@user-yr6lv4vc7v 7 месяцев назад
Все не работает. Почему? Я в отчаянии.
@thebeerexpert_7923
@thebeerexpert_7923 10 месяцев назад
Я, так как только начинаю в этом разбираться, хотел бы поинтересоваться, зачем нужно вообще использование React? Пояему нельзя сделать этот же проект чисто на html и css, для интерактива можно добаить простоц JS скрипт. Просто я действительно не понимаю, зачем нужен данный способ вёрстки
@WebCademy
@WebCademy 10 месяцев назад
React нужен когда есть backend который по API отдает данные и мы пишем frontend который эти данные получает, зачастую в JSON формате и потом уже отрисовывает. Это действительно "отдельный" способ создания веб приложения и отличается от просто html шаблонов встроенных в CMS.
@mushnikov35
@mushnikov35 9 месяцев назад
По идее смысла верстки инет магаза без ssr нет никакого, надо сразу next юзать тогда уж
@user-wz8jd9ud9f
@user-wz8jd9ud9f 8 дней назад
А материалов я так и не нашел(
@МедныйТазик
@МедныйТазик Год назад
Сейчас CRA не стоит использовать, даже на офф сайте реакта убрали про CRA(технически и морально устарел)
@user-rr6cu3ux3l
@user-rr6cu3ux3l Год назад
О чем речь? Что за CRA? И что использовать вместо него?
@bake5448
@bake5448 Год назад
​@@user-rr6cu3ux3l create-react-app.Viteможешь использовать
@user-ke5fn6sm8u
@user-ke5fn6sm8u 9 месяцев назад
привет, было же продолжение этого видео? не могу найти ни в телеграме ни на ютубе. подскажите удалили уже?
@WebCademy
@WebCademy 9 месяцев назад
Здравствуйте. Продолжения не было.
@user-ke5fn6sm8u
@user-ke5fn6sm8u 9 месяцев назад
@@WebCademy о, спасибо. Мне что то показалось что были видео, но ладно, сам продолжаю))) до этого вы дали уже нужные знания;) спасибо за такие видео! Очень полезно
@user-of1cr8ce2c
@user-of1cr8ce2c Год назад
2:23:59
@user-ez7zp5xr3s
@user-ez7zp5xr3s 8 месяцев назад
можете скинуть мне это макет.
@MenuMoscow
@MenuMoscow Год назад
а в десять реал с сити играют ))
@user-xn1cv6lj4x
@user-xn1cv6lj4x 5 месяцев назад
комментарий
@user-zg3vk9ip1y
@user-zg3vk9ip1y Год назад
здравствуйте, объясните новичку, зачем вообще это на рекакте писать? почему не просто html/css?
@alext5030
@alext5030 Год назад
1. "модно" и "хайпово". 2. в последнее время стали появляться уникумы, которые мимо ванильного JS сразу React или Vue изучают. Т.е. JSX, т.е. жалкий огрызок JS. Потому что ванильный JS - это для лузеров, а вот жалкие ~6% сайтов в мире (Vue + React)t - это для крутых программистов. 3. объективно все же немного проще и быстрее делать сайт на React, чем на ванильном JS, но... если не использовать всякую дичь типа Redux. P.S.: Сейчас кто-нибудь подскажет актуальную мифологию на тему "все должно быть на фреймворках"
@WebCademy
@WebCademy Год назад
Конкретно данный стрим - практика верстки в React JS. По поводу данного макета - на стриме отвечал на этот вопрос. Если проект планируется как SPA - то логично делать его на фреймворке. Если нет и нужна верстка нескольких страниц которые потом будут поставлены на CMS - тогда стоит верстать обычные HTML страницы, можно с Gulp сборкой.
@МедныйТазик
@МедныйТазик Год назад
@@alext5030 че, не можешь найти работу верстальщиком?) раз так агришься на библиотеки и фреймворки(кстати, с таким комментом сразу выдал себя, что знания твои на нуле, максимум верстать умеешь)
@adilovazizbek5772
@adilovazizbek5772 3 месяца назад
в конце зависло упустил нужное (((
@ans6552
@ans6552 9 месяцев назад
.
Далее
I'm Excited To see If Kelly Can Meet This Challenge!
00:16
😱КТО БУДЕТ ЛЕДИ БАГ А4⁉️ #а4
00:50
React и Next js убивают фронтенд!
9:11