Sitio Web para Tijuana con estilo CSS Grid

Este es un sitio web para Tijuana con estilo CSS Grid, proyecto número 17 como parte del proyecto persona #100sitioswebchallenge.

Puedes visualizar el sitio en: CSS Grid TJ

DESAFÍOS

Tratando de inspirarme en un estilo minimalista continuando con la práctica de CSS Grid empecé a construir este sencillo sitio web.

Pensando en una galería de fotografías quise jugar con los grids de las columnas y filas de cada imagen. Creo que por el momento he resuelto usar width y height en un 100% para estirar la imagen y respete el orden del mosaico que tenía como intención crear.

PROCESO

Estilos

Elegí la tipografía Montserrat de Google Fonts

Mockup (Bosquejo)

Este es el bosquejo hecho en Figma, lo cual me va dando una gran ventaja para la hora de empezar a maquetar el sitio.

Una vez que tengo listo el borrador, ahora voy limpiando el bosquejo y le voy agregando las imágenes finales.

HTML y CSS

A continuación, puedes ver un poco del proceso al estar pasando todo a HTML y CSS. Como verás en los videos uso VS Code para la maquetación del sitio lo que me permite trabajar con el proyecto en vivo a un lado para ir viendo cómo va quedando hasta tener el sitio final.

Sitio web responsivo

Y por último me aseguro que el sitio pueda visualizarse en medios móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: CSS Grid TJ

Información técnica

  • Figma
  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (Grid)
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Unsplash

Pexels

Déjame tus comentarios y sugerencias sobre este sitio web para Tijuana con estilo CSS Grid. ¿Qué otros proyectos te gustaría ver?

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

Tabla de Contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Este es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...