Contenido SCORM para el curso Desarrollo web adaptativo con Bootstrap
Este curso permite al alumnado desarrollar una página web completa y adaptativa siguiendo la filosofía responsive web design, utilizando Bootstrap como entorno de trabajo. A través del uso del sistema de columnas, Flexbox y componentes predefinidos, aprenderán a crear sitios web profesionales que se ajusten a cualquier tipo de pantalla. El contenido se basa en ejemplos prácticos que permitirán diseñar, construir y publicar su propio proyecto web desde cero.
Una formación imprescindible para centros que quieran preparar a su alumnado en el desarrollo web actual, centrado en la experiencia de usuario, la compatibilidad móvil y la rapidez de desarrollo.
Objetivos
- Desarrollar una página web completa, usando un diseño adaptativo o sensible a pantallas (filosofía responsive web design) de manera rápida y sencilla.
- Conocer cómo funciona el sistema de Grid o de columnas usando diseños de caja flexibles, que nos proporciona la capacidad de adaptación al entorno de visualización.
- Aprender a utilizar el conjunto de herramientas que Bootstrap nos ofrece, y otorgará uniformidad a tu diseño, mostrando una apariencia moderna de los elementos de nuestra web.
- Conocer cómo usar los diferentes componentes con características avanzadas, como el uso de botones, menús desplegables, listas de navegación, formularios, etc.
- Realizar muchos ejemplos prácticos que le servirán para llevar a cabo su propio proyecto.
- Crear una página web completa y operativa usando el entorno de trabajo Bootstrap.
- Aumentar sus posibilidades laborales como desarrollador o programador Front-End.
Índice
1. BOOTSTRAP: DEFINICIÓN E INSTALACIÓN
1.1. Definición
1.2. Responsive Web Design
1.3. Filosofía Mobile First Design
1.4. Instalación y configuración
2. SISTEMAS DE COLUMNAS
2.1. Entendiendo el sistema
2.2. Concepto de contenedores
2.3. Puntos de ruptura (breakpoints)
3. REGLAS DEL SISTEMA DE COLUMNAS
3.1. Reglas de filas
3.2. Reglas de columnas
4. FLEXBOX EN BOOTSTRAP
4.1. Conceptos básicos
4.2. Propiedades Flexbox
4.3. Alinear con Flexbox
5. COMPONENTES BOOTSTRAP
5.1. Lista de Componentes
5.2. Componente Navbar
5.3. Manejo de botones
5.4. Configuración de menús
5.5. Creación de un Collapse
6. CLASES DE UTILIDADES
6.1. Propiedad Display
6.2. Paginación
6.3. Carrusel (Slideshow)
6.4. Configuración de apariencias
7. FORMULARIOS
7.1. Elementos básicos
7.2. Uso de botones, checkbox y radios en formularios
8. PROYECTO WEB
8.1. Página principal
8.2. Creación de cabecera
8.3. Slides
8.4. Galería de imágenes
8.5. Formulario de contacto
8.6. Pie de página
Conceptos clave
Durante este curso, el alumnado:
- Comprenderá los principios del diseño web responsive y el enfoque mobile first.
- Aprenderá a instalar y configurar Bootstrap para proyectos web propios.
- Dominará el sistema de rejilla y Flexbox para estructurar contenido de forma adaptable.
- Utilizará componentes predefinidos como barras de navegación, botones, formularios o menús desplegables.
- Empleará clases utilitarias para aplicar estilos y efectos visuales de forma rápida.
- Aplicará formularios con validaciones y controles personalizados.
- Desarrollará un proyecto web completo con páginas funcionales y diseño profesional.
- Mejorará su perfil profesional como desarrollador web Front-End gracias a la práctica directa con uno de los frameworks más utilizados del sector.
