Logo de Aulaideal

Curso Universidad Bootstrap 4 – Creamos el diseño del sitio WordPress.org

¿DE QUÉ SE TRATA ESTE CURSO DE BOOTSTRAP?

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.

curso de bootstrap avanzado

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

DESPUÉS DE TOMAR ESTE CURSO:

  • Aprenderá crear el diseño de un sitio web real (WordPress*org) utilizando Bootstrap 4.
  • Conocerás las novedades de Bootstrap 4: Contenedores Responsive (.container-md,.container-lg, etc ) y las columnas prediseñadas (row-cols-*), mirando su comportamiento con . ejemplos reales.
  • 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.
  • Aprenderá a insertar iconos de Font Awesome  5.
  • Aprende a crear tus propios diseños únicos y personalizados usando la última versión Bootstrap 4.

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.

Detalles del curso

  • Clases 88
  • Cuestionarios 0
  • Duración 7 horas
  • Nivel Intermedio
  • Estudiantes 11
  • Certificado Si
  • Evaluaciones Si
Regresar al curso

Curso Universidad Bootstrap 4 – Creamos el diseño del sitio WordPress.org

  • Módulo 1: Introducción al Curso
  • Módulo 2: Personalización de Bootstrap y Colores
    • Clase2.1
      Instalación de Bootstrap 4 06 min
    • Clase2.2
      Creando patrones de colores 10 min
    • Clase2.3
      Personalizando las VARIABLES de Bootstrap 09 min
    • Clase2.4
      Las Variables de Bootstrap “Primary” y “Secondary” 10 min
    • Clase2.5
      Las Variables de Bootstrap “Rounded”, “Shadows” y “Gradients” 07 min
    • Clase2.6
      Las Variables de Bootstrap “Spacing” 09 min
    • Clase2.7
      Las Variables de Bootstrap “Link” 08 min
    • Clase2.8
      Las Variables de Bootstrap “Border-radius” 06 min
    • Clase2.9
      Las Variables de Bootstrap “Font-family-base” 07 min
  • Módulo 3: Creando el encabezado del sitio
    • Clase3.1
      Analizando el diseño del encabezado 07 min
    • Clase3.2
      Conociendo RD-Navbar 05 min
    • Clase3.3
      Descargando e Instalando Rd-navbar 07 min
    • Clase3.4
      Creando la estructura básica de RD-navbar 10 min
    • Clase3.5
      Inicializando la libreria Rd-navbar (parte 1) 07 min
    • Clase3.6
      Inicializando la libreria Rd-navbar (parte 2) 07 min
    • Clase3.7
      Insertando una caja de búsqueda en el encabezado 09 min
    • Clase3.8
      Instalando Font Awesome 5 04 min
    • Clase3.9
      Aplicando estilos CSS a la caja de búsqueda 09 min
    • Clase3.10
      Aplicando estilos CSS al boton buscar 06 min
    • Clase3.11
      Posicionando el Logo y el buscador para el contexto MD 10 min
    • Clase3.12
      Trabajando con los “Responsive Containers” (parte 1) 07 min
    • Clase3.13
      Trabajando con los “Responsive Containers” (parte 2) 03 min
    • Clase3.14
      Definiendo un menu móvil “Fijo” 07 min
    • Clase3.15
      Aplicando estilos CSS al boton móvil 11 min
    • Clase3.16
      Creando el menu colapsable móvil 10 min
    • Clase3.17
      Creando los enlaces del menu móvil 09 min
    • Clase3.18
      Estilizando los enlaces del menu móvil 06 min
    • Clase3.19
      Estilizando los Sub enlaces del menu móvil (Parte 1) 05 min
    • Clase3.20
      Estilizando los Sub enlaces del menu móvil (Parte 2) 05 min
    • Clase3.21
      Estilizando los iconos de los Submenus (Parte 1) 10 min
    • Clase3.22
      Estilizando los iconos de los Submenus (Parte 2) 10 min
    • Clase3.23
      Estilizando el boton “Get WordPress” (Version Mobil) 04 min
    • Clase3.24
      Estilizando los enlaces principales del menu (Version escritorio) 10 min
    • Clase3.25
      Estilizando el boton “Get WordPress” (Version escritorio) 11 min
    • Clase3.26
      Estilizando el estado hover del menu (Version Escritorio) 02 min
    • Clase3.27
      Personalizando la apariencia del menu desplegable (Version escritorio) 10 min
    • Clase3.28
      Creando un icono con CSS para el Menu desplegable 09 min
    • Clase3.29
      Personalizando el estado hover de los Submenu (Version escritorio) 06 min
  • Módulo 4: Creando la sección "Descargar Wordpress"
    • Clase4.1
      Creando la estructura html de la sección Descargas 08 min
    • Clase4.2
      Creando el diseño para la vista Movil 06 min
    • Clase4.3
      Creando el diseño para la vista SM y superiores 06 min
  • Módulo 5: Sección Bienvenidos e Idiomas
    • Clase5.1
      Marcado HTML para al sección Bienvenidos (Diseño 1) 09 min
    • Clase5.2
      Marcado HTML para al sección Bienvenidos (Diseño 2) 08 min
    • Clase5.3
      Marcado HTML para al sección Idiomas (Diseño 1) 07 min
    • Clase5.4
      Marcado HTML para al sección Idiomas (Diseño 2) 06 min
  • Módulo 6: Sección Backend
    • Clase6.1
      Definiendo la estructura html de la sección Backend 06 min
    • Clase6.2
      Estilizando el encabezado de la sección Backend 09 min
    • Clase6.3
      Creando el diseño de las imágenes responsive (parte 1) 06 min
    • Clase6.4
      Creando el diseño de las imágenes responsive (parte 2) 09 min
    • Clase6.5
      Creando el diseño de las imágenes responsive (parte 3) 06 min
    • Clase6.6
      Insertando la imagen de un móvil al diseño 08 min
    • Clase6.7
      Optimizando el diseño para el contexto LG 09 min
    • Clase6.8
      Estilizando el encabezado inferior de la sección Backend 06 min
  • Módulo 7: Creando la Sección Proyectos
    • Clase7.1
      Descargando e instalando la libreria Universal Parallax 06 min
    • Clase7.2
      Definiendo el contenido de la sección Proyectos 09 min
  • Módulo 8: Creando la Sección Características
    • Clase8.1
      Creando el encabezado de la sección Características 08 min
    • Clase8.2
      Iniciando la creación del sistema de columnas para la vista movil 05 min
    • Clase8.3
      Personalizando el icono de la primera Columna 05 min
    • Clase8.4
      Creación de todos los iconos del sistema de columnas 09 min
    • Clase8.5
      Creando 6 columnas para el contexto Md 03 min
    • Clase8.6
      Introducción a la Pseudo Clase NTH-CHILD 07 min
    • Clase8.7
      Realizando selecciones avanzadas con NTH-CHILD (parte 1) 07 min
    • Clase8.8
      Realizando selecciones avanzadas con NTH-CHILD (parte 2) 02 min
    • Clase8.9
      Definiendo bordes verticales y horizontales para la vista móvil 11 min
    • Clase8.10
      Definiendo bordes verticales y horizontales para la vista escritorio 11 min
    • Clase8.11
      Optimizando el diseño y modificando el container-lg 12 min
    • Clase8.12
      Creando el encabezado final de la sección 06 min
    • Clase8.13
      Introducción a las Row-Columns (row-cols-n) 02 min
    • Clase8.14
      Entendiendo las columnas en el sistema de Row-Columns 03 min
    • Clase8.15
      Ejemplo práctico del uso de las “Row Columns” 09 min
    • Clase8.16
      Las “Row Columns” por contextos 05 min
    • Clase8.17
      Modificando una columna individual dentro de las “Row Cols” 10 min
    • Clase8.18
      Corrigiendo el comportamiento de columnas individuales 06 min
  • Módulo 9: Creando la Sección Comunidad y Familia
    • Clase9.1
      Creando la estructura HTML de la sección Comunidad 09 min
    • Clase9.2
      Creando el efecto Parallax para el fondo de la sección 05 min
    • Clase9.3
      Creando la estructura HTML de la sección Familia 07 min
    • Clase9.4
      Definiendo la anchura Responsive de la sección Familia 05 min
  • Módulo 10: Sección Pie de página
    • Clase10.1
      Analizando la estructura HTML del pie de página 07 min
    • Clase10.2
      Estilizando el pie de pagina con las clases de Bootstrap 08 min
    • Clase10.3
      Insertando las “Row Columns” para el contexto Sm,Md y Lg 04 min
    • Clase10.4
      Insertando el favicon, titulo del sitio y solucionando errores básicos 05 min
    • Clase10.5
      Optimizando los archivos CSS y Js del proyecto 03 min
    • Clase10.6
      Subiendo el sitio a un servidor real y palabras de despedida 04 min

Apasionado por el Diseño y Desarrollo Web desde hace 15 años. Un amante de Wordpress, Bootstrap y de las cosas buenas de la vida.

Comentarios

Promedio

0
0 puntuación

Evaluación detallada

5
0%
4
0%
3
0%
2
0%
1
0%

¿NECESITAS AYUDA INMEDIATA?