top of page

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

  • .

bottom of page