Logo de Aulaideal

Curso EXPERTO en BOOTSTRAP 4 en 7 días

DESCRIPCIÓN DEL CURSO DE BOOSTRAP

En este curso de bootstrap nos trazamos como objetivo, crear un sitio web, tomando como referencia las mejores plantillas de “Template Monster“. Template Monster es el mejor directorio de plantillas web, en donde se comercializan plantillas profesionales de gran calidad.

Así que  prepárate para pasar al siguiente nivel de Bootstrap. Te aseguro, que este no es un curso teórico, ni con clases aburridas. Aquí aprenderás, desarrollando un proyecto web real desde 0.

¿QUÉ ES BOOTSTRAP 4?

Bootstrap es el framework de CSS, HTML  y JavaScript más popular, que nos permite desarrollar sitios web que se ajustan a cualquier resolución y dispositivo. Y esto lo consigue, ya que incorpora un potente Sistema de columnas Responsive, basado en CSS y a la gran cantidad de componentes que incluye.

curso de bootstrap¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO?

El curso se divide en varias secciones. Empezamos con la instalación de las herramientas necesarias para trabajar, luego realizamos la descarga e instalación rápida de Bootstrap 4 en nuestra PC.

Después procedemos  a codificar el diseño del sitio usando Bootstrap 4. Allí entenderán por fin y de una vez por todas, la razón de muchas clases complejas de Bootstrap.  Verás como exprimiremos al máximo el sistema de columnas de Bootstrap. Crearemos iconos utilizando la última versión de Font Awesome.

Luego crearemos un menú mobil usando el componente Navbar (y lo modificaremos). A continuación creamos Slides de imágenes, ventanas modales para la carga de videos en Youtube. Instalaremos plugins para Bootstrap que nos permitan crear efectos “Parallax” con las imágenes y muchos más.

Luego nos enfocamos en la creación de formularios usando el componente Forms de Bootstrap 4. Descubriremos todos los secretos que esconde el componente Forms y los aplicaremos en el diseño de nuestros formularios.

Paso seguido, implementaremos algunos Script para generar diferentes efectos en nuestro sitio, como “Contador animado  de números”, “Videos en ventanas modales”, “Parallax en imágenes”, etc.

Ver sitio web que voy a crear en este curso

DESPUES DE LLEVAR ESTE CURSO:

  • Aprenderás HTML5 + CSS3  (Desarrollo de un Proyecto Real).
  • Aprenderá a personalizar los componentes de Bootstrap 4 y adaptarlos a nuestros requerimientos.
  • Aprenderá a insertar iconos de Font Awesome (versión 5).
  • Aprende a crear tus propios diseños únicos y personalizados usando la última versión Bootstrap 4.
  • Accederás a más de 15 horas de grabación en HD, con contenido claro y ejemplos didácticos.
  • Podrás acceder al contenido desde tu móvil, Tablet o PC (24/7).

Te invito a que veas cualquiera de las clases que están gratuitas antes de comprar el curso y estoy seguro que desearás ver el resto de este entrenamiento.

Detalles del curso

  • Clases 152
  • Cuestionarios 0
  • Duración 14 horas
  • Nivel Intermedio
  • Estudiantes 4723
  • Certificado Si
  • Evaluaciones Si
Regresar al curso

