Layout Responsivo com Barra Lateral | Tutorial de Programação CSS

Introdução

Neste laboratório, exploraremos o mundo da programação CSS. O principal objetivo deste laboratório é fornecer experiência prática na criação de um layout responsivo com uma barra lateral (sidebar). Ao final deste laboratório, você terá uma melhor compreensão de como usar as propriedades display: grid e minmax() para criar um layout eficaz e visualmente atraente.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

index.html e style.css já foram fornecidos na VM.

Para criar um layout responsivo com uma área de conteúdo e uma barra lateral, use display: grid no contêiner pai, minmax() para a segunda coluna (barra lateral) para permitir que ela ocupe entre 150px e 20%, e 1fr para a primeira coluna (conteúdo principal) para ocupar o restante do espaço disponível. Aqui está um exemplo de código HTML e CSS:

<div class="container">
  <main>Este elemento tem 1fr de largura.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Layout Responsivo com Barra Lateral (Sidebar). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.