Frontend Mentor - Solución al Social proof section

Esta es una solución al Desafío del componente social proof section en Frontend Mentor.

Tabla de contenido

• Visión general
  • El reto
  • Capturas de pantalla
  • Enlaces
• Mi proceso
  • Construido con
  • Lo que aprendi
  • Desarrollo continuo
  • Recursos útiles
• Autor

Visión general

El reto

Los usuarios deben ser capaces de:

• Ver el diseño óptimo en función del tamaño de la pantalla de su dispositivo
• Ver los estados hover de los elementos interactivos

Capturas de pantalla

• Escritorio

• Móvil

Enlaces

• URL de la solución (Frontend Mentor): Solución en Frontend Mentor.
• URL del sitio en vivo: En vivo

Mi Proceso

Construción

• HTML semántico
• Variables CSS
• Flexbox
• GRID
• Accesibilidad web
• Media queries
• Responsive desing
• Mobile first

Lo que aprendi

Aprendi a crear un layout básico con CSS GRID y a poder posicionar los lementos usando esto mismo.

body {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
}

.container {
		grid-column: 1 / 3;
}

Desarrollo continuo

Me costó más de lo normal hacer el responsibe desing partiendo de un mobile first y es algo que tendré que estudiar porque hay muchos aspectos de esto que no tuve en cuenta y eso probablemente hicieron que me costara más, pero es algo que trabajaré.

Recursos útiles

• MDN Web Docs - Suelo usar este recurso porque explica muy bien todo además de que tiene una documentación muy amplia.
• Grid CSS - Buena explicación con ejemplos. -w3 School - Explica de forma breve pero de forma muy clara.

Autor

• Codepen - @boudgnosis
• Frontend Mentor - @boudgnosis
• Twitter - @juan_ariasd
• Dev - @juan_duque
• Linkedink - juan pablo arias duque