Frontend Mentor - Solución a Clipboard landing page

Esta es una solución al Desafío de Clipboard landing page 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
• Accesibilidad web
• Media queries
• Responsive desing
• Efectos hover
• Loanding (HTML5)

Lo que aprendi

Mi interés por ver como optimizar aunque sea un poco la página me llevo a conocer el atributo loading que permite cargar las imágenes según sea tu interés, hay tres posibilidades, eager: te carga la imagen de forma prioritaria, lazy: cuando se espera que cargue de forma diferida y auto que es cuando el navegador determina cuál es la mejor opción.

<img src="./assets/icons/logo.svg" loading="eager" alt="Logo de clipboard" title="clipboard">

Recursos útiles

• MDN Web Docs - Suelo usar este recurso porque explica muy bien todo además de que tiene una documentación muy amplia.
• midudev - En este blog encontre la información de loading, esta muy bien explicada y ademas hay muchas más publicaciones sobre front-end

Autor

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