À 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
anniversaireavec tout son contenuUne 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 !
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.
