Logo de Aulaideal

Curso Universidad Bootstrap 4 – Creamos el sitio Techsmith.com

¿DE QUÉ SE TRATA EL CURSO DE BOOTSTRAP?

En este curso nos trazamos como objetivo, recrear el diseño del sitio web de la empresa TechSmith.com, es decir un sitios web real y moderno, con un diseño complejo, pero nosotros lo  haremos desde CERO usando Bootstrap 4. 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 sus cimientos.

curso de bootstrap avanzado

¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO DE BOOSTRAP?

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.  Verás la implementación del sistema de columnas de Bootstrap y su personalización en función a los requerimientos de nuestro diseño.

También veremos la integración de la librería Font Awesome 5 para crear los  iconos que necesitamos en este proyecto.

Luego crearemos un menú mobil usando el componente Navbar y lo integraremos utilizando la librería Mmenu.Js  para crear un menu tipo “OffCanvas”. A continuación creamos 2 Slides de imágenes con múltiples controles de navegación utilizando la librería Swiper.js.

Paso seguido, crearemos un pié de página e integraremos un encabezado fijo usando diferentes librerías JavaScript.

EN RESUMEN EN ESTE CURSO:

  • Aprenderá crear el diseño de un sitio web real utilizando Bootstrap 4.
  • 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 10 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).

No esperes más, APRENDE A CREAR UN SITIO WEB AVANZADO utilizando toda la potencia de BOOTSTRAP 4.

Un abrazo y nos vemos dentro del curso.

Detalles del curso

  • Clases 105
  • Cuestionarios 0
  • Duración 11 horas
  • Nivel Intermedio
  • Estudiantes 588
  • Certificado Si
  • Evaluaciones Si
Regresar al curso

