Megacurso de Bootstrap 4 de Cero a Maestro
4.1 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
119 students enrolled

Megacurso de Bootstrap 4 de Cero a Maestro

Crea sitios y aplicaciones web de calidad profesional adaptables a todos los dispositivos y resoluciones con Bootstrap 4
4.1 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
119 students enrolled
Last updated 8/2020
Spanish
Spanish [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 15 hours on-demand video
  • 1 article
  • 46 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 72 lectures 14:59:17
+ Introducción
5 lectures 54:24

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).

Preview 07:16

Algunas de las nuevas funciones son: Estilos Flat, más clases de CSS para los colores, clases Outline, flexbox, entre otras.

Preview 07:09

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.

Instalación de Herramientas para el Curso
13:51

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.

Instalación de Bootstrap en Local
17:50

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.

Instalación de Bootstrap desde CDN
08:18
+ Fundamentos
5 lectures 01:09:11

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.

Preview 12:49

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.

Preview 14:29

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.

Fundamentos de Flexbox
26:06

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

Puntos de Quiebre Bootstrap 4
10:08

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.

Estilos Css Personalizados
05:39
+ Sistema de Rejilla
5 lectures 54:35

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.

Rejilla Responsive
13:27

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

Ancho Igual, Multifila, Auto Layout y Ordenamiento
16:24

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.

Compensado u Offset
05:20

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.

Alineación de la Rejilla con Flexbox
15:30

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

Anidación de Rejilla
03:54
+ Flexbox en Bootstrap
2 lectures 20:47

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

Clases de Flexbox en Bootstrap
14:25

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

Auto Margen y Envolvente (Wrap)
06:22
+ Tipografía
3 lectures 43:10

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

Encabezados y Tipografía
22:24

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

Alineación de Texto y Display
15:17

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

Iconos de Font Awesome
05:29
+ Utilidades
4 lectures 01:02:12

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

Posicionamiento y Flotado
17:00

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

Margen (Margin) y Margen Interna (Padding)
17:02

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

Tamaños y Bordes
13:09

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

Fondos y Colores
15:01
+ Componentes CSS
15 lectures 03:16:49

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.

Preview 04:46

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

Botones Parte 1
19:03

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

Botones Parte 2
17:56

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.

Navbars (Barras de Navegación)
22:31

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

Formularios y Campos de Entrada
25:50

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

Grupos de Entradas (Inputs)
16:30

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

Alertas (Alerts)
08:33

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

Barras de Progreso
07:19

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

Grupos de Listas (List Groups)
07:41

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

Insignias (Badges) y Migajas de Pan (Breadcrumbs)
08:43

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

Tablas
10:01

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

Paginacion
08:30

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.

Tarjetas Parte1
20:02

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

Tarjetas Parte 2
14:27

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

Jumbotron
04:57
+ Widgets Javascript
7 lectures 01:06:23

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

  • Tooltips

  • Carrusel

  • Colapsables

  • Acordeones

  • Ventanas emergentes

Preview 03:08

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

Tooltips
07:06

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

Carrusel (Slider)
18:06

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

Colapsable y Acordeón
10:02

Aprende como usar el widget para crear ventanas emergentes o Popovers

Ventanas Emergentes (Popover)
08:08

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

Ventanas Modales
11:43

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

Scrolls (Scroll spy y Scroll Suavizado)
08:10
+ Proyecto 1 - Agencia Digital
8 lectures 01:23:47

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

Preview 03:05

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

Logo y Barra de Navegación
23:25

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

Cabecera y Sección Inicio
14:48

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

Sección Llamado a la Acción
07:34

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

Sección Servicios
08:32

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.

Sección Galería
04:12

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

Sección Testimonios y Pie de Página
13:36

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

Animación de Scroll Javascript
08:35
+ Proyecto 2 - Admin App
10 lectures 02:30:41

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

Preview 04:55

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

Configuración - Pantalla de Acceso
20:26
Panel de Control y Barra de Navegación
25:43

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

Panel de Control - Menú Principal y Administración
18:44

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

Panel de Control - Banners
10:41

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

Panel de Control – Tabla Últimos Productos
10:08

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

Panel de Control - Sección Categorías
21:52

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

Panel de Control – Sección Productos
10:34

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

Panel de Control – Sección Inventario, Pedidos y Cupones
18:00

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

Panel de Control – Perfil
09:38
Requirements
  • Conocimientos básicos en HTML.
  • Conocimientos básicos en CSS.
  • Una computadora de escritorio o portátil (Cualquier sistema operativo).
  • Conexión a internet.
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.

Who this course is for:
  • Diseñadores y desarrolladores web que quieran aprender a maquetear sus propios diseños para sitios web y/o aplicaciones modernas y responsive usando Bootstrap 4.
  • Desarrolladores frontend que quieran aprender Bootstrap 4.
  • Desarrolladores que quieran aprender a crear sitios responsive de calidad.
  • Estudiantes que quieran convertirse en diseñadores web profesionales.
  • Estudiantes o profesionales que quieren entrar a trabajar a grandes empresas que usen Bootstrap 4.
  • Personas que deseen subir el nivel de sus conocimientos como diseñadores y desarrolladores web.
  • Personas que quieran crear el diseño de su sitio web para su empresa o negocio