🎮 Atelier Créatif • Jour 2

Mon Premier Portfolio Gaming

Aujourd'hui, on passe de l'idée… au vrai site web !

⏱️ 1h30 🎯 Mission : créer ta première page personnelle avec l'aide de l'IA
🚀 Ce qu'on va créer ensemble

Mission du jour

🌐

Une vraie page web

Ton pseudo & ton univers, tes 5 jeux préférés, hébergée localement dans ton navigateur.

🎨

Ton design

Tes propres choix de couleurs et de textes. Exprime ton style gaming unique.

🤝

Le combo gagnant

Première expérience HTML guidée par l'IA. Ton top des jeux du moment à l'honneur.

🔙 Rappel — Jour 1

C'est quoi une page web ?

Les 3 piliers d'une page web. L'IA = assistant ultra-rapide pour générer, rédiger, coder.

🧱

HTML

La structure & les os — Titres, textes, images.

🎨

CSS

Le style & la skin — Couleurs, polices, dispositions.

⚡

JS

Les pouvoirs & mouvements — Animations, interactions.

💬 Le prompt = la consigne précise qu'on donne à la machine.

🔍 L'esprit critique = l'IA peut faire des erreurs, on vérifie toujours.

Aujourd'hui, l'IA est notre coéquipier de création ! 🤝 — Aujourd'hui : HTML + CSS ! 🎯

🤖 L'IA comme Coéquipier

Le prompt fait toute la différence

❌ Mauvais prompt : « Fais-moi un site. » — Trop vague, l'IA ne sait pas ce que tu veux !
✅ Super prompt : « Crée une page HTML pour un portfolio gaming. Mon pseudo est [PSEUDO]. Mes 5 jeux préférés sont [LISTE]. Design sombre avec touches de vert néon. »
💡 Plus la consigne est détaillée, plus le résultat est impressionnant ! 🎯
🎬 Démo Live

De l'Idée au Site

1
Ouvrir l'assistant IA

Claude ou ChatGPT

2
Écrire le prompt détaillé

Avec ton pseudo, tes jeux, tes couleurs

3
Lire & analyser le code

Comprendre ce que l'IA a produit

4
Copier le code HTML

Tout le bloc de code

5
Créer portfolio.html

Sur ton ordinateur

6
Coller & enregistrer

Dans le fichier

7
Ouvrir dans le navigateur

Chrome, Firefox ou Edge — BOOM ! 🎉

🧩 Petit Défi

Mon Portfolio

2 minutes pour préparer tes paramètres avant de rédiger ton prompt !

02:00
🎮
Ton pseudo

Ton nom de gamer

⭐
Tes 5 jeux

Tes préférés du moment

🏆
Jeu n°1

Ton ultime favori

📝
Ta punchline

Une phrase pour te présenter

🎨
Deux couleurs

Ex: Noir + Néon Cyan

💬 Template de prompt :

« Crée une page HTML pour mon portfolio gaming. Mon pseudo est [PSEUDO]. Je veux une courte présentation : [TA PHRASE]. Mes 5 jeux préférés sont : [LISTE]. Mon jeu préféré ultime est [JEU N°1]. Design moderne, sombre avec [COULEUR 1] et [COULEUR 2]. Code simple pour débutant. »
🛠️

Comprendre le Code sans Peur

Les balises essentielles.

<h1>...</h1>

Grand titre principal

<p>...</p>

Paragraphe / texte

<ul> & <li>

Listes à puces

<style>

Zone de design CSS

🎨 Défi #2

Personnalise !

Ton site s'affiche ? Bravo ! Rends-le unique — objectif : au moins 3 modifications.

🔧 L'IA écrit le code — notre rôle est d'apprendre à le modifier !
🔁 Atelier en Binôme

50 Minutes

À chaque étape, aide ton coéquipier puis inversez les rôles. Chacun doit réussir à créer son propre site ! 🎯

50:00
1
Étape 1

Créer & affiner le prompt avec l'IA

2
Étape 2

Générer le code HTML

3
Étape 3

Copier / Enregistrer / Ouvrir

4
Étape 4

Modifier & personnaliser le style

✅ Checklist

Mon Portfolio

Clique sur chaque élément une fois validé.

🎤 Show Time !

Ton moment de gloire

45 à 60 secondes par personne.

01:00
👋 TON PSEUDO
Présente-toi.
🎮 TON JEU PRÉFÉRÉ
Celui qui te représente le mieux.
✨ LA PARTIE DONT TU ES LE PLUS FIER
Montre ce que tu as personnalisé.
🤖 CE QUE L'IA T'A AIDÉ À RÉALISER
Explique le coup de main reçu.
🚀 LA FONCTIONNALITÉ À AJOUTER DEMAIN
Ta prochaine idée.

💬 Feedback entre pairs

❤️ « J'aime… »
💡 « Je te propose… »
❓ « J'aimerais savoir… »
🧠

Si ça ne marche pas…

Pas de panique ! Un bug = une énigme à résoudre 😎

1
Vérifie que le fichier finit par .html (pas .html.txt)
2
Vérifie que tout le code a été copié
3
Demande à l'IA de corriger et d'expliquer l'erreur
💡 Un problème n'est pas un échec — c'est l'occasion de devenir plus fort !
🏆 Défi Bonus

Mission Accomplie !

⭐ Top 3

Ajoute une section classement

🖼️ Image

Insère <img src="...">

🔗 Lien

Ajoute <a href="...">

✨ Bouton

Crée un élément interactif

🔐

5 Règles d'Or pour Créer avec l'IA

Clique sur une carte pour la retourner.

🚀 Félicitations ! Tu as eu une idée, guidé l'IA, manipulé du vrai code et créé une vraie page web.
Ce n'est que le début de ton aventure numérique !

🎓 Envie d'aller plus loin ?

DIALLO Consulting Group

Formations, coaching et ateliers sur-mesure pour organisations, écoles et familles — IA, gestion de projet, transformation digitale.

Découvrir DIALLO Consulting Group →

Parent, enseignant ou organisateur ? Le formulaire pour rester informé des prochains ateliers est sur la page de l'Atelier Jour 1.

Prêt(e) pour la suite ou envie de revoir ? 🔁

👈 Revoir l'Atelier Jour 1 👉 Atelier Jour 3 : Mon Blog Gaming