Programación
Desarrollo Web Front-End con Angular
Acerca del curso
El curso no empieza por Angular. Empieza por lo que Angular da por sabido: cómo se estructura una página con HTML, cómo se presenta con CSS y cómo se escribe lógica con JavaScript y TypeScript. A partir de ahí construye, módulo a módulo, una misma aplicación —un panel de actividades personales— hasta dejarla navegable, validada y con datos que sobreviven a la recarga.
Al completar la ruta, la persona podrá construir una aplicación Angular de una sola página —un panel de actividades personales— con componentes, estado reactivo, servicios, navegación y formularios de alta y edición, cuyos datos sobreviven a la recarga en el propio navegador. La aplicación será responsive y accesible; tendrá navegación por URL, componentes reutilizables, estado reactivo con signals, formularios validados y persistencia local.
Todo se comprueba en tu propia computadora, con lo que se ve en pantalla, la URL y los datos guardados. No hay que subir archivos ni esperar la revisión de nadie.
Lo que aprenderás
Al completar el curso, el estudiante podrá:
- Construir páginas con HTML semántico y darles una presentación responsive con CSS.
- Escribir JavaScript y TypeScript con tipos, y entender qué le aporta el tipado a una aplicación.
- Preparar el entorno con Node y Angular CLI, y crear un proyecto desde cero.
- Organizar la interfaz en componentes standalone reutilizables que se comunican entre sí.
- Mostrar datos, reaccionar a eventos y decidir qué se dibuja con el control flow de Angular.
- Manejar el estado con signals y derivar valores calculados sin duplicar información.
- Concentrar reglas y datos compartidos en servicios inyectables.
- Navegar entre pantallas con Angular Router, incluidas rutas con parámetro y página no encontrada.
- Construir formularios validados con Signal Forms, con sus casos normales, límite e inválidos.
- Conservar información en el navegador y responder cuando lo guardado no sirve.
- Cuidar la accesibilidad desde el principio: teclado, foco, nombres accesibles y estados que no dependan solo del color.
- Construir y explicar una aplicación completa: el Panel de actividades personales.
¿Para quién es este curso?
Personas que quieren construir aplicaciones web y empezar por un framework que se usa en la industria: quienes nunca han programado y prefieren llegar a algo visible desde el primer módulo, quienes ya saben algo de HTML o de otro lenguaje y quieren entender cómo se organiza una aplicación de verdad, y quienes buscan una base de Angular moderno —componentes standalone, signals, Signal Forms— sin arrastrar el estilo de versiones anteriores. Los ejemplos no excluyen a otros perfiles.
- No requiere experiencia previa en desarrollo web ni en programación.
- No presupone conocer HTML, CSS, JavaScript, TypeScript ni la terminal: se enseñan antes de depender de ellos.
- Requiere manejo elemental de archivos, carpetas y aplicaciones.
- Requiere una computadora con permiso para instalar herramientas y un navegador moderno.
Contenido del curso
- Introducción al Módulo 0
- Lo que vas a construir 2 min
- Punto de partida: lo que tiene que haber en tu equipo 15 min
- Unidad 1. Comprender el producto web 5 lecciones
- El producto final y cómo comprobarás tu aprendizaje 35 min
- Seguir una URL desde el navegador hasta la interfaz que presenta 40 min
- Inspeccionar la interfaz y reconocer su representación en el DOM 40 min
- Ejemplo resuelto en video: Comprender el producto web 3 min
- Comprobación de la Unidad 1
- Unidad 2. Preparar el espacio de trabajo 5 lecciones
- Leer una ruta y saber de qué archivo se habla 25 min
- Navegar con la terminal y reconocer el directorio de trabajo 40 min
- Instalar y verificar la línea base en Windows, macOS o Linux 50 min
- Ejemplo resuelto en video: Preparar el espacio de trabajo 3 min
- Comprobación de la Unidad 2
- Unidad 3. Completar el primer ciclo Angular 6 lecciones
- Crear un workspace y reconocer las decisiones de ng new 45 min
- Moverse por el proyecto sin abrir el archivo equivocado 25 min
- Servir la aplicación, modificar el primer template y observar la recompilación 40 min
- Distinguir errores de comando, compilación y navegador 45 min
- Ejemplo resuelto en video: Completar el primer ciclo Angular 3 min
- Comprobación de la Unidad 3
- Práctica Local - Tu primera modificación, comprobada en pantalla 45 min
- Examen del Módulo 0
- Cierre del Módulo 0
- Introducción al Módulo 1
- Punto de partida: un proyecto que arranca y no dice nada 10 min
- Unidad 1. Estructurar contenido con HTML 7 lecciones
- Construir un documento con elementos, atributos y anidación 40 min
- Organizar encabezados, texto, listas y enlaces 40 min
- Incorporar imágenes con propósito y alternativa textual 35 min
- Delimitar las regiones de una página con landmarks semánticos 40 min
- Elegir botones, campos y etiquetas nativos según la acción 40 min
- Ejemplo resuelto en video: Estructurar contenido con HTML 5 min
- Comprobación de la Unidad 1
- Unidad 2. Presentar la interfaz con CSS 7 lecciones
- Conectar una hoja de estilos y seleccionar los elementos que cambiarán 40 min
- Resolver conflictos con cascada, especificidad e herencia 45 min
- Comprender flujo normal, display y modelo de caja 45 min
- Crear una jerarquía visual con tipografía, color y espaciado coherentes 40 min
- Distribuir contenido en una dimensión con Flexbox 45 min
- Ejemplo resuelto en video: Presentar la interfaz con CSS 5 min
- Comprobación de la Unidad 2
- Unidad 3. Distribuir, adaptar y comprobar la interfaz 6 lecciones
- Distribuir contenido en dos dimensiones con Grid 40 min
- Adaptar desde mobile-first con puntos de quiebre y media queries 40 min
- Proteger contenido flexible, imágenes y componentes frente al desbordamiento 40 min
- Conservar contraste, foco y nombres accesibles al comprobar con teclado 45 min
- Ejemplo resuelto en video: Distribuir, adaptar y comprobar 4 min
- Comprobación de la Unidad 3
- Práctica Local - El panel, maquetado y responsive 180 min
- Examen del Módulo 1
- Cierre del Módulo 1
- Introducción al Módulo 2
- Punto de partida: el segundo proyecto, y por qué 20 min
- Unidad 1. Valores, expresiones y funciones 6 lecciones
- Representar valores mediante variables y tipos básicos 35 min
- Calcular con operadores, expresiones y conversiones controladas 35 min
- Definir y llamar funciones con parámetros y retorno 40 min
- Seguir el alcance y el orden de ejecución de una función 40 min
- Ejemplo resuelto en video: Valores, expresiones y funciones 4 min
- Comprobación de la Unidad 1
- Unidad 2. Tomar decisiones 4 lecciones
- Construir condiciones con booleanos y comparaciones 35 min
- Elegir caminos con if, else if y else 35 min
- Ejemplo resuelto en video: Tomar decisiones 4 min
- Comprobación de la Unidad 2
- Unidad 3. Trabajar con colecciones y objetos 6 lecciones
- Consultar arreglos mediante índices, longitud y casos vacíos 40 min
- Repetir una operación mediante ciclos controlados 35 min
- Buscar, filtrar y transformar con métodos de arreglos 40 min
- Representar objetos y actualizarlos mediante copias con spread 45 min
- Ejemplo resuelto en video: Colecciones y objetos 4 min
- Comprobación de la Unidad 3
- Unidad 4. Expresar contratos con TypeScript 6 lecciones
- Comparar inferencia y anotaciones explícitas 35 min
- Representar alternativas con uniones y ausencia explícita 40 min
- Definir alias, interfaces y funciones tipadas para el dominio 40 min
- Leer clases, constructores, métodos y visibilidad necesaria para Angular 40 min
- Ejemplo resuelto en video: Contratos con TypeScript 4 min
- Comprobación de la Unidad 4
- Unidad 5. Organizar, esperar y diagnosticar 7 lecciones
- Conectar módulos mediante exportaciones e importaciones 35 min
- Convertir datos entre objetos y JSON 35 min
- Reconocer los estados de una promesa 35 min
- Esperar una promesa con async y await 40 min
- Investigar excepciones con consola, depurador y un caso reproducible 40 min
- Ejemplo resuelto en video: Organizar, esperar y diagnosticar 4 min
- Comprobación de la Unidad 5
- Práctica Local - Un resumen de actividades con los tipos puestos 150 min
- Examen del Módulo 2
- Cierre del Módulo 2
- Introducción al Módulo 3
- Punto de partida: los datos por un lado y la pantalla por otro 10 min
- Unidad 1. Comprender un componente 6 lecciones
- Seguir el workspace desde main.ts hasta la pantalla 40 min
- Interpretar @Component y sus metadatos 35 min
- Reconocer la anatomía de un componente standalone 40 min
- Generar, importar y utilizar un componente 35 min
- Ejemplo resuelto en video: Comprender un componente 5 min
- Comprobación de la Unidad 1: comprender un componente Angular
- Unidad 2. Conectar datos e interfaz 7 lecciones
- Mostrar datos con interpolación y expresiones de plantilla 40 min
- Controlar propiedades del DOM con property binding 35 min
- Enlazar atributos, clases y estilos sin perder significado 35 min
- Responder a eventos con métodos del componente 40 min
- Decidir qué renderizar con @if y @switch 35 min
- Ejemplo resuelto en video: Conectar datos e interfaz 5 min
- Comprobación de la Unidad 2: conectar datos e interfaz
- Unidad 3. Presentar colecciones y contenido 5 lecciones
- Renderizar colecciones con @for, track y @empty 40 min
- Formatear la presentación con pipes integrados 35 min
- Aplicar estilos con :host y ensamblar la página 40 min
- Ejemplo resuelto en video: Presentar colecciones y contenido 4 min
- Comprobación de la Unidad 3: colecciones, formato y ensamblaje
- Práctica Local - El panel repartido en componentes 180 min
- Examen del Módulo 3: Componentes y templates
- Cierre del Módulo 3
- Introducción al Módulo 4
- Punto de partida: componentes que no se hablan 10 min
- Unidad 1. Crear y actualizar estado 5 lecciones
- Estado, reactividad y signal como contenedor observable 40 min
- Leer, establecer y actualizar con signal, set y update 35 min
- Actualizar arreglos y objetos sin perder referencias ni reglas 40 min
- Ejemplo resuelto en video: Crear y actualizar estado con signals 4 min
- Comprobación de la Unidad 1: crear y actualizar estado
- Unidad 2. Derivar sin duplicar 6 lecciones
- Dependencias y valores de solo lectura con computed 40 min
- Filtrar, ordenar y contar desde un estado fuente 40 min
- Combinar criterios y representar cero resultados 35 min
- Usar effect solo para sincronizar efectos externos y reconocer su abuso 40 min
- Ejemplo resuelto en video: Derivar sin duplicar 4 min
- Comprobación de la Unidad 2: derivar sin duplicar
- Unidad 3. Diseñar interacciones comprobables 5 lecciones
- Capturar una acción y actualizar el estado correcto 35 min
- Selección, alternancia y eliminación con casos límite 40 min
- Integrar buscador, filtros y métricas en una lista reactiva 45 min
- Ejemplo resuelto en video: Interacciones comprobables 4 min
- Comprobación de la Unidad 3: interacciones comprobables
- Práctica Local - Un tablero de prioridades que se recalcula solo 180 min
- Examen del Módulo 4: Reactividad con signals
- Cierre del Módulo 4
- Introducción al Módulo 5
- Punto de partida: ochenta líneas en una sola clase 10 min
- Unidad 1. Comunicar componentes 6 lecciones
- Composición, árbol de componentes y dirección de los datos 35 min
- Entradas opcionales y requeridas con input 40 min
- Eventos propios con output 40 min
- Estado editable coordinado con model y binding bidireccional 40 min
- Ejemplo resuelto en video: Comunicar componentes 5 min
- Comprobación de la Unidad 1: comunicar componentes
- Unidad 2. Crear piezas reutilizables 5 lecciones
- Tarjetas, listas y estados vacíos con responsabilidades acotadas 35 min
- Proyección de contenido y personalización sin copiar plantillas 40 min
- Contratos accesibles: nombre, teclado, foco y mensajes 45 min
- Ejemplo resuelto en video: Piezas reutilizables 4 min
- Comprobación de la Unidad 2: piezas reutilizables
- Unidad 3. Separar responsabilidades 4 lecciones
- Componentes de página y componentes de presentación 35 min
- Refactorizar una vista extensa por característica 40 min
- Ejemplo resuelto en video: Separar responsabilidades 4 min
- Comprobación de la Unidad 3: separar responsabilidades
- Práctica Local - Partir el tablero sin perder nada por el camino 180 min
- Examen del Módulo 5: composición y componentes reutilizables
- Cierre del Módulo 5
- Introducción al Módulo 6
- Punto de partida: seis componentes y una sola pantalla 10 min
- Unidad 1. Delegar mediante servicios 5 lecciones
- Responsabilidad de un servicio e inyección de dependencias 35 min
- Crear e inyectar servicios con inject 40 min
- Proveedores, alcance de instancia y errores de provisión 35 min
- Ejemplo resuelto en video: Delegar en servicios 5 min
- Comprobación de la Unidad 1: delegar mediante servicios
- Unidad 2. Administrar el estado del dominio 6 lecciones
- Signals privados y lecturas públicas 35 min
- Crear, consultar y actualizar registros del dominio 40 min
- Eliminar, buscar y trabajar con identificadores 35 min
- Selectores, filtros y métricas derivadas 35 min
- Ejemplo resuelto en video: Estado de dominio 4 min
- Comprobación de la Unidad 2: administrar el estado del dominio
- Unidad 3. Conservar y recuperar 5 lecciones
- localStorage, JSON y los límites del almacenamiento del navegador 40 min
- Guardar, cargar y validar datos recuperados 40 min
- Sincronizar sin bucles ni pérdida de datos 40 min
- Ejemplo resuelto en video: Conservar y recuperar 4 min
- Comprobación de la Unidad 3: conservar y recuperar
- Práctica Local - Un panel que sobrevive a la recarga 180 min
- Examen del Módulo 6: servicios, estado y persistencia local
- Cierre del Módulo 6
- Introducción al Módulo 7
- Punto de partida: dos pantallas y una sola dirección 10 min
- Unidad 1. Definir navegación 5 lecciones
- La URL en una aplicación de una sola página y qué hace el router 30 min
- Configurar rutas, router-outlet y routerLink 40 min
- Ruta predeterminada, redirección y dirección no encontrada 35 min
- Ejemplo resuelto en video: Definir navegación 4 min
- Comprobación de la Unidad 1: definir navegación
- Unidad 2. Transportar contexto en la URL 7 lecciones
- Parámetros de ruta y páginas de detalle por identificador 40 min
- Parámetros de consulta y filtros compartibles 40 min
- Navegación programática después de una acción 35 min
- Título de la página y marcado de la ruta activa 30 min
- Cuando el recurso pedido no está 35 min
- Ejemplo resuelto en video: Contexto de la URL 4 min
- Comprobación de la Unidad 2: transportar contexto en la URL
- Unidad 3. Organizar rutas mayores 4 lecciones
- Diseños comunes con rutas hijas 35 min
- Carga diferida de componentes y rutas 35 min
- Ejemplo resuelto en video: Organizar rutas 4 min
- Comprobación de la Unidad 3: organizar rutas mayores
- Práctica Local - El panel con direcciones propias 180 min
- Examen del Módulo 7: navegación con Angular Router
- Cierre del Módulo 7
- Introducción al Módulo 8
- Punto de partida: una ruta que apunta a nada 10 min
- Unidad 1. Modelar un formulario 5 lecciones
- Semántica del formulario y el envío del navegador 35 min
- El modelo con signals y el árbol del formulario 40 min
- El campo, su valor y su estado 35 min
- Ejemplo resuelto en video: Modelar el formulario 4 min
- Comprobación de la Unidad 1: modelar un formulario
- Unidad 2. Validar y orientar 6 lecciones
- Reglas de validación 40 min
- Cuándo se avisa: interacción, mensajes y resumen 40 min
- Reglas que dependen de dos campos 35 min
- Envío, rechazo y conservación de lo escrito 40 min
- Ejemplo resuelto en video: Validar y orientar 4 min
- Comprobación de la Unidad 2: validar y orientar
- Unidad 3. Integrar alta y edición 5 lecciones
- El contrato entre el formulario y el dominio 35 min
- Cargar, restaurar, cancelar y salir 40 min
- Probar el recorrido del formulario 35 min
- Ejemplo resuelto en video: Integrar alta y edición 4 min
- Comprobación de la Unidad 3: integrar alta y edición
- Práctica Local - Un formulario que explica lo que rechaza 180 min
- Examen del Módulo 8: formularios con signals
- Lo que construiste 2 min
- Cierre del Módulo 8
Gratis
Inscripciones cerradas
Este curso no recibe inscripciones en este momento.
Este curso incluye:
- 94 horas de contenido
- 140 lecturas
- 38 exámenes con corrección automática
- 31 vídeos
- Acceso por tablet, móvil y PC
- Acceso durante 90 días
Cursos relacionados
Cursos con temática similar
Java Básico desde Cero
Luis Fortuna Gratis
Programación Web con JavaScript
Luis Fortuna Gratis