frontendmasters
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Маркетинговые веб-проекты, завоевывающие награды
Award-Winning Marketing Websites
★4.7 (всего оценок - 19)
Продолжительность
4 ч 18 мин
Категория
Другое (Frontend)Количество уроков
24 Видео
Дата добавления
19 нояб. 2025 г., 01:11
Язык
Английский
Дата выхода
18 нояб. 2025 г., 01:00
Дата обновления
14 янв. 2026 г., 18:24
Что делает маркетинговый сайт по-настоящему наградным? В рамках этого однодневного практического воркшопа Матис Гонсалес раскрывает творческий и технический подход, лежащий в основе самых обсуждаемых сайтов в интернете. На примерах Next.js Conf от Vercel, промо-страниц MrBeast и главной страницы редактора Cursor он детально разбирает дизайн- и девелопмент-паттерны, позволяющие создавать высокоэффективные лендинги. Вы изучите логику выбора React вместо ванильного JavaScript, затем погрузитесь в работу с анимационными таймлайнами, видео, motion-эффектами и шейдерами. Чтобы объединить всё воедино, вы освоите методики синхронизации эффектов с помощью requestAnimationFrame и научитесь диагностировать проблемы производительности, определяя возможности устройства, мощность GPU и просадки кадров. Независимо от того, работаете ли вы как разработчик, дизайнер или универсальный специалист, вы уйдёте с вдохновением и практическими инструментами для создания собственных наградных веб-опытов.
В ходе участия в воркшопе вы научитесь:
- Понимать творческие и технические принципы выдающихся маркетинговых сайтов
- Применять React для создания нестандартных маркетинговых интерфейсов
- Интегрировать видео, анимации и шейдерные эффекты на основе таймлайнов
- Анализировать и оптимизировать производительность через requestAnimationFrame, детекцию просадки кадров и профилирование устройства/GPU
- Создать собственный реальный проект, который можно развивать и демонстрировать
Подходит ли вам этот воркшоп?
Если вы фронтенд-разработчик, стремящийся развить навыки creative coding, создаёте сайты для клиентов или продуктов и хотите сделать их выразительнее, либо интересуетесь тем, как мировые маркетинговые сайты объединяют движение, визуальные эффекты и высокую производительность, то этот воркшоп — для вас.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:06:09Introduction
- Урок 2. 00:05:18How to Experiment
- Урок 3. 00:16:02Animating with JavaScript
- Урок 4. 00:15:57CSS Animations for Performance
- Урок 5. 00:15:59GSAP Animations Timelines
- Урок 6. 00:12:20GSAP Scroll Trigger
- Урок 7. 00:14:14Follow Scroll
- Урок 8. 00:11:10Animating Variable Fonts with Mouse Events
- Урок 9. 00:04:39Passing State to a CSS Variable
- Урок 10. 00:05:33Debugging Performance with React Scan
- Урок 11. 00:14:06Custom Cursor Animation with Lerp
- Урок 12. 00:04:50Optimize requestAnimationFrame
- Урок 13. 00:13:58Snap Effect on Hover
- Урок 14. 00:14:51Display Images on a Canvas
- Урок 15. 00:09:20Load Images for Scroll Animation
- Урок 16. 00:15:09Animate an Image Sequence
- Урок 17. 00:15:17Create Image Sequence with Blender
- Урок 18. 00:07:44Accessibility Considerations
- Урок 19. 00:17:08Prefers Reduced Motion
- Урок 20. 00:12:03Optimize for GPU & User Agents
- Урок 21. 00:08:32Optimize for Battery Level
- Урок 22. 00:06:34Three.js & React Fiber
- Урок 23. 00:11:13Animating 3D Scenes
- Урок 24. 00:00:31Wrapping Up
https://github.com/matiasngf/frontend-masters-course
Авторы - frontendmasters, Matias Gonzalez
Matias Gonzalez
Матис — графический дизайнер, перешедший в веб-разработку. Он работает техлидом в студии Basement, где соединяет опыт дизайна и программирования для создания насыщенных, иммерсивных цифровых опытов. Увлечён волонтёрством и принимает участие в организации мероприятий TEDx. Постоянно ищет возможности для экспериментов с новыми технологиями и в настоящее время особенно увлечён WebGL.
Комментарии