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.

• Header → Com sua logo tipo, e seus botões de navegação, configurados como demostrado no figma, apenas visual sem funcionalidade
• Vitrine → Espaço onde ficará os cards de produtos e todas as suas informações
• Card → Criação dos cards como demostrado acima com suas respectividas informações com titulo, foto, descrição, preço e um botão de adicionar ao carrinho
• Barra de pesquisa →Com um input para colocar texto e um botão para pesquisar - apenas visual sem funcionalidade
• Carrinho de compras → Criação do local onde será coloca posteriormente os produtos, iniciando vazio - apenas visual sem funcionalidade
• Estilização e alinhamento como demostrado no figma

Importante!

1. Precisa estar publicado em uma url no gitHubPages
2. Deve haver branchs de desenvolvimento com nomes apropriados

Dica!

Que tal ficar marcado na história esse trabalho? pelos desafios, pelo aprendizado e claro por todo o caminho que teve que andar para chegar até esse momento, tendo isso em vista! Que tal compartilhar nas redes sociais?

Um belo projeto para ficar de portefólio no seu LinkedIn, ou quem sabe enfeitar por um longo tempo a sua página do Instagram! Vamos lá, mostre a todos para que veio, mostre aos outros o seu crescimento e a diversão que está tendo com cada projeto!

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.

• Conter todos os elementos que continham na parte um dessa entrega
• Vitrine → Espaço onde ficará os cards de produtos e todas as suas informações
• Card → Todos os cards devem ser criados de forma dinâmica, ou seja, criado e atribuídos a vitrine pelo DOM, além do botão de compra funcional e adicionando o produto ao carrinho
• Carrinho de compras → Deverá ser possível adicionar e remover produtos do carrinho por meio do DOM
• Estilização e alinhamento como demostrado no figma

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

Exemplos:

1. Caso clique em calças, deve demostrar apenas os produtos que tenham a tag calças na vitrine
2. Caso clique em camisetas, deve demostrar apenas os produtos que tenham a tag camisetas na vitrine

Barra de pesquisa → Demostrar os produtos na vitrine de acordo com o que for escrito na barra de pesquisa

Exemplos:

1. Caso digite Black Hat, deve demostrar apenas os produtos que tenham no nome Black Hat na vitrine
2. Caso digite Shirt, deve demostrar apenas os produtos que tenham no nome Shirt na vitrine

Importante!

1. Precisa estar publicado em uma url no gitHubPages
2. Deve haver branchs de desenvolvimento com nomes apropriados

Dica!

Que tal ficar marcado na história esse trabalho? pelos desafios, pelo aprendizado e claro por todo o caminho que teve que andar para chegar até esse momento, tendo isso em vista! Que tal compartilhar nas redes sociais?

Um belo projeto para ficar de portefólio no seu LinkedIn, ou quem sabe enfeitar por um longo tempo a sua página do Instagram! Vamos lá, mostre a todos para que veio, mostre aos outros o seu crescimento e a diversão que está tendo com cada projeto!

Referências!

• MDN CSS Referência
• MDN CSS Reference (em inglês)
• W3Schools CSS Reference (em inglês)
• Guia Flexbox(em inglês)
• byid byclass create
• event listener
• event listener em inglês

Faça o push do código para o seu repositório GitHub, altere a visibilidade do repositório para internal e implemente-o GitHub pages. No Canvas, por favor, envie sua url do GitHub Pages: (ex:https://nomerandomico.pages.github.io/) e envie o link do seu repositório nos comentários. Atenção, seu repositório deverá ser compartilhado apenas com a organização. (Internal)