Projeto - Projeto Front End.

Tópicos do conteúdo

Implementando Layout

Introdução

Nesta entrega construiremos o layout de um e-commerce. Seguiremos um style guide, usaremos html e css. Bora para esse desafio?

Pegaremos como base esse style Guide.

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...

Tema

No layout apresentamos 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 o style guide. Você é livre para aprimorar como quiser. Você pode adicionar ícones, hover e etc.

🐣 Passo a Passo

Preparando o repositório

Para começar primeiro acesse este link. O repositório contém apenas as imagens e o readme, você precisará criar o html e o css do zero.

O que faremos

Para nos organizar melhor começaremos com a estilização e construção da estrutura da aplicação. Trabalhemos inicialmente no HTML, construção das tags semânticas.

A marcação semântica mais apropriada, imagens e distribuição de conteúdo.

Como foi visto durante o curso. Construiremos toda a parte de fonts, cores e posicionamento nesse momento, tentando nos aproximar ao máximo do que está na definição do projeto.

Aqui vamos nos concentrar apenas na criação do estilo, por enquanto sem funcionalidades.

• Header → Com sua logo, e seus botões de navegação, configurados como demonstrado no layout em pdf.

• Vitrine → Espaço onde ficarão os cards de produtos e todas as suas informações

• Card → Criação dos cards como demonstrado acima com suas respectivas informações com título, 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.

• Carrinho de compras → Criação do local onde será coloca posteriormente os produtos, iniciando vazio.

• Estilização e alinhamento como demonstrado no layout.

👨🏿‍💻 Dinamizando com o DOM

🐣 Passo a Passo

Chegou a hora de tornarmos as coisas mais dinâmicas.

Focaremos na inteligência da página, com o DOM, faremos todos os itens funcionarem de forma específica como demonstrado abaixo.

• Vitrine → Espaço onde ficarão os cards de produtos e todas as suas informações

• Card → Todos os cards devem ser criados de forma dinâmica, ou seja, criados 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. O carrinho deverá fazer a contagem total dos itens, assim como apresentar o valor total da compra.

• Estilização e alinhamento como demonstrado no layout em pdf

Quer se desafiar?

Tente implementar os itens abaixo:

Lembre-se que o são elementos não obrigatórios e que tem uma dificuldade elevada.

• Header → Demonstrar os elementos na vitrine conforme o tipo clicado no header, por padrão iniciar em todos.

• Exemplos:

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

  2. Caso clique em camisetas, deve demonstrar apenas os produtos que tenham a tag camisetas na vitrine.

• Barra de pesquisa → Demonstrar os produtos na vitrine conforme o que for escrito na barra de pesquisa

• Exemplos:

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

  2. Caso digite Shirt, deve demonstrar apenas os produtos que tenham no nome Shirt na vitrine.

Envio

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)

Que tal **compartilhar **nas redes sociais? Esse projeto pode servir de **portfólio **no seu LinkedIn, ou quem sabe enfeitar por um longo tempo a sua página do Instagram! Vamos lá, mostre a todos o seu crescimento, diversão e esforço dedicado em cada projeto!