Curso de Responsive Web Design & Bootstrap
En este curso aprenderás los conceptos fundamentales del diseño Responsivo, entendiendo conceptos como Content First y Mobile First, así como el trabajo con maquetado fluido, en grillas y el manejo de un Framework tan poderoso y actual como Bootstrap en su última versión. Dificultad Incluye PC Garantía de Aprendizaje
En este curso aprenderás a
- Conocer los conceptos de diseño de interfaces adaptables
- Maquetar de manera fluida y responsiva en cuanto al texto, contenedores, imágenes y demás elementos multimedia.
- Implementar media queries así como el trabajo con mínimos y máximos en el trabajo con diferentes BreakPoints.
- Saber qué es el meta Viewport y cómo utilizarlo.
- Maquetar para diferentes BreakPoints utilizando el sistema de grillas de Bootstrap.
- Entender el manejo de clases para la creación de Formularios, y barras de navegación así como de ventanas modales con Bootstrap 4
1. Introducción al diseño de sitios responsivos
¿Qué es el diseño adaptable o responsive web design?
Orígenes del diseño responsivo
¿Por qué desarrollar un sitio responsivo?
Beneficios del diseño responsivo
Diseño fluido uso y limitaciones
Uso de grillas fluidas, trabajo en porcentajes, mínimos y máximos
Mobile first, ¿qué es?, por qué ahora se habla del concepto Content First
Herramientas para crear grillas, frameworks online para trabajar desde el diseño
Box-sizing cómo es, y qué valor aplicar.
Mi primer diseño y maquetado en grillas
2. Maquetación fluida
Utilización de em y rem diferencias
Tipografías adaptables
Márgenes y rellenos flexibles
Cómo hacer que un video o un elemento de multimedia no pierda su proporción aún siendo adaptable.
Trabajo con Media Queries
Variantes de mediaQueries
Concepto de Viewport, cómo aplicarlo, valores posibles.
Concepto de breakpoint, breakPoints actuales, aplicación
Imágenes fluidas y adaptables, utilización de máximos y mínimos en imágenes
Qué es el menú hamburguesa, cómo se usa?
Mi maquetado, incluyendo conceptos vistos y cambio de menú standard a menú hamburguesa
3. Introducción a Bootstrap
Concepto de framework
Frameworks de CSS, cuántos hay , cuáles son los más importantes.
Beneficios de trabajar con frameworks
Introducción a Bootstrap
Qué es la clase container y container-fluid, diferencias
Sistema de grillas o grid con Bootstrap
Clase .row cómo se utiliza?
Opciones de Grid, aplicación de clases como col, col-sm, col-md, col-lg, col-xl
Personalizando botones e imágenes con Bootstrap
Clases para textos y fondos
4. Bootstrap Avanzado
Trabajo con Bootstrap en Formularios
Utilización de la clase form-group y form-control
Formularios inline , checkboxes , selects y radios
Trabajo con grillas y formularios
Clases col-form , sr-only y col-form-label
Barras de menú básicas y responsives con Bootstrap
Uso de JS en Bootstrap cómo y cuándo
Trabajo con campos de formulario dentro de Menúes
Uso de la ventana Modal en Bootstrap
Modalidad de cursado
Modalidad Presencial
- Cursos 100% prácticos con grupos reducidos.
- Clases con uso de PC, una por alumno (no tienes que traer tu PC).
- Coffee Break incluido.
- Espacio de networking.
- Posibilidad de volver a tomar el mismo curso gratis.
Modalidad Distancia
- Cursos 100% prácticos con grupos reducidos.
- Clase en tiempo real por video conferencia.
- Profesor disponible para hacer consultas en vivo.
- Grabación de las clases disponibles para ver en otro momento.
- Asistencia administrativa personalizada todos los días.
Certificaciones
- Diploma de asistencia impreso (solo para cursos presenciales)
- Diploma de asistencia y de aprobación online
Testimonios
Paquetes Promocionales
Recursos adicionales entregados
¿Por qué nosotros?
- No es necesario que traigas tu PC
- Todos nuestros cursos se dictan en laboratorios donde cada alumno tiene su propia PC
- Las clases son 70% prácticas por lo que vas a estar trabajando toda la clase
