¿Estás buscando un ejemplo de página hecha con HTML y CSS para que te sirva de aprendizaje?

Pues has llegado al mejor lugar que podrías haber encontrado. Yo voy a hacer aquí, ahora y contigo una página web sencilla pero completa.

  • Utilizaremos HTML y CSS
  • Utilizaremos código limpio y siguiendo las mejores prácticas
  • Crearemos un diseño responsive que se adapte al tamaño de pantalla
  • Estará todo explicado a la perfección pasito a pasito

Si has visto los capítulos de introducción al desarrollo web, mejor.

Si no, no pasa absolutamente nada.

Paso 1. ¿Qué quieres hacer?

Antes de hacer algo, hay que tener una mínima idea de qué es lo que vas a hacer. Al menos saber cómo vas a plantear la estructura de la página y tener algún boceto.

Bien, pues yo quiero una web que en tamaño de pantalla grande se vea así:

Y que en el móvil se vea con el menú principal y la barra lateral cerrados pero tenga un botón para poder abrir lo que nos haga falta:

Vamos a empezar por diseñarlo con la estructura que tendrá en pantalla grande, y ya después hacemos los ajustes para la versión móvil.

Paso 2. Crear los archivos necesarios

Me he creado una carpeta llamada “plantilla-potente” y dentro he metido dos archivos:

  • plantilla.html
  • estilos.css

Así de simple:

En plantilla.html estará la estructura html y en estilos.css estarán los estilos css.

Creamos una estructura básica de html incorporando la referencia a nuestra hoja de estilos.

Y así ya tenemos sentada la base más importante de todo esto:

  • El archivo que contiene la página en sí, su estructura html
  • La hoja de estilos con la que le daremos forma y diseño a esa estructura
  • Y una relación entre ambos ficheros para que el navegador lo pueda cargar

Sencillo, ¿verdad?

Paso 3. Darle forma a la cabecera

Dentro del body, empezaremos por añadir un div que tendrá el título de la web y un fondo bonito.

Y eso en el navegador se ve tal que así:

La verdad es que de potente no tiene mucho, pero allá vamos.

Empiezo por darle un color de fondo al bloque de la cabecera principal.

Y se ve así:

Hay un espacio blanco entre la cabecera y los bordes del navegador, y eso es porque por defecto el body se muestra con un margen, así que vamos a quitárselo.

Mejor:

Pero aún falta mucho por hacer.

Vamos a darle un padding a la cabecera para que el título pueda respirar en su espacio libre, y de paso vamos a ponerlo blanco.

Así está mucho mejor, pero observa que el h1 también tiene un margen por defecto. Se lo vamos a quitar.

Pero no solo eso, vamos a meter en el mismo saco a todos los niveles de heading (h1, h2, …, h6) y también a los párrafos y listas. A mí me gusta quitarle el padding y margen que traen por defecto los elementos principales y ya se lo pondré yo específicamente.

Para eso, edito la parte que hice de quitar el margen del body:

Ahora se ve más encuadrado todo:

Está quedando perfecto.

Ya tenemos la cabecera planteada, ahora vamos a proceder con el cuerpo de la página.

Consejo sobre cómo nombrar las clases

Voy a crear una clase llamada cuerpo-principal, y este es un nombre que elijo porque quiero, no hay ninguna regla para definir los nombres de tus clases.

Simplemente hay que hacerlo de la manera más específica posible. Podía haber puesto simplemente cuerpo, pero si mañana quiero poner una clase para el cuerpo de un artículo por ejemplo, ya sería confuso y no se sabe exactamente si la clase cuerpo se refiere al cuerpo de la web o al cuerpo del artículo.

Existen varias metodologías para nombrar las clases de manera sistemática, pero yo opino que el mejor sistema es hacer las cosas con claridad y punto, sobre todo a la hora de aprender.

Así dejas fluir tu lado creativo.

Entonces, vamos a crear la clase cuerpo-principal con margen a la izquierda y a la derecha de igual cantidad que le pusimos el padding a la cabecera.

¿Por aquí aquí uso margin y antes usé padding?

Básicamente porque a la cabecera le he puesto un color de fondo, y quiero que ese fondo llegue hasta los bordes de la pantalla.

El padding es un espaciado interno, pero mantiene el elemento justo donde empieza, no lo desplaza, mientras que el margen es un margen como tal, el elemento se desplaza para no ocupar ese espacio. Y si tuviese un color de fondo, el color de fondo se desplazaría también.

Y naturalmente, habrá que usar esa clase dentro de la plantilla.html

Y en el cuerpo lo que meteremos es, para empezar, la barra de navegación principal.

Le damos una clase para poder asignarle estilos después.

