Práctica: Portfolio con HTML y CSS

Objetivo y duración

El objetivo de esta práctica es dar rienda suelta a vuestros nuevos conocimientos de HTML y CSS para crear un portfolio o curriculum. Este curriculum puede tener partes inventadas.

Duración: 7 h

Entrega y presentación

La entrega será en formato ZIP. Leer Entrega y presentación de tareas.

Calificación

La tarea se calificará con una nota de 0 a 10.

Actividades

A continuación se listan las actividades que se deben realizar. Recuerda que el HTML solo marca la estructura y contenido del documento y CSS la parte estilística y visual.

HTML

Para la parte de HTML puedes usar los siguientes enlaces que te servirán de documentación:

• Mi artículo HTML
• Lenguaje HTML5
• HTML Tutorial (W3Schools)
• HTML: Lenguaje de etiquetas de hipertexto (Developer Mozilla)

Respecto a la parte de HTML el portfolio/currículum deberá cumplir al menos con los siguientes requisitos:

1. El portfolio/currículum respeta las indentaciones o tabulaciones para que sea cómodo de leer.
2. El portfolio/curriculum utiliza cabeceras (h1, h2, h3…) de manera bien estructurada.
3. El portfolio/currículum utiliza párrafos.
4. El portfolio/currículum utiliza una o varias listas.
5. El portfolio/currículum utiliza una o varias tablas.
6. El portfolio/currículum utiliza una o varias imágenes.
7. El portfolio/currículum usa codificación UTF-8.
8. El portfolio/currículum tiene favicon.
9. El portfolio/currículum tiene un título (metadato) con el nombre del alumno.
10. El portfolio/currículum tiene uno o varios comentarios HTML.
11. El portfolio/currículum tiene versión en español y en inglés pudiendo cambiar entre una versión y otra a través de enlaces.
12. El portfolio/currículum utiliza enlaces externos.

CSS

Para la parte de CSS puedes usar los siguientes enlaces que te servirán de documentación:

• Mi artículo CSS
• Lenguaje CSS
• CSS Tutorial (W3Schools)
• CSS (Developer Mozilla)

Respecto a la parte de CSS el portfolio/curriculum deberá cumplir al menos con los siguientes requisitos:

1. Los estilos respetan las indentaciones o tabulaciones para que sea cómodo de leer.
2. Los estilos están en un fichero independiente con extensión “.css”.
3. El portfolio/currículum debe contener estilos asignados por los 3 tipos de selectores.
4. El portfolio/curriculum usa al menos 3 tipos de combinators diferentes.
5. El portfolio/curriculum debe usar las etiquetas semánticas de HTML5.
6. El portfolio/curriculum debe contar con una cabecera y un pie.
7. La hoja de estilos debe tener al menos un comentario para indicar el autor del mismo.
8. El portfolio/currículum usa una fuente personalizada para los títulos y una fuente personalizada para el contenido.
9. El portfolio/currículum utiliza paddings y/o margins de manera adecuada.
10. El portfolio/currículum contiene al menos un tooltip.

Si quieres hacer que tu curriculum sea realmente responsivo puedes usar este vídeo de guía: