O Clone Disney+ é uma reprodução simplificada da interface da plataforma de streaming Disney+, oferecendo uma experiência interativa de navegação e visualização de conteúdo. No projeto, explorei diversos aspectos do desenvolvimento front-end, incluindo:
- Estruturação semântica do HTML para melhor acessibilidade e SEO.
- Estilização responsiva e atraente com CSS, incluindo recursos como grids e media queries.
- Interação do usuário e manipulação do DOM com JavaScript para criar funcionalidades como abas de navegação, acordeões de FAQ e animações.
- Otimização de recursos, como imagens, usando o Gulp para automatizar tarefas de construção.
As tecnologias utilizadas neste projeto incluem:
-
HTML5: Usado para estruturar o conteúdo da página web.
-
CSS (Sass/SCSS): Utilizado para estilizar a página. O código CSS é escrito usando a sintaxe Sass/SCSS e é compilado em um arquivo CSS final.
-
JavaScript: Utilizado para adicionar interatividade à página, como manipulação de abas, acordeões (FAQ) e detecção de rolagem.
-
Gulp: Uma ferramenta de automação de tarefas usada para compilar Sass, otimizar imagens e minificar scripts JavaScript. Facilita o fluxo de trabalho de desenvolvimento.
-
O projeto faz uso extensivo de classes CSS para estilização, seguindo práticas modernas de CSS com BEM (Block Element Modifier) para manter a organização e reutilização de estilos.
-
A automação de tarefas, como a compilação do Sass e a minificação do JavaScript, é gerenciada pelo Gulp, o que facilita a manutenção e a entrega de recursos otimizados.
-
O JavaScript é usado para tornar a página mais interativa, especialmente nas seções de abas e FAQ, onde os eventos do DOM são manipulados para mostrar ou ocultar conteúdo.