Está cogiendo forma, pero no tiene nada de bonito. Le damos un color de fondo a la navegación y ponemos los enlaces en blanco.

Aquí ves cómo el color de fondo demuestra que con la propiedad de margen, el elemento se desplaza entero.

Vamos a darle un pequeño padding a los enlaces para crear holgura entre ellos.

Los quiero poner también más altos, así que le doy un height:

Pero si miro el resultado no tiene efecto ninguno, y es porque los enlaces son elementos inline que no hacen caso a lo que le digas de alto.

Pero le voy a dar la propiedad display flex al elemento padre de los enlaces, es decir, el nav con clase menu-principal, y así se arregla el problema:

Bueno, se arregla el alto pero está feo porque se ajusta el texto en la parte de arriba del elemento. Vamos a darle el mismo alto a la línea de texto que al elemento, para que quede centrado:

Ahora sí.

Paso 4. Crear dos columnas en el cuerpo principal

Ahora crearemos dos columnas, una para la barra lateral (que es super mega conocida como sidebar) y otra para el contenido principal de la página.

Vamos a practicar con display grid, que es una propiedad que ofrece muchísimo juego, aunque nosotros la vamos a utilizar de forma bastante simple.

Creamos un contenedor para las columnas y le damos display grid, y establecemos el ancho de las columnas con grid-template-columns:

Al decirle 1fr y 3fr, estamos diciendo que la segunda columna sea 3 veces el tamaño de la primera, ocupando el ancho entero disponible.

Ahora metemos el html dentro del contenedor que hicimos para el cuerpo prinicpal:

Lo más chulo del display grid es que especificas el tamaño de las columnas en el elemento y ya el propio navegador se encarga de asignarle ese ancho a los hijos del elemento, en el orden en que aparecen.

Vamos a darle una clase a cada uno, con un color de fondo, para que veas bien qué está pasando.

Y no olvides de meter las clases en los elementos correspondientes.

Los colores son feos pero esta es la idea:

Observa que la parte roja es 3 veces el tamaño de la parte azul, sea cual sea el ancho de pantalla.

¡Es fantástico!

Vamos a hacer un ajuste de colores, le doy al body un fondo grisáceo, al principio de la hoja de estilos.

Al sidebar lo cambiamos a un color más bonito y el contenido principal lo dejo blanco precioso.

Ahora vamos a crear una caja en la parte superior de cada columna.

Y los llamaremos tal cual: parte-superior.

Le doy el mismo alto y un borde inferior (este borde lo modificaremos después, de momento es solo para ver el alto de este elemento):

Puedes usar el selector de “.parte-superior” directamente, sin especificar los padres. Pero haciéndolo así, evitas afectar a las propiedades de otro elemento que pueda llamarse parte-superior y que esté fuera del sidebar o el contenido principal.

Ya va cobrando forma el asunto.

Vamos a darle un alto de línea igual que el alto del elemento, un poco de padding lateral, y un color de fondo a la parte superior de la cabecera:

Ahora vamos a hacer una cosa muy chula, para seguir practicando el juego de margen y padding.

Queremos empujar el cuerpo principal por encima de la cabecera, para que esta quede de fondo, verás que te gusta.

Le damos un margen superior negativo a todo el contenedor del cuerpo principal:

Ups… qué feo.

Falta crear un espacio de relleno en la cabecera, para que las letras del título de la página vuelvan a quedar encima.

Pues lo conseguimos metiendo 4.5rem extra de padding inferior en la cabecera:

Fíjate que hemos editado la línea de padding anterior y hemos especificado todos los valores en una sola línea, siguiendo los valores en sentido horario:

  • Arriba: 3rem
  • Derecha: 3rem
  • Abajo: 3rem + 4.5rem = 7.5rem
  • Izquierda: 3rem

Y ahora sí:

Falta pulir un detalle:

El borde que pusimos para visualizar el alto de las partes superiores hay que arreglarlo porque desentona.

Y lo que haremos es darle solo el borde a la parte principal con el fondo blanco, ya que el fondo verde que tenemos en el sidebar ya hace de “filo”, y quedaría feo tener ahí un doble filo.

Lo sacamos de donde estaba especificado y lo metemos solo en el selector de contenido-principal:

Pero sigue estando feo, por dos motivos:

  • Es demasiado gordo
  • Crece hacia abajo de la caja, en vez de hacia el interior de la misma

Vamos a corregir las dos cosas:

Ahora mejor.

Vamos a por el siguiente detalle:

Toda la línea vertical izquierda está desalineada. La P de Plantilla no coincide con la I de Inicio ni con la H de Hola.

Vamos a modificar el padding izquierdo de la cabecera y el padding izquierdo de la barra de navegación.

También vamos a darle padding al contorno del cuerpo del sidebar, creando para ello otra clase:

También puedes crear la clase cuerpo-sidebar, pero como vamos a meterlo bajo el selector de sidebar, nos basta con llamarlo cuerpo.

La cosa es que queda bastante claro a qué nos estamos refiriendo, y de eso se trata.

Ya ves que una buena regla general es tener nombres de clases cortos pero descriptivos, y utilizar subselectores cuando tengamos clases padre.

Metemos también el div en html:

Y ya la cosa queda más alineada visualmente:

El mismo concepto de cuerpo lo podemos aplicar dentro del contenido principal:

Quedando así:

Todo esto está muy bien, ¿pero qué pasa si tengo una pantalla más estrecha?

Que se me va todo al garete.

Siguen funcionando las reglas que he establecido, pero el espacio disponible es muy pequeño para que con esas reglas se vean bien las cosas.

Pues hay que aplicar reglas nuevas para pantallas más estrechas.

Paso 5. Aplicar diseño responsive

Y aunque pueda parecer un mundo, es una tontería.

La idea es añadir reglas nuevas, igual que hemos hecho hasta ahora.

Lo único que cambia es que esas reglas solo se cargarán para determinados tamaños de pantalla.

Estos puntos donde cambiamos la reglas CSS son conocidos como puntos de ruptura (breakpoints), porque es donde el diseño se rompe y hay que modificar cositas.

Un punto de ruptura común en estos tiempos son los 768px de ancho, aunque no tienes que tomarte eso muy a rajatabla.

Tu misión es que tu diseo se adapte y quede bien, así que lo que haces es buscar los puntos donde crees que deberías aplicar nuevas reglas, y las aplicas.

Yo me he ido al punto estándar y considero que sí, que es un buen punto donde cambiar algunas reglas:

Porque si estamos en un viewport (la parte donde se muestra la web en el navegador), me gustaría ocultar el sidebar y el menú y hacerlos desplegables.

Empezaremos por ocultar el menú de navegación cuando no quepa, para hacerlo desplegable.

Hay muchas formas de hacer esto, y desde hace tiempo se ha hecho usando JavaScript. Pero CSS es cada vez más potente y ofrece muchas nuevas formas de hacer cosas sin usar JavaScript.

Una de las formas actuales de hacer esto es utilizando un input html de tipo checkbox. Porque con CSS podemos aplicar reglas distintas si el checkbox está marcado o desmarcado.

Y eso lo podemos usar para mostrar un menú abierto y un menú cerrado.

Pues vamos a hacer que por debajo de 768px se oculten los enlaces del menú.

La @media con el ancho máximo es un bloque de reglas que se aplican solo si el ancho máximo de la pantalla es el especificado, en este caso 768px.

Otra forma de verlo es:

“Estas reglas se aplican desde 0px hasta 768px”

Para pantallas más anchas, esas reglas ya no se aplican.

Entonces, si miramos la web con un ancho inferior a ese punto de ruptura, vemos que desaparecen los enalces:

Pero yo quiero mostrar un checkbox para activar y desactivar el menú desplegable, pues lo meto en el html, junto al elemento nav del menú:

Y se ve así:

Sí sí, super feo, pero ese checkbox podemos marcarlo y desmarcarlo para ir jugando.

Aunque yo no quiero un cuadradito así, me gusta más una la típica hamburguesa clicable.

Pues voy a agregar un label asociado al checkbox (fíjate que el for del label coincide con el id del checkbox):

Observa también que no es necesario que lo coloque justo al lado del checkbox, yo en este caso me lo he llevado a la cabecera principal.

Un label es un elemento que está asociado al input, y que cuando lo clicas, es como si estuvieses clicando el input al que está asociado. No importa si el label está en otro sitio, porque está relacionado con el input mediante el atributo for.

Dentro del label hemos metido la hamburguesita directamente.

Todo esto sirve para ocultar el checbox y convertir su label en una hamburguesa, así podemos mantener la funcionalidad del checkbox pero sin mostrarlo en pantalla.

Le damos estilo al label para que se vea bonito, posicionado en la parte superior derecha:

Fíjate que si clicas la hamburguesita, se marca y se desmarca el checkbox.

Ahí está la gracia.

Ahora queremos que el menú se muestre cuando el checkbox esté marcado.

Mira la parte que hemos añadido, te la explico:

  • El selecto con :checked aplica cuando el checkbox con ese id está marcado
  • El símbolo ~ aplica al elemento hermano (no hijo) de ese checkbox. Este es el motivo por el que sí hemos puesto el checkbox como hermano del nav, para poder usar este selector.

Simplemente le estamos diciendo:

