Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

The approach combines the modularity provided by CSS variables, modern

@gbenouga

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Ce dont je suis le plus fier :

Je suis fier d'avoir utilisé Flexbox et les variables CSS pour créer une mise en page réactive et modulable, ainsi que des media queries pour améliorer l'expérience utilisateur sur mobile.

Ce que je ferais différemment :

La prochaine fois, j'explorerais CSS Grid pour une meilleure gestion des mises en page complexes et j'améliorerais l'accessibilité et les transitions CSS pour rendre les interactions plus fluides.

Besoin de soutien en css:

Je cherche des conseils sur l'optimisation des performances CSS dans les projets plus importants, notamment en matière d'organisation et de minimisation du code.

What challenges did you encounter, and how did you overcome them?

Difficultés rencontrées et solutions :

  1. Alignement et mise en page réactive :

    • Difficulté : Alignement cohérent sur différents appareils.
    • Solution : Utilisation de Flexbox et media queries pour ajuster la mise en page.
  2. Gestion des variables CSS :

    • Difficulté : Complexité dans la gestion des couleurs et polices.
    • Solution : Centralisation des variables dans :root pour faciliter les modifications.
  3. Intégration d'images en fond :

    • Difficulté : Adaptation de l'image de fond sans déformation.
    • Solution : Utilisation de background-size: cover et background-position: center.
  4. Responsive Design :

    • Difficulté : Maintien de la lisibilité et présentation sur différents appareils.
    • Solution : Implémentation de media queries pour ajuster la taille des polices et la mise en page.

What specific areas of your project would you like help with?

Optimisation des Performances CSS :

Question : Comment organiser et minimiser efficacement le code CSS pour des projets complexes ?

Utilisation Avancée de CSS Grid :

Question : Quelles techniques pour combiner CSS Grid avec Flexbox dans des mises en page élaborées ?

Amélioration de l'Accessibilité :

Question : Comment améliorer l'accessibilité du site avec des attributs ARIA et en optimisant le contraste des couleurs ?

Optimisation des Images :

Question : Quelles pratiques pour optimiser les images de fond pour de meilleures performances ?

Community feedback

P

@adamwhitehouse95

Posted

Hey. Unfortunately I dont understand French so might not be much help. However your webpage is close to the intended result and your code appears clean and organised.

Adam.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord