Sitio web estilo blog creado con CSS grid – Stardust Blog

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

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado