En este tutorial se muestra cómo crear un portfolio básico con cuatro páginas: index, about, work y contact
La estructura de cada página consiste en una cabecera superior, seguida por un menú horizontal, una sección central y un footer con un copyright.
1) Se añaden a la cabecera el título de la página y los meta más importantes: Charset="UTF-8" para que presente bien los acentos y otros caracteres que no existen en inglés, autor, descripción, palabras claves y viewport.
2) Se utilizan elementos semánticos de HTML5 para organizar la página (header, nav, section y footer)
3) Se utilizan los elementos fundamentales de HTML para dotar de contenido a la página (títulos (h1), párrafos (p), listas (ul) y enlaces (a).
4) Se aplican las propiedades básicas de CSS a cada uno de estos elementos, comenzando por el body: background-color, width, height, margin, padding, border, float, así como algunas propiedades para las listas (list-style-type)
5) Se muestra la utilidad de las unidades relativas al viewport (vh y vw).
6) Se comprueba la importancia de crear una plantilla para luego generar muchas páginas con la misma estructura
7) Se dota de funcionalidad al menú rellenando la información de los ficheros que se enlazan en las etiquetas "a"
00:00 Introducción
01:12 HTML5 - Estructura
05:38 HTML - elementos básicos
08:30 CSS - Box model
12:10 CSS - Background-color y width
19:10 Crear páginas desde plantilla
20:20 Estilo menú horizontal