Ejercicio de programación con Bootstrap: Proyecto blog de artículos con Bootstrap CSS
Proyecto
0h 50m
Ejercicios de programación de Bootstrap CSS proyecto real: desarrolla un blog con grid interactivo, navegación dinámica y diseño responsive usando HTML y clases de Bootstrap CSS.
Configurar el entorno:
- Abre Visual Studio Code.
Crear index.html
:
- Crea la estructura principal y añade Bootstrap CSS desde CDN.
- Añade una barra de navegación con un logo en la parte superior.
- Incluye un hero debajo de la barra de navegación.
- Implementa un grid de 3 columnas para mostrar los artículos:
- Cada tarjeta de artículo debe contener una imagen, título y breve descripción.
- Aplica un efecto de hover usando clases de Bootstrap CSS.
- Asegura que al hacer clic en toda la tarjeta se navega a la página del artículo correspondiente.
- Añade un footer con un logo y tres columnas de enlaces ficticios.
Crear las páginas de artículos (articulo1.html
, articulo2.html
, articulo3.html
):
- Crea la estructura principal y añade Bootstrap CSS desde CDN.
- Cada página debe tener un hero con un h1 que muestre el título del artículo.
- Añade el contenido textual del artículo debajo del hero.
- A la derecha, incluye un aside con una lista de los otros dos artículos:
- Cada elemento debe ser una tarjeta pequeña con imagen y título.
- Los enlaces deben dirigir a las otras páginas de artículos.
- Agrega una lista de comentarios predefinidos al final del artículo.
Estilizar con Bootstrap CSS:
- Utiliza clases de Bootstrap CSS para dar estilo a todos los elementos.
- Asegura la consistencia del diseño entre todas las páginas.
- No utilices CSS personalizado ni estilos inline.
Hacer el diseño responsive:
- Aplica utilidades responsive de Bootstrap CSS para que el sitio se vea bien en dispositivos móviles, tabletas y ordenadores.
- Verifica que el grid de artículos y el layout se ajusten correctamente en diferentes tamaños de pantalla.
Enlazar y probar:
- Verifica que todos los enlaces de navegación y de los artículos funcionan correctamente.
- Prueba el efecto hover en las tarjetas de artículos.
- Abre cada página en un navegador y comprueba que el diseño y la funcionalidad cumplen con los requisitos.
Optimizar y finalizar:
- Revisa el código para eliminar cualquier elemento innecesario.
- Asegúrate de que todo el contenido está correctamente estructurado y semánticamente correcto.
Más ejercicios de programación con Bootstrap
Evalúa tus conocimientos en Bootstrap con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.
Listado y formulario de productos en Bootstrap CSS
Proyecto
Utilidades de colores y fondo
Código
Instalación de Bootstrap
Código
Tipografía y fuentes en Bootstrap
Puzzle
Clases de utilidad
Código
Flexbox en Bootstrap
Puzzle
Utilidades de espaciado y alineación
Puzzle
Conocimiento general de Bootstrap
Código
Conocimiento general de Bootstrap
Test
Fundamentos del sistema de grid de Bootstrap
Código
Imágenes responsive en Bootstrap
Código
Introducción a Bootstrap
Test
Formularios y validación
Código
Modales y ventanas emergentes
Test
Navbars y menús de navegación en Bootstrap
Puzzle
Componentes de Bootstrap
Código
Certificados de superación de Bootstrap
Supera todos los retos de Bootstrap y obtén certificados de superación para mejorar tu currículum y empleabilidad.
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio
Visual Studio Code
GitHub