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

4.8Estrellas|+100.000 ESTUDIANTES

✅ Certificación profesional

✅ Garantía de aprendizaje

✅ Ofertas laborales

Somos Institutos MAS

Somos Institutos MAS

¿Que voy a aprender?

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

Te preparamos para el éxito:

Nuestro objetivo es que triunfes y obtengas la mejor experiencia educativa.
Por eso, te acompañamos de manera personalizada a través de WhatsApp, para que puedas resolver todas tus dudas.
#image_title

Te preparamos para el éxito:

Nuestro objetivo es que triunfes y obtengas la mejor experiencia educativa.
Por eso, te acompañamos de manera personalizada a través de WhatsApp, para que puedas resolver todas tus dudas.

Información del curso:

Duración:

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

Plan de estudio:

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
mujer 40
#image_title

Ofertas laborales:

Dispondras de la más amplia red de ofertas laborales a nivel país, para que puedas vivir de tu pasión. Si tu interés es viajar al exterior, tenemos contactos con las mejores consultoras de empleo a nivel internacional.


✅85 % de posibilidades de conseguir empleo

✅73% de posibilidades de incrementar tus ingresos actuales

Nuestros egresados estarán capacitados para convertirse en desarrolladores web y de aplicaciones, dominando tecnologías como HTML5, CSS, Bootstrap, JavaScript y Angular. 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.

#image_title

¿Cómo se cursa?

De manera 100% online podrás cursar esto. Vos elegís los dias y horarios de cursada ya que la plataforma es autoadministrable. Las clases están grabadas en videos y se complementan con manuales, recetas y fichas técnicas que podrás descargar. También tendrás a tu disposición un foro de consultas y preguntas frecuentes.


✅Estudiá desde casa.

✅En cualquier momento.

✅De fácil acceso.

Certificate profesionalmente:

Obtené tu certificación profesional y destacá en la industria a nivel mundial. A través de nuestro curso, adquirirás las habilidades y conocimientos esenciales para sobresalir y postularte a oportunidades laborales en cualquier lugar del planeta.