Curso Universidad Bootstrap 4 – Creamos el sitio Techsmith.com

  • Módulo 1: Introducción al curso
  • Módulo 2: Diseñando los patrones de colores
  • Módulo 3: Creando el encabezado
    • Clase3.1
      Insertando el componente navbar 08 min
    • Clase3.2
      Personalizando el color del navbar 10 min
    • Clase3.3
      Personalizando el logo del navbar 09 min
    • Clase3.4
      Entendiendo los estilos SASS anidados 07 min
    • Clase3.5
      Personalizando el contenedor del navbar 09 min
    • Clase3.6
      Creando el boton comprar con el Componente DropDown 14 min
    • Clase3.7
      Creando el boton buscar con Font Awesome 5 07 min
    • Clase3.8
      Creando el formulario Buscar con el componente Collapse 06 min
    • Clase3.9
      Creando los campos del buscador con el componente InputGroup 08 min
    • Clase3.10
      Introducción a la Libreria Mmenu JS 08 min
    • Clase3.11
      Analizando la documentación de Mmenu JS (parte 1) 13 min
    • Clase3.12
      Analizando la documentación de Mmenu JS (parte 2) 10 min
    • Clase3.13
      Descarga e instalación de Mmenu Js 05 min
    • Clase3.14
      Inicializando Mmenu Js (parte 1) 09 min
    • Clase3.15
      Inicializando Mmenu Js (parte 2) 07 min
    • Clase3.16
      Creando el contenido real del menu 14 min
    • Clase3.17
      Configurando las opciones del CORE de Mmenu JS 07 min
    • Clase3.18
      Configurando las Extensiones de Mmenu JS (Parte 2) 04 min
    • Clase3.19
      Configurando las Extensiones de Mmenu JS (Parte 1) 10 min
    • Clase3.20
      Configurando los ADD-ONS de Mmenu JS (Parte 1) 09 min
    • Clase3.21
      Configurando los ADD-ONS de MmenuJS (Parte 2) 11 min
    • Clase3.22
      Creando el boton movil usando la libreria MburgerJS 09 min
  • Módulo 4: Personalizando el encabezado
    • Clase4.1
      Personalizando la libreria MmenuJS (Parte 1) 08 min
    • Clase4.2
      Personalizando la libreria MmenuJS (Parte 2) 10 min
    • Clase4.3
      Personalizando el Boton Mburger (Parte 1) 12 min
    • Clase4.4
      Personalizando el Boton Mburger (Parte 2) 09 min
    • Clase4.5
      Personalizando el Boton Mburger (Parte 3) 10 min
    • Clase4.6
      Personalizando el logo del sitio (Parte 1) 11 min
    • Clase4.7
      Personalizando el logo del sitio (Parte 2) 08 min
    • Clase4.8
      Personalizando el logo del sitio (Parte 3) 13 min
    • Clase4.9
      Personalizando el boton comprar (Parte 1) 07 min
    • Clase4.10
      Personalizando el boton comprar (Parte 2) 08 min
    • Clase4.11
      Personalizando el boton comprar (Parte 3) 09 min
    • Clase4.12
      Personalizando el boton comprar (Parte 4) 07 min
    • Clase4.13
      Personalizando el boton buscar (Parte 1) 10 min
    • Clase4.14
      Personalizando el boton buscar (Parte 2) 15 min
    • Clase4.15
      Personalizando el logo para el contexto LG 12 min
    • Clase4.16
      Personalizando el menu principal (Parte 1) 10 min
    • Clase4.17
      Personalizando el menu principal (Parte 2) 10 min
    • Clase4.18
      Adaptando el menu para el contexto LG (Parte 1) 11 min
    • Clase4.19
      Adaptando el menu para el contexto LG (Parte 2) 09 min
    • Clase4.20
      Adaptando el menu para el contexto LG (Parte 3) 09 min
    • Clase4.21
      Moviendo código HTML con Joggler.js (Parte 1) 08 min
    • Clase4.22
      Moviendo código HTML con Joggler.js (Parte 2) 08 min
    • Clase4.23
      Personalizando la anchura del menu para el contexto XL 04 min
    • Clase4.24
      Estilizando la caja de búsqueda para el contexto XL (Parte 1) 09 min
    • Clase4.25
      Estilizando la caja de búsqueda para el contexto XL (Parte 2) 06 min
    • Clase4.26
      Personalizando el boton de contacto para el contexto LG 08 min
    • Clase4.27
      Estilizando el boton Login para el contexto LG 06 min
  • Módulo 5: Creando la navegación secundaria
    • Clase5.1
      Creando el diseño del encabezado para el contexto Mobil (Parte 1) 09 min
    • Clase5.2
      Creando el diseño del encabezado para el contexto Mobil (Parte 2) 07 min
    • Clase5.3
      Creando el diseño del encabezado para el contexto Mobil (Parte 3) 05 min
    • Clase5.4
      Creando el diseño del encabezado para el contexto SM 07 min
    • Clase5.5
      Creando el diseño del encabezado para el contexto MD 12 min
    • Clase5.6
      Creando el diseño del encabezado para el contexto LG 10 min
  • Modulo 6: Creando las características del producto
    • Clase6.1
      Analizando la estructura de las características 07 min
    • Clase6.2
      Creando el encabezado de la sección características 07 min
    • Clase6.3
      Creando la estructura de cada característica 10 min
    • Clase6.4
      Creando el diseño de las características para el contexto SM 03 min
    • Clase6.5
      Creando el diseño de las características para el contexto LG 04 min
  • Módulo 7: Creando los Beneficios del producto
    • Clase7.1
      Analizando el diseño del Slide 05 min
    • Clase7.2
      Instalación de la libreria Swiper.js 12 min
    • Clase7.3
      Entendiendo la estructura del Swiper.js 04 min
    • Clase7.4
      Inicializando el Swiper.js 09 min
    • Clase7.5
      Creando el contenido del primer Slider 09 min
    • Clase7.6
      Creando el contenido de todos los Slider 10 min
    • Clase7.7
      Personalizando Swiper.js con FontAwesome (Parte 1) 11 min
    • Clase7.8
      Personalizando Swiper.js con FontAwesome (Parte 2) 11 min
    • Clase7.9
      Personalizando Swiper.js con FontAwesome (Parte 3) 10 min
    • Clase7.10
      Los Parámetros de Swiper (Direction | Speed | Effect) 10 min
    • Clase7.11
      Los Parametros de Swiper (slidesPerView | spaceBetween | grabCursor | breakPoint) 10 min
    • Clase7.12
      Configurando los Métodos y eventos de Swiper 09 min
    • Clase7.13
      Los Componentes de Swiper (Navegación | Paginación) 08 min
    • Clase7.14
      Los Componentes de Swiper (Autoplay | Keyboard) 07 min
    • Clase7.15
      Los Componentes de Swiper (Thumbs) 11 min
    • Clase7.16
      Estilizando los enlaces de navegación del Swiper (Parte 1) 10 min
    • Clase7.17
      Estilizando los enlaces de navegación del Swiper (Parte 2) 10 min
  • Módulo 8: Creando las funciones del producto
    • Clase8.1
      Creando el Swiper para las funciones del producto (Parte 1) 11 min
    • Clase8.2
      Creando el Swiper para las funciones del producto (Parte 2) 10 min
    • Clase8.3
      Creando el Swiper para las funciones del producto (Parte 3) 07 min
  • Módulo 9: Creando los premios del producto
    • Clase9.1
      Creando el diseño de la sección Premios (Parte 1) 06 min
    • Clase9.2
      Creando el diseño de la sección Premios (Parte 2) 05 min
  • Módulo 10: Creando el pie de página
    • Clase10.1
      Creación del sistema de columnas para el pie de página 10 min
    • Clase10.2
      Aplicando las clases de Bootstrap al pie de página 06 min
    • Clase10.3
      Aplicando estilos CSS propios al pie de página 06 min
    • Clase10.4
      Maqueando la sección de Redes Sociales 09 min
    • Clase10.5
      Aplicando estilos CSS a las Redes Sociales 13 min
    • Clase10.6
      Maquetando los enlaces secundarios 11 min
    • Clase10.7
      Aplicando estilos CSS Responsive a los enlaces secundarios 10 min
  • Módulo 11: Detalles Finales
    • Clase11.1
      Instalando la libreria HC-sticky 08 min
    • Clase11.2
      Configuración avanzada de la libreria HC-sticky 07 min
    • Clase11.3
      Subiendo el proyecto a un dominio real y despedida 04 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?