$99.99 $9.99
TREND

Mega Curso de Bootstrap 4 Aprende de 0 a 100 – Se un Experto

Crea sitios y aplicaciones web de calidad profesional adaptables a todos los dispositivos y resoluciones

2 reviews
167 students
Language - Español
Last updated - Apr 2020
$99.99 $9.99
course-thumb
  • 14.7 hours on-demand video
  • 42 educational resources
  • 2 external links
  • Lifetime Access
  • Completion certificate
  • Free tutor consultation
  • 30-days money back guarantee

What You’ll Learn

Los fundamentos de Bootstrap 4 desde cero y paso a paso.
Crear sitios web y aplicaciones responsive (Amigables a dispositivos móviles: Móviles y Tablets y también Televisores Smart).
Trabajar con el sistema de rejilla de Bootstrap 4, usando los contenedores, filas y columnas
Usar Flexbox en Bootstrap 4 y así crear layouts más precisos y mejor distribuidos
Todos los componentes de Bootstrap 4, Botones, Navbars, Formularios, Alertas, Barras de Progreso, Insignias, Tablas, Tartjetas, etc.
Interfaces enriquecidas con iconos de Font Awesome.
Widgets Javascript: Carrusel, alertas, diálogos, tooltips, etc.
Integrar tipografía personalizada.
Aprende a crear un panel de administración responsive para un sitio de Ecommerce
Aprende a crear tu propio portafolio profesional

