Alura - Solução do Projeto de CSS Grid da Alura Store

Codificação de um projeto disponibilizado durante o curso de Front-end da Alura.

Indíce

Visão Geral

Desafio | Screenshot | Links

Meu Processo

Construído com | O que eu aprendi | Recursos úteis

Considerações Finais

Autor | Agradecimentos

Visão Geral

Desafio

O desafio foi construir este projeto com CSS Grid Layout e fazê-lo parecer o mais próximo possível do design. Os usuários devem ser capazes de:

• Vizualizar o layout ideal tanto para dispositivos mobiles quanto para desktops;
• Vizualizar os estados de foco para elementos interativos.

Screenshot

Links

• URL da solução: Index
• URL do site: Site

Meu processo

Construído com

• HTML5 com tags semânticas;
• Propriedades personalizadas de CSS;
• Acessibilidade;
• CSS grid layout;
• Flexbox;
• Media queries.

O que eu aprendi

• Trabalhar com o CSS Grid Layout;
• Trabalhar com Grid e Flexbox juntos;
• Acessibilidade web;
• Desenvolver uma página responsiva, com media queries.

.app {
    background: #f1f1f1;
    display: grid;  
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto;
    grid-template-rows: 50px auto auto;
}

Recursos úteis

• Guia Completo do CSS Grid Layout - Este é um artigo incrível que me ajudou a entender melhor de como funciona o Grid Layout e quais são suas propriedades.
• Media Queries - Este é um outro artigo do mesmo autor que também foi muito importante para eu ter uma melhor noção sobre as dimensões de telas dos dispositivos móveis.

Considerações Finais

Autor

• Website - Beatriz Slan | Alura
• Linkedin - in/beatriz-slan

Agradecimentos

Gostaria de agradecer a toda equipe envolvida da Instituição Alura, pela excelente didática, plataforma de ensino e por disponibilizar projetos reais e profissionais que me ajudam muito a praticar e aprimorar todo meu conhecimento deste mundo incrível do Front-end.