- Cursos
- Tecnología
- Desarrollo Web
- Master en Bootstrap 4 de Cero a 100
Master en Bootstrap 4 de Cero a 100
Crea sitios y aplicaciones web de calidad profesional adaptables a todos los dispositivos y resoluciones
Desarrollador Front-end
Haz de tu sueño tu profesión y empieza una Carrera desde 12€/mes
AccederDescripción del curso
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 qué es un framework y cuales son las ventajas de usarlo, los fundamentos de flexbox, las nuevas unidades de medidas Css Rem y Em y cómo 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 cómo 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 iconos 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.
¿Por qué 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.
Contenido del curso
Introducción
54:29- Qué es Bootstrap07:17
- Nuevas Funciones en Bootstrap 407:10
- Instalación de Herramientas para el Curso13:52
- Instalación de Bootstrap en Local17:51
- Instalación de Bootstrap desde CDN08:19
Fundamentos
01:09:16- Que es un Framework y Porque Usarlo12:50
- Unidades de Medida CSS Rem y Em14:30
- Fundamentos de Flexbox26:07
- Puntos de Quiebre Bootstrap 410:09
- Estilos Css Personalizados05:40
Sistema de Rejilla
54:40- Rejilla Responsive13:28
- Ancho Igual, Multifila, Auto Layout y Ordenamiento16:25
- Compensado u Offset05:21
- Alineación de la Rejilla con Flexbox15:31
- Anidación de Rejilla03:55
Flexbox en Bootstrap
20:49- Clases de Flexbox en Bootstrap14:26
- Auto Margen y Envolvente (Wrap)06:23
Tipografía
43:13- Encabezados y Tipografía22:25
- Alineación de Texto y Display15:18
- Iconos de Font Awesome05:30
Utilidades
01:02:16- Posicionamiento y Flotado17:01
- Margen (Margin) y Margen Interna (Padding)17:03
- Tamaños y Bordes13:10
- Fondos y Colores15:02
Componentes CSS
03:17:04- Introducción a la Sección04:47
- Botones Parte 119:04
- Botones Parte 217:57
- Navbars (Barras de Navegación)22:32
- Formularios y Campos de Entrada25:51
- Grupos de Entradas (Inputs)16:31
- Alertas (Alerts)08:34
- Barras de Progreso07:20
- Grupos de Listas (List Groups)07:42
- Insignias (Badges) y Migajas de Pan (Breadcrumbs)08:44
- Tablas10:02
- Paginación08:31
- Tarjetas Parte120:03
- Tarjetas Parte 214:28
- Jumbotron04:58
Widgets Javascript
01:10:05- Introducción a la sección03:09
- Tooltips07:07
- Carrusel (Slider)18:07
- Colapsable y Acordeón10:03
- Ventanas Emergentes (Popover)11:44
- Ventanas Modales11:44
- Scrolls (Scroll spy y Scroll Suavizado)08:11
Proyecto 1 - Agencia Digital
01:23:55- Demo del Proyecto Final03:06
- Logo y Barra de Navegación23:26
- Cabecera y Sección Inicio14:49
- Sección Llamado a la Acción07:35
- Sección Servicios08:33
- Sección Galería04:13
- Sección Testimonios y Pie de Página13:37
- Animación de Scroll Javascript08:36
Proyecto 2 - Admin App
02:30:51- Demo del Proyecto Final04:56
- Configuración - Pantalla de Acceso20:27
- Panel de Control y Barra de Navegación25:44
- Panel de Control - Menú Principal y Administración18:45
- Panel de Control - Banners10:42
- Panel de Control – Tabla Últimos Productos10:09
- Panel de Control - Sección Categorías21:53
- Panel de Control – Sección Productos10:35
- Panel de Control – Sección Inventario, Pedidos y Cupones18:01
- Panel de Control – Perfil09:39
Proyecto 3 - Mi Portafolio
01:36:55- Demo del Proyecto Final06:13
- Configuraciones Iniciales y Librerías13:13
- Maquetación del Header, Imagen y Botones del Menú23:22
- Contenido y Colapsable Sección Inicio13:17
- Maquetación Sección Currículum10:49
- Maquetación Sección Trabajos15:07
- Maquetación Sección Contacto14:54
Valoraciones
- 5 ESTRELLAS100%
- 4 ESTRELLAS0%
- 3 ESTRELLAS0%
- 2 ESTRELLAS0%
- 1 ESTRELLAS0%
Juan RamonSaludes RodriguezIncluir valoración media (en números)- EmilioEsteve PeiroIncluir valoración media (en números)
Francisco JavierGascón HernandezIncluir valoración media (en números)
AlejandroBerga CamonIncluir valoración media (en números)
César AlbertoEscobar SimancasIncluir valoración media (en números)
Raymundo ApolinarVasquez FrielsonIncluir valoración media (en números)Me gusta al explicacion
RafaelAguirre FiguerasIncluir valoración media (en números)Estoy empezando pero pinta muy bien
¿Por qué pagar por un curso cuando puedes tenerlos todos?
Prueba la Suscripción ahoraO quiero saber más
