Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/jveiiga/projeto-final-m1

Projeto criado com HTML, CSS, JS e DOM, utilização de métodos para criação da lógica e renderização dinâmica..
https://github.com/jveiiga/projeto-final-m1

css-flexbox css3 dom-manipulation html5 javascript

Last synced: 3 months ago
JSON representation

Projeto criado com HTML, CSS, JS e DOM, utilização de métodos para criação da lógica e renderização dinâmica..

Awesome Lists containing this project

README 

        
# 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](https://www.figma.com/file/c6W2gS11Dr2rVe7VUx97io/Vitrine---M1?node-id=0%3A1)

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



**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!



# 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



**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](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference)

- [MDN CSS Reference (em

  inglês)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

- [W3Schools CSS Reference (em

  inglês)](https://www.w3schools.com/cssref/default.asp)

- [Guia Flexbox(em

  inglês)](https://origamid.com/projetos/flexbox-guia-completo/)

- [byid byclass create](http://devfuria.com.br/javascript/dom/)

- [event

  listener](https://cibersistemas.pt/tecnologia/o-metodo-addeventlistener-codigo-de-exemplo-do-javascript-event-listener/)

- [event listener em

  inglês](https://devdojo.com/bo-iliev/dom-event-listeners)



### 3 --- 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)