Included Content

  • Introducción
    5 lectures
    54:28
    • Qué es Bootstrap
      Bootstrap es un framework HTML 5, CSS 3, Javascript, para la creación de sitios y aplicaciones web responsive (Amigable a todos los dispositivos móviles, tablets, Smart tv, etc).
      07:17
    • Nuevas funciones en Bootstrap 4
      Algunas de las nuevas funciones son: Estilos Flat, más clases de CSS para los colores, clases Outline, flexbox, entre otras.
      07:09
    • Instalación de Herramientas para el Curso
      En este video aprenderás como instalar las herramientas necesarias para el curso, en especial el editor visual studio code y algunas extensiones con las que de seguro podrás trabajar más cómodo y más rápido.
      13:52
    • Instalación de Bootstrap en Local
      Aprenderás como instalar Bootstrap 4 en local, donde los estilos css y archivos javascript para su funcionamiento estarán en tu equipo, o si trabajar con un servidor web deberas subirlos a los mismo.
      17:51
    • Instalación de Bootstrap desde CDN
      Aprenderás como instalar Bootstrap 4 usando un CDN (Content Delivery Network), conlos cuales se cargarán los estilos css y archivos javascript desde servidores externos optimizados para ello y así lograr un mejor desempeño de nuestras aplicaciones.
      08:19
  • Fundamentos
    5 lectures
    54:43
    • Que es un Framework y Por qué Usarlo
      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.
      12:50
    • Unidades de Medida CSS Rem y Em
      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.
    • Fundamentos de Flexbox
      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". - Ordernar 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.
      26:06
    • Puntos de Quiebre Bootstrap 4
      Aprenderás cuales son los puntos de corte o mediaqueries que usa Bootstrap para el sistema de rejilla que maneja.
      10:08
    • Estilos Css Personalizados
      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.
      05:39
  • Sistema de Rejilla
    5 lectures
    50:44
    • Rejilla responsive
      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.
      13:28
    • Ancho Igual, Multifila, Auto Layout y Ordenamiento
      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
      16:24
    • Compensado u Offset
      Aprenderás cómo centrar o correr elementos moviéndolos hacia la derecha con un compensado es decir moviéndose, pero dejando unas columnas vacías antes del mismo.
      05:21
    • Alineación de la Rejilla con Flexbox
      Aprenderás como usar las nuevas clases de Flexbox en Bootstrap 4 para alinear de la manera que quieras y conocerás las clases en detalle.
      15:31
    • Anidación de Rejilla
      Es posible que dentro de una columna podamos crear una fila con nuevas columnas, a este se le llama anidación de rejilla.
  • Flexbox en Bootstrap
    2 lectures
    20:48
    • Clases de Flexbox en Bootstrap
      En este video aprenderás en detalle las clases de Flexbox que tenemos disponibles Bootstrap 4
      14:26
    • Auto Margen y Envolvente (Wrap)
      Aprender como lograr una margen automática y como envolver elementos usando Flexbox en Bootstrap
      06:22
  • Tipografía
    3 lectures
    43:13
    • Encabezados y Tipografía
      Conoce los estilos para los encabezados html, y en general todos los estilos para tipografía
      22:25
    • Alineación de Texto y Display
      A menudo necesitaremos alinear el texto: (izquierda, centro, derecha) y también como mostrar un texto H1 y el display
      15:18
    • Iconos de Font Awesome
      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
      05:30
  • Utilidades
    4 lectures
    01:02:14
    • Posicionamiento y Flotado
      Aprenderás como lograr posicionar los elementos dentro de la rejilla y como lograr que floten donde queramos
      17:01
    • Margen (Margin) y Margen Interna (Padding)
      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
      17:02
    • Tamaños y Bordes
      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
      13:10
    • Fondos y Colores
      Verás todas las opciones de colores que tenemos para nuestros fondos, textos y diferentes elementos
      15:01
  • Componentes CSS
    15 lectures
    03:16:56
    • Introducción a la Sección
      Llegamos a otro de los fundamentos más importantes de Bootstrap 4 que son los componentes CSS, con estos veremos cómo crear botones, barras de navegación, formularios, alertas, barras de progreso, insignias, tablas y mucho más. En esta sección aprenderás cada uno de ellos en detalle.
      04:47
    • Botones Parte 1
      Aprenderás como crear botones con sus diferentes clases de color y outline
      19:03
    • Botones Parte 2
      Aprenderás como crear botones con sus diferentes clases de color y outline
      17:56
    • Navbars (Barras de Navegación)
      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.
      22:31
    • Formularios y Campos de Entrada
      Los formularos 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
      25:51
    • Grupos de Entradas (Inputs)
      Aprende como usar los grupos de entrada para la creación de bonitos paneles para nuestras aplicaciones
      16:31
    • Alertas (Alerts)
      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
      08:34
    • Barras de Progreso
      Aprende como crear, usar y personalizar el componente CSS barras de progreso
      07:19
    • Grupos de Listas (List Groups)
      Aprende cómo usar los grupos de listas en Bootstrap 4
      07:42
    • Insignias (Badges) y Migajas de Pan (Breadcrumbs)
      Aprende a usar el componente Insignias (Badges) y los breacrumbs para mejorar la calidad de las interfaces.
      08:43
    • Tablas
      Aprende como trabajar con tablas y las diferentes clases para crear tablas oscuras, con bordes, tablas striped
      10:01
    • Paginación
      Aprende como crear paginacion con Bootstrap uno de los componentes CSS más importantes para nuestros desarrollos y poder cargar muchos registros paginados.
      08:30
    • Tarjetas Parte1
      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.
      20:02
    • Tarjetas Parte 2
      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
      14:28
    • Jumbotron
      El componente jumbotron permite crear una cabecera para la página completamente pesonalizable con imagen, texto, botones.
      04:58
  • Widgets Javascript
    7 lectures
    01:06:28
    • Introducción a la sección
      Aprenderás todos los widgets javascript disponibles en Bootstrap 4: Tooltips Carrusel Colapsables Acordeones Ventanas emergentes
      03:09
    • Tooltips
      Aprende a usar los tooltips con los cuales poner mensajes al pasar el mouse sobre algún elemento como un botón, etc.
      07:06
    • Carrusel (Slider)
      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
      18:07
    • Colapsable y Acordeón
      En este video verás cómo crear efectos de colapsable acordeón para dotar de una mejor interacción nuestros aplicaciones
      10:03
    • Ventanas Emergentes (Popover)
      Aprende cómo usar el widget para crear ventanas emergentes o Popovers
      08:08
    • Ventanas Modales
      Aprende como crear ventanas modales o modals y como personalizarlos para cargar cualquier tipo de contenidos.
      11:44
    • Scrolls (Scroll spy y Scroll Suavizado)
      Aprende a usar el widget para crear todo tipo de scrolls, scroll spy y scroll con un efecto de suavizado
      08:11
  • Proyecto 1 – Agencia Digital
    8 lectures
    01:23:52
    • Demo del proyecto final
      Introducción y revisión del proyecto que realizaremos en esta sección
      03:06
    • Logo y Barra de Navegación
      En este video empezaremos creando la barra de navegación y el logo de nuestro proyecto
      23:25
    • Cabecera y Sección Inicio
      En este vídeo crearemos la cabecera con la imagen y los textos, así como la sección inicio de nuestro proyecto
      14:49
    • Sección Llamado a la Acción
      Crearemos la sección Call To Action o Llamado a la acción
      07:34
    • Sección Servicios
      Crearemos la sección Servicios con el layout según el demo
      08:32
    • Sección Galería
      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.
      04:13
    • Sección Testimonios y Pie de Página
      Crearemos el layout para la sección de testimonios y el pie de pagina (Footer)
      13:37
    • Animación de Scroll Javascript
      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
      08:36
  • Proyecto 2 - Admin App
    10 lectures
    02:30:46
    • Demo del Proyecto Final
      Introducción y revisión del proyecto que realizaremos en esta sección
      04:56
    • Configuración – Pantalla de Acceso
      Empezaremos por crear la pantalla de acceso o login de nuestro proyecto
      20:27
    • Panel de Control y Barra de Navegación
      Después del login ya ingresamos a nuestro panel de control y aquí empezaremos creando la barra de navegación de nuestra aplicación.
      25:44
    • Panel de Control – Menú Principal y Administración
      Maquetamos nuestro panel de control inicial, el menú principal y panel de administración
      18:44
    • Panel de Control – Banners
      Terminaremos nuestro layout para el panel de control y creamos los 3 banners principales para: ventas, clientes y productos
      10:41
    • Panel de Control – Tabla Últimos Productos
      Usaremos el componente de tablas para crear la tabla con los últimos productos
      10:08
    • Panel de Control – Sección Categorías
      Crearemos una sección nueva la de categorías reutilizando mucho de lo que ya hicimos en los videos anteriores
      21:53
    • Panel de Control – Sección Productos
      Crearemos una sección nueva la de productos reutilizando mucho de lo que ya hicimos en los videos anteriores
      10:34
    • Panel de Control – Sección Inventario, Pedidos y Cupones
      Crearemos en un solo video las secciones de inventario, pedidos y cupones reutilizando lo que ya hicimos en los videos anteriores
      18:00
    • Panel de Control – Perfil
      Por último, crearemos la sección perfil con los campos de formulario e imagen necesarios para la aplicación.
      09:39
  • Proyecto 3 - Mi Portafolio
    7 lectures
    01:36:50
    • Demo del Proyecto Final
      Introducción y revisión del proyecto que realizaremos en esta sección
      06:12
    • Configuraciones Iniciales y Librerías
      Como siempre iniciamos creando las configuraciones e importando las librerías javascript necesarias para este proyecto
      13:12
    • Maquetación del Header, Imagen y Botones del Menú
      Crearemos el layout para el encabezado (header), la imagen principal y los botones del menú con sus respectivos íconos de Font Awesome
      23:22
    • Contenido y Colapsable Sección Inicio
      Cada sección del sitio es colapsable es decir al dar clic sobre un botón cada sección se expande o desaparece, en este video verás cómo lograr ese bonito efecto
      13:16
    • Maquetación Sección Currículum
      En este video trabajaremos en la sección currículum de nuestro sitio también colapsable.
      10:48
    • Maquetación Sección Trabajos
      En este video trabajaremos en la sección trabajos de nuestro sitio también colapsable.
      15:07
    • Maquetación Sección Contacto
      En este video trabajaremos en la sección contacto de nuestro sitio también colapsable.
      14:53
  • Despedida
    1 lecture
    • Canal en Youtube
      Suscríbete al Canal en Youtube y obtén más educación

Description

Te doy la bienvenida al Megacurso de Bootstrap 4, el curso más completo, ameno con el que tendrás todos los conocimientos necesarios para desarrollar cualquier sitio o aplicación web completamente amigable a todos los dispositivos (teléfonos, tablets, televisores Smart tv, etc).

Bootstrap es el framework más popular en el mundo para el desarrollo de interfaces web por su potencial y flexibilidad. En este curso iremos desde cero y paso a paso para que puedas comprender completamente los fundamentos y después pasar a realizar proyectos prácticos.

Si nunca has trabajado con Bootstrap, no es necesario que tengas conocimientos ya que iniciamos desde cero. Pero si ya tienes algún conocimiento o has trabajado con versiones anteriores aprenderás todas las nuevas funciones, lo que se ha eliminado y en general todos los cambios incluidos en Bootstrap 4

 

*Es necesario tener conocimientos básicos en HMTL y CSS.

 

Bootstrap 4

Es un framework HTML, CSS Y Javascript para la creación rápida de sitios web y aplicaciones. Contiene un sistema de rejilla de filas y columnas en los cuales distribuir nuestros contenidos para así lograr optimizar los mismos para diferentes dispositivos y resoluciones, logrando obtener un sitio completamente responsivo (amigable a todos los dispositivos). También incluye un set de componentes Css prefabricados los cuales solo debemos usar y nos permiten crear: botones, barras de progreso, alertas, paginación, tablas, tarjetas, barras de navegación y mucho más, así como también un set de widgets JavaScript para dotas de más interactividad a nuestras aplicaciones, los cuales nos permiten crear sliders, ventanas modales, efectos de scroll y mucho más. Cada uno de estos los veremos en detalle en el curso

 

Estructura del Megacurso de Bootstrap 4

1- Introducción

Empezaremos viendo la información acerca de Bootstrap, versiones, cambios, herramientas necesarias y las diferentes formas de instalar o configurar Bootstrap 4.

 

2- Fundamentos

