Загрузка...

React TypeScript на Реальном Проекте. Section Home

🔥 Реальный проект на React + TypeScript
👉 💡 Освой TypeScript на реальном проекте — React Fitness

🎬 Третья часть курса React Fitness: делаем секцию Home и адаптивное мобильное меню!

В этом видео мы продолжаем курс по созданию лендинга на React + TypeScript. На этом этапе мы реализуем полноценную секцию Home, улучшаем адаптивность и добавляем бургер-меню. Также пишем собственный хук useMediaQuery для отслеживания ширины экрана.

Этот урок подойдёт всем, кто хочет разобраться в адаптивной верстке, анимациях и архитектуре компонентов на практике.

🚀 Что вы узнаете в этом видео:
✅ Как создать секцию Home, состоящую из двух частей
 • левая сторона — заголовки, кнопка, анимации
 • правая сторона — изображение (с анимацией через Framer Motion)
✅ Как добавить секцию “Партнёры” с поочерёдным появлением логотипов
✅ Как создать мобильное меню: бургер-иконка + плавное появление
✅ Как реализовать хук useMediaQuery для отслеживания размеров экрана
✅ Как управлять отображением элементов в зависимости от ширины экрана
✅ Как добавить кастомные анимации через Framer Motion

📁 Технологии, которые мы используем:
React • TypeScript • TailwindCSS • Framer Motion • React Hook Form • Zod • Netlify.

🔗 Полезные ссылки:
GitHub-репозиторий: https://github.com/Ilya-Stoyanov/fitness-landing-react
Проект на Netlify: https://netlify.com
Мой Telegram-канал: https://t.me/ilya_stoyanov

📢 Рекомендую отличного преподавателя английского языка! 🇬🇧

Если вы хотите эффективно изучать английский, я советую учиться только у носителей языка! 💡

🌟 Lynette – профессиональный преподаватель, носитель английского языка, который поможет вам улучшить разговорные навыки, грамматику и произношение. Она даёт полезные советы и делает обучение лёгким и увлекательным.

🚀 Переходите по ссылке и записывайтесь на урок:
🔗 https://preply.com/en/tutor/2333502
🔗 WhatsApp: https://tinyurl.com/35thy78x

👍 Если тебе понравилось это видео — поставьте лайк, подпишитесь на канал и не забудьте нажать на колокольчик. В следующих частях мы продолжим делать полноценный адаптивный лендинг на React + TypeScript с формой, слайдером, анимациями и отправкой данных.

Видео React TypeScript на Реальном Проекте. Section Home канала Илья Стоянов - Верстка Сайта
Страницу в закладки Мои закладки
Все заметки Новая заметка Страницу в заметки

На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.

Об использовании CookiesПринять