🚀 Curso 1: Programación Web Básica 🚀
¡Tu viaje al mundo del desarrollo web comienza aquí!
Este programa te capacitará para comprender los fundamentos del desarrollo web y construir páginas web estáticas interactivas utilizando HTML, CSS y JavaScript.
Duración Total: 20 horas (10 sesiones de 2 horas)
Módulo 1: Introducción a la Web y Lógica de Programación (4 horas)
Sesión 1: Conociendo la Web y Tu Entorno
Comienza tu aventura explorando los pilares de la World Wide Web y configurando tu espacio de trabajo.
Introducción al Desarrollo Web: ¿Qué es la World Wide Web? Breve historia. Roles en el desarrollo web: Frontend, Backend y Full-Stack. Componentes clave de la web: Navegadores, Servidores, HTTP (conceptual).
Configuración del Entorno de Desarrollo: Instalación de Visual Studio Code (VS Code). Extensiones esenciales para el desarrollo web. Uso de la Consola del Navegador (inspección de elementos, consola JS).
Actividad Práctica: Exploración guiada de una página web real, identificación de elementos en el Inspector, 'Hola Mundo' en la consola JS.
Sesión 2: Pensamiento Lógico y Primer Código JavaScript
Desarrolla tu lógica de programación y escribe tus primeras líneas de código JavaScript.
Fundamentos de Lógica de Programación: Concepto de Algoritmo: Pasos para resolver un problema. Importancia del pensamiento computacional.
Control de Versiones (Introducción): ¿Qué es Git y GitHub? (Uso conceptual para guardar y compartir código).
Primeros Pasos en JavaScript: Introducción a JavaScript como lenguaje de programación web. Variables: let y const. Tipos de Datos: Números (int, float), Cadenas de texto (string), Booleanos (true/false). Operadores Aritméticos: +, -, *, /, %. Interacción Básica: console.log(), alert(), prompt().
Actividad Práctica: Escribir un script JS para un cálculo simple o una interacción con el usuario.
Módulo 2: Construyendo la Estructura: HTML (4 horas)
Sesión 1: El Esqueleto de Tu Web
Aprende a crear la estructura fundamental de tus páginas web con HTML.
Introducción a HTML: ¿Qué es HTML (HyperText Markup Language)? Lenguaje de marcado, no de programación. Elementos, etiquetas y atributos. Estructura básica de un documento HTML: <DOCTYPE html>, <html>, <head>, <body>.
Contenido Textual Esencial: Encabezados: <h1> a <h6>. Párrafos: <p>. Saltos de línea: <br>.
Organización del Contenido: Listas desordenadas (<ul>, <li>). Listas ordenadas (<ol>, <li>).
Multimedia y Navegación: Enlaces: <a> (atributos href, target). Imágenes: <img> (atributos src, alt).
Actividad Práctica: Crear una página personal (index.html) con título, párrafos, listas, una imagen y enlaces a secciones internas/externas.
Sesión 2: Formularios y Tablas Básicas
Aprende a recopilar información con formularios y organizar datos en tablas.
Recopilación de Información con Formularios: Contenedor de formulario: <form>. Campos de entrada: <input> (tipos: text, email, password, number, submit). Otros campos: <textarea>, <select>, <option>. Botones: <button>.
Organización de Datos con Tablas: Estructura básica de tablas: <table>, <tr> (fila), <th> (encabezado de columna), <td> (celda de datos).
Introducción a HTML Semántico: Uso de etiquetas como <header>, <nav>, <main>, <footer> para dar significado a las secciones de la página (conceptual).
Actividad Práctica: Añadir un formulario de contacto y una tabla sencilla (ej. horario, lista de productos) a la página personal.
Módulo 3: Dando Estilo: CSS (4 horas)
Sesión 1: Estilizando Tu Contenido
Aprende a embellecer tus páginas con colores, fuentes y diseños atractivos.
Introducción a CSS: ¿Qué es CSS (Cascading Style Sheets)? Lenguaje de estilo y diseño. Separación de contenido (HTML) y presentación (CSS). Sintaxis básica de CSS: selector {propiedad: valor;}
Formas de Aplicar CSS: Enlace a archivo externo (<link rel="stylesheet" href="style.css">) como mejor práctica.
Selección de Elementos: Selectores por etiqueta (ej. p, h1). Selectores por clase (.mi-clase). Selectores por ID (#mi-id).
Propiedades de Estilo Fundamentales: Color: color, background-color (valores por nombre, HEX, RGB). Tipografía: font-family, font-size, font-weight, text-align.
El Modelo de Caja (Box Model): Concepto: Cada elemento HTML es una caja. Propiedades: content, padding, border, margin. box-sizing: border-box.
Actividad Práctica: Aplicar estilos básicos (colores, fuentes, espaciado) a la página personal usando un archivo CSS externo y diferentes selectores.
Sesión 2: Layout y Responsividad
Crea diseños flexibles que se adapten a cualquier tamaño de pantalla.
Control del Flujo de Elementos: Propiedad display: block, inline, inline-block.
Introducción a Flexbox (Diseño Flexible): Concepto de contenedor flexible y elementos flexibles. display: flex. Propiedades del contenedor: justify-content (alineación horizontal), align-items (alineación vertical).
Diseño Responsivo Básico: Concepto de diseño adaptativo a diferentes tamaños de pantalla. Uso de max-width: 100% para imágenes. Unidades de medida relativas (%, vw, vh) para flexibilidad.
Actividad Práctica: Utilizar Flexbox para crear una distribución de elementos (ej. un menú de navegación, tarjetas de producto) y aplicar técnicas básicas para que la página sea mínimamente responsiva.
Módulo 4: JavaScript Fundamental y Proyecto Final (8 horas)
Sesión 1: Lógica Condicional y Bucles
Aprende a tomar decisiones en tu código y a repetir tareas de forma eficiente.
Introducción a JavaScript en el Navegador: Cómo vincular JavaScript a HTML (<script> al final del <body>).
Lógica Condicional: Operadores de comparación (==, !=, >, <, >=, <=). Sentencias if, else if, else. Operadores lógicos (&& - AND, || - OR, ! - NOT).
Estructuras de Repetición (Bucles): Bucle for: Para repeticiones con un número conocido de iteraciones. Bucle while: Para repeticiones basadas en una condición.
Actividad Práctica: Crear un script JS que tome decisiones (ej. si un número es par/impar) o que realice una tarea repetitiva (ej. contar hasta un número dado).
Sesión 2: Funciones y Estructuras de Datos
Organiza tu código en bloques reutilizables y almacena colecciones de datos.
Funciones: Bloques de Código Reutilizables: Definición de funciones: function nombreFuncion(parametro1, parametro2) {...}. Paso de argumentos y parámetros. Valores de retorno: return.
Almacenamiento de Colecciones: Arrays: Colecciones ordenadas de elementos. Creación, acceso por índice. Métodos básicos: push(), pop(), length. Objetos: Colecciones de pares clave: valor. Creación, acceso a propiedades.
Actividad Práctica: Desarrollar funciones que operen con arrays (ej. añadir elementos a una lista) o con objetos (ej. crear un objeto persona y mostrar sus datos).
Sesión 3: Manipulación del DOM y Eventos
Haz que tu página responda a las acciones del usuario y modifica su contenido dinámicamente.
Interactuando con la Página (DOM): El DOM (Document Object Model): La representación de tu HTML como un árbol de objetos que JavaScript puede manipular. Selección de elementos: document.getElementById(), document.querySelector(), document.querySelectorAll(). Modificación de contenido: textContent, innerHTML. Modificación de atributos y clases CSS: setAttribute(), classList.add(), classList.remove(), classList.toggle().
Respondiendo a las Acciones del Usuario (Eventos): Concepto de eventos (clics, entradas de teclado, envíos de formulario). addEventListener(): Cómo 'escuchar' y reaccionar a eventos. El objeto Event (event.target, event.preventDefault()).
Actividad Práctica: Crear una interfaz con un botón que cambie el texto o el estilo de un elemento, o un campo de entrada que muestre lo que el usuario escribe en tiempo real.
Sesión 4: Proyecto Final Integrador
Aplica todo lo aprendido para construir tu primera aplicación web completa.
Desarrollo del Proyecto Final: Integración de todos los conocimientos adquiridos (HTML, CSS, JavaScript).
Proyectos que elegir (ejemplos):
Calculadora Interactiva Simple: Con operaciones básicas y un display funcional.
Lista de Tareas (To-Do List): Añadir, marcar como completado y eliminar tareas de una lista.
Juego de Adivinanza de Números: Interfaz web donde el usuario adivina un número aleatorio generado por JS, con pistas.
Actividad Práctica: Trabajo guiado en el proyecto final y sesión de preguntas/respuestas.
¡Felicitaciones! Estás listo para crear la web.
Este curso te da las herramientas fundamentales para empezar a construir tus propias experiencias web. ¡El único límite es tu imaginación!