Curso profesional de BOOTSTRAP 4
DESCRIPCIÓN DEL CURSO
Bootstrap es el framework HTML + CSS + JS más popular del mundo. Mediante un conjunto de sencillas, pero potentes funciones CSS y Javascript, facilita el desarrollo rápido de páginas web responsive, utilizando la filosofía MOBILE FIRST.
En este curso COMPLETO de BOOTSTRAP, aprenderás a diseñar páginas web responsive, utilizando el sistema de rejilla, que constituye la base del desarrollo con Bootstrap, así como los potentes componentes y Plugins que proporciona este excelente framework.
BENEFICIOS DE UTILIZAR BOOTSTRAP:
- Mejora la Velocidad de desarrollo:
Existe mucho código CSS, HTML y Javascript escrito, listo para ser usado. - 100% Personalizable:
Podemos modificar los estilos CSS con facilidad, agregando nuestras propias hojas de estilos a nuestros proyecto. - Gran comunidad:
Existe una amplia comunidad online detrás de Bootstrap. Cientos de personas proponiendo soluciones a tus dudas, plugins adicionales y código listo para usar, por lo que te será fácil encontrar respuesta a tus dudas en caso de que estas surjan. - Facilita el trabajo en Equipo:
Bootstrap define un estándar a la hora de desarrollar. Cualquier persona que conozca Bootstrap podrá integrarse fácilmente en el diseño de tus proyectos. Ideal para empresas de diseño web.
¿CÓMO ESTÁ ESTRUCTURADO ESTE CURSO?
Empezamos por entender el concepto clave “La filosofía Mobile First”, para luego empezar a crear el diseño del sitio completo desde 0, usando “Adobe Illustrator CC” (No necesitas conocerlo, nosotros te enseñamos a dominarlo).
Luego procedemos a crear el diseño del sitio usando solo HTML5 y CSS3 sin usar Bootstrap 4. Esto te permitirá entender la manera en la que Bootstrap influye en el desarrollo de tu proyecto.
El siguiente paso es entender a la perfección el nuevo modelo de caja “Flexbox (Flexible Box)” y hemos dedicado una sección completa, de más de 5 horas de grabación. También creamos 3 mini-proyectos con situaciones concretas para que entiendas perfectamente cómo aplicar flexbox en sitios web reales.
Luego pasaremos a explicarte el uso de Bootstrap y todas las novedades que nos trae la versión 4 y profundizaremos en todos los conceptos necesarios para implementar exitosamente este Framework en tus proyectos.
Finalmente, procederemos a implementar el sistema de columnas que maneja Bootstrap, para que cada caja HTML se adapte a cualquier dispositivo.
PIENSA EN MÓVIL CON MOBILE FIRST!
La mayoría de nuestros clientes están visitando nuestro sitio desde dispositivos móviles, entonces ¿Porque no optimizar nuestros proyectos pensando primero en MÓVIL?.
En eso consiste la filosofía MOBILE FIRST, pero: ¿Cómo aplicamos esta forma de pensar en nuestro flujo de trabajo?.
MIRA EL SITIO QUE CONSTRUIRÁS:
Este es un curso práctico y cada cosa que te enseñemos, lo pondrás en práctica en la vida real. Este el sitio web desarrollaremos en este curso:
Ver sitio web que voy a crear en este curso
ESTE CURSO COMPLETO DE BOOTSTRAP ESTÁ DIRIGIDO:
- Cualquier diseñador o desarrollador web que quiera ser más eficiente.
- Cualquier persona interesada en aprender Bootstrap de una forma entretenida, sin extenderse en rollos teóricos y con resultados visuales en cada lección.
- Personas que ya conocen Bootstrap y quieren renovar sus conocimientos descubriendo las novedades esta nueva versión.
Detalles del curso
- Clases 120
- Cuestionarios 0
- Duración 14 horas
- Nivel Intermedio
- Estudiantes 87693
- Certificado Si
- Evaluaciones Si
Curso profesional de BOOTSTRAP 4
Módulo 1: Introducción a Bootstrap 4
Modulo 2: Trabajando con Illustrator
- Configuración inicial de AI
- Creación de una cuadrícula para Bootstrap (parte 1)
- Creación de una cuadrícula para Bootstrap (parte 2)
- Definiendo una paleta de colores
- Diseñando el Homepage Mobil – Encabezado (parte 1)
- Diseñando el Homepage Mobil – Encabezado (parte 2)
- Diseñando el Homepage Mobil – La Agencia
- Diseñando el Homepage Mobil -Tu mejor elección
- Diseñando el Homepage Mobil – Servicio
- Diseñando el Homepage Mobil – Galería de imágenes
- Diseñando el Homepage Mobil – Pié de página
- Diseñando la pagina interna para Mobil
- Creando líneas guías para la vista de Escritorio
- Diseñando el Homepage para Escritorio – Encabezado
- Diseñando el Homepage para Escritorio – La agencia
- Diseñando el Homepage para Escritorio – Tu mejor elección
- Diseñando el Homepage para Escritorio – Servicios
- Diseñando el Homepage para Escritorio – Últimos proyectos y pie de página
- Diseñando la pagina interna para Escritorio (parte 1)
- Diseñando la página interna para Escritorio (parte 2)
Modulo 3: Codificando la página inicial
- Creando la estructura de carpetas
- Instalando extensiones para Brackets
- Codificando el encabezando html5 (parte 1)
- Codificando el encabezando html5 (parte 2)
- Entendiendo el formato svg
- Codificando el html5 – La Agencia
- Codificando el html5 – Somos tu mejor elección
- Codificando el html5 – Servicios
- Codificando el html5 -Ultimos proyectos
- Codificando el html5 – Pie de pagina
Módulo 4: Dominando Flexbox
- Introducción a Flexbox
- Entendiendo Flexbox
- Regla 1 de flex
- Regla 2 de flex
- Regla 3 de flex
- Regla 4 de flex
- Regla 5 de flex
- Regla 6 de flex
- Regla 7 de flex
- Regla 8 de flex
- Regla 9 de flex (parte 1)
- Regla 9 de flex (parte 2)
- Regla 10 de flex
- Bono adicional: “Uso de Order”
- Ejemplo real 1
- Ejemplo real 2
- Ejemplo real 3 (parte 1)
- Ejemplo real 3 (parte 2)
- Ejemplo real 3 (parte 3)
- Ejemplo real 3 (parte 4)
- Recomendaciones finales
Módulo 5: Integrando Bootstrap 4
- Introducción a bootstrap 4
- Novedades de bootstrap 4
- Descargando bootstrap 4
- Compilando e implementado Bootstrap 4
- ¿Cómo trabajar con Bootstrap 4?
- Insertando archivos CSS personalizados y variables
- Insertando fuente de Google Fonts
- Creando el encabezado con Bootstrap 4
- Insertando iconos de Font Awesome
- Creando el bloque buscar
- Creando el bloque Menú principal
- Creando elementos Colapsables
- Creando el bloque de bienvenida (parte 1)
- Creando el bloque de bienvenida (parte 2)
- Finalizando el encabezado
- Sistema de columnas – Regla 1
- Sistema de columnas – Regla 2
- Sistema de columnas – Regla 3
- Sistema de columnas – Regla 4
- Sistema de columnas – Regla 5
- Sistema de columnas – Regla 6
- Sistema de columnas – Regla 7
- Sistema de columnas – Regla 8
- Sistema de columnas – Regla 9
- Sistema de columnas – Regla 10
- Creando el bloque la agencia (parte 1)
- Creando el bloque la agencia (parte 2)
- Creando el bloque tu mejor elección (parte 1)
- Creando el bloque tu mejor elección (parte 2)
- Creando el bloque tu mejor elección (parte 3)
- Creando el bloque Servicios (parte 1)
- Creando el bloque Servicios (parte 2)
- Creando el bloque Servicios (parte 3)
- Creando el bloque Último proyectos (parte 1)
- Creando el bloque Último proyectos (parte 2)
- Creando el bloque Último proyectos (parte 3)
- Creando el bloque Pie de pagina (parte 1)
- Creando el bloque Pie de pagina (parte 2)
Módulo 6: De Mobile First a Desktop
Módulo 7: Codificando la páginas internas
- Codificando la página nosotros (parte 1)
- Codificando la página nosotros (parte 2)
- Codificando la página nosotros (parte 3)
- Codificando la página nosotros (parte 4)
- Codificando la página servicios (parte 1)
- Codificando la página servicios (parte 2)
- Codificando la página servicios (parte 3)
- Codificando la página contacto (parte 1)
- Codificando la página contacto (parte 2)
- Codificando la página contacto (parte 3)
Módulo 8: Insertando Funciones complementarias
- Cargando imágenes condicionales con css3
- Creando animaciones con wow y animate (parte 1)
- Creando animaciones con wow y animate (parte 2)
- Creando efectos parallax de imágenes con CSS
- Creando efectos de deslizamiento con SmoothScroll.js
- Creando un encabezado animado
- Creando un favicon para nuestro proyecto
Módulo 9: El siguiente paso