• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/03/2022

Manipulez vos outils !

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Compétences évaluées

  • Mettre en place son environnement Front-End

Description

Ceci est un quiz pratique, c'est-à-dire qu'il vous faudra effectuer plusieurs manipulations pour répondre aux questions !

Voici les instructions à suivre :

  1. Clonez le dépôt Git suivant avec VS Code : https://github.com/willehpeh/setup-development-environment
  2. Lancez le fichier  index.html  .
    • Si vous avez installé l’extension Live Server, vous pouvez cliquer sur le bouton “Go Live” en bas de la fenêtre de VSCode, ou alors en faisant clic droit sur le fichier et sélectionnant “Open With Live Server”.
    • Si vous n’avez pas installé l’extension, vous pouvez ouvrir le fichier  index.html  directement depuis votre explorateur de fichiers ou en utilisant la fonction "Run and debug de VSCode" qui se trouve juste au-dessous de l’icône des outils Git.

Vous verrez la page de travail du quiz qui s'ouvre :

La page du quiz
La page du quiz

Vous constaterez que le menu "Dropdown" en haut est désactivé. Vous allez l'activer maintenant !

  1. Dans VS Code :
    - Dans le sous-dossier  extras  , ouvrez  extra.js  , copiez-en tout le contenu.
    - Ouvrez  index.html  , et collez le contenu de  extra.js  à la ligne 73 (entre les balises  <script>  et  </script>  des lignes 72 et 74).
    - à la ligne 52 de  index.html  , supprimez le mot  disabled
    - enregistrez  index.html
  2. De retour dans Chrome :
    - Actualisez la page – le menu "Dropdown" doit maintenant être actif !
    - Notez le dernier code du menu (le caractère # et les 6 chiffres).
    - Inspectez le carré du milieu.
    - Modifiez son style  background-color  , en y mettant le code du menu Dropdown que vous avez noté.
    - Répondez à la question 1.
  3. Toujours dans Chrome :
    - Deux de ces carrés ne sont en fait pas des carrés ! Trouvez le plus large, et inspectez-le.
    - Modifiez son style  background-color et mettez  transparent  (ou désactivez-le avec sa case à cocher) : un chiffre se révèle !
    - Répondez à la question 2.
  4. Ouvrez la console, et répondez à la question 3.
 
  • Question 1

    Comment décririez-vous la couleur du carré après sa modification ?

    • Rouge

    • Vert

    • Rose

    • Violet

    • Jaune

  • Question 2

    Quel nombre est révélé ?

    • 3

    • 5

    • 12

    • 15

  • Question 3

    La date du jour apparaît dans la console. De quelle couleur est le texte ?

    • Bleu

    • Rouge

    • Noir

    • Vert

    • Blanc