Maquetar un sitio web con 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:

Para llegar a  esa estructura, tomar en cuenta los siguientes requerimientos:

1. Centrar el todo el cuerpo de la página web con un contenedor que agrupe los elementos visibles al usuario.
2. Al inicio de la página web mostrar un menú de navegación con por lo menos 4 enlaces. Estos deberán estar estructurados con una lista desordenada (<ul></ul>).
3. El título de la página web deberá ser el nombre y apellidos del alumno.
4. El cuerpo de la página se dividirá en 2 columnas: Una columna pequeña (también llamada barra lateral) y una columna grande con texto de relevancia para los usuarios. 
5. Un pie de página mostrando al autor de la página web.

EMPEZANDO CON EL HTML

El primer paso antes de empezar con la maquetación, es separar el contenido de la presentación, así que primero se debe crear el archivo HTML con las etiquetas necesarias para los títulos, las listas con hipervínculos, los párrafos, etc. Se sugiere el siguiente contenido (aunque los alumnos son libres de llenar los párrafos con el contenido que mas les agrade -ESCRIBE TU PROPIO NOMBRE Y APELLIDOS-).

Visualización: 

Código fuente:

APLICANDO EL CSS 

Requerimiento #1: Centrar todo el contenido con un contenedor

Dentro del archivo llamado "estilos.css" es donde se colocarán todas las reglas CSS. En este caso, para centrar el contenedor se escribirá lo siguiente:

 

RESULTADO:

Requerimiento #2: Colocar 4 enlaces en forma de lista desordenada (<ul>) para que actúen como menú de navegacion

Dentro del archivo "estilos.css" escribir lo siguiente (los comentarios no son necesarios, solo los pongo para explicar mejor lo que pasa con cada línea):

Este CSS convertirá esto: 

En esto: 

Requerimiento #3: El título de la página web deberá ser el nombre y apellidos del alumno. 

Este ya lo pusimos desde el inicio, así que pasamos al siguiente punto...jeje...

Requerimiento #4: Dividir el cuerpo de la página en 2 columnas: Una barra lateral y otra con el contenido relevante para los usuarios.  

Pon atencion al archivo HTML: en él ya se reservamos previamente dos etiquetas llamadas "barra-lateral" y "contenido" a las cuales se les aplicarán las propiedades necesarias.

Este CSS convertirá esto:

En esto:  

Requerimiento #5: Un pie de página mostrando al autor de la página web. 

Ya casí para terminar, solo falta aplicar los estilos al ultimo elemento: el pie de página:

Esto convertirá esto: 

En esto:

Con esto finaliza este pequeño manual. Queda a consideracion de cada quien el mejorar un poco los estilos para que sean aun mas agradables a la vista: rellenos, margenes, colores, tipografías, etc.