Téléchargement de fm recipe page - fm recipe page Téléchargement du code source

fm recipe page

Autre code source

1.0.0

Télécharger

Frontend Mentor - Solution de page de recette

Ceci est une solution au défi de la page de recettes sur Frontend Mentor. Les défis du mentor de frontend vous aident à améliorer vos compétences de codage en créant des projets réalistes.

Table des matières

Aperçu
- Le défi
- Capture d'écran
- Links
Mon processus
- Construit avec
- Ce que j'ai appris
- Développement continu
- Ressources utiles
Auteur
Remerciements

Aperçu

Le défi

Le mémoire de ce projet était de construire la page de recette et de le faire paraître aussi près que possible de la conception, en commençant par les actifs suivants:

Fichiers de conception JPEG pour les dispositions mobiles et de bureau
Guide de style pour les polices, les couleurs, etc.
Actifs d'image optimisés
Fichiers de polices variables et statiques
Fichier HTML avec contenu pré-écrit

Capture d'écran

Links

Solution de mentor de frontend
Référentiel GitHub
Site en direct

Mon processus

Construit avec

Marquage sémantique HTML5
Propriétés personnalisées CSS
Flux de travail d'abord mobile

Ce que j'ai appris

Cette solution comprend trois choses qui étaient nouvelles pour moi:

Marqueurs de liste de styles
Styling Tables HTML
Utilisation de requêtes multimédias

La page de recette contient deux listes non ordonnées avec le temps de préparation et les ingrédients, respectivement, et une liste ordonnée avec les instructions.

Pour la liste commandée, j'ai stylé les compteurs en utilisant le pseudo-élément ::marker ::

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

Le style des marqueurs de liste pour les listes non ordonnés était un peu plus difficile. Dans le fichier de conception JPEG pour la disposition mobile, les marqueurs ne sont pas à côté de la première ligne de texte mais sont centrés verticalement si le contenu texte de l'élément de liste s'enroule sur deux lignes. J'ai utilisé des marqueurs personnalisés avec le ::before le pseudo-élément pour positionner les marqueurs avec 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 ;
}

Pour une meilleure accessibilité, j'ai utilisé role="list" sur les éléments <ul> du HTML. Sans cela, list-style: none ne ferait que le navigateur Safari ne reconnaît plus les listes dans l'arborescence d'accessibilité, et le lecteur d'écran n'annonce plus d'informations telles que le nombre d'éléments.

Développement continu

J'ai besoin d'apprendre l'optimisation de l'image! Actuellement, le plus grand fichier de ce projet est la capture d'écran que j'ai prise pour ce ReadMe. J'ai appris à optimiser les fichiers de police. Maintenant, la taille du fichier de la capture d'écran est plus grande que la taille de tous les fichiers de police combinés.

Ressources utiles

Style de liste créative par Michelle Barker pour web.de - Cet article m'a aidé à comprendre comment styliser les marqueurs de liste pour les listes commandées et non ordonnées.
Styling Tables sur MDN - Cet article est un bon rafraîchissement pour les techniques de style de table de base.