En este nuevo curso de la «UNIVERSIDAD BOOTSTRAP», crearemos la interfase del sitio web de la comunidad WordPress.org. Un sitio web real, con un diseño atractivo, moderno y relativamente complejo, pero nosotros lo haremos desde CERO usando Bootstrap 4.
Así que prepárate para pasar al siguiente nivel, con este curso de Bootstrap avanzado. Aquí aprenderás, desarrollando un proyecto web real desde sus cimientos, usando toda la potencia de Bootstrap 4.
¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO DE BOOSTRAP?
El curso se divide en varias secciones. Empezamos con la instalación de las herramientas necesarias para trabajar, luego realizamos la descarga e instalación rápida de Bootstrap 4 en nuestra PC.
Después procedemos a codificar cada sección de la página usando Bootstrap 4. Verás la implementación del sistema de columnas de Bootstrap y su personalización en función a los requerimientos de nuestro diseño.
También veremos la integración de las librerías como: «Font Awesome 5″, «Rd Menu», Universal Parallax, etc.
No esperes más, APRENDE A CREAR UN SITIO WEB REAL, utilizando toda la potencia de BOOTSTRAP 4.
Un abrazo y nos vemos dentro del curso.
Currículum
- 10 secciones
- 88 lecciones
- Duración
Expandir todas las seccionesPlegar todas las secciones
- Módulo 1: Introducción al Curso5
- Módulo 2: Personalización de Bootstrap y Colores9
- 2.1Instalacio?n de Bootstrap 46 minutos
- 2.2Creando patrones de colores10 minutos
- 2.3Personalizando las VARIABLES de Bootstrap9 minutos
- 2.4Las Variables de Bootstrap “Primary” y “Secondary”10 minutos
- 2.5Las Variables de Bootstrap “Rounded”, “Shadows” y “Gradients”7 minutos
- 2.6Las Variables de Bootstrap “Spacing”9 minutos
- 2.7Las Variables de Bootstrap “Link”8 minutos
- 2.8Las Variables de Bootstrap “Border-radius”6 minutos
- 2.9Las Variables de Bootstrap “Font-family-base”7 minutos
- Módulo 3: Creando el encabezado del sitio29
- 3.1Analizando el disen?o del encabezado7 minutos
- 3.2Conociendo RD-Navbar5 minutos
- 3.3Descargando e Instalando Rd-navbar7 minutos
- 3.4Creando la estructura básica de RD-navbar10 minutos
- 3.5Inicializando la libreria Rd-navbar (parte 1)7 minutos
- 3.6Inicializando la libreria Rd-navbar (parte 2)7 minutos
- 3.7Insertando una caja de búsqueda en el encabezado9 minutos
- 3.8Instalando Font Awesome 54 minutos
- 3.9Aplicando estilos CSS a la caja de búsqueda9 minutos
- 3.10Aplicando estilos CSS al boton buscar6 minutos
- 3.11Posicionando el Logo y el buscador para el contexto MD10 minutos
- 3.12Trabajando con los “Responsive Containers” (parte 1)7 minutos
- 3.13Trabajando con los “Responsive Containers” (parte 2)3 minutos
- 3.14Definiendo un menu móvil “Fijo”7 minutos
- 3.15Aplicando estilos CSS al boton móvil11 minutos
- 3.16Creando el menu colapsable móvil10 minutos
- 3.17Creando los enlaces del menu móvil9 minutos
- 3.18Estilizando los enlaces del menu móvil6 minutos
- 3.19Estilizando los Sub enlaces del menu móvil (Parte 1)5 minutos
- 3.20Estilizando los Sub enlaces del menu móvil (Parte 2)5 minutos
- 3.21Estilizando los iconos de los Submenus (Parte 1)10 minutos
- 3.22Estilizando los iconos de los Submenus (Parte 2)10 minutos
- 3.23Estilizando el boton “Get WordPress” (Version Mobil)4 minutos
- 3.24Estilizando los enlaces principales del menu (Version escritorio)10 minutos
- 3.25Estilizando el boton “Get WordPress” (Version escritorio)11 minutos
- 3.26Estilizando el estado hover del menu (Version Escritorio)2 minutos
- 3.27Personalizando la apariencia del menu desplegable (Version escritorio)10 minutos
- 3.28Creando un icono con CSS para el Menu desplegable9 minutos
- 3.29Personalizando el estado hover de los Submenu (Version escritorio)6 minutos
- Módulo 4: Creando la sección "Descargar Wordpress"3
- Módulo 5: Sección Bienvenidos e Idiomas4
- Módulo 6: Sección Backend8
- 6.1Definiendo la estructura html de la sección Backend6 minutos
- 6.2Estilizando el encabezado de la sección Backend9 minutos
- 6.3Creando el disen?o de las imágenes responsive (parte 1)6 minutos
- 6.4Creando el disen?o de las imágenes responsive (parte 2)9 minutos
- 6.5Creando el disen?o de las imágenes responsive (parte 3)6 minutos
- 6.6Insertando la imagen de un móvil al disen?o8 minutos
- 6.7Optimizando el disen?o para el contexto LG9 minutos
- 6.8Estilizando el encabezado inferior de la sección Backend6 minutos
- Módulo 7: Creando la Sección Proyectos2
- Módulo 8: Creando la Sección Características18
- 8.1Creando el encabezado de la sección Características8 minutos
- 8.2Iniciando la creacio?n del sistema de columnas para la vista movil5 minutos
- 8.3Personalizando el icono de la primera Columna5 minutos
- 8.4Creacio?n de todos los iconos del sistema de columnas9 minutos
- 8.5Creando 6 columnas para el contexto Md3 minutos
- 8.6Introduccio?n a la Pseudo Clase NTH-CHILD7 minutos
- 8.7Realizando selecciones avanzadas con NTH-CHILD (parte 1)7 minutos
- 8.8Realizando selecciones avanzadas con NTH-CHILD (parte 2)2 minutos
- 8.9Definiendo bordes verticales y horizontales para la vista móvil11 minutos
- 8.10Definiendo bordes verticales y horizontales para la vista escritorio11 minutos
- 8.11Optimizando el disen?o y modificando el container-lg12 minutos
- 8.12Creando el encabezado final de la seccio?n6 minutos
- 8.13Introducción a las Row-Columns (row-cols-n)2 minutos
- 8.14Entendiendo las columnas en el sistema de Row-Columns3 minutos
- 8.15Ejemplo pra?ctico del uso de las “Row Columns”9 minutos
- 8.16Las “Row Columns” por contextos5 minutos
- 8.17Modificando una columna individual dentro de las “Row Cols”10 minutos
- 8.18Corrigiendo el comportamiento de columnas individuales6 minutos
- Módulo 9: Creando la Sección Comunidad y Familia4
- Módulo 10: Sección Pie de página6
- 10.1Analizando la estructura HTML del pie de pa?gina7 minutos
- 10.2Estilizando el pie de pagina con las clases de Bootstrap8 minutos
- 10.3Insertando las “Row Columns” para el contexto Sm,Md y Lg4 minutos
- 10.4Insertando el favicon, titulo del sitio y solucionando errores ba?sicos5 minutos
- 10.5Optimizando los archivos CSS y Js del proyecto3 minutos
- 10.6Subiendo el sitio a un servidor real y palabras de despedida4 minutos
Caracteristicas
- Aprenderá crear el diseño de un sitio web real (Wordpress*org) utilizando Bootstrap 4.
- Sabrás personalizar los archivos fuentes de Bootstrap 4 (Sass).
- Modificar las clases de espaciado personalizadas de Bootstrap 4 (p-0 hasta p-10 y m-0 hasta m-10).
- Aprenderá a personalizar los componentes de Bootstrap 4 y adaptarlos a nuestros requerimientos.
- Aprende a crear tus propios diseños únicos y personalizados usando la última versión Bootstrap 4.
- Conocerás las novedades de Bootstrap 4: Contenedores Responsive y las columnas prediseñadas (row-cols-*) mirando su comportamiento con ejemplos reales.