Curso EXPERTO en BOOTSTRAP 4 en 7 días

  • Módulo 1: Introducción al curso
    • Clase1.1
      Descarga de archivos que usaremos en este curso 01 min
    • Clase1.2
      Requisitos 1 (Programas necesario) 08 min
    • Clase1.3
      Requisitos 2 (Extensiones para VS Code) 13 min
    • Clase1.4
      Creando la estructura de nuestro sitio Web 05 min
    • Clase1.5
      Integrando Bootstrap en nuestro proyecto 13 min
    • Clase1.6
      Integrando y personalizando Font Awesome 5 08 min
  • Módulo 2: Explorando el componente "Forms"
    • Clase2.1
      Introducción al Componente Forms 10 min
    • Clase2.2
      Aclarando conceptos sobre formularios (Parte 1) 12 min
    • Clase2.3
      Aclarando conceptos sobre formularios (Parte 2) 07 min
    • Clase2.4
      Regla 1: Todos los campos tiene que tener la clase “.form-control” 04 min
    • Clase2.5
      Regla 2: Agrupamos los campos dentro de una clase “.form-group” 05 min
    • Clase2.6
      Regla 3: Tamaño de los campos con “form-control-lg” y “form-control-sm” 02 min
    • Clase2.7
      Regla 4: Tamaño de los Label con “.col-form-label-sm” y “.col-form-label-lg” 03 min
    • Clase2.8
      Regla 5: Creamos texto de ayuda a nuestros campos con al clase “.form-text” 03 min
    • Clase2.9
      Ejercicio 1 – Creando un formulario de login (parte 1) 10 min
    • Clase2.10
      Ejercicio 1 – Creando un formulario de login (parte 2) 14 min
    • Clase2.11
      Regla 6: Encerramos los botones de opción en una clase .form-check 09 min
    • Clase2.12
      Regla 7: Encerramos las casillas de verificación en una clase .form-check 03 min
    • Clase2.13
      Regla 8: Creamos Checkboxs y Radios en linea con la clase .form-check-inline 03 min
    • Clase2.14
      Regla 9: Creamos diseños avanzados para los campos con INPUT GROUP (parte 1) 08 min
    • Clase2.15
      Regla 9: Creamos diseños avanzados para los campos con INPUT GROUP (parte 2) 06 min
    • Clase2.16
      Ejercicio 2 – Creando una caja de búsqueda 09 min
    • Clase2.17
      Ejercicio 3 – Formulario de contacto (parte 1) 10 min
    • Clase2.18
      Ejercicio 3 – Formulario de contacto (parte 2) 14 min
    • Clase2.19
      Regla 10 – Podemos crear 3 diseños de formularios (parte 1) 10 min
    • Clase2.20
      Regla 10 – Podemos crear 3 diseños de formularios (parte 2) 14 min
    • Clase2.21
      Regla 10 – Podemos crear 3 diseños de formularios (parte 3) 08 min
    • Clase2.22
      Regla 10 – Podemos crear 3 diseños de formularios (parte 4) 10 min
    • Clase2.23
      Regla 10 – Podemos crear 3 diseños de formularios (parte 5) 10 min
    • Clase2.24
      Regla 10 – Podemos crear 3 diseños de formularios (parte 6) 06 min
    • Clase2.25
      Regla 10 – Podemos crear 3 diseños de formularios (parte 7)
    • Clase2.26
      Regla 10 – Podemos crear 3 diseños de formularios (parte 8) 11 min
    • Clase2.27
      Regla 10 – Podemos crear 3 diseños de formularios (parte 9) 13 min
    • Clase2.28
      Regla 10 – Podemos crear 3 diseños de formularios (parte 10) 10 min
    • Clase2.29
      Regla 10 – Podemos crear 3 diseños de formularios (parte 11) 04 min
    • Clase2.30
      Regla 10 – Podemos crear 3 diseños de formularios (parte 12) 10 min
    • Clase2.31
      Regla 10 – Podemos crear 3 diseños de formularios (parte 13) 09 min
    • Clase2.32
      Regla 10 – Podemos crear 3 diseños de formularios (parte 14) 09 min
    • Clase2.33
      Regla 10 – Podemos crear 3 diseños de formularios (parte 15) 06 min
  • Módulo 3: Creando el Encabezado Responsive
    • Clase3.1
      Definiendo variables y tipografía del sitio (Parte 1) 11 min
    • Clase3.2
      Definiendo variables y tipografía del sitio (Parte 2) 06 min
    • Clase3.3
      Definiendo estilos para Primary y Secondary 10 min
    • Clase3.4
      Creando la estructura HTML básica de la sección 09 min
    • Clase3.5
      Creando la estructura para los botones de redes sociales 09 min
    • Clase3.6
      Creando los estilos para los botones de redes sociales 11 min
    • Clase3.7
      Creando el diseño para pantallas de mayor tamaño 07 min
    • Clase3.8
      Colocando el logo y telefonos responsives (parte 1) 12 min
    • Clase3.9
      Colocando el logo y telefonos responsives (parte 2) 07 min
    • Clase3.10
      Creando la estructura del menú de navegación 12 min
    • Clase3.11
      Creando el boton móvil 12 min
    • Clase3.12
      Personalizando el boton móvil 08 min
    • Clase3.13
      Creando los enlaces del menú 06 min
    • Clase3.14
      Creando estilos a los enlaces del menu principal (Parte 1) 11 min
    • Clase3.15
      Creando estilos a los enlaces del menu principal (Parte 2) 11 min
    • Clase3.16
      Creando estilos a los enlaces del menu principal (Parte 3) 11 min
    • Clase3.17
      Trabajando con la clase BTN 07 min
    • Clase3.18
      Personalizando la clase btn-primary (Parte 1) 11 min
    • Clase3.19
      Personalizando la clase btn-primary (Parte 2) 06 min
    • Clase3.20
      Personalizando la clase btn-primary (Parte 3) 05 min
    • Clase3.21
      Personalizando la clase btn-primary (Parte 4) 10 min
    • Clase3.22
      Personalizando la clase btn-primary (Parte 5) 07 min
    • Clase3.23
      Insertando funciones JAVASCRIPT al menú (Parte 1) 10 min
    • Clase3.24
      Insertando funciones JAVASCRIPT al menú (Parte 2) 04 min
    • Clase3.25
      Insertando funciones JAVASCRIPT al menú (Parte 3) 15 min
  • Módulo 4: Creando el Slide de imágenes con Swipe
    • Clase4.1
      Introducción a Swipe 09 min
    • Clase4.2
      Instalación de Swipe (Parte 1) 08 min
    • Clase4.3
      Instalación de Swipe (Parte 2) 09 min
    • Clase4.4
      Creando la estructura de la animación (Parte 1) 08 min
    • Clase4.5
      Creando la estructura de la animación (Parte 2) 10 min
    • Clase4.6
      Estilos CSS iniciales para los Slides 09 min
    • Clase4.7
      Configuración los parámetros de Swipe (Parte 1) 12 min
    • Clase4.8
      Configuración los parámetros de Swipe (Parte 2) 08 min
    • Clase4.9
      Configuración los parámetros de Swipe (Parte 3) 08 min
    • Clase4.10
      Personalizando la apariencia de Swipe (Parte 1) 11 min
    • Clase4.11
      Personalizando la apariencia de Swipe (Parte 2) 04 min
    • Clase4.12
      Optimizando Swipe para diferentes tamaños de pantallas 12 min
  • Módulo 5: Creando la sección "Bienvenidos"
    • Clase5.1
      Implementando el sistema de columnas (Parte 1) 09 min
    • Clase5.2
      Implementando el sistema de columnas (Parte 2) 09 min
    • Clase5.3
      Optimizando la sección en diferentes tamaños de pantallas 07 min
    • Clase5.4
      Estilizando el boton play del reproductor (Parte 1) 09 min
    • Clase5.5
      Estilizando el boton play del reproductor (Parte 2) 08 min
    • Clase5.6
      Estilizando el boton play del reproductor (Parte 3) 07 min
    • Clase5.7
      Estilizando el boton play del reproductor (Parte 4) 14 min
    • Clase5.8
      ¿Que es VenoBox? 08 min
    • Clase5.9
      Descarga e Instalación de VenoBox 07 min
    • Clase5.10
      Inicializando VenoBox 03 min
    • Clase5.11
      Definiendo parámetros en VenoBox (Parte 1) 08 min
    • Clase5.12
      Definiendo parámetros en VenoBox (Parte 2) 13 min
  • Módulo 6: Creando la sección "Te ayudamos"
    • Clase6.1
      Creando la estructura del al sección 10 min
    • Clase6.2
      Descarga e instalación de Jarallax 04 min
    • Clase6.3
      Definiendo el tipo de imagen 06 min
    • Clase6.4
      Cargando múltiples imágenes con PICTURE 12 min
    • Clase6.5
      Configurando los parametros de Jarallax 09 min
    • Clase6.6
      Rotando el diseño con Skew 12 min
    • Clase6.7
      Instalando el polyfill PICTUREFILL 06 min
  • Módulo 7: Creando la sección "Premios"
    • Clase7.1
      Creando la estructura responsive de la sección 12 min
    • Clase7.2
      Creando el diseño de la sección 11 min
    • Clase7.3
      Creando estilos CSS para el borde inferior 05 min
    • Clase7.4
      Creando estilos CSS para el borde inferior (HOVER) 08 min
    • Clase7.5
      Descargando e instalando “CounterUp.js” 06 min
    • Clase7.6
      Configurando el script “CounterUp.js” 10 min
  • Módulo 8: Creando la sección "Nuestra APP"
    • Clase8.1
      Creando la estructura HTML básica de la sección 11 min
    • Clase8.2
      Modificando la alineación de las columnas 05 min
    • Clase8.3
      Implementando el efecto parallax 09 min
    • Clase8.4
      Agregando estilos CSS a la sección 05 min
  • Módulo 9: Creación de la sección "Contáctanos"
    • Clase9.1
      Analizando la estructura del contenido 09 min
    • Clase9.2
      Creando el encabezado de la sección (Parte 1) 07 min
    • Clase9.3
      Creando el encabezado de la sección (Parte 2) 10 min
    • Clase9.4
      Creando el encabezado de la sección (Parte 3) 06 min
    • Clase9.5
      Creando la sección detalles de contacto (parte 1) 09 min
    • Clase9.6
      Creando la sección detalles de contacto (parte 2) 09 min
    • Clase9.7
      Creando la sección detalles de contacto (parte 3) 06 min
    • Clase9.8
      Creando los campos del formulario (parte 1) 10 min
    • Clase9.9
      Creando los campos del formulario (parte 2) 09 min
    • Clase9.10
      Creando los campos del formulario (parte 3) 08 min
    • Clase9.11
      Creando los campos del formulario (parte 4) 08 min
    • Clase9.12
      Creando el campo enviar 10 min
    • Clase9.13
      Creando el selector de fecha con Datepicker (Parte 1) 10 min
    • Clase9.14
      Creando el selector de fecha con Datepicker (Parte 2) 07 min
    • Clase9.15
      Configurando el selector de fecha Datepicker (Parte 1) 09 min
    • Clase9.16
      Configurando el selector de fecha Datepicker (Parte 2) 06 min
    • Clase9.17
      Configurando el selector de fecha Datepicker (Parte 3) 08 min
    • Clase9.18
      Creando el selector de hora con Timepicker 06 min
    • Clase9.19
      Configurando el selector de hora con Timepicker 06 min
    • Clase9.20
      Personalizando el Datepicker y el Timepicker 13 min
    • Clase9.21
      Introducción a Parsley.js 08 min
    • Clase9.22
      Descarga e instalación de Parsley.js 04 min
    • Clase9.23
      Metodo rápido para ejecutar Parsley.js
    • Clase9.24
      Método completo para ejecutar Parsley.js 05 min
    • Clase9.25
      Comportamiento de Parsley.js 03 min
    • Clase9.26
      Tipos de validaciones de Parsley.js 07 min
    • Clase9.27
      Mostrando un mensaje de validación genérico 04 min
    • Clase9.28
      Mostrando mensajes según el tipo de validación (Parte 1) 09 min
    • Clase9.29
      Mostrando mensajes según el tipo de validación (Parte 2) 06 min
    • Clase9.30
      Integrando Bootstrap 4 con Parsley.js 09 min
    • Clase9.31
      Optimizando el formulario para diferentes contextos 07 min
  • Módulo 10: Creación de la sección "Pié de página"
    • Clase10.1
      Creando la estructura HTML del footer (Parte 1) 09 min
    • Clase10.2
      Creando la estructura HTML del footer (Parte 2) 06 min
    • Clase10.3
      Creando un color de fondo con un Pseudo Elemento 10 min
    • Clase10.4
      Aplicando estilos al contenido de la primera columna 04 min
    • Clase10.5
      Creando los enlaces secundarios 11 min
    • Clase10.6
      Optimizando el diseño para el contexto MD (Parte 1) 10 min
    • Clase10.7
      Optimizando el diseño para el contexto MD (Parte 2) 03 min
    • Clase10.8
      Optimizando el diseño para el contexto XL 03 min
  • Módulo 11: Detalles finales
    • Clase11.1
      Creando un encabezado fijo con Stickit.js 07 min
    • Clase11.2
      Configurando Stickit.js (Parte 1) 07 min
    • Clase11.3
      Configurando Stickit.js (Parte 2) 04 min
    • Clase11.4
      Creando el efecto Scroll con page-scroll-to-id.js 09 min
    • Clase11.5
      Configurando Page-scroll-to-id.js 13 min
    • Clase11.6
      Estilos CSS específicos con Css_browser_selector.js (Parte 1) 08 min
    • Clase11.7
      Estilos CSS específicos con Css_browser_selector.js (Parte 2) 11 min
    • Clase11.8
      Instalando Fuentes de Google y palabras finales 08 min

Apasionado por el Diseño y Desarrollo Web desde hace 15 años. Un amante de Wordpress, Bootstrap y de las cosas buenas de la vida.

Comentarios

Promedio

0
0 puntuación

Evaluación detallada

5
0%
4
0%
3
0%
2
0%
1
0%

¿NECESITAS AYUDA INMEDIATA?