15 sesiones
HTML + CSS
Responsivo
Accesible
HTML & CSS › Sesión 15

Presentación y
revisión final

Presentar el proyecto final, recibir retroalimentación y consolidar los conocimientos adquiridos.

1

Agenda de la sesiónEstructura de la última clase

Últimos ajustes20 min
Presentación de proyectos60 min
Revisión del curso20 min

Parte 1 – Últimos ajustes (20 min)

Tiempo para realizar los últimos retoques al proyecto:

  • Verificar que todas las páginas funcionan correctamente.
  • Revisar la lista de requisitos del proyecto (sesión 14).
  • Comprobar que los enlaces internos no están rotos.
  • Probar en vista responsiva (F12 → modo responsive).
2

Presentación de proyectosCada alumno/grupo presenta su trabajo

Estructura de la presentación (~9 min por alumno)

  • 1
    Introducción (1 min)

    Tema elegido y por qué.

  • 2
    Demostración (3 min)

    Navegar por las páginas mostrando las funcionalidades.

  • 3
    Código destacado (2 min)

    Mostrar un fragmento de código del que estés orgulloso: un layout Flexbox, una animación, una solución de accesibilidad.

  • 4
    Dificultades y aprendizajes (1 min)

    ¿Qué fue lo más difícil? ¿Qué aprendiste?

  • 5
    Preguntas (2 min)

    Los compañeros hacen preguntas o comentarios.

3

Resumen del curso15 sesiones de HTML & CSS

Sesión Tema
1Estructura HTML básica
2Formato de texto y listas
3Enlaces e imágenes
4Tablas
5Formularios
6Introducción a CSS
7Texto y colores
8Modelo de caja
9Maquetación (display, float, position, Flexbox)
10Flexbox avanzado y diseño responsivo
11Accesibilidad y semántica
12Selectores avanzados y pseudo-clases
13Transiciones y transformaciones
14Proyecto final
15Presentación y revisión
4

Evaluación del proyectoRúbrica de calificación

Criterio Puntos
Estructura HTML correcta y semántica20
Variedad de elementos HTML (listas, tablas, formularios, imágenes, enlaces)15
Diseño CSS coherente y atractivo15
Uso de Flexbox para la maquetación10
Diseño responsivo (media queries)10
Transiciones y transformaciones10
Accesibilidad (alt, labels, contraste, teclado)10
Calidad de la presentación oral10
Total100
5

Para seguir aprendiendoTemas que puedes explorar a continuación

▦

CSS Grid

Sistema de maquetación bidimensional (filas y columnas a la vez), complementario a Flexbox.

★

Animaciones CSS

@keyframes: animaciones más complejas que las transiciones.

--

Variables CSS

--mi-variable: definir valores reutilizables en toda la hoja de estilos.

S

Preprocesadores CSS

Sass, Less: herramientas que añaden funciones avanzadas a CSS.

JS

JavaScript

Añadir interactividad y lógica a tus páginas web.

B

Frameworks CSS

Bootstrap, Tailwind: bibliotecas de estilos predefinidos para desarrollar más rápido.

⚙

Herramientas de desarrollo

Inspeccionar elementos, depurar CSS, auditar rendimiento y accesibilidad (Lighthouse).

☰

Git y GitHub

Control de versiones y publicación de proyectos.