Programar un curriculum HTML con formatos CSS

A continuación se presenta un ejercicio de maquetación con CSS. Se pretende crear una página web que tenga la siguiente estructura (los colores pueden variar de acuerdo a los gustos de cada alumno):

Los requerimientos para esta estructura son:

Crear un contenedor para centrar todo el contenido de la página (recuadro verde).
Colocar una fotografía centrada al inicio del curriculum.
El nombre de la persona centrado y como fondo una barra color naranja.
Un subtitulo llamado "Experiencia académica" con un fondo color azul y su tamaño será del 50% respecto al contenedor principal.
Una lista de elementos desordenados con un fondo color azul en donde se muestre el historial académico de la persona. Esta lista tiene sangrías del lado izquierdo y derecho.
Un subtitulo llamado "Experiencia profesional" con un fondo color azul y su tamaño será del 50% respecto al contenedor principal.
Una lista de elementos desordenados con un fondo color azul en donde se muestre el historial laboral de la persona (si no cuenta con experiencia laboral, escribir datos ficticios). Esta lista tiene sangrías del lado izquierdo y derecho.
El pie de pantalla centrado con un fondo color naranja.

Ahora si, teniendo claros los requisitos para el trabajo, procedemos a la programación:

PASO 1: PROGRAMAR LA ESTRUCTURA HTML

El curriculum necesitará una fotografía. Para este ejemplo voy a utilizar esta que dibujé con Paint:

Después de conseguir la fotografía que necesito, ahora si, paso a programar el HTML:

Código fuente HTML:

Visto en el navegador, quedaría así:

PASO 2: PROGRAMAR EL CÓDIGO CSS

Antes de programar el código CSS, es conveniente recordar que existen varios métodos para insertar CSS en una página web, aquí utilizaremos la técnica de enlazar el archivo CSS hacia la página web, es decir, tener un archivo independiente para el HTML y un archivo independiente para el CSS.

En el HTML se insertará la siguiente línea de código:

Entonces, la etiqueta <head> quedaría así:

Ahora ya tenemos "enlazado" el archivo que contendrá todas las instrucciones de código CSS. Ahora solo falta empezar a escribir dicho archivo (puedes ir haciendo paso por paso e ir actualizando el archivo para ir viendo los cambios y apreciar mejor el comportamiento de cada instrucción CSS):

Crear un contenedor para centrar todo el contenido de la página (recuadro verde)

Visualización en el navegador:

Colocar una fotografía centrada al inicio del curriculum.

Visualización en el navegador:

El nombre de la persona centrado y como fondo una barra color naranja.

Visualización en el navegador:

Un subtitulo llamado "Experiencia académica" con un fondo color azul y su tamaño será del 50% respecto al contenedor principal.

Como es una etiqueta <h3> podemos "matar 2 pájaros con una sola piedra" al aplicarle el mismo formato al otro subtitulo ya que ambos comparten la etiqueta <h3>:

Visualización en el navegador:

(ojo: se ha cambiado "accidentalmente" también el pie de página. En un momento será corregido).

Una lista de elementos desordenados con un fondo color azul en donde se muestre el historial académico de la persona.

Al igual que en los subtítulos de experiencia académica y laboral, en esta lista podemos aplicar los mismos estilos aquí y en la lista del historial laboral, incluyendo las sangrías a los laos

Visualización en el navegador:

El pie de página centrado con un fondo color naranja.

¿Recuerdas que el pie de página había adquirido las propiedades de los subtítulos de experiencia académica y profesional?, pues con las dos primeras líneas quedarán anuladas estas propiedades heredadas previamente:

NOTA: Observa que en el nombre del selector se ha especificado que las propiedades se apliquen UNICAMENTE a las etiquetas <h3> que estén dentro de la etiqueta "pie-pagina", esto es muy importante para que estas propiedades que se le aplican a esta etiqueta <h3> no interferirán en otras etiquetas <h3>.