fm recipe page

Frontend Mentor - Solución de la página de recetas

Esta es una solución al desafío de la página de recetas en Frontend Mentor. Los desafíos de Mentor Frontend lo ayudan a mejorar sus habilidades de codificación mediante la creación de proyectos realistas.

Tabla de contenido

• Descripción general
  • El desafío
  • Captura de pantalla
  • Campo de golf
• Mi proceso
  • Construido con
  • Lo que aprendí
  • Desarrollo continuo
  • Recursos útiles
• Autor
• Expresiones de gratitud

Descripción general

El desafío

El informe para este proyecto fue construir la página de recetas y hacer que se vea lo más cerca posible del diseño, comenzando con los siguientes activos:

• Archivos de diseño JPEG para diseños móviles y de escritorio
• Guía de estilo para fuentes, colores, etc.
• Activos de imagen optimizados
• Archivos de fuentes variables y estáticas
• Archivo html con contenido preescrito

Captura de pantalla

Campo de golf

• Solución de mentor frontend
• Repositorio de Github
• Sitio en vivo

Mi proceso

Construido con

• Marcado semántico HTML5
• Propiedades personalizadas de CSS
• Flujo de trabajo móvil primero

Lo que aprendí

Esta solución incluye tres cosas que eran nuevas para mí:

• Marcadores de lista de estilo
• Mesas de estilo HTML
• Usando consultas de medios

La página de la receta contiene dos listas desordenadas con tiempo de preparación e ingredientes, respectivamente, y una lista ordenada con las instrucciones.

Para la lista ordenada, diseñé los contadores usando el pseudo-elemento ::marker :

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

Estilizar los marcadores de la lista para las listas desordenadas fue un poco más desafiante. En el archivo de diseño JPEG para el diseño móvil, los marcadores no se encuentran al lado de la primera línea de texto, sino que se centran verticalmente si el contenido de texto del elemento de la lista se envuelve en dos líneas. Usé marcadores personalizados con el ::before pseudo-elemento para colocar los marcadores con FlexBox:

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

Para una mejor accesibilidad, utilicé role="list" en los elementos <ul> en el HTML. Sin él, list-style: none haría que el navegador Safari ya no reconozca las listas en el árbol de accesibilidad, y el lector de pantalla ya no anunciaría información como el número de elementos.

Desarrollo continuo

¡Necesito aprender la optimización de imágenes! Actualmente, el archivo más grande de este proyecto es la captura de pantalla que tomé para este readme. Aprendí a optimizar los archivos de fuentes. Ahora el tamaño del archivo de la captura de pantalla es más grande que el tamaño de todos los archivos de fuentes combinados.

Recursos útiles

• Estilización de la lista creativa de Michelle Barker para Web.de: este artículo me ayudó a descubrir cómo diseñar los marcadores de la lista para las listas ordenadas y desordenadas.
• Tablas de estilo en MDN: este artículo es un buen repaso para las técnicas básicas de estilo de tabla.

Autor

• Mentor frontend - @sabineemden
• Mastodon - @sabineemden

Expresiones de gratitud

Este proyecto utiliza el reinicio CSS de Josh Comeau.

Las familias de fuentes utilizadas en este proyecto son jóvenes serif y atuendo. Las fuentes tienen licencia bajo la licencia de fuente abierta.