Portafolio básico con HTML y CSS – Lorem Portfolio

Este es un portafolio básico hecho con HTML y CSS llamado Lorem Portfolio. Este es el cuarto proyecto del reto personal #100sitioswebchallenge.

Puedes encontrar el proyecto en línea en: Lorem Portfolio

DESAFÍOS

Según mis matemáticas tengo que estar haciendo 3 sitios web a la semana para cumplir el reto de los 100 sitios web.

Por supuesto lleva tiempo y aún hay que pulir los sitios, por cuestiones de tiempo decidí hacer el sitio lo más sencillo posible para seguir de acuerdo al calendario planeado.

La mayoría de mi tiempo es en el bosquejo del sitio, sobre todo a la hora de asignar el tamaño de la tipografía. Tengo mejorar la manera en saber qué proporción es la mejor, hasta ahorita he estado trabajando con 3 diferentes tamaños para la cabecera

  • h1
  • h2
  • h4

Estoy usando h1 sólo para el sitio de home en algunas ocasiones, y dejo h2 como mi sub-cabecera. Y uso h4 como parte de los títulos dentro de algunas partes del cuerpo de algunas secciones. En este proyecto se puede ver reflejado en la parte de los proyectos individuales en portafolio.

PROCESO

Paleta de colores y estilos

Estos fueron los estilos y la paleta de colores que usé:

Mockup (Bosquejo)

Este fue el primer borrador de la idea para este proyecto.

Aunque al final me tomo la libertad de hacer ciertos ajustes.

HTML y CSS

Usar VS Code me hace la vida más sencillo a la hora de maquetar el sitio con HTML y CSS.

Este portafolio básico, constaba sólo con una sección de inicio, otra de contacto, y una sección por cada proyecto presentado en este demo.

Sitio web responsivo

Puede observarse el sitio responsivo, el cual empieza su aplicación cuando el ancho del dispositivo es menor a 768px.

Publicación del sitio

Información técnica

  • Figma – Diseño de bosquejo
  • VS Code
  • HTML5 (semántico)
  • CSS
  • Responsive Website Design
  • Github
  • Netlify

Recursos

Este fue el portafolio básico hecho con HTML y CSS. Déjame tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

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 sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...