АНИМИРОВАННЫЙ САЙТ в стиле NETFLIX. Каждая КНОПКА — 🔥

Watch on YouTube (Embed)

Switch Invidious Instance

Show annotations

3,486

142

Genre: Education

License: Standard YouTube license

Family friendly? Yes

Shared February 21, 2025

🔥 Интенсив, в котором за 50 уроков мы разработали свой YouTube с нуля! [Бестселлер] – htmllessons.link/netflix 💥 МК Авторизация 4.0 (уже 8 марта!) - t.me/redgroup/2356 💸 Поддержать стримера / задать вопрос - dub.sh/da или dub.sh/dp ❤️ Отзывы тут - t.me/htmllessons_reviews 🦋 Наш ТГ канал - t.me/redgroup 🍥 Тема: Moonlight Шрифт: Jetbrains Mono Иконки: Jetbrains Icons Theme 2023+ Поддержи стрим лайком 👍! Скачать 🖥 папку проекта - t.me/redgroup/2378 Как создать анимированный сайт в стиле Netflix? В этом видео я покажу, как сделать крутой интерактивный UI, где каждая кнопка🔥 реагирует плавными эффектами. Используем HTML, CSS, JavaScript и немного магии, чтобы сайт выглядел динамичным и современным. Netflix известен своим стильным интерфейсом, и мы попробуем повторить его лучшие элементы: анимация кнопок, плавные ховеры, переходы и интерактивные элементы. Такой UI подойдет для видео-сервисов, дашбордов и даже лендингов! Если хочешь прокачать свои навыки фронтенда, научиться делать WOW-эффекты и погрузиться в мир анимации для веба, то погнали! Таймкоды сгенерированы автоматически и скорректированы Максом: 00:00 – Начало 00:32 – Проблемы с оборудованием 06:18 – Референсы и идеи для интерфейса 08:01 – Реализация анимаций и плавные эффекты 12:10 – Технические детали и примеры UI 15:20 – Начало работы над проектом 17:19 – Настройка интерфейса и иконок 23:14 – Оптимизация проекта и производительность 26:21 – Работа с анимацией и взаимодействием 30:21 – Использование референсов в дизайне 37:25 – Обзор новой версии Tailwind 40:40 – Работа с CSS и конфигурацией проекта 47:58 – Дизайн меню и интерактивные элементы 52:06 – Настройка шрифтов и цветовой схемы 57:07 – Работа с Tailwind CSS 01:05:16 – Анимации и интерактивные иконки 01:09:51 – Планы на будущее проекта 01:15:30 – Ошибки и их решения в верстке 01:18:41 – Работа с редактором кода 01:23:12 – Технологии и стек разработки 01:30:11 – Работа над финальной версией сайта 01:37:27 – Фильтры и динамические сценарии 01:42:38 – Доработка интерфейса и UX 01:50:07 – Создание адаптивных элементов 02:02:27 – Интерфейс и промокоды 02:17:58 – Анимация и разработка 02:23:58 – Оптимизация кода и тестирование 02:38:53 – Регистрация и работа с платформой 02:53:25 – Итоги дня и обсуждение проекта РЕФЕРЕНС - dribbble.com/shots/24181037-Amuxo-On-demand-stream… 🔥 Наш основной канал -    / @redgroup   🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze или KZZI K75Pro (свитчи те же) Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях! 🌿 Плейлист с полными курсами для новичков и не только -    • RED Course | Полные курсы за короткое врем...… 👇 Полезные ссылки: Настройка VS Code    • Как сделать VS Code красивым и быстрым за ...   Настройка терминала    • Настройка терминала 2024 [Oh My zsh / Плаг...   👉 Все ссылки (+ настройка редактора) и информация обо мне - htmllessons.io/links Контакты для связи partners@htmllessons.io - Реклама и сотрудничество work@htmllessons.io - Если хотите к нам в команду #анимация #frontend #Netflix #RedGroup #RedGroupPlus