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

Рет қаралды 56,172

Күн бұрын

Сверстаем главную страницу для интернет магазина в React JS. Адаптив, стили, анимации.
Материалы будут опубликованы в Telegram канале: t.me/+friZxyBulgNmYjE6
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
7 уроков по 30 мин: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
Сайт школы ВебКадеми: 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 Завершение стрима. Общение в чате

Пікірлер: 67

@66luv6 4 ай бұрын

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

@JibekKyialbek_kyzy 3 ай бұрын

Жиза

@xvmmxv8049 2 ай бұрын

жиза @@JibekKyialbek_kyzy

@WmJuliet 2 ай бұрын

Прекрасно тебя понимаю

@user-pd7ez2cu4g Жыл бұрын

Огромное спасибо! Как всегда круто! 👍

@zhukovaOlya 8 ай бұрын

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

@_GreenSnake_ Жыл бұрын

Спасибо за Ваш труд

@arslan-n Жыл бұрын

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

@user-gm7ow1em5b 9 ай бұрын

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

@rvitalia1 9 ай бұрын

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

@alEL321 Жыл бұрын

Спасибо,как всегда интересно.

@veraVera777 11 ай бұрын

класс, надеюсь будет продолжение!

@user-lr6mv6tv2e 11 ай бұрын

Классный урок! Спасибо!

@user-yt6li5wf5m Жыл бұрын

Спасибо. познавательно и интересно.

@VyacheslavChelnokov Жыл бұрын

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

@user-lm9ee1gn5p Жыл бұрын

Спасибо вам

@Vladimir-lx7fv 10 ай бұрын

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

@user-id9df4co8i Жыл бұрын

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

@movieclips9175 Ай бұрын

Спасибо большое

@kot19741 8 ай бұрын

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

@user-lr6mv6tv2e 11 ай бұрын

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

@jonydosh1189 5 ай бұрын

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

@Paul-fe2gj 11 ай бұрын

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

@MenuMoscow Жыл бұрын

уснул но вернулся

@abautomixone5690 8 күн бұрын

Много лишней повторяющей информации 😊

@curious001 7 ай бұрын

1:16:40 eCSStractor tsx for VSCode

@xotkinsrus9383 6 ай бұрын

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

@user-be9vd1jm7e 11 ай бұрын

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

@niksemenov5490 Жыл бұрын

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

@niksemenov5490 Жыл бұрын

или плагин eCSStractor tsx

@replixshop6903 Жыл бұрын

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

@Hawk6895 Жыл бұрын

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

@user-pp1lv2hh5i 7 ай бұрын

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

@user-gh9kx3gh4x 5 ай бұрын

Добрый день,Скажите пожалуйста,сколько стоит сделать сайт интенет магазин с оптимезацией и совсем остальным и был первым когда забиваешь запрос

@WebCademy 5 ай бұрын

Добрый день. Очень объемный вопрос. Сам по себе магазин может стоить от 400$ до 2-4 тыс $ и более. Зависит какой, как и у кого заказывать. А первое место в выдаче - это SEO продвижение, котрое стоит отдельныго бюджета каждый месяц, и это зависит от ниши и также может быть в пределах 400 - 2000$ в месяц, зависит от стратегии продвижения. Или реклама которая дает результат сразу, но оплата идет за каждый клик.

@monsherok Жыл бұрын

Привет! Хотелось бы увидеть Реакт+Редакс (тулкит достаточно)

@user-ke5fn6sm8u 7 ай бұрын

пропиши реакт js пусть самурая. 1 часть смортри там редакс есть да и вообще реакт прокачаешь хорошо у Димыча

@monsherok 7 ай бұрын

@@user-ke5fn6sm8u да я уже на next пишу 😅

@user-ke5fn6sm8u 7 ай бұрын

@@monsherok 😉👍

@thebeerexpert_7923 7 ай бұрын

Я, так как только начинаю в этом разбираться, хотел бы поинтересоваться, зачем нужно вообще использование React? Пояему нельзя сделать этот же проект чисто на html и css, для интерактива можно добаить простоц JS скрипт. Просто я действительно не понимаю, зачем нужен данный способ вёрстки

@WebCademy 7 ай бұрын

React нужен когда есть backend который по API отдает данные и мы пишем frontend который эти данные получает, зачастую в JSON формате и потом уже отрисовывает. Это действительно "отдельный" способ создания веб приложения и отличается от просто html шаблонов встроенных в CMS.

@user-bz4tl4sv8o Ай бұрын

Фотографии скачать в формате PNG или SVG?

@WebCademy Ай бұрын

Если без прозрачного фона то JPG. SVG - для вектора, как правило это иконки.

@user-wg1gr5wo1c 5 ай бұрын

cсылку на макета можно пж

@user-ke5fn6sm8u 7 ай бұрын

привет, было же продолжение этого видео? не могу найти ни в телеграме ни на ютубе. подскажите удалили уже?

@WebCademy 7 ай бұрын

Здравствуйте. Продолжения не было.

@user-ke5fn6sm8u 7 ай бұрын

@@WebCademy о, спасибо. Мне что то показалось что были видео, но ладно, сам продолжаю))) до этого вы дали уже нужные знания;) спасибо за такие видео! Очень полезно

@user-jc7qz6oy2q Жыл бұрын

Сейчас CRA не стоит использовать, даже на офф сайте реакта убрали про CRA(технически и морально устарел)

@user-rr6cu3ux3l Жыл бұрын

О чем речь? Что за CRA? И что использовать вместо него?

@bake5448 11 ай бұрын

@@user-rr6cu3ux3l create-react-app.Viteможешь использовать

@mushnikov35 6 ай бұрын

По идее смысла верстки инет магаза без ssr нет никакого, надо сразу next юзать тогда уж

@user-lc8yv9rm8w Ай бұрын

Почему-то у меня выдает ошибку

@kennyvision5789 Жыл бұрын

можно на Vite запилить

@splcell 11 ай бұрын

Vite не очень. У него шаг влево, шаг вправо ошибка

@user-of1cr8ce2c 11 ай бұрын

2:23:59

@user-yr6lv4vc7v 4 ай бұрын

Все не работает. Почему? Я в отчаянии.

@user-zg3vk9ip1y Жыл бұрын

здравствуйте, объясните новичку, зачем вообще это на рекакте писать? почему не просто html/css?

@alext5030 Жыл бұрын

1. "модно" и "хайпово". 2. в последнее время стали появляться уникумы, которые мимо ванильного JS сразу React или Vue изучают. Т.е. JSX, т.е. жалкий огрызок JS. Потому что ванильный JS - это для лузеров, а вот жалкие ~6% сайтов в мире (Vue + React)t - это для крутых программистов. 3. объективно все же немного проще и быстрее делать сайт на React, чем на ванильном JS, но... если не использовать всякую дичь типа Redux. P.S.: Сейчас кто-нибудь подскажет актуальную мифологию на тему "все должно быть на фреймворках"

@WebCademy Жыл бұрын

Конкретно данный стрим - практика верстки в React JS. По поводу данного макета - на стриме отвечал на этот вопрос. Если проект планируется как SPA - то логично делать его на фреймворке. Если нет и нужна верстка нескольких страниц которые потом будут поставлены на CMS - тогда стоит верстать обычные HTML страницы, можно с Gulp сборкой.

@user-jc7qz6oy2q Жыл бұрын

@@alext5030 че, не можешь найти работу верстальщиком?) раз так агришься на библиотеки и фреймворки(кстати, с таким комментом сразу выдал себя, что знания твои на нуле, максимум верстать умеешь)