Examen – Examen 7 : Frameworks et outils frontend

Cet examen couvre les contenus : HTML/CSS avancé, SCSS, Bootstrap, Tailwind, design responsive et composants, avec un exercice pratique complet. 20 questions et un exercice de code. Vous pouvez passer à l'exercice et terminer l'examen quand vous voulez. La note finale (50 % questions, 50 % code) doit être d'au moins 80 % pour réussir. Vous pouvez réessayer en cas d'échec.

1. 1. Qu'est-ce qu'un framework CSS ?

   • Un langage de programmation
   • Un ensemble de styles et composants prédéfinis pour construire des interfaces plus vite
   • Un navigateur web
   • Un système d'exploitation

2. 2. Quel framework CSS est très populaire et utilise des classes utilitaires ?

   • Bootstrap uniquement
   • Tailwind CSS
   • PHP
   • Java

3. 3. Qu'est-ce que Bootstrap ?

   • Un langage
   • Un framework CSS/JS pour créer des interfaces responsive avec grille et composants
   • Un éditeur de code
   • Une base de données

4. 4. Que signifie « responsive » pour un site web ?

   • Rapide
   • Qui s'adapte à la taille de l'écran (mobile, tablette, desktop)
   • Sécurisé
   • Avec des vidéos

5. 5. Qu'est-ce que SCSS/Sass ?

   • Un langage de programmation
   • Une extension du CSS avec variables, imbrication, mixins
   • Un framework JavaScript
   • Un type de fichier HTML

6. 6. Quel avantage d'utiliser une grille (grid) en CSS ?

   • Ralentir le chargement
   • Structurer la mise en page de façon alignée et responsive
   • Supprimer le HTML
   • Remplacer JavaScript

7. 7. Que permet la classe « container » dans Bootstrap ?

   • De supprimer le contenu
   • De centrer et contraindre la largeur du contenu de façon responsive
   • D'afficher des images uniquement
   • De compiler le CSS

8. 8. Qu'est-ce qu'un composant réutilisable en frontend ?

   • Un fichier unique
   • Un bloc d'interface (bouton, carte, formulaire) qu'on peut réutiliser partout
   • Une variable globale
   • Un serveur

9. 9. En Tailwind, comment applique-t-on généralement les styles ?

   • Uniquement dans un fichier CSS séparé
   • Via des classes utilitaires directement dans le HTML
   • En JavaScript uniquement
   • Par des balises spéciales

10. 10. Qu'est-ce qu'un design system ?

    • Un jeu de couleurs aléatoires
    • Un ensemble cohérent de règles (couleurs, typo, espacements) et composants
    • Un seul fichier CSS
    • Un langage de programmation

11. 11. Pourquoi utiliser un framework CSS plutôt que tout écrire à la main ?

    • Pour compliquer le code
    • Pour gagner du temps et avoir des composants cohérents et responsive
    • Pour supprimer le HTML
    • Pour remplacer JavaScript

12. 12. Que signifie « breakpoint » en design responsive ?

    • Une erreur de code
    • Une largeur d'écran à partir de laquelle la mise en page change
    • Un point de sauvegarde
    • Un type de police

13. 13. Quel type de fichier utilise SCSS ?

    • .css uniquement
    • .scss (compilé en CSS)
    • .js
    • .html

14. 14. À quoi sert la grille (grid) en CSS ou Bootstrap ?

    • À afficher des tableaux uniquement
    • À diviser la page en colonnes/lignes pour aligner les éléments
    • À supprimer les marges
    • À exécuter du JavaScript

15. 15. Qu'est-ce qu'un thème (theme) en frontend ?

    • Un seul fichier
    • Un ensemble cohérent de couleurs, polices et styles pour toute l'interface
    • Un framework backend
    • Une base de données

16. 16. Qu'est-ce que Flexbox en CSS ?

    • Un langage de programmation
    • Un mode de mise en page pour aligner et répartir des éléments (flex)
    • Un framework JavaScript
    • Un type de fichier

17. 17. À quoi servent les « media queries » en CSS ?

    • À exécuter du JavaScript
    • À adapter les styles selon la taille d'écran ou d'autres critères
    • À supprimer le HTML
    • À compiler le CSS

18. 18. Qu'est-ce qu'une variable en SCSS/CSS moderne ?

    • Une erreur
    • Un nom associé à une valeur (couleur, taille) pour réutiliser et maintenir
    • Un type de sélecteur
    • Une balise HTML

19. 19. Que signifie « BEM » (Block Element Modifier) ?

    • Un langage de programmation
    • Une convention de nommage des classes CSS pour structurer et éviter les conflits
    • Un framework backend
    • Un type de grille

20. 20. Pourquoi privilégier des composants réutilisables en frontend ?

    • Pour compliquer le code
    • Pour éviter la duplication, garder une interface cohérente et faciliter la maintenance
    • Pour supprimer le CSS
    • Pour remplacer le HTML