Recriar a interface da Netflix utilizando HTML5, CSS3 e JavaScript.
Este projeto foi realizado como parte do Bootcamp HTML Web Developer, oferecido pela Digital Innovation One (DIO).
A atividade foi conduzida pelo instrutor Felipe Aguiar.
Durante o projeto, foram trabalhadas algumas habilidades essenciais de front-end, incluindo:
- Estruturação de layouts com HTML;
- Estilização de elementos utilizando CSS;
- Técnicas avançadas de CSS3, como o uso de containers e variáveis;
- Posicionamento de elementos com Flexbox;
- Uso básico de JavaScript para criar interações na página;
- Manipulação de elementos HTML por meio de classes e identificadores;
- Integração de plugins jQuery para aprimorar a experiência do usuário.
Na minha versão do projeto, fiz algumas alterações para torná-lo mais personalizado e funcional:
Tema e imagem de fundo:
- Alterei o tema para uma seleção de filmes dos anos 1990. Como não encontrei uma imagem de fundo (
background-image) pronta que correspondesse à ideia que eu tinha em mente, criei uma utilizando o Microsoft Paint.
Efeito hover overlay:
- Adicionei um efeito especial ao passar o mouse sobre a capa de um filme. Nesse efeito, a capa escurece levemente, e uma
tooltipaparece com informações como título, ano de lançamento e diretor. Me inspirei em plataformas de streaming que utilizam esse tipo de funcionalidade.
Design responsivo aprimorado:
- Notei que no projeto original a visualização em telas menores, como a do meu smartphone antigo, apresentava problemas de layout. Resolvi esses ajustes implementando seletores e declarações adicionais no CSS, garantindo que os elementos não se sobreponham e a experiência de navegação seja fluida em diferentes dispositivos.
Agradeço ao instrutor Felipe Aguiar e à equipe da DIO pelo excelente conteúdo, que contribuiu demais para o meu aprendizado e para a construção do meu portfólio.
Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais informações.
