Desafío: Comprensión fundamental del diseño
Si has trabajado en este módulo, ya habrás cubierto los conceptos básicos de lo que necesitas saber para hacer diseño CSS hoy en día, y también para trabajar con CSS más antiguo. Esta tarea pondrá a prueba parte de tu conocimiento mediante el desarrollo de un diseño de página web simple utilizando una variedad de técnicas.
Punto de partida
Puedes descargar el HTML, CSS y un conjunto de seis imágenes aquí.
Guarda el documento HTML y la hoja de estilo en un directorio en tu computadora, y agrega las imágenes en una carpeta llamada images. Abrir el archivo index.html en un navegador debería darte una página con un estilo básico pero sin diseño, que debería verse algo como la imagen a continuación.
Este punto de partida tiene todo el contenido de tu diseño como lo muestra el navegador en flujo normal.
Alternativamente, podrías usar un editor en línea como CodePen, JSFiddle o Glitch.
Si usas un editor en línea, deberás cargar las imágenes y reemplazar los valores en los atributos src para que apunten a las nuevas ubicaciones de las imágenes.
Nota: Si te quedas atascado, puedes comunicarte con nosotros en uno de nuestros canales de comunicación.
Resumen del proyecto
Se te ha proporcionado algo de HTML sin formato, CSS básico e imágenes; ahora necesitas crear un diseño para el diseño.
Tus tareas
Ahora debes implementar tu diseño. Las tareas que debes lograr son:
- Mostrar los elementos de navegación en una fila, con una cantidad igual de espacio entre los elementos.
- La barra de navegación debe desplazarse con el contenido y luego quedar fija en la parte superior de la ventana gráfica cuando la alcance.
- La imagen que está dentro del artículo debe tener texto ajustado a su alrededor.
- Los elementos
<article>y<aside>deben mostrarse como un diseño de dos columnas. Las columnas deben tener un tamaño flexible para que si la ventana del navegador se reduce, las columnas se vuelvan más estrechas. - Las fotografías deben mostrarse como una cuadrícula de dos columnas con un espacio de 1 píxel entre las imágenes.
Pistas y consejos
No necesitarás editar el HTML para lograr este diseño y las técnicas que debes usar son:
- Flexbox
- Grid
- Flotación
- Posicionamiento
Hay algunas formas en que podrías lograr algunas de estas tareas, y a menudo no hay una única forma correcta o incorrecta de hacer las cosas. Prueba algunos enfoques diferentes y ve cuál funciona mejor. Toma notas mientras experimentas.
Ejemplo
La siguiente captura de pantalla muestra un ejemplo de cómo debería verse el diseño terminado para el diseño:
