Créer son premier site web avec HTML et CSS Quiz

Quiz : mise en page moderne

Réussite à partir de 70%. Vous pouvez recommencer autant de fois que nécessaire.

Connectez-vous pour passer ce quiz et enregistrer votre score. Se connecter

1 Vous voulez qu’un logo se place à gauche d’un en-tête et le menu à droite, les deux centrés verticalement. Quelle combinaison de propriétés sur le conteneur convient ? Une seule réponse display: block; text-align: justify display: flex; justify-content: space-between; align-items: center display: inline; margin: auto position: absolute; align-items: center

2 Que produit la règle grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) sur un conteneur de galerie ? Une seule réponse Exactement trois colonnes de 16 rem Une colonne unique de 16 rem de large Autant de colonnes d’au moins 16 rem que la largeur le permet, qui se partagent l’espace Des colonnes qui ne dépasseront jamais 16 rem

3 Quelles pratiques font partie d’une approche responsive correcte (plusieurs réponses) ? Plusieurs réponses possibles Ajouter la balise meta viewport dans le head Désactiver le zoom pour éviter les débordements Donner aux images max-width: 100% et height: auto Choisir les points de rupture là où le contenu se dégrade, avec des media queries min-width

4 Une étiquette doit apparaître dans le coin supérieur droit d’une carte. Quelle mise en œuvre est correcte ? Une seule réponse Carte en position: relative ; étiquette en position: absolute avec top et right Carte en position: static ; étiquette en position: absolute avec top et right Étiquette en position: sticky avec z-index: 99999 Étiquette en display: none

5 Quelles bonnes pratiques s’appliquent aux transitions et animations (plusieurs réponses) ? Plusieurs réponses possibles Préférer animer transform et opacity Respecter la préférence « réduire les animations » avec prefers-reduced-motion Faire reposer une information essentielle uniquement sur une animation Garder des durées courtes pour les retours d’interface