Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/meteora-front-end-desafio-7

👗 Projeto do 7 desafio de Front-End da Alura 👜
https://github.com/epiled/meteora-front-end-desafio-7

api css html javascript json-server

Last synced: about 1 month ago
JSON representation

👗 Projeto do 7 desafio de Front-End da Alura 👜

Awesome Lists containing this project

README

        

# 👗 Loja Meteora - Front-End Desafio 7

Projeto do 7 desafio de Front-End da Alura, material do desafio.

Nesse Challenger, o projeto foi um e-commerce de roupas, com opção de se inscrever no newsletter e ver mais sobre os produtos.

Além de desenvolver os componentes da página, foi garantindo que o site seja inclusivo, por isso, foi essencial pensar em todos os detalhes.

| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Loja Meteora - Front-End Desafio 7**
| :label: Tecnologias | html, css, js, node, gulp, json-server

![thumb-meteora](https://github.com/Epiled/Front-End-Desafio-7/assets/55258483/6d59c246-4529-460f-9cd5-a2d00768b768#vitrinedev)

📃 Detalhes do projeto

Nesse projeto foi desenvolvido um e-commerce de roupas, é possível visualizar os produtos em detalhes em uma modal, também é possível se cadastrar no newsletter sendo necessário coloca rum e-mail valido.

A ideia do Challenger foi desenvolver todo o projeto em um período de 4 semanas.

Todo o código foi desenvolvido em códigos Vanilla sem frameworks sendo a única dependência o JSON-Server para consumir a API com todos os dados dos produtos.

![Badge](https://img.shields.io/github/last-commit/Epiled/meteora-front-end-desafio-7?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/code-size/Epiled/meteora-front-end-desafio-7?style=for-the-badge)
![Badge](https://img.shields.io/github/languages/count/Epiled/meteora-front-end-desafio-7?style=for-the-badge)
![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)
![Bagde](https://img.shields.io/github/v/release/Epiled/meteora-front-end-desafio-7?style=for-the-badge)
![Bagde](https://img.shields.io/github/license/Epiled/meteora-front-end-desafio-7?style=for-the-badge)

![Badge](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![Badge](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Badge](https://img.shields.io/badge/-JS-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Badge](https://img.shields.io/badge/-Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)
![Badge](https://img.shields.io/badge/-Gulp-CF4647?style=for-the-badge&logo=gulp&logoColor=white)
![Badge](https://img.shields.io/badge/-JSON-000000?style=for-the-badge&logo=json&logoColor=white)

📑 Tabela de Conteúdos

* [Detalhes do projeto](#detalhes-do-projeto)
* [Tópicos Desenvolvidos](#topicos-curso)
* [Demonstração](#demonstracao)
- [Home](#home)
* [Pré-Requisito](#pre-requisito)
* [Instalação](#instalacao)
* [Como usar](#como-usar)
* [Tecnologias](#tecnologias)
* [Autor](#autor)

👩‍🏫 Tópicos desenvolvidos

* Desenvolvimento responsivo
* Acessibilidade Web
* Consumo de API
* Validação de formulário
* Otimizações de SEO

👀 Demonstração

Home

https://github.com/Epiled/Front-End-Desafio-7/assets/55258483/d38e03a5-1f01-4aa0-afc4-885ff8e58982

https://github.com/Epiled/Front-End-Desafio-7/assets/55258483/b3bf5d0b-b58c-4815-845f-f8a0835e5100

🚨 Pré-requisito



  • Node

  • JSON-Server

⚙ Instalação

```
1. git clone https://github.com/Epiled/meteora-desafio-front-end-7.git
2. cd meteora-desafio-front-end-7
3. npm install
```

👩‍🏫 Como usar

```
1. Estando dentro do diretório do meteora-desafio-front-end-7 utilize o seguinte comando
2. json-server --watch db.json
3. Levante um servidor local para a pasta meteora-desafio-front-end-7 e acesse a index.html
```

🛠 Tecnologias

As seguintes tecnologias foram usadas na construção deste projeto:

👨‍💻 Autor

![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)


Felipe De Andrade

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)
[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])
[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)
[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)