Sitio sencillo maquetado con HTML y CSS Grid

Este es un sitio maquetado con HTML y estilizado con CSS Grid. El proyecto 26 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: E-Fashion

DESAFÍOS

Tenía bastante tiempo sin usar Grids en un proyecto. Me llevo un poco de tiempo darle una repasada de nuevo y entender los conceptos básicos de Grid. Sobre todo el contenedor donde llamo al display y posteriormente cómo lo separo por columnas y filas.

Para este proyecto pude haber usado flex, pero hay una sección en particular donde era necesario usar Grids.

Aquí pueden ver la imagen donde tuve que implementar grid

Es imagen en particular la uso en la clase box6, y ahí precisamente se pueden dar cuenta como le doy el efecto de tomar más columnas y filas que las demás imágenes.

Aquí puedes ver los estilos de este proyecto.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF 4D4D4D E5B396

Tipografía:

Mockup (Bosquejo)

Este es el proceso del bosquejo hecho con Figma

HTML y CSS

Este es el proceso de la maquetación hecho con HTML primero, y posteriormente estilizarlo con CSS y Grid.

Sitio web responsivo

Y finalmente esta es la visualización del sitio adaptado a aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: E-Fashion

Información técnica

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

Recursos

Fuente

Icon

Unsplash

¿Qué te pareció el proyecto? ¿Cuál ha sido tu experiencia trabajando con Grid? Compárteme en los comentarios.

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...