Introducción al Desarrollo Web con HTML y CSS

Edad Recomendada: 12-15 años
Duración del Curso: 12 sesiones
Nivel: Principiantes
Herramientas: Navegador y VSCode

Introducción al Desarrollo Web con HTML y CSS

En este curso, aprenderás cómo funcionan las páginas web y cómo crearlas desde cero utilizando HTML para la estructura y CSS para darles estilo. Al final, serás capaz de crear una página web simple que incluya texto, imágenes y un diseño básico.

Herramientas:

• Navegador web: para visualizar las páginas web que crees.
• Editor de texto (Visual Studio Code): para escribir y guardar tu código.

Objetivo: Adquirir conocimientos básicos sobre desarrollo web, estructuración de contenido y habilidades de diseño, desarrollando la confianza para seguir explorando el mundo del desarrollo web.

---

Temario del curso

---

Unidad 1: Introducción al Desarrollo Web

Objetivo: Familiarizarse con el desarrollo web, qué es HTML y CSS, y por qué son importantes.

• Sesión 1: ¿Qué es una página web?
  • Entender cómo funcionan las páginas web y cómo están compuestas.
  • Conocer el papel de HTML y CSS en la construcción de sitios web.
  • Navegar por ejemplos de páginas web para identificar elementos HTML y CSS.
    📝 Cuestionario de qué es una página web
• Sesión 2: Herramientas del desarrollador web
  • Instalación de Visual Studio Code y explicación de su uso.
  • Configuración inicial y estructura de un proyecto web.
  • Introducción a las herramientas del navegador para desarrolladores.
    📝 Cuestionario de herramientas del desarrollador web

Unidad 2: HTML Básico – Estructura de una Página Web

Objetivo: Aprender los fundamentos de HTML y cómo estructurar una página web básica.

• Sesión 3: Creación de la primera página web
  • Crear un archivo HTML y entender su estructura básica.
  • Agregar títulos, párrafos y otros elementos de texto.
  • Guardar y abrir la página en un navegador para visualizarla.
    📝 Cuestionario de creación de la primera página web
• Sesión 4: Enlaces e imágenes en HTML
  • Añadir enlaces para crear conexiones entre diferentes páginas.
  • Insertar imágenes y ajustarlas en el sitio.
  • Proyecto: Crear una mini página “Sobre mí” con imágenes y enlaces.
    📝 Cuestionario de enlaces e imágenes en HTML
• Sesión 5: Listas y tablas en HTML
  • Crear listas ordenadas y desordenadas.
  • Introducción a tablas para organizar datos.
  • Proyecto: Página de “Mis Hobbies” utilizando listas y tablas.
    📝 Cuestionario de listas y tablas en HTML

Unidad 3: CSS Básico – Estilizando la Página Web

Objetivo: Conocer cómo usar CSS para dar estilo y diseño a las páginas web creadas.

• Sesión 6: Introducción a CSS
  • Crear un archivo CSS y enlazarlo con HTML.
  • Concepto de selectores, propiedades y valores en CSS.
  • Cambiar colores de fondo, fuentes y tamaño de texto.
    📝 Cuestionario de introducción a CSS
• Sesión 7: Diseñando el texto y fondo
  • Aplicar estilos a los textos (fuentes, colores, alineación).
  • Agregar fondos (colores, imágenes de fondo).
  • Proyecto: Diseñar una página personalizada usando distintos estilos.
    📝 Cuestionario de diseñando el texto y fondo
• Sesión 8: Bordes, espaciado y layouts básicos
  • Uso de bordes, márgenes y padding para ajustar espacios.
  • Introducción a layouts con cajas (divisiones de contenido).
  • Proyecto: Crear una página con “cajas de información” organizadas con bordes y espaciado.
    📝 Cuestionario de bordes, espaciado y layouts básicos

Unidad 4: CSS Avanzado – Diseño Responsivo y Estilos Complejos

Objetivo: Aprender a crear diseños más complejos y responsive, es decir, que se adapten a distintos tamaños de pantalla.

• Sesión 9: Estructura de diseño con flexbox
  • Introducción a Flexbox y cómo crear layouts flexibles.
  • Organizar contenido en columnas y filas con Flexbox.
  • Proyecto: Crear una página “Galería de Fotos” organizada en cuadrícula.
    📝 Cuestionario de estructura de diseño con flexbox
• Sesión 10: Diseño responsivo con CSS
  • Introducción a los media queries para diseños responsivos.
  • Adaptar la página a dispositivos móviles.
  • Proyecto: Ajustar la página “Sobre mí” para que funcione bien en dispositivos móviles.
    📝 Cuestionario de diseño responsivo con CSS

Unidad 5: Proyecto Final – Mi Página Web Personal

Objetivo: Combinar todos los conocimientos de HTML y CSS en la creación de un proyecto personal.

• Sesión 11: Planificación del proyecto final
  • Diseñar un esquema o boceto para la página web final.
  • Elegir el tema de la página (biografía, portafolio, blog, etc.).
  • Organización de la estructura de contenido.
    📝 Cuestionario de planificación del proyecto final
• Sesión 12: Desarrollo y presentación del proyecto final
  • Construcción completa de la página web siguiendo el boceto.
  • Aplicar todos los conceptos de diseño y estructura aprendidos.
  • Presentación de los proyectos y retroalimentación en clase.
    📝 Cuestionario de desarrollo y presentación del proyecto final

EXAMEN FINAL Y CERTIFICADO

• 🔒 Cuestionario final
• 🔒 Descargar certificado