Lo que aprenderás
- 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.
Temario del curso
-
Módulo 1: Introducción al Curso
-
Módulo 2: Personalización de Bootstrap y Colores
- Instalación de Bootstrap 4
- Creando patrones de colores
- Personalizando las VARIABLES de Bootstrap
- Las Variables de Bootstrap «Primary» y «Secondary»
- Las Variables de Bootstrap «Rounded», «Shadows» y «Gradients»
- Las Variables de Bootstrap «Spacing»
- Las Variables de Bootstrap «Link»
- Las Variables de Bootstrap «Border-radius»
- Las Variables de Bootstrap «Font-family-base»
-
Módulo 3: Creando el encabezado del sitio
- Analizando el diseño del encabezado
- Conociendo RD-Navbar
- Descargando e Instalando Rd-navbar
- Creando la estructura básica de RD-navbar
- Inicializando la libreria Rd-navbar (parte 1)
- Inicializando la libreria Rd-navbar (parte 2)
- Insertando una caja de búsqueda en el encabezado
- Instalando Font Awesome 5
- Aplicando estilos CSS a la caja de búsqueda
- Aplicando estilos CSS al boton buscar
- Posicionando el Logo y el buscador para el contexto MD
- Trabajando con los «Responsive Containers» (parte 1)
- Trabajando con los «Responsive Containers» (parte 2)
- Definiendo un menu móvil «Fijo»
- Aplicando estilos CSS al boton móvil
- Creando el menu colapsable móvil
- Creando los enlaces del menu móvil
- Estilizando los enlaces del menu móvil
- Estilizando los Sub enlaces del menu móvil (Parte 1)
- Estilizando los Sub enlaces del menu móvil (Parte 2)
- Estilizando los iconos de los Submenus (Parte 1)
- Estilizando los iconos de los Submenus (Parte 2)
- Estilizando el boton «Get WordPress» (Version Mobil)
- Estilizando los enlaces principales del menu (Version escritorio)
- Estilizando el boton «Get WordPress» (Version escritorio)
- Estilizando el estado hover del menu (Version Escritorio)
- Personalizando la apariencia del menu desplegable (Version escritorio)
- Creando un icono con CSS para el Menu desplegable
- Personalizando el estado hover de los Submenu (Version escritorio)
-
Módulo 4: Creando la sección "Descargar Wordpress"
-
Módulo 5: Sección Bienvenidos e Idiomas
-
Módulo 6: Sección Backend
- Definiendo la estructura html de la sección Backend
- Estilizando el encabezado de la sección Backend
- Creando el diseño de las imágenes responsive (parte 1)
- Creando el diseño de las imágenes responsive (parte 2)
- Creando el diseño de las imágenes responsive (parte 3)
- Insertando la imagen de un móvil al diseño
- Optimizando el diseño para el contexto LG
- Estilizando el encabezado inferior de la sección Backend
-
Módulo 7: Creando la Sección Proyectos
-
Módulo 8: Creando la Sección Características
- Creando el encabezado de la sección Características
- Iniciando la creación del sistema de columnas para la vista movil
- Personalizando el icono de la primera Columna
- Creación de todos los iconos del sistema de columnas
- Creando 6 columnas para el contexto Md
- Introducción a la Pseudo Clase NTH-CHILD
- Realizando selecciones avanzadas con NTH-CHILD (parte 1)
- Realizando selecciones avanzadas con NTH-CHILD (parte 2)
- Definiendo bordes verticales y horizontales para la vista móvil
- Definiendo bordes verticales y horizontales para la vista escritorio
- Optimizando el diseño y modificando el container-lg
- Creando el encabezado final de la sección
- Introducción a las Row-Columns (row-cols-n)
- Entendiendo las columnas en el sistema de Row-Columns
- Ejemplo práctico del uso de las «Row Columns»
- Las «Row Columns» por contextos
- Modificando una columna individual dentro de las «Row Cols»
- Corrigiendo el comportamiento de columnas individuales
-
Módulo 9: Creando la Sección Comunidad y Familia
-
Módulo 10: Sección Pie de página
- Analizando la estructura HTML del pie de página
- Estilizando el pie de pagina con las clases de Bootstrap
- Insertando las «Row Columns» para el contexto Sm,Md y Lg
- Insertando el favicon, titulo del sitio y solucionando errores básicos
- Optimizando los archivos CSS y Js del proyecto
- Subiendo el sitio a un servidor real y palabras de despedida
Descripción
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.
Cursos Relacionados
Instructor
Erick Mines
- 33 cursos
- 231188 estudiantes
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.
Estudié Ingeniería de Sistemas y me gradué con las mejores notas en modelamiento de bases de datos, algoritmos, estructuras de datos, análisis numérico, álgebra lineal, entre otros cursos.
Adicionalmente a mis clases de universidad, siempre estuve aprendiendo de forma autodidacta sobre distintas tecnologías.
También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.
