10 questions. Une seule bonne réponse par question, et
l'explication s'affiche dès que vous avez répondu.
Le cours · La fiche
0 / 10
1Quelle ligne rend une grille de cartes responsive sans media query ?
Elle se lit : autant de colonnes que possible, d'au moins 220 px, le reste partagé. Le navigateur recalcule le nombre de colonnes à chaque largeur — 4 vers 1000 px, 1 à 375 px. Attention à l'ordre : minmax(1fr, 220px) est invalide et la règle entière est ignorée.
2auto-fit ou auto-fill ?
auto-fillgarde les colonnes vides : trois cartes dans un espace pour cinq restent tassées à gauche. auto-fit les replie, et les cartes occupent toute la largeur. Pour un CV, on veut auto-fit.
3Pourquoi ne jamais écrire un <a> à l'intérieur d'un <button> ?
Le validateur W3C le refuse, et le comportement devient imprévisible — clavier, lecteur d'écran, navigateurs ne s'accordent pas. La distinction est simple : <a> pour aller quelque part, <button> pour déclencher. Un lien s'habille en bouton avec display: inline-block et du padding.
4Dans un formulaire, à quoi correspondent method et action ?
action = l'adresse, method = le verbe. Écrire action="POST" est l'erreur la plus fréquente : le navigateur cherche alors une page nommée « POST », ne trouve rien, et retombe sur un envoi en GET vers la page courante — sans le moindre message.
5Quel type pour un champ « téléphone » ?
Le test tient en une question : peut-on l'additionner ? Un numéro de téléphone, non — et type="number" lui collerait des flèches d'incrément, refuserait le + initial et pourrait manger le zéro de tête. Même raisonnement pour un code postal : text avec inputmode="numeric".
6Une icône purement décorative doit porter :
Un altabsent pousse certains lecteurs d'écran à lire le nom du fichier ; un alt="icone" annonce une information qui n'en est pas une. alt="" dit explicitement « à ignorer ». Un alt vide est une décision, pas un oubli.
7Où se place le <footer> d'un CV en ligne ?
<main> contient le contenu propre à la page ; en-tête et pied de page l'encadrent, puisqu'ils se répètent d'une page à l'autre. Cela compte au-delà du style : c'est ce découpage que suivent les raccourcis de navigation des lecteurs d'écran.
8Un clic sur le menu amène la section sous la barre fixe. Que corrige cela ?
scroll-margin-top dit au navigateur de s'arrêter un peu plus haut quand il saute à cette ancre — sans rien ajouter à l'apparence. Un padding-top décalerait le contenu en permanence, y compris quand on arrive par défilement normal.
9Que ne met-on PAS sur un CV publié en ligne, alors qu'un PDF envoyé peut le porter ?
Une page publique est lisible par n'importe qui, indexée et copiée. Le principe de minimisation du RGPD demande de ne publier que ce qui sert la finalité : un recruteur peut écrire par e-mail. Réunies, ces données sont exactement la matière première de l'OSINT.
10Les images ne s'affichent plus après la mise en ligne, alors que tout marchait en local. Pourquoi ?
PP.jpg écrit pour un fichier nommé pp.jpg fonctionne chez vous et nulle part ailleurs. D'où la discipline de nommage : minuscules, sans accent, sans espace, tirets — projet (1).png devient projet-1.png.