Diseño adaptable con barra lateral

Introducción

En este laboratorio, exploraremos el mundo de la programación CSS. El objetivo principal de este laboratorio es proporcionar experiencia práctica en la creación de un diseño adaptable con una barra lateral. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar las propiedades display: grid y minmax() para crear un diseño efectivo y visualmente atractivo.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear un diseño adaptable con una área de contenido y una barra lateral, use display: grid en el contenedor padre, minmax() para la segunda columna (barra lateral) para permitir que ocupe entre 150px y 20%, y 1fr para la primera columna (contenido principal) para ocupar el resto del espacio restante. Aquí hay un ejemplo de código HTML y CSS:

<div class="container">
  <main>This element is 1fr large.</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;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Diseño adaptable con barra lateral. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.