Este projeto foi desenvolvido como parte da formação Aprofunde seus conhecimentos em CSS na Alura, com foco no curso CSS: construindo layouts com Grid. O objetivo principal é aplicar os conceitos aprendidos nos cursos relacionados a CSS Grid e Flexbox para criar layouts responsivos e dinâmicos.
O principal objetivo deste projeto é utilizar os conceitos aprendidos nos cursos de CSS Grid e Flexbox para criar layouts modernos, responsivos e esteticamente agradáveis.
- Aplicação do
display: gridpara organizar elementos em um layout. - Definição de áreas com
grid-template-areasegrid-area. - Determinação da largura das colunas com
grid-template-columns. - Responsividade utilizando a combinação de Grid e Media Queries.
- Definição da altura das linhas com
grid-template-rows. - Utilização de propriedades de espaçamento como
gap,column-gaperow-gap. - Alinhamento de itens com
align-itemsejustify-self. - Organização responsiva com
auto-fitemin-max. - Alternativa ao Grid utilizando o
display: flex. - Utilização de propriedades de flex para alinhar elementos (
align-items,justify-content). - Análise de contextos ideais para o uso de Grid ou Flex.
- Alinhamento de elementos em linha ou coluna com propriedades de eixo (
flex-direction).
Durante o desenvolvimento deste projeto, os principais aprendizados em CSS incluíram:
- Manipulação avançada de layouts com
CSS GrideFlexbox. - Criação de layouts responsivos e dinâmicos.
- Utilização eficaz de
Media Queriespara adaptação em diferentes dispositivos. - Análise de contextos ideais para o uso de
GridouFlexbox. - Alinhamento preciso de elementos utilizando as propriedades fornecidas pelo CSS Grid e Flexbox.
Este projeto consiste em arquivos HTML e CSS. Basta fazer o download ou clonar o repositório e abrir o arquivo HTML no seu navegador preferido.
Link para a versão hospedada do projeto
Desenvolvido por Lucas Reis.