“Cuando el checkbox con id checkbox-menu-principal esté marcado, busca el hermano de este elemento (un elemento hermano es aquel que está al mismo nivel, y no está ni dentro ni por encima) que tenga la clase menu-principal y haz que los enlaces se muestren.”

Y efecitvamente, funciona:

Puedes pinchar la hamburguesita, que hará que se marque y desmarque el checkbox y que se muestre y oculte el menú.

Ahora lo que quiero es que el menú se muestre pero en vertical y con los enlaces centrados:

Muy bien, eso está funcionando.

Pero si vuelves a poner la pantalla ancha siguen apareciendo la hamburguesa y el checkbox:

Vamos a aplicarle un display none pero fuera de la @media query.

Este display none los mantendrá ocultos siempe y cuando no se cumpla la regla de la @media query.

Ahora está muy bien, el checkbox permanece oculto y se muestra la hamburguesita cuando hace falta.

Y ya nos va gustando lo que tenemos, pero puede mejorarse.

Los márgenes laterales del cuerpo principal deberíamos quitarlos en pantallas tan pequeñas, para aprovechar mejor el espacio.

Entonces, dentro de la @media query, agregamo la regla que quite el margen izquierdo y derecho del cuerpo principal.

Y así queda todo el ancho aprovechado.

Pero ese sidebar tan pequeño no es práctico, lo que haremos es hacerlo desplegable también, siguiendo la misma técnica.

Lo que hemos hecho es:

  • Añadir el checkbox en el elemento hermano que queremos manipular
  • Añadir el label para controlar ese checkbox (no importa dónde pongamos el label)
  • Crear la lógica de ocultar y mostrar el elemento con sencillas reglas CSS

Pues vamos a repetir el proceso.

Yo en este caso quiero manipular el elemento sidebar-y-contenido-principal, pues lo que haré será modificar el grid-template-columns y el display de las cosas que contiene.

Añadimos el label en la parte superior dentro del sidebar.

Hemos añadido el id del checkbox en el for del label, y además dentro hemos metido un span vacío con la clase flechitas-control-sidebar.

Ese span lo usaremos para mostrar una flechita de abrir y de cerrar, según el estado del checkbox.

Si está el checkbox desmarcado mostramos una indicación de abrir, y si está marcado, mostramos la indicación para cerrar.

Y todo eso dentro de la misma @media query que utilizamos antes.

Y funciona perfectamente:

Ahora tenemos que abrir y cerrar el sidebar, aunque lo que haremos realmente es:

  • Modificar el grid-template-columns para hacerlo mayor o menor
  • Ocultar o mostrar los contenidos del cuerpo del sidebar

En vez de usar el formato de fracciones, lo que hacemos es meterle un ancho fijo y dejar que el contenido abarque el resto.

Funciona perfecto, pero vamos a ocultar el checkbox y en caso de estar cerrado también el contenido del cuerpo.

Lo de ocultar el checkbox lo hacemos en la zona del sidebar, pero fuera de la @media query, para que se aplique siempre.

Y lo de ocultar y mostrar el cuerpo lo añadimos en la misma parte en la que hemos cambiado el template-columns.

Fíjate que le ponemos display none por defecto sin marcar, y display block cuando sí está marcado.

Solo haremos una cosita más para dejarlo medianamente listo, y es ponerle el puntero al pasar el cursor por encima y dejar las flechitas en blanco.

Y así sí vamos acercándonos a algo ya más decente.

Ahora me apetece cambiar un poco el juego de colores, porque los primeros los puse así por poner algo.

Quiero tener la cabecera con un fondo degradado:

Y cambiar también el color de la parte superior del sidebar:

Así tiene un poco más de personalidad el asunto:

Vamos a retocar también un poco la barra de navegación principal, que está un tanto sosa:

Lo primero, le quito las líneas esas y pongo las letras mayúsculas.

Voy a darle un poco de espaciado entre las letras y añadir un brillo de fondo cuando pasamos el cursor por encima de un enlace.

Así está mejor.

Pero con el menú desplegado está todo demasiado junto:

Vamos a cambiar eso en la parte de la @media query.

Le añado a todos los enlaces 0.4rem de padding dentro del nav del menú principal.

Está mejor pero el primer y último enlace están demasiado pegados al filo, vamos a darle más espacio para que estén tranquilitos.

Y ahora sí:

Otro retoque que vamos a hacer también es la tipografía de la web, porque esta que hemos dejado por defecto no queda bien.

Puedes cargar tipografías externas, pero para que puedas seguir este tutorial sin necesidad de tener la conexión a internet activa, vamos a poner una fuente que ya trae el navegador por defecto.

Es más elegante así.