Bonjour, future victime d'un entretien technique ! 👋
Vous vous préparez pour un entretien pour un poste de front-end ? Vous imaginez déjà comment vous allez parler des crochets React et des génériques TypeScript, mais l'intervieweur demande soudainement : « Quelle est la différence entre inline et inline-block ? » Et vous êtes comme : surprised_pikachu.jpg
Oui, oui, même en 2026, les gens aiment revenir aux bases. Et vous savez quoi ? C'est bien. Parce qu'une personne qui ne comprend pas le modèle de boîte, mais essaie d'expliquer le DOM virtuel, c'est comme un conducteur qui ne sait pas où se trouve la pédale de frein, mais qui parle de moteurs quantiques.
Allons démêler ces mêmes questions qui obligent même les seniors à googler nerveusement avant l'entretien.
1. Modèle de boîte (Box Model) — un classique du genre
Question : En quoi consiste un modèle de bloc ?
Réponse pour l'intervieweur :
Chaque élément est une tarte feuilletée composée de :
Content — le contenu lui-même
Padding — retrait à l'intérieur de l'élément
Border — cadre
Margin — retrait externe
Que dire ensuite (pour avoir l'air intelligent) :
« Par défaut, width et height s'appliquent uniquement au contenu. Mais si vous utilisez box-sizing: border-box, les dimensions incluront le padding et la bordure. Cela évite les débordements inattendus et est depuis longtemps la norme en CSS-reset. »
Pourquoi demande-t-on :
99 % des bogues de mise en page sont dus à un oubli de margin ou de padding. Ou quand box-sizing n'est pas celui-là.
2. Positionnement : Static, Relative, Absolute, Fixed, Sticky
Question : Quelle est la différence entre les types de positionnement ?
Réponse courte :
Static — comportement normal (comme si
positionn'était pas spécifié du tout)Relative - décalage par rapport à sa position normale
Absolute - positionnement par rapport au parent positionné le plus proche
Fixed - par rapport à la fenêtre (adhère au défilement)
Sticky - hybride relatif et fixe (adhère lorsque le point est atteint)
Piège :
L'élément absolu recherche un parent avec position: relative/absolute/fixed. S'il ne le trouve pas, il est positionné par rapport à <body>. C'est la raison pour laquelle la modale s'envole parfois dans l'espace.
3. Flexbox — le favori de tous les développeurs
Question : Comment centrer un div verticalement et horizontalement ?
Réponse en 2026 :
.container {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
}Points supplémentaires :
« Il y a aussi Grid avec place-items: center, mais le flex est plus facile pour les mises en page uniaxiales. »
Si quelqu'un à l'entretien parle de margin: 0 auto et de tableaux, soit il est coincé en 2010, soit il vérifie si vous êtes coincé. 😄
4. Grid vs Flexbox : l'éternel débat
Question : Quand utiliser Grid et quand utiliser Flexbox ?
Bonne réponse :
Flexbox — pour les mises en page unidimensionnelles (ligne OU colonne)
Grid — pour les mises en page bidimensionnelles (lignes et colonnes simultanément)
Exemple :
Navigation, cartes en ligne → Flexbox
Toute la mise en page de la page, une grille complexe → Grid
5. Spécificité des sélecteurs (Specificity)
Question : Quel style s'appliquera ?
#header .nav li { color: red; }
.nav li { color: blue; }
li { color: green; }Réponse :
Rouge, car la spécificité est considérée comme (ID, Class, Tag) :
Premier : (1, 1, 1) = 111
Deuxième : (0, 1, 1) = 11
Troisième : (0, 0, 1) = 1
Astuce de vie :!important interrompt tout, mais l'utiliser, c'est comme écrire du code en CAPS LOCK. Cela fonctionne techniquement, mais tout le monde vous regardera de travers.
6. Le HTML sémantique n'est pas seulement un mot à la mode
Question : À quoi servent les balises sémantiques ?
<header>, <nav>, <article>, <section>, <footer> ne sont pas seulement des <div> élégants.
Avantages :
SEO — les moteurs de recherche comprennent la structure
Accessibility — les lecteurs d'écran savent où
Lisibilité du code — comprendre plus rapidement ce qui se passe
Anti-modèle :
<div class="header">
<div class="nav">...</div>
</div>C'est comme nommer une variable var1, var2 — ça marche, mais pourquoi ?
7. Pseudoclasses vs pseudo-éléments
Question : Quelle est la différence ?
Pseudo-classes (un deux-points) :
a:hover { }
li:first-child { }
input:focus { }Sélectionne les éléments dans un certain état.
Pseudo-éléments (deux points) :
p::before { content: "👉 "; }
p::after { content: " 👈"; }Créent des éléments virtuels.
8. Z-index et contexte de superposition
Question : Pourquoi mon élément avec z-index: 9999 est-il toujours sous un autre élément ?
Réponse :z-index ne fonctionne qu'à l'intérieur de son contexte de superposition.
Créent un nouveau contexte :
position: absolute/relative/fixed+z-indexopacity < 1transformfilterEt encore 10 propriétés
Si vous voyez dans le codez-index: 99999, sachez que quelqu'un s'est battu désespérément avec un bug et a perdu.
9. Unités de mesure : px, em, rem, vh, vw
Question : Quelle différence ?
Antisèche :
px — pixels absolus
em — par rapport à la taille de la police parente (en cascade !)
rem — concernant la taille de la police
<html>(non en cascade)vh/vw — pourcentage de la hauteur/largeur de la fenêtre
% — par rapport au parent
remest le meilleur choix pour une mise en page réactive moderne. Vous changez la taille de la police en html - tout est mis à l'échelle.
10. Display: none vs Visibility: hidden vs Opacity: 0
Question : Quelle est la différence ?
Réponse :
Propriété | Occupe la place | Disponible pour les événements | Animé |
|---|---|---|---|
| ❌ | ❌ | ❌ |
| ✅ | ❌ | ❌ |
| ✅ | ✅ | ✅ |
Quand utiliser quoi :
Supprimer complètement -
display: noneMasquer tout en conservant la place -
visibility: hiddenApparition/disparition en douceur —
opacity
11. Adaptabilité : Media Queries
Question : Comment rendre un site réactif ?
Syntaxe de base :
/* Mobile first подход */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}Tendance actuelle :
Utiliser clamp() pour un redimensionnement en douceur :
font-size: clamp(1rem, 2vw, 2rem);12. Variables CSS (Custom Properties)
Question : Comment fonctionnent les variables CSS ?
Exemple :
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Avantages par rapport aux variables Sass :
Peut être modifié via JavaScript
Héritage pris en charge
Fonctionnent de manière native dans le navigateur
13. Margin collapse vertical
Question : Pourquoi la marge ne s'additionne-t-elle pas entre les deux blocs ?
Réponse :
Les marges verticales s'effondrent (la plus grande est prise). C'est ce qu'on appelle l'effondrement des marges.
Exemple :
.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px, а не 50px */Comment désactiver :
Conteneur Flexbox/Grid
overflow: hiddensur le parentpaddingoubordersur le parent
14. Inline vs Inline-block vs Block
Question : Quelle est la différence ?
Tableau de vérité :
Type | Largeur/hauteur | Sur une nouvelle ligne | Margin/padding possible |
|---|---|---|---|
| ❌ | ❌ | Horizontal uniquement |
| ✅ | ❌ | ✅ Tout |
| ✅ | ✅ | ✅ Tout |
Exemple de vie :<span> — inline, <div> — block, et <button> par défaut — inline-block.
15. Pseudoclasse :nth-child() et ses amis
Question : Comment choisir un élément sur trois ?
Réponse :
li:nth-child(3n) { /* Каждый третий */ }
li:nth-child(odd) { /* Нечетные */ }
li:nth-child(even) { /* Четные */ }
li:nth-child(3n+1) { /* 1, 4, 7, 10... */ }Piège ::nth-child() compte tous les voisins, même de types différents. Si vous n'avez besoin que de certains, utilisez :nth-of-type().
🚀 Et maintenant, à propos de la formation (sans être ennuyeux)
Ok, vous avez lu toutes ces questions, peut-être même que vous avez pris quelques notes. Mais soyons honnêtes, dans une semaine, la moitié vous sera sortie de la tête. C'est ainsi que fonctionne notre cerveau.
Problème : La théorie sans pratique, c'est comme regarder une vidéo « Comment apprendre à nager ». C'est clair, mais essayez de ne pas vous noyer.
Solution : Pratique, pratique, pratique. Et pas seulement « ouvrir l'éditeur et écrire trois lignes », mais systématiquement.
Voici où vous pouvez vraiment vous entraîner :
Code - une application mobile pour apprendre la programmation, où :
La théorie est dosée petit à petit (sans surcharge)
Immédiatement pratique dans les tâches interactives
Vous apprenez directement sur votre téléphone (dans le métro, dans la file d'attente, n'importe où)
Cours de Python, JavaScript, HTML/CSS et autres technologies
L'astuce est que vous ne lisez pas seulement « comment fonctionne flexbox », mais que vous créez immédiatement de vrais éléments. La mémoire musculaire se forme et, lors de l'entretien, vos mains se souviendront de la syntaxe.
Bonus - Chaîne Telegram Kodik — une communauté où nous partageons des publications utiles et des astuces de vie, discutons des dernières fonctionnalités des langages et des frameworks, aidons à comprendre si quelque chose n'est pas clair.
Conclusion : comment ne pas se planter lors d'un entretien ?
Trois règles d'or :
Ne paniquez pas si vous ne connaissez pas la réponse. Il vaut mieux dire honnêtement « Je ne suis pas sûr, mais je suppose... » et raisonner logiquement que de dire des bêtises.
La pratique est plus importante que le par cœur. Créez des projets personnels, copiez vos sites préférés, cassez et réparez. Faire avec ses mains, c'est ce dont on se souvient le mieux.
Compréhension > Mémorisation. Savoir que
display: flexrend les éléments flexibles ne suffit pas. Comprendre pourquoi et quand l'utiliser, c'est ce dont vous avez besoin.
Bonne chance pour l'entretien ! Que la force soit avec toi. 🚀