Sitio construido con HTML y CSS con uso de ilustraciones de Pablo Stanley

Este es un sitio sencillo maquetado con Figma y construido con HTML y los estilos más sencillos de CSS, parte del reto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Illustratif

DESAFÍOS

Empiezo de nuevo desde lo más sencillo para construir un sitio. El objetivo de todos estos sitios básicos es simplemente practicar y practicar. Sigo usando floats para la separación de elementos durante el sitio. Y tomé las ilustraciones disponibles por Pablo Stanley, para tener un sitio más estético.

PROCESO

Paleta de colores y estilos

Paleta de colores: FEFAEA FFFFFF 000000

Tipografía:

Mockup (Bosquejo)

Este es el bosquejo hecho en Figma, puedes ver el proceso antes y después de usar colores e ilustraciones.

HTML y CSS

Una vez que el bosquejo está listo, empezamos a construir el sitio con la ayuda del editor Visual Studio Code. Y este es el proceso desde su maquetación con HTML hasta los estilos finales de cada sección.

Este es la portada del sitio maquetado sólo con HTML

Aquí podemos ver el sitio una vez ya agregados los estilos CSS

Vista del sitio final

Sitio web responsivo

Y por último con la ayuda de la siguiente línea dentro de nuestros documentos HTML para identificar cuando la pantalla es más chica que 768px de ancho es cuando los estilos responsivos inician.

<link rel="stylesheet" media="screen and (max-width:768px)" href="css/mobile.css">

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Illustratif

Información técnica

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

Recursos

Ilustraciones por Pablo Stanley

Este fue el sitio responsivo construido con HTML y CSS. Deja tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado