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.
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:
-
Todo o nosso conteúdo da página:
container; -
O Background da nossa página:
container-bg; -
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; eb-nv-in__progress-hp;
Links Importantes:
Box-Model: Sobre o Box-Model
BEM: Sobre o BEM