Curso de Programación y Desarrollo Web Completo (HTML5, CSS, Bootstrap, Javascript, Typescript, Angular, MongoDB)

Te sumergirás en el fascinante mundo del desarrollo web y la programación, explorando desde la creación de páginas web básicas con HTML5 y CSS hasta el desarrollo de aplicaciones avanzadas con Angular y NestJS. Aprenderás a manejar herramientas esenciales como Bootstrap para diseño responsivo, TypeScript para programación tipada y MongoDB para gestionar bases de datos. El curso culmina en proyectos prácticos como el despliegue de aplicaciones y sistemas en la nube, consolidando tus habilidades en front-end, back-end y desarrollo de APIs

🎓 Certificado opcional con costo adicional. Podés abonarlo cuando quieras; administración te indicará el monto.
💻 100% online, a tu ritmo
⚡ Acceso inmediato

-4%

Elegí cómo pagar

10 cuotas de $ 39.600 Hoy abonás la primera cuota · Total del curso $ 396.000 Un pago de $ 237.600 40% OFF ~~$ 396.000~~ · Ahorrás $ 158.400 Certificado Fundación Universitaria + $ 57.400 Opcional — también podés abonarlo más adelante

Pagás hoy $ 39.600

🔒 Pago seguro con MercadoPago
📱 Mirá el curso desde cualquier dispositivo

🏛️ Fundado en 1985 · Más de 40 años educando

Servicio Integral al Alumno

No vendemos cursos.
Transformamos tu futuro laboral.

Cuando te inscribís en Institutos MAS obtenés mucho más que una capacitación. Los talleres de empleabilidad son sin cargo.

🎓 Tu curso completo
🤝 Seguimiento personalizado
💼 Talleres de empleabilidad Sin cargo
📄 Armado de CV Sin cargo
🔎 Búsqueda laboral Sin cargo
🗣️ Entrevistas de trabajo Sin cargo
📋 Bolsa de empleo
💬 Asesoramiento permanente
🏅 Certificación de entidades oficiales

Nuestro objetivo no es que solo estudies, sino que mejores tus oportunidades laborales.

Nuestros egresados estarán capacitados para convertirse en desarrolladores web y de aplicaciones, dominando tecnologías como HTML5, CSS, Bootstrap, JavaScript y Angular.

Con nuestro Curso de Programación y Desarrollo Web aprenderán a crear sitios responsivos, manejar estructuras complejas de datos, diseñar aplicaciones modernas y conectar sistemas con bases de datos en MongoDB. Además, el programa incluye proyectos prácticos en los que desarrollarán soluciones completas desde el front-end hasta el back-end con NestJS.

La duración total del curso es de: 6 Módulos - 6 meses

HTML5:

Introducción al desarrollo: Navegando en el mundo digital
Introducción al Desarrollo
Propiedades esenciales
Propiedades de páginas
Textos: Transmitiendo mensajes con palabras
Listas y estructuras: Organizando contenido de manera eficiente
Imágenes y marquesinas: añadiendo impacto visual a tus páginas web
Tablas: Organizando Datos en filas y columnas
Hipervínculos: Conectando tu página con el mundo
Multimedia: Enriqueciendo tu página con elementos multimedia
Formularios: Interactúa con tus usuarios y recolecta datos
Marcos: Dividir una página web
Evaluación HTML 5

Css:

Introducción
Definición de estilos
Definición de estilos 2
Estilización
Lenguaje CSS
Optimización y buenas practicas
Evaluación CSS

Proyecto HMTL y CSS

Bootstrap:

Introducción y Descarga
Instalación y uso
Interpretación de código
Utilización de CDN
Tipografias
Alineación y Bloques
Float y Fixed
Colores texto y fondo
Margin y Padding
Wigth y Height
Breackpoints
Buttons, Font, awesome y dropdown
List group
Nav menú
Alert progress
Carrousel
Sing up Google
Menu responsive
Proyecto 2
Proyecto 3
Proyecto 4

Javascript:

