UI Clone - Disney Plus

💻 Projeto

Este projeto é um tutorial que ensina a como recriar a interface da Disney Plus ao usar HTML, CSS e JavaScript. Todo o conteúdo da aplicação será gerado dinamicamente ao utilizar o serviço(API) da TMDB. Essa api fornece todos os dados filme, como título, descrição, capa, foto de background e nota de avaliação.

Para facilitar a codificação do projeto foi usado um protótipo do figma como base, o autor do layout é o design Itai Bracha, clique aqui para abrir o protótipo no figma.

🚀 Tecnologias

• HTML
• CSS
• JavaScript
• API TMDB

📔 Conhecimentos abordados

• Uso semântico do HTML
• Integração com a API do TMDB ao usar o fetch
• Criação de elementos dinâmicos com o uso do createElement
• Estrutura de variáveis globais no script
• Uso de variáveis globais no :root
• Menu interativo
• Melhorias de performace no carregamento de imagens
• Adicionar favicon
• Marcar o filme ativo
• Evento para adicionar um filme
• Responsividade da aplicação com @media

📝 Tema de casa

• Salvar os filmes no navegador(via localStorage)
• Inserir link do filme no botão ‘Assistir agora’
• Adicionar estilo no scroll do navigation

📺 Vídeos no Youtube

#1 DISNEY PLUS - CRIANDO A INTERFACE E INTEGRANDO COM A API

---

#2 DISNEY PLUS - MELHORIAS DE PERFORMANCE E MENU LATERAL

#3 DISNEY PLUS - RESPONSIVIDADE E FORMULÁRIO PARA ADICIONAR FILME