HTML & CSS en entretien : Guide de survie pour un développeur front-end en 2026 🎯

Comment ne pas devenir un mème "backend developer doing frontend"

Félicitations ! Vous avez décidé de passer un entretien pour un poste de développeur front-end. Très probablement, vous savez déjà ce que sont les balises sémantiques, le modèle de boîte et comment centrer un div (spoiler : ce n'est toujours pas aussi simple qu'il y paraît 😅).

Mais soyons honnêtes : entre « j'ai étudié le CSS » et « j'ai passé un entretien sur le CSS », il y a tout un univers de douleur, de souffrance et de questions du style « savez-vous ce qu'est le BFC ? ».

HTML : "Ce sont juste des balises, qu'est-ce qui pourrait mal tourner ?"

1. La sémantique n'est pas une philosophie, il s'agit de balises

Question : Quelle est la différence entre <div> et <section> et pourquoi avons-nous besoin de sémantique ?

Ce que vous devez savoir :

Les balises sémantiques (<article>, <section>, <nav>, <header>, <footer>, <aside>) ne rendent pas seulement le code « plus beau ».

Ils :

• Améliorer le référencement (les moteurs de recherche aiment la structure)

• Rendre le site accessible aux lecteurs d'écran

• Aide les développeurs à comprendre la structure sans lire tout le code

<!-- Плохо: --><div class="article"><div class="header">Заголовок</div><div class="content">Контент</div></div>

<!-- Хорошо: --><article><header>
    <h1>Заголовок</h1></header><section>Контент</section></article>

Rappelez-vous ce qu'ils disent : « Utiliser <div> partout, c'est comme appeler toutes les variables data1, data2, data3 ». Cela fonctionne techniquement, mais vos collègues vous détesteront.

2. Fonctionnalités HTML5 : pas seulement canvas et vidéo

Questions principales 2025 :

• Quelle est la différence entre <canvas> et <svg> ?

• Que sont les attributs de données et pourquoi sont-ils nécessaires ?

• Comment fonctionne localStorage vs sessionStorage ?

Réponse rapide sur canvas vs svg :

• <canvas> - graphiques raster, pour des animations et des jeux complexes

• <svg> - vectoriel, pour les icônes et les éléments évolutifs

Attributs de données — votre attribut de stockage personnalisé :

<article data-post-id="12345" data-category="frontend"><!-- Можно читать через JS: article.dataset.postId --></article>

3. Formulaires : plus qu'une simple entrée

Question : Quels nouveaux types d'entrée sont apparus dans HTML5 ?

Réponse pour l'impression de l'intervieweur :

• type="email" — validation de l'e-mail

• type="tel" — téléphone (clavier mobile optimisé)

• type="date", type="time" — sélecteurs de dates natifs

• type="range" — curseur

• type="color" — sélecteur de couleur

• required, pattern, min, max — validation intégrée sans JS !

<input type="email" required 
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
       placeholder="your@email.com">

4. Box Model : la base des bases

Question : Expliquez le CSS Box Model et la différence entre box-sizing: content-box et border-box.

Réponse (à retenir une fois pour toutes) :

Box Model se compose de :

• Content — le contenu lui-même

• Padding — retrait intérieur

• Border — frontière

• Margin - retrait extérieur

/* content-box (default, но неудобно) */.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Итоговая ширина: 200 + 20*2 + 5*2 = 250px */
}

/* border-box (используют все адекватные люди) */.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Итоговая ширина: ровно 200px */
}

Si vous n'utilisez pas * { box-sizing: border-box; } en 2026, vous êtes peut-être coincé au siècle dernier 🦕

5. Flexbox vs Grid : la bataille éternelle

Question : Quand utiliser Flexbox et quand utiliser Grid ?

Règle simple :

• Flexbox — pour les mises en page unidimensionnelles (ligne OU colonne)

• Grille - pour les deux dimensions (lignes et colonnes simultanément)

Flexbox pour la navigation :

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grille pour la galerie :

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

Flexbox est quand vous voulez aligner les éléments. Grid, c'est quand vous voulez arrêter la guerre avec float et position.

6. Spécificité CSS : pourquoi mon style ne s'est-il pas appliqué ?!