Introducción
Alertas
Fundamentos de programación
Objetos
Locatión
Onload
History forward
Document BG
Write y writeIn
Onmouse over – Onmouse out
Validaciones

Typescript:

Introducción
Recursos
Documentación
Importante
Introducción a la sección
Introducción a typescript
Mito vs Realidad
Typescript y ES6
Guía de conceptos Básicos
Primeros pasos en TS
Tipos básicos y conceptos generales
Objetos, arreglos e interfaces
Funciones básicas
Funciones con objetos como argumentos
Practica sobre objetos e interfaces
Desestructuración de objetos
Desestructuración de arreglos
Desestructuración de argumentos
Importación y exportaciones
Clases básicas
Constructor de una clase
Extender una clase
Priorizar composición sobre herencia
Genéricos
Decoradores
Encadenamiento opcional

Angular:

Temas puntuales de la sección
Exposición sobre Angular
Nuestro primer proyecto en Angular
Explicación de cada archivo del proyecto
Explicación de cada archivo - Parte 2
App Component
Contador
Contador Component
Funcionalidad del contador
Componente Hero y directorios
Interpolación, estructura HTML y estilos
One way data binding - enlazado en una sola vía
Tarea - Cambiar nombre y edad
Directiva *ngIf
Directiva *ngFor
Ng-template y el ngIf-else
Módulos en Angular
Tarea sobre módulos
Hacer respaldo de nuestro proyecto en GitHub
Módulo DBZ
Resolución de la tarea - DBZ Module
Diseño de la pantalla a trabajar
Pensemos en componentes pequeños
Resolución de la tarea - AddCharacter
@Input() - Recibir del padre
Expandiendo el *ngFor
ngClass - Clases basado en condiciones
FormsModule y ngModel
@Output() - Emitir eventos al padre
Formas de depurar la app
Añadir personaje al listado
Solución de la tarea - Flujo completo
Servicios
Paquetes externos - UUID
Servicio Privado
Generar build de producción
HttpServer Local y Netlify
GitHub Pages
Package.json Scripts
Inicio de proyecto - GifsApp
Diseño y estructura inicial del proyecto
Diseño de Gifs Components
Resolución de la tarea - CardList
@ViewChild - Referencia al HTML
GifsService
Validaciones al servicio
Giphy Api Key - Giphy Developers
Realizar una petición HTTP
Colocar un tipo de dato a una respuesta HTTP
Mostrar los Gifs en pantalla
Mostrar la imagen del Gif
LocalStorage - Persistencia local
Leer del LocalStorage
Pensemos en componentes
Lazy Image - Parte 1
Lazy Image - Parte 2
Animaciones de CSS
Inicio de proyecto - CountryApp
Router Module y Páginas - SPA
RouterLink y RouterLinkOptions
Countries Routing Module
Carga perezosa
Estructura de páginas y SearchBox Component
Funcionamiento del SearchBox
Countries Service - Restcountries
Mostrar los países en pantalla
CountryTable Component
CatchError - Manejo de errores en observables
Tarea - País y Región
Argumentos por URL - Página de País
switchMap - Refactorización
Mostrar información del país
Navegar hacia la página de país
Refactorizaciones en nuestro servicio
LoadingComponent - Mostrar un indicador de carga
Mostar y ocultar el LoadingSpinner
Debounce - Peticiones cuando el usuario deja de escribir
Limpieza de suscripciones
Buscar por region - Optimización
Mantener la data entre pantallas
Mantener la data entre pantallas - Parte 2
LocalStorage del Store
Inicio de proyecto - PipesApp
Introducción a los Pipes de Angular
Instalar PrimeNG
PrimeNG - Menú superior
PrimeNg - MenuBar
Módulos y Rutas de mi aplicación
Navegar usando el MenuBar
UpperCase, LowerCase y TitleCase Pipes
PrimeFlex
Date Pipe
Cambiar idioma global y manualmente
Decimal, Currency y Percent Pipes
PrimeNg - Fieldset
I18nSelectPipe
I18nPluralPipe
SlicePipe
KeyValuePipe
AsyncPipe
ToogleCasePipe - Piper Personalizado
Valores y argumentos personalizados al Pipe
Argumentos dinámicos a pipes personalizados
PrimeNG - Table
Tarea- CanFly Pipe
sortBy - Pipe personalizado
Ordenar tabla por Nombre, Vuela y Color
Inicio de proyecto - HeroesApp
Creación de componentes - Pages
Ruta hijas y LazyLoad
Paths de las rutas faltantes
Continuación del proyecto - HeroesApp
Instalación de Angular Material y PrimeFlex
Diseño de Login y Auth Layout
Material Sidenav, Toolbar e iconos
Heroes Backend - json-server
Variables de entorno - Angular 15+
HeroesService - Traer información de los héroes
Mostrar listado de Héroes
HeroImage Pipe
Obtener Héroe por URL
Página del Héroe
Angular Material - Autocomplete
Angular Material - Autocomplete Parte 2
Agregar Héroe – HTML
HerosService - CRUD Endpoints
HeroForm - ReactiveForms introducción
Conectar el formulario con el template
Getters dentro del componente
Actualizar y crear héroes
Establecer el valor del formulario
Snackbars y redirección
Material Dialogs
Eliminar registro
AuthService - Servicio de Autenticación
Autenticar y mostrar usuario activo
Mantener la sesión del usuario
Guards de Angular
Implementar la funcionalidad del Guard
PublicGuard – Tarea
Inicio de proyecto - FormsApp
Estructura HTML de las páginas
Rutas de nuestra aplicación
Barra de navegación
Primeros pasos en formularios reactivos
Forms Validator - Validador incluído en Angular
Re-establecer y establecer valor al formulario
Mostrar errores de validación en pantalla
Métodos de ayuda para los errores
Formularios dinámicos
Validaciones Dinámicas
Eliminar elementos de un FormArray
Insertar elementos al FormArray
Documentación - Formularios Reactivos
Formulario de Registro
Validator Functions
Validaciones de Email y Patrones
Validator Service
Validadores asíncronos
Elaborar el validador de correo
Verificar que dos campos sean iguales
Estructura de directorios para esta aplicación
Solución de la tarea
Formulario reactivo - primer selector
Servicio e interfaces
Selector de regiones
Segundo selector anidado - Países
Obtener países por region
Convertir los países y mostrarlos en pantalla
Limpiar país cuando el primer selector cambia
Tercer selector anidado - Fronteras
Información de las fronteras
Inicio de proyecto - LifeCycle
Implementar todos los Lifecycle Hooks
ngOnChanges
ngOnDestroy
Más información sobre el ciclo de vida
Inicio de backend - NestBackend
Configurar MongoDB - Docker
Creando un CRUD completo - Nest
Conectar Nest con MongoDB
Variables de entorno
Crear modelo y esquema
DTO - Data Transfer Object
Crear un registro de base de datos
Encriptar la contraseña
Login - Verificar correo y contraseña
Generar JWT
Registro de usuario e interfaces
Solución de la tarea
Proteger rutas con autenticación
Validar JWT y obtener usuario
Tarea - Generar un nuevo JWT
Inicio de aplicación - AuthApp
Estructura del proyecto
Diseño de la pantalla de Login - HTML
Formulario de inicio de sesión
AuthService
Tipos e interfaces
Post - Login
Manejo de errores
Function Guards
Implementar lógica del Functional Guard
Servicio para verificar el Token de acceso
Reaccionar al cambio de autenticación
isNotAuthenticated Guard
Logout
Levantar proyecto - DeveloperMode
Enlaces a consultar
Aprovisionar MongoDB
Configuraciones del backend
Desplegar Backend a Railway
Probar backend desde Postman
Desplegar aplicación de Angular
Fin del curso

No vendemos cursos.Transformamos tu futuro laboral.

También te puede interesar

Curso de Programación de Principiante a Experto

No vendemos cursos.
Transformamos tu futuro laboral.