Youth Cocoon

CRÉE · TESTE · PARTAGE EN SÉCURITÉ

Du premier changement à une app utile.

Niveau 1 : crée ton premier site. Niveau 2 : ajoute des données et des états résilients. Chaque niveau garde Préparer → Pratiquer → Produire → Prouver → Présenter.

Commencer dans le laboGuide de sécurité
Progression0/10 leçons

NIVEAU 1

Crée ton premier site

Site téléchargeable + visite de 60–90 secondes

NIVEAU 2

Crée une app Web utile

Brief produit + démo de trois minutes

Environ 20–35 min

Besoin: Seulement un navigateur. Les comptes et la publication peuvent attendre.

Apprends ceci

HTML, CSS, JavaScript, versions et partage sûr

Un site Web est une expérience utile pour une personne précise, pas une pile de code. Choisis une petite mission et un public. Le Labo créateur fournit un modèle fonctionnel pour obtenir un résultat visible dès la première séance.

Apprends le rôle de HTML, CSS et JavaScript. Une version est un point de sauvegarde. Déployer signifie publier une copie vérifiée, mais publier reste facultatif. Utilise un pseudo et un avatar; ne publie jamais école, adresse, horaire, contacts privés, mots de passe ou clés API.

Preuve: projet, public, mode de confidentialité et termes Web terminés dans le labo.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Le modèle créé dans Préparer.

Apprends ceci

Modifier → prévisualiser → comparer → sauvegarder

Pratique un changement à la fois. Modifie le titre et l’introduction en HTML, puis la couleur ou l’espace en CSS. Lance l’aperçu après chaque changement pour laisser le navigateur montrer le résultat.

Sauvegarde une version avant d’expérimenter davantage. Cette habitude rend les erreurs récupérables et transforme le débogage en comparaison plutôt qu’en panique.

Preuve: titre, introduction, style visuel et une version sûre modifiés dans l’aperçu.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Ta page personnalisée de Pratiquer.

Apprends ceci

Action → décision → résultat visible

Choisis une petite interaction : révéler un conseil, répondre à un quiz, augmenter un compteur ou filtrer une liste. Le labo ajoute un modèle fonctionnel à lire, modifier, tester et réinitialiser.

Écris le rôle de l’interaction en une phrase. Le visiteur doit savoir quoi faire et comprendre le résultat. Une interaction claire vaut mieux que cinq fonctions inachevées.

Preuve: une action du visiteur produit un résultat clair et la décision est notée.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: L’interaction fonctionnelle de Produire.

Apprends ceci

Preuves de test, débogage et accessibilité

Prouver n’est pas l’endroit pour ajouter une grande technologie. C’est le moment de mettre ton travail au défi. Lance les tests, utilise le clavier, réduis l’aperçu et vérifie titres, descriptions d’images, focus et informations privées.

Un test échoué est une preuve utile. Corrige un problème, relance les tests et explique ce que le résultat t’a appris. Cette explication fait partie de la preuve.

Preuve: tests de structure, interaction, mobile, accessibilité et confidentialité lancés; une correction expliquée.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Ton site testé. Publier reste facultatif.

Apprends ceci

Une histoire concise sur le public, le but, l’interaction et les preuves

Utilise la visite générée : qui la page aide, ce que le visiteur peut faire, ce que les tests ont trouvé et ce que tu as corrigé. Montre l’interaction plutôt que chaque ligne de code.

Télécharge le site complet comme réalisation. Publier est un choix facultatif après une vérification adulte; terminer le cours n’exige jamais une identité publique ou un service payant.

Preuve: vérification de confidentialité réussie, site téléchargé et visite de 60–90 secondes présentée.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Niveau 1 ou aisance avec HTML, CSS et JavaScript.

Apprends ceci

API, JSON, demandes, réponses, états d’interface et données privées

Une app Web combine une interface et des données changeantes. Choisis une petite mission : conseils, événements, ressources ou disponibilité. Tu pratiqueras avec des données simulées avant tout vrai service.

Apprends le cycle demande-réponse, puis écris une règle de données minimales : recueillir seulement le nécessaire. Noms, écoles, lieux, contacts, mots de passe et jetons n’appartiennent pas à ce projet.

Preuve: mission d’app, vocabulaire API et règle de données minimales terminés.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: La mission de données de Préparer.

Apprends ceci

Réponses simulées et alternatives au parcours idéal

Utilise le terrain API simulée pour lancer trois réponses. Une demande réussie peut contenir des résultats ou une liste vide. Une demande échouée doit afficher une explication calme et Réessayer, pas une page blanche.

Comme le terrain est simulé, tu peux apprendre le flux de données sans compte, facturation, erreur CORS ou identifiant exposé.

Preuve: réponses succès, vide et erreur explorées avec une décision de récupération.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Les réponses simulées de Pratiquer.

Apprends ceci

Interfaces résilientes et données lisibles

Conçois les quatre états avant de connecter un point d’accès réel. Chaque état a besoin d’un retour clair. L’état de succès a aussi besoin d’une étiquette et d’une source.

Le labo fournit un modèle fetch lisible. Utilise-le comme carte : afficher le chargement, vérifier la réponse, lire JSON, décider si les résultats existent et récupérer après une erreur.

Preuve: états chargement, succès, vide et erreur conçus avec une carte de données étiquetée.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Les quatre états d’app de Produire.

Apprends ceci

Tests hors ligne, invalides, lents, clavier et sécurité des secrets

Lance des scénarios d’échec au lieu d’ajouter une fonction. Teste hors ligne, étiquettes manquantes, réponse lente et accès clavier à Réessayer. Note ce que chaque échec montre au visiteur.

Confirme que le code du navigateur ne contient aucun mot de passe, jeton, contact privé, école ou lieu. Explique un changement causé par un test échoué.

Preuve: deux scénarios d’échec lancés, code vérifié pour les secrets et une correction résiliente expliquée.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Environ 20–35 min

Besoin: Le plan d’app testé de Prouver. Un backend en ligne est facultatif.

Apprends ceci

Expliquer valeur, flux de données, résilience et prochaine version

Utilise la démo générée pour expliquer qui l’app aide, quelles données elle demande, comment elle gère quatre états, quel test a échoué et ce que tu as changé.

Télécharge le brief produit comme preuve. Connecter un vrai Worker ou publier l’app est une extension facultative après vérification adulte; les données simulées démontrent la compétence centrale.

Preuve: brief produit téléchargé et histoire de trois minutes sur public, données, tests et prochaine version présentée.

Si tu bloques: Utilise le modèle, réinitialise sans honte et change une seule chose à la fois.

Confirme au fur et à mesure

Tu repars avec des preuves, pas seulement des cases cochées

Garde le fichier du site, le brief produit, les résultats de tests et les scripts de présentation. Publier reste facultatif.

Tous les parcoursMon progrès