Este es un sitio básico con maquetación estilo One Page llamado Freshierfarms. El primer proyecto corto parte del reto personal #100sitioswebchallenge.
Puedes visualizar el sitio en: Freshierfarms
DESAFÍOS
Después de estar un rato sin practicar maquetación de sitios vuelvo a acelerar esta curva de aprendizaje para de nuevo estar al día. Este sitio realmente es muy sencillo usando solo HTML y CSS. Donde los estilos son muy sencillos, las cajas en la sección de Features usé floats y width para separarlas, aún no quiero usar grids ni flex para empezar lo más básico posible.
PROCESO
Paleta de colores y estilos
Paleta de colores: 2CBCF2 C4C4C4
Tipografía:
Mockup (Bosquejo)
Antes de maquetar el sitio en HTML y CSS, primero voy a Figma para poner un sitio la idea de cómo quiero que se visualice.
Esta es el proceso de maquetación, del lado izquierdo el concepto está en su estado más sencillo, y en la parte derecha empiezo a establecer los colores e imágenes finales.
HTML y CSS
Visual Studio Code sigue siendo mi editor para trabajar con los sitios web. En este caso primero empiezo a hacer la maquetación del sitio todo en HTML para posteriormente trabajar con los estilos.
En esta imagen se puede ver que aún no he establecido ningún estilo, todo es HTML
Sitio web responsivo
Una vez terminado el sitio, ahora trabajo con Medias Queries para que el sitio se ajuste cuando sea visto por aparatos móviles.
Aquí se puede ver el sitio cuando el ancho se ajusta como si se viera desde un celular.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Freshierfarms
Información técnica
- Visual Studio Code
- HTML5 (Semántico)
- CSS
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Iconfinder
Este fue el sitio estilo One Page, deja tus comentarios y sugerencias.
