Challenge CSS du Temps des Fêtes

À l’arrivée de Noël nous mettons un challenge pour se mettre dans l’ambiance des Fêtes : un challenge CSS.

Présentation du projet

À tous nos étudiants en développement Web, nous vous lançons le Challenge CSS du Temps des Fêtes. Nous reprenons l’idée du CSS Zen Garden, mais nous l’amenons à un autre niveau avec du HTML5, un lecteur audio en JavaScript et quelques autres gadgets JavaScript.

Pour le challenge, nul besoin de connaître le JavaScript, juste les CSS et si vous voulez faire des effets spéciaux, les techniques plus modernes du CSS31.

Pour participer (ou juste pour un défi personnel), vous téléchargez l’archive sur gitHub.

Nous vous suggérons de mettre dans le dossier CSS un dossier avec votre nom, p.ex. juan-stephan/ pour moi et y mettre la CSS et les images qui servent dans la CSS. Dans le fichier index.html vous pouvez tester en remplaçant ligne qui ajoute la CSS par la vôtre.

<link rel="stylesheet" href="themes/minimal/styles.css" 
    media="screen" id="css"/>

par (par exemple)

<link rel="stylesheet" href="themes/juan-stephan/styles.css"
    media="screen" id="css"/>

Si vous voulez nous transmettre votre travail, vous nous envoyez un courriel avec :

  • Votre prénom et nom
  • Le nom de votre thème
  • Le URL de votre CSS

Si vous n’avez pas accès à un serveur Web pour mettre votre CSS, vous pouvez joindre une archive zip de votre dossier pour le thème contenant votre CSS et les images de décoration.

Pour vous donner une idée, j’ai mis un thème exemple dans le dossier themes/juan-stephan/.

Figure 1 — Capture d’écran de ce que j’ai fait comme exemple de départ. Je ferai une version plus sophistiquée avant les Fêtes de 2020.

Nous prévoyons rajouter la liste des thèmes soumis sur le côté juste avant Noël. Amusez-vous bien!

Pour les règles CSS qui ont permis de construire le thème exemple, les techniques sont enseignées dans les cours Maîtriser les feuilles de styles CSS, Responsive Web Design et CSS3 pour concepteurs de sites Web (ou leurs équivalents au Collège de Maisonneuve).

Pour le petit outil pour montrer ou non le restant de la chanson, la technique est montrée dans le cours Fondements du JavaScript. Pour ceux qui veulent plus de détails sur le lecteur audio, c’est un exercice que Benoit fait dans le cours HTML5 : les API fondamentales. Pour le chargement asynchrone de la liste des thèmes, le sujet est couvert dans le cours JavaScript avancé.

1Il y a une fonctionnalité JavaScript qui ne fonctionnera pas si on ne met pas sur un serveur Web, mais ce n’est pas important pour faire le challenge.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*