Nesta entrega construiremos o layout de um e-commerce. Seguiremos um style guide, usaremos html e css. Bora para esse desafio?
Iremos pegar como base esse style guide no figma, uma plataforma de design, onde terá tanto a forma na qual poderá se espelhar ou fazer igual, juntamente com todas as fontes e cores.
Primeiramente recomendamos que você analise o layout e o style guide. Não tenha pressa de conhecer o projeto antes de partir para ação! Após a análise comece estruturando o html. Utilize todos os recursos que aprendeu até aqui, tags semânticas, propriedades css, reset e/ou normalize e dicas de boas práticas...
A captura de tela de exemplo mais abaixo mostram como o layout ficará se você completar as tarefas especificadas no style guide.
No layout demonstramos um e-commerce de vestuário, mas você pode definir um tema de sua preferência, como de jogos, pet shop, perfumarias, entre outros.
Cobraremos que seja seguido, pelo menos, o style guide mas você é livre para aprimorar como quiser. Você pode adicionar ícones, hover, etc.
Nessa primeira parte do seu projeto, iremos focar na estilização e construção da aplicação, ou seja, iremos apenas mexer inicialmente no HTML, construção das tags semânticas seus locais apropriados, imagens e distribuição de conteúdo, como foi visto durante o curso e na estilização com o CSS, ou seja, "embelezamento" da aplicação, iremos trazer toda a parte de fonts, cores e posicionamento nesse momento, tentando nos aproximar ao máximo do que está no figma.
Nessa segunda parte do seu projeto, iremos focar no dinamismo da página, ou seja, com o DOM, iremos fazer todos os itens funcionarem de formas específicas como demostrado abaixo.
Importante!
Lembrem que o bônus são elementos extras e não obrigatórios e que tem uma dificuldade elevada
Header → Demostrar os elementos na vitrine conforme o tipo clicado no header, por padrão iniciar em todos
Barra de pesquisa → Demostrar os produtos na vitrine de acordo com o que for escrito na barra de pesquisa