Claro! Aqui vai um README totalmente focado em Flexbox, destacando que o objetivo principal do projeto é treinar, aplicar e dominar Flexbox — mantendo tudo simples, bonito e padrão GitHub.
Este projeto recria a página de assistir vídeo do YouTube usando HTML + CSS, com foco total em Flexbox para estruturar o layout, alinhar elementos e reproduzir a organização visual do site original.
Ideal para quem quer praticar Flexbox na vida real, em um layout grande, complexo e cheio de blocos.
O propósito principal é dominar Flexbox na prática, aplicando ele em um layout completo e realista. Com este clone, você aprende a:
- Criar containers flexíveis
- Trabalhar com colunas e linhas lado a lado
- Controlar alinhamento e distribuição de elementos
- Criar layouts responsivos usando Flexbox
- Reproduzir estruturas semelhantes às do YouTube
Este projeto usa Flexbox em praticamente toda a interface:
- Logo, barra de busca e ícones alinhados com
display: flex - Distribuição horizontal dos elementos
- Centralização vertical automática
- Player de vídeo (esquerda)
- Lista de vídeos recomendados (direita)
- Layout em duas colunas usando um grande container flex
-
Cada vídeo recomendado é um card com:
- Thumbnail
- Título
- Canal
- Views
-
Tudo alinhado com Flexbox lado a lado
- Agrupamento em linha
- Espaçamento uniforme usando
gap - Alinhamentos precisos sem precisar de floats
- Com poucas media queries o layout se adapta facilmente
- Flexbox faz 70% do trabalho sozinho
/
├── index.html
├── css/
│ ├── reset.css
│ ├── style.css
│ └── responsive.css
└── assets/
└── images/
- HTML5
- CSS3
- Flexbox (principal tecnologia do projeto)
- Media Queries
- Reset CSS
Nenhuma instalação necessária.
- Baixe ou clone este repositório
- Abra o arquivo index.html no navegador
Pronto! O projeto funciona diretamente no browser.