• 8 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 12/12/19

Entraînez-vous en réalisant une page dynamique avec jQuery

Log in or subscribe for free to enjoy all this course has to offer!

À vous de jouer !

C'est bientôt l'anniversaire de l'un de vos amis, et vous voulez réaliser une petite "carte" web marrante. Construisez une page contenant un message d'anniversaire évolutif pour votre ami, en utilisant HTML, CSS et jQuery ! En haut de votre page, vous incluerez un message "Joyeux anniversaire", suivi de 3 petits paragraphes de voeux, qui se dévoilent un par un lorsque l'on clique sur le précédent. Une fois que l'utilisateur a cliqué sur le dernier paragraphe, un gros effet sonore doit se faire entendre ! Vous pouvez aussi, pourquoi pas, faire en sorte que l'image d'arrière-plan change, qu'une animation prenne vie, etc. Tout ce que vous voudrez pour illuminer la journée de votre ami. Vous placerez votre projet dans un dossier appelé anniversaire. À l'intérieur se trouveront un fichier appelé index.html et deux autres dossiers appelés css et js. Dans le dossier css, vous aurez un fichier appelé styles.css. Dans le dossier js, vous placerez un fichier appelé anniversaire.js, et c'est dans ce fichier que vous écrirez votre jQuery. Vous pouvez télécharger l'ensemble de ces dossiers vides ici : dossier à remplir Vous devez fournir :

  • Le dossier anniversaire avec tout son contenu

  • Une capture d'écran de votre page qui montre les 3 paragraphes

  • Un fichier texte contenant un court descriptif de votre démarche. C’est très important de pouvoir expliquer ses démarches quand on travaille dans une équipe de développement. Faire un résumé de votre manière d’aborder et de réaliser l’activité vous permettra de solidifier ce que vous avez appris !

Voici un GIF animé d'une page d'exemple que j'ai réalisée. À chaque clic, un nouveau paragraphe se dévoile, et il y a un gros changement visuel à la fin. N'hésitez pas à faire quelque chose au look complètement différent !

Sample page for inspiration

Vérifiez votre travail

Vérifiez que votre travail répond bien aux critères suivants :

  • Votre dossier contient le projet, avec des fichiers HTML, CSS et JS remplis.

  • Votre page comprend 3 paragraphes de voeux.

  • Le résumé de votre démarche est structuré de manière claire et rationnelle.

  • Votre code fonctionne et est bien stylisé grâce à du CSS : lorsque vous cliquez sur chaque paragraphe, un nouveau apparaît. Lorsque vous cliquez sur le dernier paragraphe, un grand changement visuel se produit dans la page.

Example of certificate of achievement
Example of certificate of achievement