Conteúdo principal

Nesta videoaula, você verá como construir o conteúdo principal do blog. Criaremos uma listagem das últimas postagens para que o usuário possa visualizá-las e acessar mais informações.

Acompanhe a videoaula para compreender todo o processo de construção. Nas próximas seções, alguns trechos de códigos produzidos serão destacados.

Título

Para o título, utilizaremos a tag <h1>, que indica o título principal do documento HTML. Além disso, adicionaremos uma linha horizontal (<hr>) e alguns ajustes de estilo. Veja o código produzido:

<h1 class="mb-4">
  <small>Posts Recentes</small>
</h1>
<hr>

Postagens

Para cada uma das postagens, utilizaremos um Card que conterá uma imagem ilustrativa, o título do post, uma pequena descrição e informações da postagem. Abaixo, segue o código final base para cada postagem:

<div class="card mb-4">
  <img class="card-img-top" src="imgs/img-post-01.jpg" alt="Imagem de capa do card">
  <div class="card-body">
    <h5 class="card-title">Como programar CSS</h5>
    <p class="card-text">Um exemplo de texto rápido para construir o título do card e fazer
      preencher o conteúdo do card.</p>
    <a href="post01.html" class="btn btn-primary">Leia mais</a>
  </div>
  <div class="card-footer text-muted">
    Postado por <a href="#">João</a> no dia 11 de setembro de 2019
  </div>
</div>

Cada postagem deve possuir informações específicas de título, descrição, autor e uma imagem ilustrativa.

Download do exemplo

Clique aqui para download