Sitio web estilo One Page con HTML y CSS (SASS, Flex)

Sitio web estilo One Page con HTML y CSS (SASS, Flex). El sitio número 32 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Mask

DESAFÍOS

Basado en el sitio  Dress The Bird. En este sitio pongo en práctica el uso de Flex. Por alguna razón empecé a hacer sitios con grid para ir practicando y como que aún no tenía el concepto de Flex entendido. Pero creo que es mucho más sencillo. Aún sigo tratando de entender todas sus funcionalidades, creo que la mejor manera es sólo irlas incluyendo y ver cómo funcionan.

Esta es una vista de las funcionalidades de Flex en CSS

PROCESO

Paleta de colores y estilos

Paleta de colores: FFC038 000000 F9F9F9

Tipografía: Roboto de Google Fonts

Mockup (Bosquejo)

Con la ayuda de Figma empiezo a hacer el bosquejo del sitio, esto me ayuda mucho a conceptualizar el sitio en una sola vista y esta misma me gusta usar como guía durante todo el desarrollo del proyecto.

HTML y CSS

Una vez que el bosquejo está listo, empiezo a trabajar con el editor VS Code, hasta tener el sitio final. Lo más parecido a mi bosquejo hecho anteriormente.

Sitio web responsivo

Por último por medio de media queries trato de que el sitio pueda verse en móviles. Hoy en día es tan importante que los sitios puedan verse en los aparatos móviles actuales.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Mask

Información técnica

  • Figma
  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (SASS, Flex)
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Pexels

Unsplash

Compárteme tus preguntas y comentarios acerca de este sitio web estilo One Page con HTML y CSS (SASS, Flex).

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