Développeur Web
Frontend par préférence
Fullstack par convenance
Premier projet de la formation : découper et intégrer une maquette en HTML et CSS.
La maquette est au format PNG, ce qui est assez pratique pour prendre les mesures.
La difficulté réside dans le choix des mesures : l'imbrication des différentes balises sémantiques implique de déterminer la structure avant de faire le découpage...
Chaque élément est un rectangle qui englobe ou non des sous-éléments.
Attention à la hierarchie et à la sémantique !
Dans ce projet on découvre l'aide très complète de MDN, la puissance de flex-box, les difficultés autour de l'alignement des éléments
composés de texte, d'icônes, de bordures partielles ...
Entrée en scène du @media query !
Et donc d'une nouvelle organisation des éléments. On profite du "flex-wrap", de "order" et des tailles proportionnelles pour les déplacer.
Le code se rallonge, il m'a fallu prêter attention à la clareté.
C'est là qu'on se rend compte qu'un seul fichier CSS n'est pas optimal mais des solutions arrivent dans les projets suivants ...
Si vous souhaitez comparer la maquette au résultat que j'ai obtenu c'est par ici.