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 канала Илья Стоянов - Верстка Сайта
👉 💡 Освой 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 канала Илья Стоянов - Верстка Сайта
react typescript react typescript проект react typescript с нуля react typescript уроки react js react typescript приложение react js сайт с нуля typescript for beginners react js основы илья стоянов react js для начинающих react js курс react js уроки с нуля React TypeScript Илья Стоянов Илья Стоянов разработка сайта илья стоянов react илья стоянов реакт практика по react typescript проект реакт typescript уроки react с нуля typescript in react
Комментарии отсутствуют
Информация о видео
4 июля 2025 г. 10:55:06
00:42:27
Другие видео канала