Construis une application météo

Ta première journée : partir d'un dossier vide et livrer une petite application web qui affiche la météo d'une ville. En HTML, CSS et JavaScript natifs : pas de framework, pas d'outil de build, aucune bibliothèque externe.

Ce site ne contient aucune solution

Il te dit quoi construire et où chercher, jamais le code à écrire. C'est volontaire : le but de la journée n'est pas d'obtenir une application, c'est que tu saches expliquer chaque ligne de celle que tu auras écrite.

Le parcours →

8 étapes, de la page blanche à l'application finie. Commence ici.

Quand tu bloques →

La méthode de débogage et les 5 blocages classiques de cet exercice.

Journal de bord →

À remplir au fil de la journée. C'est ce que ton encadrant lira.

Le cahier des charges

L'application doit permettre à un utilisateur de taper un nom de ville et de voir la météo actuelle de cette ville. Elle doit gérer quatre situations, avec un affichage différent pour chacune.

Situation	Ce que l'utilisateur doit voir
Rien n'a encore été cherché	Un état d'accueil neutre
La recherche est en cours	Un indicateur de chargement
La ville n'est pas trouvée	Un message d'erreur compréhensible
Tout s'est bien passé	Une carte avec les informations météo

Les informations à afficher en cas de succès

Le nom de la ville et son pays, la température actuelle, une description de la météo (« Ciel dégagé », « Pluie modérée »…) accompagnée d'un pictogramme, l'humidité et la vitesse du vent.

Contraintes techniques

Trois fichiers : un .html, un .css, un .js. Rien d'autre.
Aucune clé d'API à créer : l'API retenue est ouverte.
Aucune erreur rouge dans la console du navigateur en usage normal.
Aucun message technique brut affiché à l'utilisateur. TypeError: ..., undefined, [object Object] : ça, c'est pour la console, pas pour l'écran.

Ce qu'on ne te demande pas

Ne perds pas de temps là-dessus : un design sophistiqué, des animations, un mode sombre, du responsive au pixel près, des tests automatisés, une mise en ligne.

Comment on travaille aujourd'hui

Tu es autonome

Ton encadrant passera te voir trois ou quatre fois dans la journée, quelques minutes à chaque fois. Entre deux passages, tu avances seul·e : c'est prévu comme ça, ce n'est pas de l'abandon.

Tu remplis le journal de bord

Où tu en es, ce qui t'a bloqué, ce que tu n'as pas compris. Deux lignes par étape suffisent. C'est ce qu'il regardera en arrivant, plutôt que de t'interrompre toutes les heures. Ouvrir le journal.

La règle des 30 minutes

Bloqué·e plus de 30 minutes sur le même problème ? Tu le notes dans le journal, et soit tu passes à l'étape suivante en y revenant plus tard, soit tu appelles ton encadrant. Les deux sont acceptables. Rester bloqué·e en silence toute la matinée ne l'est pas : c'est la seule vraie erreur possible aujourd'hui.

Le vrai critère d'évaluation

Que tu saches expliquer chaque ligne de ton code. Pas la vitesse, pas le nombre de fonctionnalités. Une application inachevée mais entièrement comprise vaut mieux qu'une application complète que tu ne sais pas relire.

Utiliser l'IA · autorisé, avec une méthode

Tu as le droit d'utiliser ChatGPT, Claude ou Copilot : c'est un outil de travail normal. Mais utilisé bêtement, il te fera perdre ta journée. Tu auras une application qui marche et tu n'auras rien appris, et ça se verra en trente secondes à la première question qu'on te posera dessus.

Bonne utilisation

« Explique-moi ce que fait await dans cet exemple, comme si j'avais 15 ans. »
« Voici mon code et l'erreur que j'obtiens : aide-moi à comprendre d'où elle vient, sans me donner le code corrigé. »
« Quelles questions dois-je me poser pour bien gérer les erreurs réseau ? »
« Relis mon code et dis-moi ce qui est fragile, sans le réécrire. »
« Donne-moi trois exercices courts pour m'entraîner sur les promesses. »

Mauvaise utilisation

« Écris-moi une application météo en HTML/CSS/JS. » : tu peux fermer ce site, la journée est finie et tu n'auras rien appris.
Coller un bloc de code que tu ne comprends pas, parce qu'il « marche ».

Le test avant de coller du code généré

Masque-le, et réécris-le de mémoire avec tes mots. Si tu n'y arrives pas, tu ne l'as pas compris : demande une explication plutôt qu'une solution.

L'IA se trompe sur les API

Elle invente régulièrement des noms de paramètres qui n'existent pas. La documentation officielle, elle, a raison. En cas de désaccord entre l'IA et la doc : c'est la doc.

Ta boîte à outils

Garde ces onglets ouverts toute la journée.

L'API que tu vas utiliser : Open-Meteo

Gratuite, sans compte ni clé d'API.

Documentation météoopen-meteo.com
Documentation géocodage : nom de ville → coordonnéesopen-meteo.com

Les fondamentaux

MDN est la référence du développement web, et elle est en français.

Ton outil de débogage n° 1 : la console

Touche F12 dans le navigateur. Tu vas y passer la journée, autant apprendre à t'en servir.

Les outils de développement du navigateurMDN

Confort de travail (recommandé)

Extension VS Code « Live Server » marketplace : recharge la page à chaque sauvegarde, et évite certains blocages du navigateur liés à l'ouverture d'un fichier en file://.

Commencer le parcours →