Guide d'utilisation COD'ÂGES

Apprends à utiliser la plateforme étape par étape avec des exemples de code ! 🚀

Étape 1 sur 6

Créer ton compte

Clique sur le bouton 'S'inscrire' en haut à droite

Tu verras un formulaire s'ouvrir

Remplis tes informations (prénom, nom, âge)

Sois honnête sur ton âge pour avoir des cours adaptés

Entre l'email de tes parents

Ils recevront un email de confirmation

Choisis un mot de passe sécurisé

Au moins 8 caractères avec des chiffres

Demande à tes parents de valider l'email

Ils doivent cliquer sur le lien reçu

📚 Apprends à coder progressivement

Découvre les différents langages avec des exemples expliqués pas à pas

Scratch - Blocs visuels

Scratch utilise des blocs colorés que tu assembles comme des LEGO. Parfait pour débuter !

🎮 Faire bouger un personnage

📖 Explication : Ce code fait avancer ton personnage de 10 pas quand tu cliques sur le drapeau vert.

💡 Concept clé : Les blocs s'exécutent de haut en bas, dans l'ordre.

Quand 🏁 est cliqué

Avancer de 10 pas

Dire 'Bonjour!' pendant 2 secondes

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🔄 Créer une boucle

📖 Explication : Une boucle répète des actions plusieurs fois. Ici, le chat tourne 10 fois.

💡 Concept clé : Les blocs indentés (décalés) sont à l'intérieur de la boucle.

Quand 🏁 est cliqué

Répéter 10 fois

Tourner de 36 degrés

Attendre 0.1 seconde

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🎨 Changer de couleur

📖 Explication : Ce code change la couleur du personnage quand tu appuies sur la barre d'espace.

💡 Concept clé : Tu peux déclencher des actions avec le clavier ou la souris.

Quand la touche espace est pressée

Ajouter 25 à l'effet couleur

Jouer le son 'pop'

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

Python - Langage de texte

Python est un vrai langage de programmation utilisé par les professionnels. Tu écris du texte au lieu de blocs.

👋 Afficher un message

📖 Explication : La fonction print() affiche du texte à l'écran. Les # sont des commentaires (notes pour toi).

💡 Concept clé : Les guillemets " " entourent le texte. Les virgules séparent les éléments.

# Mon premier programme Python
print("Bonjour, je suis un codeur !")
print("J'ai", 10, "ans")

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🔢 Utiliser des variables

📖 Explication : Une variable est comme une boîte qui garde une information. Tu peux la réutiliser partout.

💡 Concept clé : Le signe = met une valeur dans la variable. Pas besoin de guillemets pour les nombres.

# Les variables stockent des informations
nom = "Alice"
age = 11
points = 150

print("Je m'appelle", nom)
print("J'ai", age, "ans")
print("J'ai gagné", points, "points XP")

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🎲 Faire des calculs

📖 Explication : Tu peux faire des additions (+), soustractions (-), multiplications (*) et divisions (/).

💡 Concept clé : Les calculs se font de gauche à droite, comme en maths.

# Python peut calculer comme une calculatrice
score = 100
bonus = 50
total = score + bonus

print("Score de base:", score)
print("Bonus:", bonus)
print("Score total:", total)

# Autres opérations
double = total * 2
moitie = total / 2
print("Le double:", double)
print("La moitié:", moitie)

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🔀 Prendre des décisions

📖 Explication : if/else permet de faire différentes choses selon une condition. elif = 'sinon si'.

💡 Concept clé : L'indentation (les espaces au début) est TRÈS importante en Python !

# Les conditions permettent de choisir
age = 10

if age >= 8:
    print("Tu peux utiliser COD'ÂGES !")
    print("Bienvenue jeune codeur !")
else:
    print("Tu es trop jeune pour l'instant")

# Vérifier un score
score = 85

if score >= 90:
    print("Excellent ! 🌟")
elif score >= 70:
    print("Très bien ! 👍")
else:
    print("Continue à t'entraîner ! 💪")

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🔁 Répéter avec des boucles

📖 Explication : Les boucles répètent du code. range(5) compte de 0 à 4. Les listes [] stockent plusieurs valeurs.

💡 Concept clé : for parcourt chaque élément un par un. L'indentation montre ce qui est répété.

# Boucle for : répète un nombre précis de fois
for i in range(5):
    print("Compte:", i + 1)

