Características clave
- 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).
Temario del curso
-
Módulo 1: Introducción al curso
- Descarga de archivos que usaremos en este curso
- Requisitos para llevar este curso
- Extensiones para Visual Estudio Code (Parte 1)
- Extensiones para Visual Estudio Code (Parte 2)
- Creando la estructura de mi proyecto
- Integrando Font awesome 5
- Instalación de Bootstrap 4
- Cargando nuestra hoja de estilos personalizada
-
Módulo 2: Diseñando los patrones de colores
-
Módulo 3: Creando el encabezado
- Insertando el componente navbar
- Personalizando el color del navbar
- Personalizando el logo del navbar
- Entendiendo los estilos SASS anidados
- Personalizando el contenedor del navbar
- Creando el boton comprar con el Componente DropDown
- Creando el boton buscar con Font Awesome 5
- Creando el formulario Buscar con el componente Collapse
- Creando los campos del buscador con el componente InputGroup
- Introducción a la Libreria Mmenu JS
- Analizando la documentación de Mmenu JS (parte 1)
- Analizando la documentación de Mmenu JS (parte 2)
- Descarga e instalación de Mmenu Js
- Inicializando Mmenu Js (parte 1)
- Inicializando Mmenu Js (parte 2)
- Creando el contenido real del menu
- Configurando las opciones del CORE de Mmenu JS
- Configurando las Extensiones de Mmenu JS (Parte 2)
- Configurando las Extensiones de Mmenu JS (Parte 1)
- Configurando los ADD-ONS de Mmenu JS (Parte 1)
- Configurando los ADD-ONS de MmenuJS (Parte 2)
- Creando el boton movil usando la libreria MburgerJS
-
Módulo 4: Personalizando el encabezado
- Personalizando la libreria MmenuJS (Parte 1)
- Personalizando la libreria MmenuJS (Parte 2)
- Personalizando el Boton Mburger (Parte 1)
- Personalizando el Boton Mburger (Parte 2)
- Personalizando el Boton Mburger (Parte 3)
- Personalizando el logo del sitio (Parte 1)
- Personalizando el logo del sitio (Parte 2)
- Personalizando el logo del sitio (Parte 3)
- Personalizando el boton comprar (Parte 1)
- Personalizando el boton comprar (Parte 2)
- Personalizando el boton comprar (Parte 3)
- Personalizando el boton comprar (Parte 4)
- Personalizando el boton buscar (Parte 1)
- Personalizando el boton buscar (Parte 2)
- Personalizando el logo para el contexto LG
- Personalizando el menu principal (Parte 1)
- Personalizando el menu principal (Parte 2)
- Adaptando el menu para el contexto LG (Parte 1)
- Adaptando el menu para el contexto LG (Parte 2)
- Adaptando el menu para el contexto LG (Parte 3)
- Moviendo código HTML con Joggler.js (Parte 1)
- Moviendo código HTML con Joggler.js (Parte 2)
- Personalizando la anchura del menu para el contexto XL
- Estilizando la caja de búsqueda para el contexto XL (Parte 1)
- Estilizando la caja de búsqueda para el contexto XL (Parte 2)
- Personalizando el boton de contacto para el contexto LG
- Estilizando el boton Login para el contexto LG
-
Modulo 6: Creando las características del producto
-
Módulo 7: Creando los Beneficios del producto
- Analizando el diseño del Slide
- Instalación de la libreria Swiper.js
- Entendiendo la estructura del Swiper.js
- Inicializando el Swiper.js
- Creando el contenido del primer Slider
- Creando el contenido de todos los Slider
- Personalizando Swiper.js con FontAwesome (Parte 1)
- Personalizando Swiper.js con FontAwesome (Parte 2)
- Personalizando Swiper.js con FontAwesome (Parte 3)
- Los Parámetros de Swiper (Direction | Speed | Effect)
- Los Parametros de Swiper (slidesPerView | spaceBetween | grabCursor | breakPoint)
- Configurando los Métodos y eventos de Swiper
- Los Componentes de Swiper (Navegación | Paginación)
- Los Componentes de Swiper (Autoplay | Keyboard)
- Los Componentes de Swiper (Thumbs)
- Estilizando los enlaces de navegación del Swiper (Parte 1)
- Estilizando los enlaces de navegación del Swiper (Parte 2)
-
Módulo 8: Creando las funciones del producto
-
Módulo 9: Creando los premios del producto
-
Módulo 10: Creando el pie de página
- Creación del sistema de columnas para el pie de página
- Aplicando las clases de Bootstrap al pie de página
- Aplicando estilos CSS propios al pie de página
- Maqueando la sección de Redes Sociales
- Aplicando estilos CSS a las Redes Sociales
- Maquetando los enlaces secundarios
- Aplicando estilos CSS Responsive a los enlaces secundarios
-
Módulo 11: Detalles Finales
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.
¿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.
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.
