Frontend Mentor - Solución a Fylo landing page with two column layout

Esta es una solución al Desafío de Fylo landing page with two column layout 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 y Movil

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
• Transiciones
• Loanding (HTML5)
• Desktop first

Lo que aprendi

• Aprendí a usar la etiqueta address

• Descubrí que el atributo href de la etiqueta a sirve para colocar un número de teléfono y que esta abra la app que tenga disponible el computador o el smartphone.

<a href="tel:+1-543-123-4567" class="tel">+1-543-123-4567</a>

Recursos útiles

• MDN Web Docs - Suelo usar este recurso porque explica muy bien todo además de que tiene una documentación muy amplia.
• IONICONS - Es una página de iconos bastante sencilla de usar.

Autor

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