Épisode · Wiki Storia
S1 - E5 | Le Nuage des Sites Magiques
Comment créer un site web vivant avec du code ?
En route vers la connaissance avec les musiques des 3 à 6 ans !
Aujourd'hui, nous partons à la découverte de la création d'un site web vivant avec du code.
Des images de nos petits aventuriers en pleine action — tu viens jouer avec eux ?
🎼 Prêt(e) à bouger, chanter, rêver ?
Cette première mélodie t’emmène découvrir le monde en musique !
🎤 Bouge, chante, découvre !
C’est parti pour l’aventure avec cette seconde musique. 😀
🎙 Retrouve les paroles de nos musiques :
Les paroles des deux musiques sont identiques, seules les mélodies sont différentes.
L’aventure commence avec une histoire et des découvertes pour les 6 - 8 ans !
📻 Écoutez cet article en mode podcast
Pour vivre une expérience immersive, profitez de notre article en mode podcast. Cliquez sur le lecteur ci-dessous pour démarrer l'écoute et laissez-vous emporter par notre article !
📝 Résumé rapide des informations à retenir
Comment créer un site web vivant avec du code ?
Un site web est comme une grande feuille de papier magique où on peut écrire des histoires, montrer des images et même jouer à des jeux. Pour créer un site web vivant, on utilise trois amis très spéciaux : HTML, CSS et JavaScript.
HTML est comme le squelette du site, il organise tout ce qu'on voit. Il permet de structurer les différentes parties d'un site web, comme le titre, les paragraphes et les images. C'est grâce à lui que tout est bien rangé et facile à trouver.
CSS, lui, est le styliste qui rend le site beau et coloré. Il permet de changer les couleurs, les tailles et les positions des éléments sur une page web. Avec CSS, on peut transformer un site simple en une œuvre d'art visuelle.
Enfin, JavaScript est le magicien qui fait bouger et réagir les éléments du site. Il ajoute des animations et des interactions, comme des boutons qui changent de couleur quand on clique dessus. Avec JavaScript, un site web devient vivant et interactif.

Le Nuage des Sites Magiques
Comment créer un site web vivant avec du code ?
La Découverte du Nuage des Sites Magiques
Après avoir surmonté les défis du Labyrinthe (1) Numérique, où Kenji et Aïcha, accompagnés de leurs amis, ont suivi les conseils d'un chat siamois rusé pour déjouer les murs changeants, ils découvrent un monde encore plus magique. Grâce aux algorithmes (2), ils ont appris à manipuler (3) les codes pour trouver la sortie. Leur aventure les a conduits jusqu'à un nuage flottant où chaque page web brille comme une étoile. Aïcha, avec ses cheveux tressés et ses lunettes rondes, est particulièrement excitée. Elle adore créer des pages qui brillent, bougent et parlent ! Kenji, quant à lui, est toujours prêt à l'action, sa casquette verte et son t-shirt pixelisé en témoignent. Ensemble, ils s'apprêtent à explorer ce nouveau territoire enchanté.
Aïcha, émerveillée, s'exclame :
« Regarde, Kenji ! Chaque page est une étoile ! »
Kenji, émerveillé, s'exclame :
« Incroyable ! On peut créer notre propre site magique ! »
Aïcha, les yeux brillants d'excitation, dit :
« Oui, commençons ! Je vais mélanger les couleurs et les formes. »
Peu de temps après, Aïcha combine les couleurs, les formes et les lignes de programme (4). Elle crée une page qui raconte toutes leurs aventures. Kenji observe, fasciné. Il imagine déjà des jeux interactifs où les utilisateurs peuvent contrôler des dragons ou résoudre des énigmes. Ensemble, ils travaillent dur, leurs doigts dansent sur les claviers magiques. Leur site prend vie peu à peu.
Kenji, excité, propose alors :
« Aïcha, on peut ajouter des dragons et des énigmes ! »
Aïcha, enthousiaste, s'exclame :
« Super idée ! On va rendre notre site encore plus vivant. »
En combinant couleurs, formes et lignes de code, ils conçoivent une page qui raconte toutes leurs aventures… et qui réagit au toucher !
La Création d'un Site Web Interactif
Après avoir ajouté des boutons qui changent de couleur, des images qui bougent et des textes qui apparaissent en clignotant, Aïcha et Kenji sont ravis. Leur site devient de plus en plus vivant. Ils continuent à explorer les possibilités infinies du code.
Kenji, plein d'enthousiasme, propose alors :
« Aïcha, ajoutons des sons quand on clique sur les boutons ! »
Aïcha, enthousiaste, s'exclame :
« Excellente idée ! On va rendre notre site encore plus amusant. »
Kenji, les yeux brillants d'excitation, propose :
« On peut aussi ajouter des jeux interactifs. »
Aïcha, les yeux brillants d'excitation, ajoute :
« Oui, et des histoires qui bougent ! »
Peu de temps après, ils découvrent que certaines parties de leur site ne fonctionnent pas correctement. Kenji propose d'utiliser des algorithmes pour résoudre le problème. Ils écrivent des lignes de code pour vérifier chaque élément de leur site.
Une fois leur site terminé, Aïcha et Kenji, accompagnés de leur fidèle animal de compagnie, un chaton blanc nommé Pixel, se retrouvent soudainement transportés dans un marché enchanté. Là, ils découvriront les briques magiques nécessaires pour construire leurs programmes. Chaque étal brille de modules (5) colorés, d’écrans miniatures et de fils lumineux, prêts à être assemblés pour créer des merveilles numériques. Avec leurs nouveaux outils et leur imagination sans limites, ils sont prêts à affronter de nouvelles aventures et à explorer encore plus de mystères dans le monde des algorithmes magiques. Qui sait quelles surprises les attendent au Marché des Modules ?
📺 Regardez cet article sous format vidéo
Pour une expérience encore plus immersive, visionnez notre vidéo :