Sitio maquetado usando estilos de Bootstrap y pre-procesador SASS

Este es el sitio número 55 parte del reto personal #100sitioswebchallenge. Un sitio maquetado usando estilos de Bootstrap y pre-procesador SASS.

Puedes visualizar el sitio en: Chairs

DESAFÍOS

Si se fijan los sitios son muy básicos, trabajando sólo maquetación hasta el momento. El propósito de esta serie de proyectos e ir aumentando poco a poco el nivel.

Creo que Bootstrap tiene clases que los estilos son similares y través de que vas construyendo más proyectos con Bootstrap empieza a identificar el trabajo usando Bootstrap. Pero no me cabe duda que el ahorro del tiempo y la funcionalidad de sus clases es muy poderoso.

Disfruté hacer este sitio, porque es muy minimalista. Metiendo más trabajo esto puede ser un e-commerce más funcional.

PROCESO

Paleta de colores y estilos

Paleta de colores: FFFFFF 000000

Tipografía: Montserrat de Google Fonts

Íconos: Font Awesome

HTML y CSS

Esta es la vista del sitio, antes de llamar a los estilos de bootstrap. Si te fijas en el video a continuación el sitio final, hay una enorme diferencia a sólo usar HTML y al activar los estilos predeterminados de Bootstrap.

Sitio web responsivo

Muchas veces por default podemos ver que los estilos se acomodan para ser vistos en aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Chairs

Información técnica

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

Recursos

Font Awesome License

Unsplash

Este fue un sitio maquetado usando estilos de Bootstrap y pre-procesador SASS. ¿Qué otro sitio sugieres que construya ahora?

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

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 Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

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 es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...