АНИМИРОВАННЫЙ САЙТ в стиле NETFLIX. Каждая КНОПКА — 🔥 Де?
🔥 Интенсив, в котором за 50 уроков мы разработали свой YouTube с нуля! [Бестселлер] – https://htmllessons.link/netflix 💥 МК Авторизация 4.0 (уже 8 марта!) - https://t.me/redgroup/2356 💸 Поддержать стримера / задать вопрос - https://dub.sh/da или https://dub.sh/dp ❤️ Отзывы тут - https://t.me/htmllessons_reviews 🟣 Twitch (тут с музыкой) - https://www.twitch.tv/red_group 🦋 Наш ТГ канал - https://t.me/redgroup 🍥 Тема: Moonlight Шрифт: Jetbrains Mono Иконки: Charmed День 1 - https://www.youtube.com/live/IwOTswi7kCU День 2 - https://youtube.com/live/UM8MBSzIslU День 3 - https://youtube.com/live/w-mXXgKx5NE Поддержи стрим лайком 👍! Скачать 🖥 папку проекта - https://t.me/redgroup/2378 Как создать анимированный сайт в стиле Netflix? В этом видео я покажу, как сделать крутой интерактивный UI, где каждая кнопка🔥 реагирует плавными эффектами. Используем HTML, CSS, JavaScript и немного магии, чтобы сайт выглядел динамичным и современным. Netflix известен своим стильным интерфейсом, и мы попробуем повторить его лучшие элементы: анимация кнопок, плавные ховеры, переходы и интерактивные элементы. Такой UI подойдет для видео-сервисов, дашбордов и даже лендингов! Если хочешь прокачать свои навыки фронтенда, научиться делать WOW-эффекты и погрузиться в мир анимации для веба, то погнали! РЕФЕРЕНС - https://dribbble.com/shots/24181037-Amuxo-On-demand-streaming-platform-design Таймкоды сгенерированы автоматически и скорректированы Максом: 00:00 – Начало 00:20 – Введение и анонс 01:59 – Начало работы над анимацией 03:19 – Технические детали и реализация 07:03 – Работа с компонентами и визуалом 10:14 – Теория и практика в Next.js 12:59 – Постеры, изображения и их обработка 18:54 – Анимация и интерфейс 22:18 – Подписка и критика контента 27:37 – Работа с видео и командной разработкой 32:07 – Дизайн кнопок и интерактивность 37:09 – Зарплата фронтенд-разработчиков 42:21 – Личный опыт, мотивация и карьера 45:01 – Проблемы с наймом и качеством кода 52:35 – Сравнение операционных систем 57:17 – Работа с таблицами и компонентами UI 01:09:47 – Работа с фоном и CSS 01:15:02 – Заключение и настройка проекта 01:17:36 – Проблемы с дизайном и их исправление 01:25:22 – Разработка на React и Vue 01:30:06 – Проблемы с центровкой и фоном 01:41:07 – Анимация появления объектов 01:44:35 – Настройка анимации и плавные эффекты 01:54:17 – Конвертация и загрузка видео 02:02:00 – Настройка медиа-элементов 02:08:53 – Проблемы с инструментами для разработки 02:17:48 – Работа с анимацией и CSS 02:28:41 – Анимация карточек и интерактив 02:42:47 – Заключение и подведение итогов 🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze или KZZI K75Pro (свитчи те же) Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях! 🌿 Плейлист с полными курсами для новичков и не только - https://www.youtube.com/playlist?app=desktop&list=PLt130e52Fzn7iPxT2DFgdTP1imAuBrBk8 👇 Полезные ссылки: - Настройка VS Code https://youtu.be/_oKVkJj6C6Y - Настройка терминала https://youtu.be/6qzyWLZha0E 👉 Все ссылки (+ настройка редактора) и информация обо мне - https://htmllessons.io/links Контакты для связи partners@htmllessons.io - Реклама и сотрудничество work@htmllessons.io - Если хоти
🔥 Интенсив, в котором за 50 уроков мы разработали свой YouTube с нуля! [Бестселлер] – https://htmllessons.link/netflix 💥 МК Авторизация 4.0 (уже 8 марта!) - https://t.me/redgroup/2356 💸 Поддержать стримера / задать вопрос - https://dub.sh/da или https://dub.sh/dp ❤️ Отзывы тут - https://t.me/htmllessons_reviews 🟣 Twitch (тут с музыкой) - https://www.twitch.tv/red_group 🦋 Наш ТГ канал - https://t.me/redgroup 🍥 Тема: Moonlight Шрифт: Jetbrains Mono Иконки: Charmed День 1 - https://www.youtube.com/live/IwOTswi7kCU День 2 - https://youtube.com/live/UM8MBSzIslU День 3 - https://youtube.com/live/w-mXXgKx5NE Поддержи стрим лайком 👍! Скачать 🖥 папку проекта - https://t.me/redgroup/2378 Как создать анимированный сайт в стиле Netflix? В этом видео я покажу, как сделать крутой интерактивный UI, где каждая кнопка🔥 реагирует плавными эффектами. Используем HTML, CSS, JavaScript и немного магии, чтобы сайт выглядел динамичным и современным. Netflix известен своим стильным интерфейсом, и мы попробуем повторить его лучшие элементы: анимация кнопок, плавные ховеры, переходы и интерактивные элементы. Такой UI подойдет для видео-сервисов, дашбордов и даже лендингов! Если хочешь прокачать свои навыки фронтенда, научиться делать WOW-эффекты и погрузиться в мир анимации для веба, то погнали! РЕФЕРЕНС - https://dribbble.com/shots/24181037-Amuxo-On-demand-streaming-platform-design Таймкоды сгенерированы автоматически и скорректированы Максом: 00:00 – Начало 00:20 – Введение и анонс 01:59 – Начало работы над анимацией 03:19 – Технические детали и реализация 07:03 – Работа с компонентами и визуалом 10:14 – Теория и практика в Next.js 12:59 – Постеры, изображения и их обработка 18:54 – Анимация и интерфейс 22:18 – Подписка и критика контента 27:37 – Работа с видео и командной разработкой 32:07 – Дизайн кнопок и интерактивность 37:09 – Зарплата фронтенд-разработчиков 42:21 – Личный опыт, мотивация и карьера 45:01 – Проблемы с наймом и качеством кода 52:35 – Сравнение операционных систем 57:17 – Работа с таблицами и компонентами UI 01:09:47 – Работа с фоном и CSS 01:15:02 – Заключение и настройка проекта 01:17:36 – Проблемы с дизайном и их исправление 01:25:22 – Разработка на React и Vue 01:30:06 – Проблемы с центровкой и фоном 01:41:07 – Анимация появления объектов 01:44:35 – Настройка анимации и плавные эффекты 01:54:17 – Конвертация и загрузка видео 02:02:00 – Настройка медиа-элементов 02:08:53 – Проблемы с инструментами для разработки 02:17:48 – Работа с анимацией и CSS 02:28:41 – Анимация карточек и интерактив 02:42:47 – Заключение и подведение итогов 🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze или KZZI K75Pro (свитчи те же) Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях! 🌿 Плейлист с полными курсами для новичков и не только - https://www.youtube.com/playlist?app=desktop&list=PLt130e52Fzn7iPxT2DFgdTP1imAuBrBk8 👇 Полезные ссылки: - Настройка VS Code https://youtu.be/_oKVkJj6C6Y - Настройка терминала https://youtu.be/6qzyWLZha0E 👉 Все ссылки (+ настройка редактора) и информация обо мне - https://htmllessons.io/links Контакты для связи partners@htmllessons.io - Реклама и сотрудничество work@htmllessons.io - Если хоти