print("Terminé !")

# Boucle pour afficher des étoiles
for etoile in range(3):
    print("⭐" * (etoile + 1))

# Boucle avec une liste
fruits = ["pomme", "banane", "orange"]
for fruit in fruits:
    print("J'aime les", fruit + "s")

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

HTML/CSS - Créer des sites web

HTML structure ta page web, CSS la rend belle. Ensemble, ils créent des sites magnifiques !

📄 Structure de base HTML

📖 Explication : Chaque page HTML a cette structure. <head> contient les infos, <body> le contenu visible.

💡 Concept clé : Les balises <> s'ouvrent et se ferment </> comme des parenthèses.

<!DOCTYPE html>
<html>
<head>
    <title>Mon premier site</title>
</head>
<body>
    <h1>Bienvenue sur mon site !</h1>
    <p>Je suis un jeune codeur.</p>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🎨 Ajouter des couleurs avec CSS

📖 Explication : CSS change l'apparence. Les accolades {} contiennent les styles. Chaque ligne finit par ;

💡 Concept clé : Tu peux changer les couleurs, tailles, positions... tout l'aspect visuel !

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial;
        }
        
        h1 {
            color: purple;
            text-align: center;
        }
        
        p {
            color: darkblue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Mon site coloré</h1>
    <p>Le CSS rend mon site beau !</p>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🔗 Créer des liens et images

📖 Explication : <a> crée des liens cliquables. <img> affiche des images. <ul> et <li> font des listes.

💡 Concept clé : Les attributs (href, src, width) donnent des infos supplémentaires aux balises.

<!DOCTYPE html>
<html>
<body>
    <h1>Ma galerie</h1>
    
    <!-- Un lien vers un autre site -->
    <a href="https://scratch.mit.edu">
        Visiter Scratch
    </a>
    
    <!-- Une image -->
    <img src="chat.jpg" alt="Mon chat" 
         width="300">
    
    <!-- Une liste -->
    <ul>
        <li>Scratch</li>
        <li>Python</li>
        <li>HTML/CSS</li>
    </ul>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

📦 Organiser avec des div

📖 Explication : <div> est une boîte invisible pour grouper des éléments. class= permet de leur donner un style.

💡 Concept clé : Les classes (.) permettent de réutiliser les mêmes styles sur plusieurs éléments.

<!DOCTYPE html>
<html>
<head>
    <style>
        .carte {
            background-color: white;
            border: 2px solid purple;
            border-radius: 10px;
            padding: 20px;
            margin: 10px;
        }
        
        .titre-carte {
            color: purple;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="carte">
        <h2 class="titre-carte">Projet 1</h2>
        <p>Mon premier jeu en Scratch</p>
    </div>
    
    <div class="carte">
        <h2 class="titre-carte">Projet 2</h2>
        <p>Un site web en HTML</p>
    </div>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

JavaScript - Rendre interactif

JavaScript rend tes sites web interactifs ! Clics, animations, jeux... tout devient possible.

🖱️ Réagir aux clics

📖 Explication : onclick= déclenche une fonction quand on clique. getElementById trouve un élément par son id.

💡 Concept clé : JavaScript peut modifier le contenu de la page en temps réel !

<!DOCTYPE html>
<html>
<body>
    <button onclick="direBonjour()">
        Clique-moi !
    </button>
    
    <p id="message"></p>
    
    <script>
        function direBonjour() {
            document.getElementById("message")
                .innerHTML = "Bonjour ! 👋";
        }
    </script>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🔢 Variables et calculs

📖 Explication : let crée une variable. Les fonctions peuvent recevoir des paramètres (comme 'points').

💡 Concept clé : Les variables gardent leur valeur entre les clics, parfait pour les scores !

<!DOCTYPE html>
<html>
<body>
    <h2>Calculatrice de score</h2>
    <p>Score actuel: <span id="score">0</span></p>
    <button onclick="ajouterPoints(10)">+10 points</button>
    <button onclick="ajouterPoints(50)">+50 points</button>
    <button onclick="resetScore()">Réinitialiser</button>
    
    <script>
        // Variable pour stocker le score
        let score = 0;
        
        function ajouterPoints(points) {
            score = score + points;
            document.getElementById("score").innerHTML = score;
            
            // Afficher un message si score élevé
            if (score >= 100) {
                alert("Bravo ! Tu as atteint " + score + " points !");
            }
        }
        
        function resetScore() {
            score = 0;
            document.getElementById("score").innerHTML = score;
        }
    </script>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🎮 Créer un mini-jeu

📖 Explication : Math.random() donne un nombre aléatoire. Les if/else comparent les nombres.

💡 Concept clé : Tu peux créer des jeux complets avec JavaScript !

<!DOCTYPE html>
<html>
<body>
    <h2>Devine le nombre (entre 1 et 10)</h2>
    <input type="number" id="guess">
    <button onclick="verifier()">Vérifier</button>
    <p id="resultat"></p>
    
    <script>
        // Nombre secret aléatoire
        let secret = Math.floor(Math.random() * 10) + 1;
        let essais = 0;
        
        function verifier() {
            essais++;
            let guess = document.getElementById("guess").value;
            let msg = "";
            
            if (guess == secret) {
                msg = "🎉 Bravo ! En " + essais + " essais !";
            } else if (guess < secret) {
                msg = "📈 C'est plus !";
            } else {
                msg = "📉 C'est moins !";
            }
            
            document.getElementById("resultat").innerHTML = msg;
        }
    </script>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

🎨 Changer les styles dynamiquement

📖 Explication : element.style permet de changer n'importe quel style CSS avec JavaScript.

💡 Concept clé : Tu peux modifier couleurs, tailles, positions... tout en temps réel !

<!DOCTYPE html>
<html>
<head>
    <style>
        #boite {
            width: 200px;
            height: 200px;
            background-color: purple;
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <div id="boite"></div>
    <br>
    <button onclick="changerCouleur('red')">Rouge</button>
    <button onclick="changerCouleur('blue')">Bleu</button>
    <button onclick="changerCouleur('green')">Vert</button>
    <button onclick="agrandir()">Agrandir</button>
    <button onclick="tourner()">Tourner</button>
    
    <script>
        let rotation = 0;
        let taille = 200;
        
        function changerCouleur(couleur) {
            document.getElementById("boite")
                .style.backgroundColor = couleur;
        }
        
        function agrandir() {
            taille = taille + 20;
            let boite = document.getElementById("boite");
            boite.style.width = taille + "px";
            boite.style.height = taille + "px";
        }
        
        function tourner() {
            rotation = rotation + 45;
            document.getElementById("boite")
                .style.transform = "rotate(" + rotation + "deg)";
        }
    </script>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

✨ Ajouter des animations

📖 Explication : setInterval() répète une action régulièrement. On change la position petit à petit pour animer.

💡 Concept clé : Les animations donnent vie à tes pages web !

<!DOCTYPE html>
<html>
<head>
    <style>
        #carre {
            width: 100px;
            height: 100px;
            background-color: purple;
            position: relative;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="carre"></div>
    <button onclick="deplacer()">Déplacer</button>
    
    <script>
        function deplacer() {
            let carre = document.getElementById("carre");
            let pos = 0;
            
            let animation = setInterval(function() {
                if (pos >= 300) {
                    clearInterval(animation);
                } else {
                    pos += 5;
                    carre.style.left = pos + "px";
                }
            }, 20);
        }
    </script>
</body>
</html>

Essaie ce code dans l'éditeur pour voir comment il fonctionne !

❓ Questions fréquentes

Trouve rapidement les réponses à tes questions

Va dans la section 'Projets' depuis le menu, clique sur 'Nouveau Projet', choisis un type (jeu, site web, animation), donne-lui un nom et commence à coder ! Tu peux utiliser ce que tu as appris dans les cours.

Tu gagnes des XP en complétant des cours (50-200 XP), en faisant des exercices (10-50 XP), en te connectant chaque jour (10 XP), en aidant sur le forum (20 XP) et en participant aux défis quotidiens (100 XP).

Pas de panique ! Lis attentivement le message d'erreur, vérifie l'orthographe et la ponctuation, compare avec les exemples du cours. Si tu es bloqué, pose ta question sur le forum avec ton code.

Ouvre ton projet, clique sur le bouton 'Partager', tu obtiendras un lien unique. Tu peux aussi rendre ton projet public pour que toute la communauté puisse le voir et le commenter.

Commence par Scratch ! C'est un langage visuel avec des blocs colorés, parfait pour comprendre les bases. Ensuite, tu pourras passer à Python ou HTML/CSS selon tes envies.

Complète tous les modules d'un cours avec au moins 70% de réussite aux quiz. Tu recevras automatiquement un certificat que tu pourras télécharger et partager !

Oui ! Tes parents ont accès au tableau de bord parental où ils peuvent voir tes cours, tes badges, ton temps de connexion et tes projets. Ils reçoivent aussi des rapports par email.

Va dans la section 'Événements', inscris-toi aux hackathons ou ateliers qui t'intéressent. Tu recevras un rappel par email avant l'événement avec le lien pour rejoindre.

Tu ne trouves pas ta réponse ?

🎯 Quiz de fin de guide

Teste tes connaissances sur COD'ÂGES !

Prêt à tester tes connaissances ?

8 questions pour vérifier que tu as bien compris le guide.
Réponds correctement pour gagner des points !

8 questions

+50 XP à gagner

💡 Conseils de pro pour bien apprendre

⏰

Pratique régulièrement

20 minutes par jour valent mieux que 3 heures le week-end

❌

N'aie pas peur des erreurs

Les erreurs sont tes meilleures professeurs ! Tous les codeurs en font

🎨

Sois créatif

Invente tes propres projets, c'est comme ça qu'on apprend le mieux

🤝

Demande de l'aide

La communauté est là pour toi. Pose des questions sur le forum

💾

Sauvegarde souvent

Enregistre ton travail régulièrement pour ne rien perdre

🎯

Fixe-toi des objectifs

Commence petit et augmente la difficulté progressivement

❓ Besoin d'aide ?

Notre équipe est là pour t'accompagner dans ton apprentissage

Email

avenirplus.paris@gmail.com

Téléphone

06 21 07 51 25

Adresse

28 place de la chapelle
75018 Paris

🚀 Bon codage et amuse-toi bien ! 🚀

Guide d'utilisation COD'ÂGES

Créer ton compte

Clique sur le bouton 'S'inscrire' en haut à droite

Remplis tes informations (prénom, nom, âge)

Entre l'email de tes parents

Choisis un mot de passe sécurisé

Demande à tes parents de valider l'email

Explorer les cours

Va dans la section 'Cours' du menu

Choisis un cours pour débutant

Lis la description du cours

Clique sur 'Commencer le cours'

Regarde la première vidéo

Utiliser l'éditeur de code

Ouvre un exercice de code

Lis attentivement les instructions

Écris ton code dans l'éditeur

Clique sur 'Exécuter' pour tester

Corrige les erreurs si nécessaire

Créer ton premier projet

Va dans la section 'Projets'

Clique sur 'Nouveau Projet'

Donne un nom à ton projet

Commence à coder ton idée

Sauvegarde régulièrement

Gagner des badges et XP

Complète des cours et exercices

Connecte-toi tous les jours

Aide d'autres élèves sur le forum

Participe aux défis quotidiens

Consulte tes badges dans 'Gamification'

Partager et collaborer

Partage tes projets avec la communauté

Pose des questions sur le forum

Commente les projets des autres

Rejoins des événements en ligne

Invite tes amis à rejoindre

🔗 Accès rapide aux fonctionnalités

📚 Apprends à coder progressivement

Scratch - Blocs visuels

🎮 Faire bouger un personnage

🔄 Créer une boucle

🎨 Changer de couleur

Python - Langage de texte

👋 Afficher un message

🔢 Utiliser des variables

🎲 Faire des calculs

🔀 Prendre des décisions

🔁 Répéter avec des boucles

HTML/CSS - Créer des sites web

📄 Structure de base HTML

🎨 Ajouter des couleurs avec CSS

🔗 Créer des liens et images

📦 Organiser avec des div

JavaScript - Rendre interactif

🖱️ Réagir aux clics

🔢 Variables et calculs

🎮 Créer un mini-jeu

🎨 Changer les styles dynamiquement

✨ Ajouter des animations

❓ Questions fréquentes

🎯 Quiz de fin de guide

Prêt à tester tes connaissances ?

💡 Conseils de pro pour bien apprendre

Pratique régulièrement

N'aie pas peur des erreurs

Sois créatif

Demande de l'aide

Sauvegarde souvent

Fixe-toi des objectifs

❓ Besoin d'aide ?

Email

Téléphone

Adresse