NUEVO Curso Completo de HTML y CSS – Aprovecha el 55% de Descuento

100sitioswebchallenge | HTML y CSS

Portafolio estilo CSS grid

Este es un sitio web Portafolio estilo CSS grid. El proyecto número 14 del reto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Portafolio CSS grid

DESAFÍOS

Al trabajar con grid en css veo que uno tiene que familiarizarse muy bien con las columnas y filas de un solo elemento. Para tener una idea de dónde empieza y donde finaliza.

Aún me cuesta trabajo ver si hay manera de que la altura de los elementos puede ser automático, por el momento sólo le doy alturas y anchos fijos. Empezando por el elemento 1 de la columna y el elemento 1 de la fila.

Esta imagen de WebKit lo ilustra mejor.

Si se fijan las ilustraciones de mi sitio web no tienen las mismas medidas. Es como basándome el la ilustración anterior puedo determinar dónde el grid-row debe iniciar y terminar, así como el grid-column tiene que iniciar y terminar.

PROCESO

Paleta de colores y estilos

Mantuve este proyecto muy minimalista por lo que sólo usé dos colores, negro y blanco.

Paleta de colores: 00000 FFFFF

Tipografía: Montserrat de Google Fonts

https://fonts.google.com/specimen/Montserrat

Mockup (Bosquejo)

El bosquejo está hecho en Figma, además de que es de uso gratuito con ciertos límites, me ahorra mucho tiempo a la hora de hacer el bosquejo del sitio web. Es perfecto para proyectos como estos.

HTML y CSS

Empiezo primero a maquetar todo en HTML con la ayuda de VS Code, para luego pasar a asignar estilos de diseño con CSS. Este es un proceso de maquetación más que de programación.

Sitio web responsivo

Y por último trato de dejar mi sitio web responsivo, que sólo significa que el sitio web pueda verse sin ningún problema en aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Portafolio CSS grid

Información técnica

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

Recursos

Pexels

Unsplash

Este fue el Portafolio con estilo CSS grid. Déjame tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Explora Temas

Contenido Relacionado

Sitio web One Page con navegación fija

Sitio web One Page con navegación fija

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 un sitio web estilo One Page maquetado con HTML y estilizado con CSS con una navegación fija....