Maquetación de sitio estilo One Page

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.

Maquetacion en Figma

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

Vista final del sitio

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

Random User Generator

Unsplash

Iconfinder

Este fue el sitio estilo One Page, deja 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...