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:
<code>container</code>; - O Background da nossa página:
<code>container-bg</code>; - Nosso card central:
<code>card</code>; E seus sub-elementos, como a Logo Digimon:<code>i-card__logo</code>; A Imagem do Digimon:<code>i-card__digimon</code>; O Nome do Digimon:<code>t-nome__bt</code>; O Container inferior principal com as informações:<code>container-info</code>; As Colunas de HP, ATK, DEF:<code>a-info__column</code>; E as colunas com os Status do HP, ATK, DEF [3x]:<code>b-nv-ex__progressHp</code>; e<code>b-nv-in__progress-hp</code>;
Links Importantes:
Box-Model: Sobre o Box-Model
BEM: Sobre o BEM