A menudo surge la pregunto porque debo usar un framework, acaso no solo puedo usar html, css y javascript nativo, la respuesta es claro que si se puede, pero los frameworks vienen con muchas cosas prefabricadas que solo debemos usar, de esta manera nos ayudan a crear aplicaciones más rápidamente.

En este vídeo conoceremos los fundamentos de las unidades de medida css REM y EM. Esta será una explicación fundamental la cual nos ayudará a entender claramente que son estas unidades de medida y cómo usarlas.

En este video aprenderás:

- A trabajar con Flexbox

- Activar Flexbox con la propiedad "display: flex" en el contenedor

- Alinear elementos hacia arriba, abajo y al centro del contenedor –

- Mostrar elementos en horizontal y vertical con las propiedades "flex-direction"

- Envolver elementos con "flex-wrap"

- Añadir espaciado entre los elementos con las propiedades "space-between" y "space-around".

- Orderna elementos html con la propiedad "order"

Estos serán los fundamentos para que puedas entender Flexbox dentro de Bootstrap 4 ya que desde esta versión está integrado.

Aprenderás cuales son los puntos de corte o mediaqueries que usa Bootstrap para el sistema de rejilla que maneja.

Después de la inclusión de la hoja de estilos CSS que viene con Bootstrap, podremos crear una hoja de estilos personalizado donde poner nuestros propios estilos personalizados de color, tamaños, etc.

El fundamento principal de Bootstrap es su sistema de rejilla, el cual nos permite crear sitios completamente adaptables a diferentes dispositivos(Responsive), en este video entenderás como usarlo.

Aprenderás a usar estas opciones en el sistema de rejilla para obtener que las columnas sean de igual ancho, en varias filas, ordenamiento, entre otras

Aprenderás cómo centrar o correr elementos moviéndose hacia la derecha con un compensado es decir moviéndolo pero dejando unas columnas vacías antes del mismo.

Aprenderás cómo usar las nuevas clases de Flexbox en Bootstrap 4 para alinear de la manera que quieras y conocerás las clases en detalle.

Es posible que dentro de una columna podamos crear una fila con nuevas columnas, a este se le llama anidación de rejilla.

En este video aprenderás en detalle las clases de Flexbox que tenemos disponibles Bootstrap 4

Aprender como lograr una margen automática y como envolver elementos usando Flexbox en Bootstrap

Conoce los estilos para los encabezados html, y en general todos los estilos para tipografía

A menudo necesitaremos alinear el texto: (izquierda, centro, derecha) y también como mostrar un texto H1 y el display

Los íconos que existían hasta la versión 3 de Bootstrap dejaron de existir íntegramente, pero se dio paso a las librerías externas de Íconos, en este aprenderás como usar una de las más populares como es las de Font Awesome

Aprenderás como lograr posicionar los elementos dentro de la rejilla y como lograr que floten donde queramos

Bootstrap 4 viene con sus propias clases para hacer margin y padding que iran desde 1 hasta 5 con las cuales lograremos posicionar los elementos a nuestro gusto

Aprenderás las clases para lograr tamaños: w-25, w-50, w-75, w-100, así como todo lo referentes a los bordes y sus opciones

Verás todas las opciones de colores que tenemos para nuestros fondos, textos y diferentes elementos

Llegamos a otro de los fundamentos más importantes de Bootstrap 4 que son los componentes CSS, con estos veremos como crear botones, barras de navegación, formularios, alertas, barras de progreso, insignias, tablas y mucho más. En este sección aprenderás cada uno de ellos en detalle.

Aprenderás como crear botones con sus diferentes clases de color y outline

Aprenderás como crear botones con sus diferentes clases de color y outline

Una de las mejores opciones de Bootstrap es poder crear barras de navegación para menús responsive, con los navbars aprenderás como hacerlo en profundidad.

Los formularIos y campos en Bootstrap 4 son uno de los fuertes para la creación de aplicaciones modernas, Bootstrap nos provee de un gran set de clases para los mismos

