Neste projeto, criamos uma página de busca de Digimons com o intuito de aplicar conceitos práticos de HTML e CSS. Além disso, iremos incorporar o JavaScript para realizar chamadas à nossa API.

Digimon Search

IDE Utilizada: Visual Studio Code.

No desenvolvimento do projeto utilizamos alguns conceitos fundamentais de html e css, como o modelo de caixa (box-model) e a aplicação de elementos html que contribuem para a estruturação e organização do conteúdo em uma página web.

MODELO DA PÁGINA

Na imagem a baixo, podemos observar um contorno em alguns elementos da nossa página. Essa seleção antes do desenvovlimento do projeto, contribue imensamente para a construção e organização do nosso html.

Vamos considerar que cada contorno representa caixas ou contêineres que abrigarão nossos elementos. Dessa forma, ao observarmos, percebemos a necessidade de criar elementos como <div> e section para guardar:

1. Todo o nosso conteúdo da página: container;

2. O Background da nossa página: container-bg;

3. Nosso card central: card; E seus sub-elementos, como a Logo Digimon: i-card__logo; A Imagem do Digimon: i-card__digimon; O Nome do Digimon:t-nome__bt; O Container inferior principal com as informações: container-info; As Colunas de HP, ATK, DEF: a-info__column; E as colunas com os Status do HP, ATK, DEF [3x]: b-nv-ex__progressHp; e b-nv-in__progress-hp;

Links Importantes:

Box-Model: Sobre o Box-Model

BEM: Sobre o BEM