- Cursos
- Tecnología
- Desarrollo Web
- Curso de Introducción a Bootstrap 4, nivel básico
Curso de Introducción a Bootstrap 4, nivel básico
Bootstrap 4 es sin duda el framework más utilizado para hacer páginas web responsivas de manera rápida y profesional en el mundo, pero no solo nos permite adaptar nuestras páginas web a cualquier dispositivo, sino que nos brinda una enorme gama de herramientas
Descripción del curso
Bootstrap 4 es sin duda el framework más utilizado para hacer páginas web responsivas de manera rápida y profesional en el mundo, pero no solo nos permite adaptar nuestras páginas web a cualquier dispositivo, sino que nos brinda una enorme gama de herramientas para simplificarnos la vida de diseñadores y desarrolladores web.
Este curso está enfocado para personas que no tengan ningún conocimiento sobre el tema, hasta poder lograr páginas flexibles y poderosas. Es necesario que se tengan conocimientos básicos sobre HTML y CSS, pero no necesitas ser un experto en el área. No necesitas tener ningún conocimiento en JavaScript, ya que no utilizaremos este lenguaje.
Al final el curso podrás:
Comprender los inicios de Bootstrap 4, cómo instalarlo en la computadora o desde un CDN, usar básicamente la cuadrícula para hacer una página responsiva.
Aprender las diferencias de tipografía y de estilo entre HTML y Bootstrap 4 en etiquetas como abbr, mark, pre, kdb o blockquote.
Aprender a crear listas agrupadas, paneles y grupos de paneles, menús dropdown, listas colapsables, crear un acordeón, menú de tabuladores, menú de píldoras, menús verticales, así como tabuladores y píldoras centradas en Bootstrap.
Crear barras de navegación normales y en colores invertidos, añadir un dropdown, crear opciones a la derecha e izquierda de la barra, agregar botones, un formulario y hacer una barra colapsable para un dispositivo pequeño.
Aprender a crear y modificar los objetos media, centrando verticalmente, justificarlo a la izquierda o derecha o anidarlos.
Crear un carrusel de imágenes y posteriormente agregará subtítulos, creará ventanas modales, añadirá un tooltip a un elemento HTML, creará ventanas popover, así como una barra ScrollSpy.
Crear páginas responsivas de varias columna para dispositivos pequeños, medianos, computadoras de escritorio y de pantalla ancha. Conocerá el uso de las clases hidden, visible, clearfix, offset, pull y push.
En el curso encontrarás los apuntes a cada sección, así como más de 100 ejercicios que te ayudarán a lograr nuestros objetivos. Para este curso necesitas una computadora con Internet y un navegador moderno, así como un editor de código como SublimeText, Brackets, Dreamweaver, etc.
Contenido del curso
Introducción a Bootstrap 4
49:31- Los inicios de Bootstrap03:39AVANCE
- Instalar Bootstrap en la computadora o desde un CDN09:45
- Las clases .container y .container-fluid para iniciar07:04
- Introducción al Grid System11:09
- La configuración básica de la tipografía en Bootstrap04:49
- El uso de la etiqueta <mark> en Bootstrap04:08
- Etiquetas para el manejo de código con Bootstrap 404:49
- Clases para remarcar textos y fondos según su contexto04:08
Manejo de diferentes etiquetas con Bootstrap 4
57:15- Manejo de las tablas con Bootstrap 408:14
- Realizar las imágenes responsivas y modificar las esquinas04:50
- Crear un jumbotron con Bootstrap 404:36
- Crear alertas con Bootstrap 406:43
- Manejo de botones con Bootstrap 405:58
- Crear grupos de botones con Bootstrap 404:58
- Los distintivos en Bootstrap 406:10
- Paginación y migas de pan08:28
- Barras de progreso07:18
Listas de agrupación
01:22:51- Introducción a las list-group10:04
- List group con insignias y personalizado12:13
- Las cartas o tarjetas en Bootstrap 409:31
- Modificar el estilo de las tarjetas o cartas y añadirles un list-group con flush09:57
- Crear un grupo de tarjetas o cartas con card-group05:59
- Crear un grupo de tarjetas o cartas con card-deck06:47
- Agrupar las tarjetas o cartas con card-columns10:50
- Crear un menú con dropdown10:02
- Variaciones y tamaños de un dropdown07:28
Divisiones colapsables y barras de navegación
01:03:18- División Colapsable básica06:28
- Múltiples divisiones colapsables05:07
- Crear una acordeón con Bootstrap 406:35
- Hacer un nav dinámico04:34
- Crear una barra de navegación básica con Bootstrap 406:34
- Crear una barra de navegación responsiva con Bootstrap 406:48
- Crear una barra de navegación con cajas de entrada09:08
- Crear una barra "pegajosa" con Bootstrap 408:33
- Crear una barra de navegación responsiva con un formulario con Bootstrap 409:31
Crear formularios con Bootstrap 4
01:06:40- Manejo básico de formularios con Bootstrap 407:59
- Cambiar el tamaño de las cajas de entrada en un formulario con BS406:05
- Manejo de las cajas de verificación y de los botones de radio en Bootstrap 408:09
- Dar formato a un formulario con el grid system de Bootstrap 410:37
- Crear un formulario horizontal con Bootstrap 405:41
- Controlar el ancho de las columnas en un formulario09:17
- Crear un formulario en una línea o inline12:57
- Crear texto auxiliar en un formulario con Bootstrap 405:55
Los input-group en Bootstrap 4
51:38- Introducción a los input group08:58
- Controlar las alturas de los elementos input group04:52
- Crear un input-group con cajas de verificación o botones de radio03:55
- Crear un input-multiple con varias cajas de entrada03:52
- Crear un input-group con varios añadidos03:18
- Añadir botones a elementos de un formulario con input-group04:43
- Añadir botones con dropdown con un input-group04:36
- Añadir botones dobles en elementos de formularios con input-group05:36
- Añadir botones y enunciado en elementos <select> con un input-group05:43
- Añadir botones y enunciado en elementos "file" con un input-group06:05
Crear un carrusel con Bootstrap 4
18:09- Crear un carrusel básico con Bootstrap 405:09
- Añadir controles a un carrusel con Bootstrap 404:19
- Añadir indicadores a un carrusel con Bootstrap 404:20
- Añadir subtítulos a un carrusel con Bootstrap 404:21
Ventanas modales, popovers y tooltips en Bootstrap 4
56:51- Crear una ventana modal con Bootstrap 408:29
- Centrar en la pantalla la ventana modal02:48
- Crear una ventana modal con el Grid System de Bootstrap 406:32
- Cambiar el tamaño de las ventanas modales05:31
- Manejo de los tooltips en Bootstrap 406:36
- Crear un popovers en Bootstrap 406:44
- Crear el popover, eventos focus y hover02:29
- Crear un Scrollspy en Bootstrap 408:07
- Crear un scrollspy vertical09:35
Utilidades o "utilities"
01:09:17- Manejo de los bordes08:21
- Manejo de las flotaciones y flotaciones responsivas05:49
- Centrado, ancho y alto de los elementos con Bootstrap 408:13
- El manejo del espaciado, márgenes y paddings, en Bootstrap 408:36
- Las clases sticky, fixed-top y fixed-bottom08:01
- Introducción a las cajas flexibles o flex-box12:18
- La clase JustifyContent para el eje principal de las cajas flexibles05:58
- La clase align-item para el eje cruzado de las cajas flexibles05:56
- Modificar la alineación de los items flexibles con align-self06:05
El Grid System en Bootstrap 4
43:39- Introducción al Grid System08:33
- El Grid System para dispositivos extra pequeños06:23
- El Grid System para dispositivos pequeños, mayores a 576 pixeles07:44
- El Grid System para dispositivos medianos, mayores a 768 px06:14
- El Grid System para dispositivos largos, mayores a 992 px04:09
- El Grid System para dispositivos extra largos, (xl) mayores a 1200px04:32
- Anidar columnas en el Grid System de Bootstrap 406:04
Desarrollar un sistema de Ecommerce con Bootstrap (maquetación)
01:07:56- Crear una maqueta de un sistema de comercio electrónico con Bootstrap 402:34
- Crear la barra de navegación principal08:56
- Crear el Jumbotrón y la estructura del archivo index09:05
- Crear el contenido en la página inicial08:26
- Crear la página para mostrar el producto12:53
- Crear la página de contacto con un formulario10:33
- Crear las páginas de cursos y libros11:24
- Juntar todos los archivos para concluir la maqueta de eCommerce 04:05
Valoraciones
- 5 ESTRELLAS100%
- 4 ESTRELLAS0%
- 3 ESTRELLAS0%
- 2 ESTRELLAS0%
- 1 ESTRELLAS0%
Carlos EduardoRestrepo CarrasquillaIncluir valoración media (en números)
¿Por qué pagar por un curso cuando puedes tenerlos todos?
Prueba la Suscripción ahoraO quiero saber más
