Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/erichidekimiyahara/projeto-xdevs-capitaesbleach

O objetivo deste projeto foi criar uma página web que apresente os 13 capitães do anime Bleach. A página é responsiva e estilizada de maneira atraente, exibindo imagens e informações sobre cada capitão. Foram usadas as seguintes tecnologias: HTML, CSS e JavaScript. Projeto feito com ajuda do canal Dev em Dobro. Logo abaixo, está o link do projeto.
https://github.com/erichidekimiyahara/projeto-xdevs-capitaesbleach

css html javascript vscode

Last synced: 2 days ago
JSON representation

O objetivo deste projeto foi criar uma página web que apresente os 13 capitães do anime Bleach. A página é responsiva e estilizada de maneira atraente, exibindo imagens e informações sobre cada capitão. Foram usadas as seguintes tecnologias: HTML, CSS e JavaScript. Projeto feito com ajuda do canal Dev em Dobro. Logo abaixo, está o link do projeto.

Awesome Lists containing this project

README 

        
# Os 13 capitães da Soul Society 🏯



### Sobre o projeto 

  Esse projeto foi desenvolvido durante a [`Semana do Zero ao Programador Contratado`](https://devemdobro.com), disponibilizado pelo [`Dev em Dobro`](https://www.youtube.com/@DevemDobro). Ele foi desenvolvido utilizando as tecnologias de HTML, CSS e JavaScript e feito por meio do Visual Studio Code. O site oferece uma experiência interativa e visualmente atraente para os fãs explorarem informações simples sobre cada capitão.



https://github.com/EricHidekiMiyahara/projeto-xdevs-capitaesbleach/assets/139871798/6eb61cdd-726f-4bbb-bbae-7ba46edf729e



##



### Descrição 👨‍💻

  Inicialmente, para esse projeto foi utilizado uma técnica interessante, chamada de responsividade do CSS. Ela se caracteriza por ser uma abordagem ao design da Web que faz as páginas da web renderizarem bem em uma variedade de dispositivos e tamanhos de janela ou tela do mínimo ao máximo. No caso do trabalho, deu problemas de visualização dos elementos da página, em dispositivos móveis com um tamanho menor que 640 pixels de resolução de tela. Por isso, foi utilizado alguns códigos na parte de responsividade do CSS. Além do CSS, foi feito o "esqueleto" da página usando o HTML. E por fim, para mostrar o próximo personagem e um anterior do anime, foi usado o Java Script. No momento em que o usuário clicar no avanço do botão, o Java Script vai possibilitar que apareça o próximo personagem e ele vai ocultar o personagem anterior. E por fim, no momento em que o usuário clicar no voltar do botão, o Java Script vai possibilitar que apareça o personagem anterior e ele vai ocultar o personagem anterior. 



## 



### Tecnologias usadas 🖥️



  

    HTML

    CSS

    JavaScript

    Visual Studio Code

  

  

    5

    3

    ES2021

    1.90.2

  

HTML

CSS

JavaScript

Visual Studio Code



## 



### Observações 🔍

+ Quando você clicar até depois do último personagem, não vai aparecer o primeiro personagem novamente, pois no Java Script foi delimitado até esse último.

+ Quando você clicar antes do primeiro personagem, vai continuar aparecendo o primeiro personagem, pois no Java Script foi delimitado.

  

## 



### Como rodar o projeto 🔁



1) Baixe o Visual Studio Code.

2) Baixe as imagens dos 13 capitães da Soul Society na pasta imagens, dentro da pasta src.

3) Crie um arquivo index.html e pegue o código da seção index.html e cole nele.

4) Crie uma pasta chamada src e dentro dela crie uma pasta chamada css e uma pasta chamada imagens e outra pasta chamada js.

5) Dentro da pasta css, crie os arquivos estilo.css, reset.css e responsivo.css. Pegue os códigos dos mesmos nomes de arquivos e cole nos arquivos que criou.

6) Dentro da pasta imagens, coloque as imagens dos 13 capitães da Soul Society.

7) Dentro da pasta js, crie o arquivo index.js. Pegue os códigos do mesmo nome de arquivo e cole nos arquivo que criou.

8) Baixe a extensão Live Server.

9) Roda aquela extensão no ícone chamado Go Live, no canto inferior direito para abrir o site.

10) Verifique se as imagens podem ser avançadas ou recuadas quando clica nas setas.



### Conclusão ⛩️

  Criar este projeto foi uma experiência incrível e uma oportunidade para combinar minha paixão por Bleach com o desenvolvimento web. Eu quis capturar a essência dos 13 Capitães e apresentar suas histórias de uma forma que os fãs do anime realmente apreciem. Foi um prazer trabalhar neste projeto, e estou animado para compartilhar este trabalho com a comunidade de fãs de Bleach.