View
Programación

Programación Web con JavaScript

  • Luis Fortuna
  • Beginner
  • 0 students enrolled
Programación Web con JavaScript

About This Course

Centrado en las tecnologías nativas de la web actual, sin dependencias heredadas: nada de jQuery, JSONP, SASS ni Bower, y el AJAX clásico (XMLHttpRequest) se enseña como fetch con async/await.

Al completar el curso, el estudiante podrá construir una página web interactiva en HTML5, CSS3 y JavaScript sin framework: estructurarla con marcado semántico, darle estilo responsive, manipular el DOM, responder a eventos del usuario, validar un formulario y cargar datos de forma asíncrona con fetch y JSON.

What You Will Learn

Al completar el curso, el estudiante podrá:

  1. Estructurar una página con HTML5 semántico y accesible.
  2. Darle estilo con CSS3: cascada, modelo de caja, Flexbox, Grid y diseño responsive.
  3. Escribir JavaScript: tipos, operadores, decisiones, bucles, funciones, arrays y objetos.
  4. Seleccionar y manipular el DOM: leer y modificar contenido, atributos, estilos, clases y nodos.
  5. Responder a eventos del usuario con addEventListener y gestionar su propagación.
  6. Validar un formulario en JavaScript y comunicar los errores de forma clara.
  7. Trabajar con código asíncrono: Promise, async/await y fetch.
  8. Recibir y convertir JSON, y pintar datos en la página en tiempo de ejecución.
  9. Leer la consola, el inspector de elementos y la pestaña de red para localizar errores.
  10. Construir y autoevaluar un panel de actividades de una sola página en JavaScript puro.

Who Is This Course For?

Personas que quieren empezar a construir páginas web interactivas desde cero, sin partir de un framework. Vale tanto para quien nunca ha programado como para quien ya tiene nociones; y deja una base sólida para seguir después con cualquier framework de JavaScript. Los ejemplos no excluyen a otros perfiles.

  • No requiere experiencia previa en programación: los fundamentos (variables, decisiones, bucles) se enseñan en el curso.
  • No presupone conocer HTML, CSS, JavaScript, el DOM, la terminal ni entornos de desarrollo.
  • Requiere manejo elemental de archivos y aplicaciones, navegar por internet y permiso para instalar un editor.
  • No requiere matemáticas más allá de lo aritmético.