Aprende como usar los grupos de entrada para la creación de bonitos paneles para nuestras aplicaciones

Las alertas nos pueden servir para configurar mensajes de notificaciones algunas de ellas con diferentes clases de color y que se puedan cerrar (dismissible). Aprende todo sobre las alertas en Bootstrap 4

Aprende como crear, usar y personalizar el componente CSS barras de progreso

Aprende cómo usar los grupos de listas en Bootstrap 4

Aprende a usar el componente Insignias (Badges) y los breacrumbs para mejorar la calidad de las interfaces.

Aprende como trabajar con tablas y las diferentes clases para crear tablas oscuras, con bordes, tablas striped

Aprende como crear paginación con Bootstrap uno de los componentes CSS más importantes para nuestros desarrollos y poder cargar muchos registros paginados.

Las tarjetas llegan a reemplazar a los Wells en Bootstrap 4, y con ellas podremos crear layouts de mucha calidad, paneles con imágenes, cabeceras, Pies de páginas, aprenderás a usar las clases: card, card-header, card-body, card-footer y mucho más.

Las tarjetas llegan a reemplazar a los Wells en Bootstrap 4, y con ellas podremos crear layouts de mucha calidad, paneles con imágenes, cabeceras, Pies de páginas, aprenderás a usar las clases: card, card-header, card-body, card-footer y mucho más

El componente jumbotron permite crear una cabecera para la página completamente personalizable con imagen, texto, botones.

Aprenderás todos los widgets javascript disponibles en Bootstrap 4:

• Tooltips

• Carrusel

• Colapsables

• Acordeones

• Ventanas emergentes

Aprende a usar los tooltips con los cuales poner mensajes al pasar el mouse sobre algún elemento como un botón, etc.

Aprende cómo usar el widget de Bootstrap para crear un carrusel de imágenes responsive, con navegación por flechas, botones, títulos y textos

En este video verás cómo crear efectos de colapsable acordeón para dotar de una mejor interacción nuestros aplicaciones

Aprende como usar el widget para crear ventanas emergentes o Popovers

Aprende como crear ventanas modales o modals y como personalizarlos para cargar cualquier tipo de contenidos.

Aprende a usar el widget para crear todo tipo de scrolls, scroll spy y scroll con un efecto de suavizado

Introducción y revisión del proyecto que realizaremos en esta sección

En este video empezaremos creando la barra de navegación y el logo de nuestro proyecto

En este video crearemos la cabecera con la imagen y los textos, así como la sección inicio de nuestro proyecto

Crearemos la sección Call To Action o Llamado a la acción

Crearemos la sección Servicios con el layout según el demo

Maqueteamos la sección galería usando no-gutters para así quitar el espacio entre las columnas y lograr que las imágenes se peguen unas a otras.

Crearemos el layout para la sección de testimonios y el pie de página (Footer)

Hasta aquí al dar clic en un link nos lleva a la sección correspondiente, pero en el demo lo tenemos con un bonito efecto de scroll animado, es lo que vamos a hacer en este video con unas pocas líneas de código javascript

Introducción y revisión del proyecto que realizaremos en esta sección

Empezaremos por crear la pantalla de acceso o login de nuestro proyecto

Maquetamos nuestro panel de control inicial, el menú principal y panel de administración

Terminaremos nuestro layout para el panel de control y creamos los 3 banners principales para: ventas, clientes y productos

Usaremos el componente de tablas para crear la tabla con los últimos productos

Crearemos una sección nueva la de categorías reutilizando mucho de lo que ya hicimos en los videos anteriores

Crearemos una sección nueva la de productos reutilizando mucho de lo que ya hicimos en los videos anteriores

Crearemos en un solo video las secciones de inventario, pedidos y cupones reutilizando lo que ya hicimos en los videos anteriores

Por último, crearemos la sección perfil con los campos de formulario e imagen necesarios para la aplicación.