Ejercicio de maquetación con display

Curso de HTML

30.  
31.  
33.  
35.  
48.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Como ampliación al video en el que explicaba la teoría del display block, inline, display inline-block y float left, os muestro como resolver este ejercicio que se plantea típicamente cuando estamos maquetando.

Aquí tienes el enlace al ejercicio dónde explico la teoría del display block, inline, inline-block y float left.

Los enlaces para ver el ejercicio resuelto, son:

¿Por qué es importante este ejercicio?

Habitualmente, resolverás este ejercicio usando display flex, pero es muy importante que conozcas los valores que puede tener el estilo display (fundamentalmente, los valores block, inline e inline-block) porque muchos elementos de una página web los tiene de manera inherente.

Este ejercicio, aunque sencillo, contiene las tareas que tienes que llevar a cabo a la hora de realizar una página web. Tiene columnas apiladas en horizontal, y tiene tres filas apiladas en vertical. Una página web es un conjunto de capas o rectángulos que vamos apilando en horizontal y en vertical para conseguir una estructura de cuadrícula. Este ejercicio está enfocado precisamente a ese objetivo. Además no carga fotografías, por lo que puedes realizarlo sin tener que preguntarte porque las rutas estén mal, algo que cuando estamos empezando ocurre bastante.

¿De dónde salió este ejercicio?

Un poquito de historia. Yo quise aprender a hacer páginas web porque quería hacer la mía propia y que todo el mundo la pudiese contemplar. No sé si es un objetivo muy noble, pero al menos es un objetivo. El objetivo es el primer paso de un largo camino que no sabes a dónde te puede llevar.

En mi caso, mi idea de página web era hacer una especie de ventana a la que alguien se asoma para contemplar el mundo. «Una ventana al mundo». Mi idea era convertir el cuadro «Muchacha asomada a la ventana» en una página web.

De todas formas, esta idea tuvo que evolucionar mucho. Un año después hice mi primera página web. Tardé un año desde que me lo propuse hasta que lo conseguí. Avancé muy poco a poco pero con la suficiente determinación (no demasiada, sólo la necesaria), nunca paré de avanzar. Aquí os dejo el engendro de lo que fue mi primera página web. Sólo funcionaba en Firefox (no recuerdo si chrome existía de aquella). Recuerdo que se la enseñé orgulloso a una compañera de trabajo que usaba Internet Explorer… y bueno… no se veía igual…

Página web estilo teatro
Muchacha asomadda a la ventana de Dalí

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.