Course Content

  • Introducción al Módulo 0
  • Lo que vas a construir 2 min
  • Punto de partida: lo que necesitas antes de empezar 10 min
  • Unidad 1. Comprender el producto y la web 5 lessons
  • El producto final y cómo comprobarás tu aprendizaje 30 min
  • Qué pasa cuando se abre una página: del navegador al DOM 35 min
  • Inspeccionar una página y reconocer su estructura 35 min
  • Ejemplo resuelto en video: Cómo funciona una página en el navegador 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Preparar el espacio de trabajo 4 lessons
  • Editor, archivos y una página servida en local 35 min
  • La consola del navegador y cómo leer un error 35 min
  • Ejemplo resuelto en video: Preparar el espacio de trabajo 4 min
  • Comprobación de la Unidad 2
  • Práctica local: tu primer taller montado 45 min
  • Evaluación del Módulo 0
  • Cierre del Módulo 0

  • Introducción al Módulo 1
  • Punto de partida: de dónde arranca este módulo 5 min
  • Unidad 1. Estructurar contenido 6 lessons
  • Elementos, atributos y anidación 40 min
  • Texto, encabezados, listas y enlaces 40 min
  • Imágenes con propósito y alternativa textual 35 min
  • Tablas: datos en filas y columnas 40 min
  • Ejemplo resuelto en video: Estructurar el contenido del panel 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Semántica y regiones 5 lessons
  • Landmarks: header, nav, main y footer 40 min
  • Elegir el elemento semántico según el contenido 40 min
  • Más elementos con significado 35 min
  • Ejemplo resuelto en video: Dividir el panel en regiones con significado 4 min
  • Comprobación de la Unidad 2
  • Unidad 3. Formularios nativos y accesibilidad 4 lessons
  • Campos, etiquetas y tipos de entrada 40 min
  • Nombre accesible, foco y orden de teclado 40 min
  • Ejemplo resuelto en video: El formulario de alta, nativo y accesible 4 min
  • Comprobación de la Unidad 3
  • Práctica local: el panel, maquetado con HTML 90 min
  • Evaluación del Módulo 1
  • Cierre del Módulo 1

  • Introducción al Módulo 2
  • Punto de partida: de dónde arranca este módulo 5 min
  • Unidad 1. Conectar estilos y seleccionar 4 lessons
  • Hoja de estilos, selectores y especificidad 40 min
  • Cascada, herencia y el modelo de caja 40 min
  • Ejemplo resuelto en video: La primera hoja de estilos del panel 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Disposición en la página 5 lessons
  • Flujo normal, display y posicionamiento 40 min
  • Layout en una dimensión con Flexbox 45 min
  • Layout en dos dimensiones con Grid 45 min
  • Ejemplo resuelto en video: Colocar las piezas del panel 4 min
  • Comprobación de la Unidad 2
  • Unidad 3. Adaptar y pulir 5 lessons
  • Responsive: mobile-first y media queries 45 min
  • Jerarquía visual: tipografía, color y espaciado 40 min
  • Transiciones y animaciones con mesura 35 min
  • Ejemplo resuelto en video: Adaptar el panel y darle el último pulido 4 min
  • Comprobación de la Unidad 3
  • Práctica local: el panel, con estilo y responsive 120 min
  • Evaluación del Módulo 2
  • Cierre del Módulo 2

  • Introducción al Módulo 3
  • Punto de partida: de dónde arranca este módulo 5 min
  • Unidad 1. Valores y expresiones 5 lessons
  • Dónde vive el JavaScript: el script y la consola 35 min
  • Variables, tipos y operadores 40 min
  • Plantillas de texto y conversión de tipos 35 min
  • Ejemplo resuelto en video: Los primeros valores del panel, en JavaScript 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Tomar decisiones y repetir 4 lessons
  • Condiciones: if, else y comparaciones 40 min
  • Bucles: for, while y recorrer una lista 45 min
  • Ejemplo resuelto en video: Validar y contar las tareas de la lista 4 min
  • Comprobación de la Unidad 2
  • Unidad 3. Funciones y datos 4 lessons
  • Funciones, parámetros y retorno 40 min
  • Arrays y objetos: la lista de actividades 45 min
  • Ejemplo resuelto en video: La lista de actividades y sus funciones 4 min
  • Comprobación de la Unidad 3
  • Práctica local: el cerebro del panel, en la consola 90 min
  • Evaluación del Módulo 3
  • Cierre del Módulo 3

  • Introducción al Módulo 4
  • Punto de partida: de dónde arranca este módulo 5 min
  • Unidad 1. Leer el documento 4 lessons
  • Seleccionar elementos con querySelector 40 min
  • Leer contenido, atributos y estilos 40 min
  • Ejemplo resuelto en video: Leer la página desde JavaScript 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Modificar el documento 4 lessons
  • Cambiar texto, atributos, clases y estilos 40 min
  • Crear y quitar nodos 40 min
  • Ejemplo resuelto en video: Cambiar la página desde JavaScript 4 min
  • Comprobación de la Unidad 2
  • Unidad 3. Pintar la lista del panel 3 lessons
  • Recorrer datos y construir la lista en la página 45 min
  • Ejemplo resuelto en video: Pintar la lista del panel desde los datos 4 min
  • Comprobación de la Unidad 3
  • Práctica local: el panel se pinta solo desde los datos 90 min
  • Evaluación del Módulo 4
  • Cierre del Módulo 4

  • Introducción al Módulo 5
  • Punto de partida: de dónde arranca este módulo 5 min
  • Unidad 1. Responder a acciones 4 lessons
  • El modelo de eventos y addEventListener 40 min
  • Callbacks, funciones anónimas y el objeto event 40 min
  • Ejemplo resuelto en video: Que el panel responda a un clic 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Controlar el flujo de eventos 3 lessons
  • Propagación, delegación de eventos y cancelar 45 min
  • Ejemplo resuelto en video: Un solo oyente para todos los botones 4 min
  • Comprobación de la Unidad 2
  • Unidad 3. Formularios que explican lo que rechazan 4 lessons
  • Leer el formulario y validar en JavaScript 40 min
  • Mostrar errores y confirmar el alta 40 min
  • Ejemplo resuelto en video: El formulario que valida y explica 4 min
  • Comprobación de la Unidad 3
  • Práctica local: el panel, vivo 120 min
  • Evaluación del Módulo 5
  • Cierre del Módulo 5

  • Introducción al Módulo 6
  • Punto de partida: de dónde arranca este módulo 5 min
  • Unidad 1. Promesas y espera 4 lessons
  • Síncrono vs asíncrono; qué es una promesa 40 min
  • async, await y manejo de errores 40 min
  • Ejemplo resuelto en video: Esperar algo que tarda, sin congelar la página 4 min
  • Comprobación de la Unidad 1
  • Unidad 2. Traer datos con fetch 3 lessons
  • fetch, la respuesta y CORS 45 min
  • Ejemplo resuelto en video: Pedir los datos al servidor con fetch 4 min
  • Comprobación de la Unidad 2
  • Unidad 3. JSON y pintar en tiempo de ejecución 4 lessons
  • Recibir y convertir JSON a objetos JavaScript 40 min
  • Cargar el panel desde un JSON y renderizar la lista 45 min
  • Ejemplo resuelto en video: El panel carga sus tareas desde un JSON 4 min
  • Comprobación de la Unidad 3
  • Práctica local: el panel carga sus datos de fuera 90 min
  • Evaluación del Módulo 6
  • Lo que construiste 2 min
  • Cierre del Módulo 6 y del curso
Free
Enrolment closed
This course is not taking enrolments at the moment.
This course includes:
  • 42 hours of content
  • 72 readings
  • 27 auto-graded exams
  • 22 videos
  • Tablet, mobile & PC access
  • Lifetime access

Related Courses

Courses with similar topics