Máster en desarrollo Front End con Bootstrap 4, WP y Angular

Descripción
Este curso le enseñará todo lo que necesita saber sobre Front-End, incluido los lenguajes de maquetación, estilo e interacción. Y aprenderás desde cero, por lo que no importa cuánta experiencia tengas cuando comiences. Estarás expuesto a principios y estrategias, pero, lo que es más importante, aprenderás cómo aplicar realmente estas técnicas de desarrollo creando tres sitios web diferentes para tres audiencias distintas.
Cree sus plantillas con el mejor Framework para diseño web responsivo:

• Aprenderás a usar Bootstrap en su versión 4.
• Comprenderás el proceso paso a paso de cómo se construye un sitio web.
• Incluirás animaciones, efectos e interacciones a los sitios web.
• Aplicarás las tendencias de diseño web en el desarrollo de los sitios.
• Aprenderás a usar Flexbox.
• Aprenderás a usar CSS Grid.

Este curso lo ayudará a sobresalir como desarrollador Front-End, y le enseñará a aplicar estrategias de maquetación web que harán que cada sitio que construya lo haga de manera ágil y precisa. También obtendrá experiencia práctica elaborando tres tipos diferentes de plantillas web. Esto le dará la confianza para realizar proyectos similares si ya es un desarrollador Front-End, si desea acceder a esta disciplina o si desea mejorar sus habilidades como desarrollador.

Contenido y visión general:

Incluso si eres un principiante completo, este curso te mostrará cómo construir un sitio web paso a paso. Lo guiará a través de todo los pasos necesarios para adquirir la destreza y habilidad de construir cualquier sitio desde la maquetación, hojas de estilo e interacción con javascript.

Comenzará por definir los fundamentos del Desarrollo Front-End, luego una introducción muy completa sobre el framework Bootstrap 4, luego de manera práctica construiremos tres plantillas web diferentes para tres tipos de audiencias distintas.

Finalmente llevaremos estas tres plantillas a tres plataformas diferentes para ser trabajadas posteriormente por un desarrollador Back-End, convertiremos una plantilla a WordPress, prepararemos otra plantilla al Patrón Modelo - Vista -Controlador para ser trabajada con PHP y finalmente aprenderás a transformar una plantilla para el entorno de Angular.

Al final de este curso, tendrá una comprensión profunda del desarrollo Front-End y su proceso de construcción, sabrá por qué es tan importante para usuarios y empresas, qué lenguajes se necesitan dominar, qué proceso es el adecuado para elaborar plantillas responsivas y cómo transformar una plantilla para las herramientas más utilizas en el mercado del desarrollo web: WordPress, PHP y Angular. 

¿Qué aprenderás en este curso?

• Aprenderás a tener una comprensión clara de los principios del diseño responsivo.
• Aprenderás a construir sitios web usando el framework Bootstrap en su versión 4.
• Aprenderás a aplicar interacciones, efectos y animaciones a tus plantillas web con la ayuda de Javascript y jQuery.
• Aprenderás a transformar un diseño estático a los lenguajes de la arquitectura Front-End con tres proyectos que crearemos juntos: Un Blog personal para un viajero, una página de reservas para un hotel, un sitio de ventas por suscripción.
• Aprenderás a transformar una plantilla creada por ti para ser usada en WordPress.
• Aprenderás a transformar una plantilla creada por ti para ser usada con el patrón Modelo-Vista-Controlador en PHP.
• Aprenderás a transformar una plantilla creada por ti para ser usada en el framework Angular.

Contenido del curso 

Introducción

• Bienvenida
• Material de apoyo e inquietudes
• Editor de código y plugins
• ¿Qués es el desarrollo Front-End?
• Fundamentos de HTML5
• Fundamentos de CSS3
• Fundamentos de Javascript
• Fundamentos de jQuery

Bootstrap 4

• ¿Qué es Bootstrap?
• Instalación de Bootstrap 4
• Sistema de Rejillas
• Las Clases CSS de Bootstrap 4 Parte 1
• Las Clases CSS de Bootstrap 4 Parte 2
• Diviértete con Bootstrap 4
• Aterrizando conceptos de Bootstrap 4

