Tópicos do conteúdo
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.
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...
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.
Cobraremos que seja seguido o style guide. Você é livre para aprimorar como quiser. Você pode adicionar ícones, hover e etc.
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.
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.
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
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:
-
Caso clique em calças, deve demonstrar apenas os produtos que tenham a tag calças na vitrine.
-
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:
-
Caso digite Black Hat, deve demonstrar apenas os produtos que tenham no nome Black Hat na vitrine.
-
Caso digite Shirt, deve demonstrar apenas os produtos que tenham no nome Shirt na vitrine.
-
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!