🔥 Интенсив, в котором за 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