Veremos que es un framework y cuales son las ventajas de usarlo, los fundamentos de flexbox, las nuevas unidades de medidas Css Rem y Em y como usar estilos personalizados para dar a nuestras desarrollos ese toque personal que necesitemos.

 

3- Sistema de Rejilla

El fundamento principal de Bootstrap 4 está en su sistema de rejilla (contenedor, filas y columnas). En este capítulo nos enfocaremos en el mismo para que puedas entenderlo de manera práctica y usarlo en todos tus desarrollos. Verás los prefijos para las columnas en resolución pequeña (-sm), mediana (-md), larga (-lg) y extra larga (-xl) y como distribuirlas y manejarlas en cada resolución.

 

4- Flexbox en Boostrap 4

En este nueva versión de Bootstrap se ha introducido Flexbox y en este capítulo te explicaré en detalle cómo usarlo, cuales son las clases de flexbox que podemos usar y favorecernos de ellas para lograr una mejor precisión en el posicionamiento de nuestros contenidos.

 

5- Tipografía

Capítulo dedicado a todo lo referente al trabajo con tipografía, encabezados de texto, párrafos, como alinear texto y también como es bien sabido a partir de la versión 4 ya no existen los glyphicons, en su lugar te enseñaré cómo usar un servicio muy popular y de calidad como son los íconos de Font Awesome.

 

6- Utilidades

A parte de todo lo visto hasta el momento, Bootstrap nos provee de utilidades o clases que nos ayudan a lograr tareas que necesitamos constantemente como posicionar o flotar elementos, manejar tamaños y bordes, colores de fondo margen (margin), margen interno (padding). Te mostraré todas las clases Css las cuales solo debemos usar y así nos ahorramos muchísimo trabajo.

 

7- Componentes Css

Llegamos a otro de los pilares de Bootstrap 4, los componentes Css con los cuales podremos crear todo tipo de elementos para nuestros proyectos: Botones, Barras de Navegación, Formularios, Grupos de Listas, Alertas, Barras de Progreso y mucho más. Los cuales te enseñaré en este capítulo en profundidad.

 

8- Widgets Javascript

En este capítulo aprenderás a usar los widgets que nos provee Bootstrap para crear: Tooltips, Carrusel de imágenes (Slider), Efectos de Acordeón, Ventanas Emergentes, Ventanas Modales, Efectos de Scroll.

 

9- Proyecto 1 – Agencia Digital

Nuestro primer proyecto práctico, donde pondremos en práctica todo lo aprendido hasta el momento creando un sitio completo y de calidad con un efecto de scroll muy bonito al navegar sobre todas las secciones.

 

10- Proyecto 2 – Admin App

Segundo proyecto práctico y para que puedas tener los conocimientos profesionales y crear cualquier tipo de layout en este nos enfocaremos en la creación de un panel de control para un sitio de ecommerce.

 

11- Proyecto 3 – Mi Portafolio

En este capítulo crearemos mi portafolio personal y será un layout completamente diferente al primer y segundo proyecto. Porque la idea de este curso es crear proyectos diferentes que pongan a prueba nuestros conocimientos y que al final tengas los conocimientos para crear cualquier tipo de interfaz, no importa la dificultad que plantee.

 

¿Porque Debes Aprender Bootstrap?

Es importante aprender Bootstrap porque es una de las tecnologías de mayor demanda en las empresas a nivel mundial ya que agiliza la creación de los sitios web sin tener que escribir o escribir poco código CSS y obtener así sitios adaptables a dispositivos móviles y en general a todos los dispositivos.

Ya sea que quieras trabajar en una gran compañía o crear el sitio web o aplicación para alguna, conocer Bootstrap es muy importante. Es por eso que mi objetivo en este curso es convertirte en un profesional de Bootstrap.

 

El curso consta de más de 70 clases y más de 14 horas de contenido en las que tendrás acceso a todo el código del curso, soporte a través de la sección de preguntas y respuestas para cualquier duda que tengas.

 

Mi nombre es José Andrés creado y administrador de render2web creador del: Mega Curso de Wordpress de Cero a Maestro

(Recuerda que si no te gusta el curso te devolvemos tu dinero en 30 días.)

Si aún no estás convencido, te invito a que mires los videos gratuitos del curso y así podrás ver todo el contenido desarrollado y el demo de los proyectos prácticos.

Show more

User Reviews

Course rating

2 reviews
5 - stars100%
4 - stars0%
3 - stars0%
2 - stars0%
1 - star0%

Featured Review

avatar
Ariel Bernardo
2 days ago

muy bien explicado el contenido del curso

More Reviews

avatar
Fabian Mendoza
4 weeks ago
Verified learner

Excelente curso de bootstrap, súper recomendable!