CONTENIDO
Módulo 1: Introducción a la Web y HTML
Sesión 1: Introducción a la Web
Presentación del Taller: Objetivos y agenda.
Conceptos Básicos: ¿Qué es una página web? ¿Qué es frontend y backend?
Estructura de una Página Web: HTML, CSS y JavaScript.
Sesión 2: Fundamentos de HTML Etiquetas HTML Básicas: <html>, <head>, <body>, <h1>, <p>, <a>, <img>.
Estructura de un Documento HTML: Doctype, head, body.
Actividad Práctica: Crear una página web simple con texto e imágenes.
Sesión 3: Formularios en HTML
Etiquetas de Formularios: <form>, <input>, <label>, <button>.
Creación de Formularios: Formularios de contacto y sus elementos.
Actividad Práctica: Crear un formulario de contacto simple.
Módulo 2: Estilización con CSS
Sesión 1: Introducción a CSS
Sintaxis de CSS: Selectores, propiedades y valores.
Incorporación de CSS: Estilos en línea, internos y externos.
Actividad Práctica: Añadir estilos básicos a la página creada.
Sesión 2: Layout y Diseño Modelo de Caja (Box Model): Margen, borde, padding y contenido.
Posicionamiento y Display: Inline, block, flexbox, grid.
Actividad Práctica: Crear un layout sencillo usando Flexbox.
Sesión 3: Diseño Responsivo (1 hora)
Medios y Consultas (Media Queries): Adaptación a diferentes tamaños de pantalla.
Unidades Responsivas: Porcentajes, em, rem, vh, vw.
Actividad Práctica: Hacer la página responsiva para móviles y tabletas.
Módulo 3: Introducción a JavaScript
Sesión 1: Fundamentos de JavaScript
Sintaxis Básica de JavaScript: Variables, operadores, funciones.
Manipulación del DOM: Selección y modificación de elementos HTML.
Actividad Práctica: Añadir interactividad básica (e.g., cambiar texto al hacer clic).
Sesión 2: Eventos y Funciones Eventos de Usuario: onclick, onmouseover, onchange.
Funciones y Eventos: Creación de funciones para manejar eventos.
Actividad Práctica: Crear una galería de imágenes interactiva.
Módulo 4: Proyecto Práctico: Página de Productos/Servicios
Sesión 1: Planificación del Proyecto
Definición del Proyecto: Objetivo, público objetivo, contenido.
Wireframes y Mockups: Diseño previo de la estructura y apariencia de la página.
Actividad Práctica: Crear un mockup simple en papel o herramientas digitales.
Sesión 2: Implementación del Proyecto
Estructura HTML: Crear la estructura básica de la página.
Estilización con CSS: Aplicar estilos para mejorar la apariencia.
Interactividad con JavaScript: Añadir interactividad básica.
Módulo 5: Polishing, Pruebas y Presentación
Sesión 1: Mejoras y Polishing
Revisión de Código: Mejores prácticas, limpieza de código.
Optimización: Mejorar la velocidad de carga, uso eficiente de recursos.
Actividad Práctica: Mejorar y refinar la página web creada.
Sesión 2: Pruebas y Debugging
Pruebas de Funcionalidad: Asegurarse de que todos los enlaces, formularios y scripts funcionan correctamente.
Debugging Básico: Identificación y corrección de errores comunes.
Actividad Práctica: Probar la página en diferentes navegadores y dispositivos.
Sesión 3: Presentación del Proyecto
Finalización del Proyecto: Integrar todos los elementos y asegurarse de que todo funcione correctamente.
Presentación de las Páginas Web: Cada participante presentará su página web al grupo.
Taller de Creación de Páginas Web (Frontend) para Jóvenes
.