Arquitectura Front-End para el sitio web - Blog del viajero

• Organizando el proyecto
• Vinculando Bootstrap 4 al proyecto
• Optimizando las imágenes del proyecto
• Agregando las fuentes
• Maquetando la cabecera - Parte 1
• Maquetando la cabecera - Parte 2
• Maquetando la cabecera - Parte 3
• Aplicando ajustes responsivos al cabezote - Parte 1
• Aplicando ajustes responsivos al cabezote - Parte 2
• Maquetando el Banner
• Aplicando efectos Parallax al Banner
• Maquetando el Menú
• Maquetando el "Grid" de Categorías
• Ajuste responsivo al "Grid" de Categorías
• Animando el "Grid" de Categorías
• Maquetando los artículos del inicio - Parte 1
• Maquetando los artículos del inicio - Parte 2
• Agregando la paginación a los artículos titulares
• Maquetando el footer - Parte 1
• Maquetando el footer - Parte 2
• Agregando el buscador
• Agregando efectos con el scroll
• Agregando el preload - Parte 1
• Agregando el preload - Parte 2
• Ajuste al preload
• Banner para la página de Categorías
• Agregando el BreadCrumb
• Maquetando la página de Artículos - Parte 1
• Maquetando la página de Artículos - Parte 2
• Deslizador de artículos relacionados
• Agregando el formulario de opiniones
• Comprimiendo los archivos CSS y JS

Adaptar plantillas HTML para Wordpress

• Sitio estático vs sitio dinámico
• ¿Qué es WordPress?
• Servidor local
• Instalando WordPress
• Conociendo la interfaz de WordPress
• Configurando los primeros ajustes de WordPress
• Migrando nuestra plantilla a WordPress
• Estructura de una plantilla para WordPress
• Modularizando nuestra plantilla - parte 1
• Modularizando nuestra plantilla - parte 2
• Vinculando archivos externos CSS y Javascript
• Agregando el menú dinámico
• Agregando artículos al Blog
• El loop de WordPress
• Configurando la paginación y el breadcrumb
• Configurando botones de compartir en redes
• Configurando el deslizador de artículos
• Configurando la sección de comentarios - parte 1
• Configurando la sección de comentarios - parte 2
• Configurando la sección de comentarios - parte 3
• Agregando Widgets - parte 1
• Agregando Widgets - parte 2
• Agregando posts al Sidebar
• Creando páginas internas en WordPress
• Logotipo dinámico
• Redes sociales dinámicas
• Configurando el buscador del sitio - parte 1
• Configurando el buscador del sitio - parte 2
• Banner dinámico - parte 1
• Banner dinámico - parte 2
• Grid de categorías dinámico - parte 1
• Grid de categorías dinámico - parte 2
• Cargar más artículos con el scroll en móviles
• Registro de usuarios para el newletter
• Subir la página a un hosting

Arquitectura Front-End para el sitio web - Reservas de Hotel

• Organizando el proyecto - Reservas de Hotel
• Optimizando las imágenes del proyecto
• Agregando las fuentes del proyecto
• Vinculando Bootstrap 4 al proyecto
• CSS GRID
• Aplicando CSS GRID al proyecto - parte 1
• Aplicando CSS GRID al proyecto - parte 2
• Finalizando el bloque "Header"
• Plugin Data Picker
• Modal de ingreso y registro
• Efecto Toggle Botón Idiomas
• Maquetando el Menú
• Scroll UP y Efectos Easing
• Bloque "Header" para pantallas pequeñas
• Creando el Slide
• Finalizando el módulo de Planes
• Finalizando el módulo de Planes para pantallas pequeñas
• Finalizando el módulo de Habitaciones
• Finalizando el módulo de "Recorrido por el pueblo"
• Finalizando el módulo de Restaurante - parte 1
• Finalizando el módulo de Restaurante - parte2
• FInalizando el módulo "Footer"
• Página de Habitaciones - parte 1
• Página de Habitaciones - parte 2
• Página de Habitaciones - parte 3
• Página de Reservas - parte 1
• Página de Reservas - parte 2
• Página de Perfil - parte 1
• Página de Perfil - parte 2