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