ProjectPokedevs

Pokedevs - Semana do Zero ao Programador Contratado

Descrição do Projeto

O Pokedevs é um projeto desenvolvido durante a Semana do Zero ao Programador Contratado com o objetivo de praticar e reforçar habilidades em HTML, CSS e JavaScript. A ideia principal foi criar um site interativo inspirado no universo de Pokémon, onde cada "Pokedev" representa um tipo de desenvolvedor com diferentes características, que se assemelham a elementos como água, fogo, elétrico, etc.

Funcionalidades

• Exibição interativa de "cartões de Pokedev" ao clicar nos ícones laterais.
• Cada Pokedev possui uma descrição detalhada das suas "habilidades", associadas ao seu estilo de desenvolvimento.
• Alternação visual entre os diferentes Pokedevs através de interações com o usuário.

Tecnologias Utilizadas

• HTML5: Estrutura semântica do projeto.
• CSS3 (incluindo reset e responsividade): Para estilização e design adaptável em diferentes dispositivos.
  • Flexbox: Usado para o layout flexível dos componentes.
  • Media Queries: Implementadas para garantir a responsividade.
• JavaScript (ES6): Adiciona interatividade ao projeto, permitindo a troca de cartões e ativa/desativa classes dinamicamente.
• Google Fonts (Poppins): Tipografia para dar um toque moderno ao projeto.

Objetivo

Este projeto foi criado com o intuito de exercitar os conhecimentos adquiridos durante a Semana do Zero ao Programador Contratado, onde os participantes foram desafiados a desenvolver um site do zero, utilizando as tecnologias básicas da web (HTML, CSS e JavaScript). Além disso, o projeto introduz conceitos de manipulação do DOM e de design responsivo, essenciais para qualquer desenvolvedor front-end.

Imagens

As imagens dos Pokedevs foram geradas utilizando Inteligência Artificial, uma vez que o projeto não contava com suporte financeiro para contratar um artista profissional. Essa solução criativa permitiu que o projeto mantivesse sua identidade visual sem comprometer o orçamento.

Como Executar o Projeto

1. Clone o repositório:

   git clone https://github.com/HassanPls/ProjectPokedevs.git
   

2. Abra o arquivo index.html diretamente no navegador.

Estrutura do Projeto

• HTML: Define a estrutura dos cartões de cada Pokedev.
• CSS:
  • reset.css: Um reset básico para garantir uniformidade entre diferentes navegadores.
  • style.css: Define o layout e as cores dos componentes.
  • responsive.css: Implementa ajustes de layout para dispositivos móveis.
• JavaScript:
  • index.js: Script responsável por adicionar interatividade aos elementos, como alternar entre os cartões dos Pokedevs ao clicar nos ícones laterais.

---

Aprendizados

Esse projeto proporcionou uma prática significativa em:

• Manipulação do DOM com JavaScript.
• Estruturação de páginas responsivas.
• Aplicação de boas práticas de CSS para manutenção e escalabilidade.
• Implementação de interatividade através de eventos e funções JavaScript.

Contribuições

Contribuições são bem-vindas! Se você encontrar algum problema ou tiver sugestões de melhoria, por favor, abra um issue ou faça um pull request.

Licença

Este projeto está licenciado sob a licença MIT.