Domina Bootstrap 5: Diseño Web Responsivo para Principiantes
What you will learn:
Crear páginas web responsivas con Bootstrap 5
Utilizar el Grid System de Bootstrap 5 para diseños flexibles
Implementar componentes de Bootstrap 5 como menús desplegables, carruseles, y ventanas modales
Diseñar formularios responsivos y atractivos
Manejar diferentes tipos de navegación y barras de navegación colapsables
Personalizar estilos y tipografías con Bootstrap 5
Optimizar el diseño para diferentes tamaños de pantalla
Crear layouts complejos con un mínimo de código
Utilizar clases auxiliares para facilitar el desarrollo
Construir proyectos prácticos como un sitio eCommerce
Description
Aprende Bootstrap 5 desde cero y crea páginas web responsivas de forma rápida y eficiente. Este curso está diseñado para principiantes con conocimientos básicos de HTML y CSS, sin necesidad de experiencia en JavaScript. Domina la creación de diseños adaptativos para cualquier dispositivo, desde móviles hasta pantallas grandes.
Explorarás a fondo el grid system de Bootstrap 5, creando layouts complejos con facilidad. Aprenderás a usar componentes esenciales como: menús desplegables, carruseles de imágenes, ventanas modales, formularios, y mucho más. Cada módulo incluye ejercicios prácticos para consolidar tus conocimientos.
¿Qué lograrás al finalizar el curso?
Diseñar páginas web completamente responsivas usando el sistema de grilla de Bootstrap 5.
Utilizar componentes pre-diseñados de Bootstrap 5 para acelerar el desarrollo de tu sitio web.
Crear layouts complejos y atractivos con un mínimo de código.
Implementar diferentes tipos de navegación, incluyendo barras de navegación colapsables para dispositivos móviles.
Integrar carruseles de imágenes, ventanas modales y otros elementos interactivos.
Personalizar la apariencia de tu sitio web mediante la modificación de estilos y tipografías.
Optimizar tus páginas web para diferentes tamaños de pantalla.
Este curso incluye apuntes descargables y más de 100 ejercicios prácticos. ¡Inscríbete ahora y comienza a construir sitios web impresionantes!
Curriculum
Introducción a Bootstrap 5
Esta sección te da la bienvenida al curso y cubre los conceptos fundamentales de Bootstrap 5. Aprenderás a instalar Bootstrap 5 localmente o desde un CDN, comprenderás el Grid System y dominarás el manejo de encabezados y etiquetas tipográficas. Se incluyen explicaciones sobre contenedores responsivos, manejo de fondos y las nuevas características de Bootstrap 5.3. La sección concluye con un repaso de los conceptos aprendidos en apuntes adicionales.
Manejo de Etiquetas en Bootstrap
Aquí te enseñaremos a trabajar con tablas, bordes, imágenes, jumbotrons, alertas, botones (individuales, en grupos, verticales y anidados), insignias, barras de progreso, paginación, migas de pan, la etiqueta ``, e iconos. Se proporcionan ejemplos y ejercicios prácticos para cada elemento.
Listas Agrupadas (ListGroups)
Explora las ListGroups de Bootstrap 5, incluyendo la personalización, la creación de cartas con diferentes estilos, grupos de cargas, botones desplegables, manejo de temas claros y oscuros, control de colores y gradientes. Aprenderás a crear zonas de navegación con cartas, listas numeradas, y a usar checkboxes y botones de radio dentro de las ListGroups.
Divisiones Colapsables y Acordeones
Esta sección profundiza en la creación de divisiones colapsables, acordeones, diferentes tipos de menús de navegación (con pestañas, píldoras y desplegables), y la creación de barras de navegación con diversas opciones de personalización, incluyendo color, posicionamiento y elementos HTML.
Formularios con Bootstrap 5
Aprende a crear formularios responsivos y atractivos con Bootstrap 5. Cubriremos el uso de `form-control`, manejo del tamaño y desactivación de elementos, botones de verificación y radio, interruptores, elementos `
Carruseles en Bootstrap
Esta sección te guiará en la creación de carruseles de imágenes con controles, indicadores, subtítulos, y opciones de personalización como el efecto fade y el cambio de color del texto. Se incluye un ejercicio práctico para reforzar el aprendizaje.
Ventanas Modales y Scrollspy
Aprende a implementar ventanas modales, incluyendo la integración de formularios y contenido dinámico con JavaScript. Dominarás la creación de Scrollspy horizontal y vertical, tooltips, popovers, mensajes emergentes (toast), spinners y la implementación de una barra lateral Offcanvas.
Utilidades para el Desarrollo Web
Esta sección cubre las utilidades de Bootstrap para manejo de flotación, centrado, espaciado, alineación vertical, posicionamiento fijo, display flex, justificación, alineación de ítems flexibles y ordenamiento de elementos. Aprenderás también sobre sombras, display y manejo de ratios.
Grid System en Bootstrap
Explora a fondo el Grid System de Bootstrap 5 para crear layouts responsivos para diferentes tamaños de pantalla. Aprenderás a manejar columnas, anidar filas, usar `row-cols`, column wrapping, ordenamiento de columnas, desplazamientos (offset), y el manejo de gutters. Se incluyen ejemplos prácticos de layouts y contenidos.
Clases Auxiliares (Helpers)
Esta sección se centra en las clases auxiliares para limpiar la flotación, manejar links de colores, ratios, posicionamiento de elementos, links extendidos y truncamiento de textos.
Proyecto: eCommerce
Pon en práctica tus conocimientos creando la maqueta de un sitio eCommerce. Diseñarás las páginas principales, incluyendo la página inicial, página de producto, página de contacto, y páginas para cursos y libros.
Proyectos Adicionales
Crea un álbum de productos, una lista de precios con tabla comparativa, y una página de descargas. Se incluyen ejemplos de encabezados y páginas iniciales (hero pages) con diferentes estilos.
