https://github.com/rodrigobarbaedu/blog-responsive-ferret
Este repositorio es un blog responsivo que utiliza Bootstrap 5 como su framework principal. Está dedicado a compartir curiosidades fascinantes sobre hurones. En este sitio web, encontrarás una variedad de artículos informativos y entretenidos que exploran el mundo de estos adorables animales.
https://github.com/rodrigobarbaedu/blog-responsive-ferret
bootstrap css html
Last synced: about 2 months ago
JSON representation
Este repositorio es un blog responsivo que utiliza Bootstrap 5 como su framework principal. Está dedicado a compartir curiosidades fascinantes sobre hurones. En este sitio web, encontrarás una variedad de artículos informativos y entretenidos que exploran el mundo de estos adorables animales.
- Host: GitHub
- URL: https://github.com/rodrigobarbaedu/blog-responsive-ferret
- Owner: rodrigobarbaedu
- Created: 2023-09-24T23:56:52.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-25T00:56:45.000Z (almost 3 years ago)
- Last Synced: 2025-03-20T20:49:12.450Z (over 1 year ago)
- Topics: bootstrap, css, html
- Language: HTML
- Homepage: https://luisrodrigobarbanavarro.github.io/blog-responsive-ferret/blog-responsive/index.html
- Size: 1.37 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Proyecto Unidad II: Blog Responsive (Bootstrap 5) (Ferret World) 🐈
**Nombre:** Luis Rodrigo Barba Navarro
**Fecha De Creación:** 24 de Septiembre de 2023
**Descripción:** Este repositorio es un blog responsivo que utiliza Bootstrap 5 como su framework principal. Está dedicado a compartir curiosidades fascinantes sobre hurones. En este sitio web, encontrarás una variedad de artículos informativos y entretenidos que exploran el mundo de estos adorables animales.
### Explicación 🐈
He optado por emplear el framework Bootstrap 5 en este proyecto debido a sus beneficios en términos de esquematización, disposición de elementos y diseño responsivo, lo que contribuye en gran medida a la legibilidad del código.
En la fase inicial del proyecto, dediqué tiempo a considerar la distribución de los contenedores para que se asemejaran a los establecidos en las imagenes planteadas. Para lograr esto, tomé el sistema de grid que ofrece Bootstrap, dada su amplia funcionalidad. Este sistema me permitió establecer puntos de ruptura para modificar la disposición de los contenedores cuando se cambiaba de dispositivo. Su implementación resultó sencilla, ya que solo requería especificar el prefijo que determinaba la anchura del dispositivo y la cantidad de columnas que debían utilizarse.
Además, opté por utilizar contenedores fluidos para la mayoría de los elementos, donde alojé la información de las noticias, la sección "Acerca" y la sección de suscripción. Asimismo, para la sección de notas rápidas, empleé tarjetas rápidas, lo que me permitió incluir imágenes, títulos y descripciones de manera efectiva. En cuanto al pie de página, distribuí su contenido en dos columnas, reservando una para el texto informativo y la otra para la representación visual del hurón.
Cada noticia se encuentra contenida en un contenedor fluido, lo que facilitó la distribución de la información y permitió el centrado de texto e imágenes.
Adicionalmente, creé clases personalizadas que utilicé para aportar profundidad a los elementos y definir colores para los encabezados de texto. Esta elección se basó en la tendencia de estilo neomorfista, que se caracteriza por un enfoque minimalista y el uso de sombras suaves para crear un aspecto tridimensional.
Para la adaptación a diferentes dispositivos, empleé consultas de medios (media), donde realicé ajustes principalmente en elementos como el tamaño de las imágenes, los márgenes y el tamaño de la fuente. Bootstrap, en combinación con su sistema de grid, se encargó en gran medida de la responsividad de la página, lo que simplificó notablemente el proceso.
En definitiva, esta experiencia me dejó impresionado por la facilidad con la que se pueden crear páginas web utilizando Bootstrap, lo que ahorra una cantidad significativa de código y redundancias.