Este projeto é parte do curso "Formação CSS Developer" da Digital Innovation One (DIO), onde o desafio é recriar a interface do YouTube utilizando CSS Flexbox.
O objetivo deste desafio é aplicar os conceitos de Flexbox aprendidos durante o curso, criando um clone responsivo da interface do YouTube. O projeto inclui:
- Layout responsivo usando Flexbox
- Organização semântica do HTML
- CSS com variáveis para melhor manutenibilidade
O layout foi baseado no design fornecido no Figma como parte do desafio da DIO. Você pode visualizar o layout original aqui.
- HTML5
- CSS3 (Flexbox)
- Variáveis CSS
- Media Queries
- Ícones com Font Awesome
- Interface responsiva que se adapta a diferentes tamanhos de tela
- Layout flexível usando CSS Flexbox
- Sistema de cores consistente usando variáveis CSS
Este projeto utiliza nomenclatura em português para as classes CSS como decisão pedagógica, visando:
- Facilitar o entendimento da estrutura HTML/CSS para desenvolvedores brasileiros iniciantes
- Tornar mais claro o propósito de cada componente durante o processo de aprendizado
- Manter consistência com o material didático do curso
# Clone este repositório
git clone https://github.com/arielprovasi/desafio-flexbox-youtube
# Acesse a pasta do projeto
cd desafio-flexbox-youtube
# Abra o arquivo index.html no seu navegador preferido- Uso avançado de Flexbox para layouts complexos
- Organização de código CSS com variáveis
- Implementação de design responsivo
- Boas práticas de nomenclatura e estruturação de código
Este projeto foi concluído com foco em aprendizado, mas futuras melhorias podem incluir:
- Adicionar interatividade com JavaScript (ex: abrir menu lateral)
- Criar uma versão utilizando React
- Implementar modo escuro com CSS
- Refatorar o layout com Grid Layout ao invés de Flexbox
Desenvolvido com ❤️ por Ariel 😊