Question : Expliquez la spécificité CSS et les priorités de style.

Classement par force (du plus faible au plus fort) :

1. Sélecteurs de balises : div (0,0,1)

2. Classes : .button (0,1,0)

3. ID: #header (1,0,0)

4. Styles en ligne : style="..." (1,0,0,0)

5. !important - bouton nucléaire (ne jamais utiliser !)

/* Специфичность: 0,0,1 */p { color: blue; }

/* Специфичность: 0,1,0 */.text { color: red; }

/* Специфичность: 0,1,1 */p.text { color: green; } /* Этот выиграет! */

/* Специфичность: 1,0,0 */#content { color: purple; }

/* Если добавить !important — всё сломается */p { color: orange !important; } /* НЕ ДЕЛАЙТЕ ТАК */

7. Pseudoclasses vs pseudo-éléments : quelle est la différence ?

La question est toujours posée !

Pseudo-classes (:) — état de l'élément :

a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:nth-child(2) { background: yellow; }

Pseudo-éléments (::) - éléments virtuels :

p::before { content: "📌 "; }
p::after { content: " ✓"; }
::selection { background: yellow; }

Astuce de vie : Un deux-points : état, deux : élément.

8. Adaptabilité : Mobile-First en 2026

Question : Comment mettre en œuvre un responsive design sans framework ?

Approche moderne :

/* Mobile-first: базовые стили для мобилок */.container {
  padding: 10px;
  font-size: 14px;
}

/* Для планшетов */@media (min-width: 768px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* Для десктопов */@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
  }
}

BFC (Block Formatting Context) : pour les hardcoreurs

Question pour middle/senior : Qu'est-ce que le BFC et comment le créer ?

En termes simples :
BFC est une zone de rendu isolée où les éléments interagissent selon leurs propres règles.

Créé par :

• overflow: hidden/auto/scroll (pas visible)

• display: flow-root (méthode moderne !)

• position: absolute/fixed

• display: flex/grid sur le parent

• float: left/right

/* Проблема: плавающий элемент вываливается из контейнера */.container {
  border: 2px solid black;
}

.float-item {
  float: left;
  width: 200px;
}

/* Решение: создаём BFC */.container {
  overflow: hidden; /* Старый способ *// * ou */display: flow-root; /* Méthode moderne */
}

🎓 Et la pratique ?

La théorie, c'est bien, mais sans pratique, vous vous sentirez comme un développeur backend qui essaie de centrer un div.

Ici, à la rescousse Code - une application mobile pour apprendre la programmation, où vous pouvez apprendre le HTML et le CSS directement en déplacement. Le métro, la file d'attente dans un café, la pause déjeuner : n'importe quel endroit se transforme en un bootcamp de codage !

✅ Leçons interactives
avec un code réel

✅ Pratique dans l'application
pas besoin d'ordinateur !

✅ Progression suivie
automatiquement

✅ Exercices par niveaux
du débutant au pro

Et il y a aussi notre Communauté Telegram! 🚀

C'est un endroit où :

• 📚 Des publications utiles sont publiées chaque jour

• 💬 Vous pouvez poser une question et obtenir de l'aide

• 🔥 Partageons notre expérience en matière d'entretien

• 😄 Publier des mèmes

Abonnez-vouspour revoir les contenus tous les jours et rester au courant des tendances !

Les entretiens HTML et CSS en 2025 ne se limitent pas à « connaissez-vous les balises ? ». Il s'agit de comprendre comment le navigateur rend la page, comment optimiser les performances et comment écrire du code pris en charge.

Règle d'or : Honnêteté + connaissances de base + pratique = offre.

Vous ne connaissez pas la réponse ? Dites : « Je ne me souviens pas exactement maintenant, mais je sais où trouver cette information et comment l'appliquer. » Les recruteurs apprécient l'honnêteté et la capacité à chercher des solutions plus que la connaissance de toutes les 500 propriétés CSS par cœur.

P.S. Rappelez-vous : chaque développeur senior a déjà cherché sur Google « comment centrer un div css ». La différence est qu'ils connaissent maintenant 5 façons de le faire et peuvent expliquer laquelle est la meilleure pour une tâche particulière.