Este es un sitio web estilo blog creado con CSS grid llamado Stardust Blog. Este es el sexto Proyecto parte de mi reto personal #100sitioswebchallenge.
Puedes encontrar el proyecto en línea en: Stardust Blog
DESAFÍOS
Este proyecto presentó una diferencia de estilos comparado con los anteriores.
En este caso usé CSS grid para el estilo del blog, para que de esta manera se pudiera visualizar las entradas del blog en la parte izquierda y en la parte derecha usando la etiqueta <aside> como parte del html semántico.
También quise usar dos tipografías distintas entre el texto del cuerpo y los títulos. Usando san-serif para los párrafos con texto y serif para los títulos.
PROCESO
Paleta de colores y estilos
Estos fueron los estilos y la paleta de colores que usé:
Paleta de colores: FB938F F2CAC8 C36B85 FDBB75 colours.cafe
Tipografía: Lora y Montserrat
Íconos: Font Awesome
Mockup (Bosquejo)
Siempre empiezo a plasmar mi idea en un cuaderno y poco a poco va agarrando forma en su proceso con Figma.
A continuación, puedes ver el proceso desde la concepción, después el bosquejo y por último pasarlo a código para su visualización.
HTML y CSS
Mi editor de cajón es Visual Studio Code aunque también tengo instalado Sublime sobre todo para accesos rápidos. Pero VS Code me ofrece muchas plugins que me hace ahorrar mucho tiempo a la hora de crear el sitio.
Sitio web responsivo
Esta es la visualización del sitio, al hacer todas las columnas como 1fr para que aparezcan ordenadas de manera horizontal.
Publicación del sitio
Consulta el código en Github
Visita el sitio web en vivo con Netlify: Stardust Blog
Información técnica
- Figma – Diseño de bosquejo
- VS Code
- HTML5 (Semántico)
- CSS (Grid)
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Déjame tus comentarios y sugerencias, este fue el sitio web estilo blog creado con CSS grid llamado Stardust Blog
