::: {.container}
Entrega Construindo um E-commerce – parte 1

Introdução

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.

Tarefa

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.

Tema

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.

A Estilização

Cobraremos que seja seguido, pelo menos, o style guide mas você é livre
para aprimorar como quiser. Você pode adicionar ícones, hover, etc.

Passo a Passo

2 – O que faremos na parte 1

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

::: {.section .hilightedContet .hilightedContet}
Importante!

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

::: {.section .hilightedContet .hilightedContet–tip}
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!
:::

Passo a Passo – Parte 2

1 – O que faremos na parte 2

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

Bônus

::: {.section .hilightedContet .hilightedContet}
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:

Caso clique em calças, deve demostrar apenas os produtos que
tenham a tag calças na vitrine
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:

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