À l’adolescence, le premier portfolio de programmation doit allier créativité, rigueur et visibilité. Il ne s’agit pas seulement d’accumuler des lignes de code, mais de présenter des réalisations qui racontent une histoire : le problème identifié, la solution imaginée, le processus de construction. Dans ce guide, nous détaillons cinq projets accessibles aux lycéens, chacun accompagné d’instructions pratiques, de conseils pour éviter les écueils fréquents et de pistes d’enrichissement. Vous pourrez ainsi choisir les projets qui correspondent à vos intérêts, les mettre en ligne et présenter un dossier cohérent aux recruteurs ou aux établissements d’enseignement supérieur.
Définir les critères de sélection d’un projet
Avant de se lancer, il est utile de clarifier ce que vous voulez démontrer avec votre portfolio : maîtrise d’un langage, capacité à structurer une application, sens de l’UX ou encore compréhension des APIs. En listant ces objectifs, vous pouvez comparer chaque idée de projet avec les compétences recherchées par les écoles ou les entreprises locales de Tétouan et Martil.
Un projet trop ambitieux risque de rester incomplet, alors qu’un projet trop simple n’apporte pas assez de matière à discuter lors d’un entretien. L’équilibre se trouve en choisissant un sujet qui vous motive, qui possède une portée fonctionnelle claire et qui vous pousse à apprendre au moins une technologie nouvelle.
Évaluer la complexité technique
Commencez par identifier les briques majeures du projet : interface graphique, base de données, appels réseau, etc. Notez le niveau de maîtrise requis pour chaque brique. Si vous avez déjà développé des pages HTML, un projet incluant du JavaScript sera une progression logique, alors que l’ajout d’une base de données peut être réservé à un deuxième projet.
Identifier les besoins du futur recruteur
Parcourez les offres de stage ou les programmes d’admission des écoles de la région. Souvent, les descriptifs mentionnent des compétences comme « développement d’applications mobiles » ou « automatisation de tâches avec Python ». Alignez vos projets sur ces mots‑clés pour augmenter leur pertinence.
Le parcours complet : Pilier Programmation
Un site web statique avec HTML, CSS et JavaScript
Le site web statique constitue le socle de tout portfolio en ligne. Commencez par créer une page d’accueil qui présente votre identité, vos compétences et un aperçu de chaque projet. Utilisez le CSS pour établir une charte visuelle cohérente ; les variables CSS permettent de garantir l’uniformité des couleurs et des polices.
Intégrez un petit script JavaScript pour activer un menu responsive ainsi qu’une galerie d’images filtrable. Cette galerie peut afficher des captures d’écran de vos projets, chaque vignette étant cliquable pour ouvrir un modal contenant une description détaillée et un lien vers le dépôt GitHub. Le bénéfice immédiat est de montrer que vous maîtrisez l’interaction client‑side sans serveur.
L’erreur fréquente est de mélanger le style et le comportement dans le même fichier. Séparez toujours HTML, CSS et JavaScript dans des fichiers distincts : cela facilite la maintenance et montre aux évaluateurs que vous respectez les bonnes pratiques de structuration.
Sur place : Notre centre de Tanger
Application mobile simple avec Flutter
Flutter permet de développer, à partir d’un seul codebase Dart, des applications fonctionnant sur Android et iOS. Pour un premier projet, choisissez une idée utile comme un convertisseur d’unités ou un suivi de dépenses. La simplicité du concept vous laisse de la marge pour explorer les widgets Flutter et le système de navigation.
Lancez le projet avec la commande `flutter create mon_convertisseur`. Remplacez le contenu du fichier `main.dart` par une structure qui comprend une barre d’application, un champ texte pour l’entrée de l’utilisateur, et un bouton qui déclenche le calcul. Utilisez le widget `setState` pour mettre à jour l’affichage en temps réel.
Installer l’environnement Flutter
Téléchargez le SDK depuis le site officiel, ajoutez le chemin d’accès à la variable d’environnement et vérifiez l’installation avec `flutter doctor`. Cette étape identifie les dépendances manquantes (Android SDK, Xcode, etc.) et vous indique comment les installer avant de commencer le codage.
Créer l’interface de conversion
Utilisez le widget `TextField` pour récupérer la valeur à convertir, puis le widget `DropdownButton` pour sélectionner l’unité de départ et l’unité d’arrivée. Le calcul s’effectue dans une fonction pure ; en le séparant de l’interface, vous facilitez les tests unitaires et vous pouvez réutiliser ce code dans d’autres projets.
Voir le parcours correspondant : Apprendre la programmation
Jeu de labyrinthe en JavaScript et Canvas
Un jeu interactif démontre votre aptitude à gérer la logique de jeu, la génération de contenu et le rendu graphique. Avec l’élément `<canvas>`, vous pouvez dessiner une grille de cellules, placer un avatar et détecter les collisions avec les murs. La génération aléatoire d’un labyrinthe à l’aide de l’algorithme de « Depth‑First Search » offre une bonne démonstration de l’utilisation des structures de données.
Le contrôle du joueur se fait avec les touches fléchées ; chaque pression déclenche une vérification de la case ciblée avant de mettre à jour la position du personnage. L’ajout d’un compteur de temps et d’un système de scores invite à afficher les performances dans un tableau de classement dynamique.
Dessiner la grille
Divisez le canvas en cellules de taille fixe (par exemple 40 px). Parcourez un tableau à deux dimensions où chaque case possède un état : mur, chemin ou sortie. Le rendu consiste à tracer un rectangle rempli pour les murs et à laisser vide les chemins. Cette approche rend la modification du design (couleurs, taille) très simple.
Gérer les déplacements
Lorsqu’une touche est pressée, calculez les coordonnées de la cellule voisine. Si celle‑ci n’est pas un mur, mettez à jour la position du joueur et redessinez le canvas. Un problème récurrent est d’oublier d’effacer l’ancienne position ; utilisez `clearRect` avant chaque nouveau rendu pour éviter les artefacts visuels.
Pour aller plus loin : Scratch pour enfants
Automatisation d’une tâche quotidienne en Python
Les adolescents passent souvent du temps à organiser leurs notes, à sauvegarder des fichiers ou à analyser leurs performances sportives. Un script Python qui récupère automatiquement les fichiers d’un répertoire, les renomme selon une convention et les copie dans un dossier cloud montre la capacité à travailler avec le système de fichiers et les API web.
Commencez par importer le module `os` pour parcourir les dossiers, `shutil` pour copier les fichiers, et `requests` pour appeler une API de stockage en ligne (par exemple une implémentation compatible WebDAV). Le script doit inclure une fonction `main` avec un bloc `if __name__ == "__main__":` afin de pouvoir être exécuté directement ou importé dans d’autres projets.
Une erreur typique réside dans la gestion des exceptions : si le script tente de copier un fichier déjà présent sur le serveur, l’opération échoue et stoppe tout le processus. En entourant le bloc de copie d’un `try/except` et en journalisant les problèmes dans un fichier log, vous rendez le script résilient et professionnel.
À lire aussi : Premier robot LEGO WeDo : guide pour parents
Sur place : Notre centre de Tanger
À lire aussi : Préparer la WRO : parcours d'une équipe Safari
À consulter aussi : Python pour ados
Accompagnement de Safari Institute pour les projets adolescents
Safari Institute propose une approche « learning by doing » qui place l’étudiant au cœur du processus de création. Dans nos ateliers à Tétouan et Martil, chaque adolescent travaille sur un projet personnel tout en bénéficiant d’un encadrement ciblé : un formateur guide la réflexion technique, corrige les dérives de logique et propose des ressources supplémentaires sans fournir directement la solution.
Le suivi se fait à travers des points de contrôle hebdomadaires : dépôt d’une version minimale viable sur GitHub, revue de code en groupe et présentation de l’avancement devant les pairs. Cette dynamique développe la capacité à argumenter ses choix, à accepter la critique constructive et à itérer rapidement.
En plus des séances en présentiel, nous proposons un espace de travail en ligne où les projets sont hébergés, les commentaires de formateurs sont centralisés et les livrables finaux sont archivés. Cette infrastructure favorise la continuité entre les cours du week‑end et les projets personnels, tout en créant un portfolio cohérent que les étudiants peuvent partager avec les universités ou les employeurs.
Questions fréquentes
Quel langage choisir pour démarrer mon portfolio ?
Si vous avez déjà manipulé du texte et des pages web, HTML, CSS et JavaScript sont un bon point de départ ; ils permettent de créer un site vitrine rapidement. Pour les projets orientés données ou automatisation, Python reste le plus accessible grâce à sa syntaxe claire et à ses bibliothèques standard.
Comment héberger mon site et mes dépôts gratuitement ?
GitHub Pages propose un hébergement static sans frais ; il suffit de pousser le code dans un dépôt public et d’activer la fonctionnalité depuis les paramètres. Pour des besoins plus complexes (bases de données, API), des services comme Render ou Railway offrent des plans gratuits limités mais suffisants pour des projets de démonstration.
Dois‑je mettre mon code sur GitHub dès le premier commit ?
Oui, dès que vous avez une version fonctionnelle. Commencer tôt permet de suivre l’évolution du projet, de recevoir des retours via les issues et de montrer votre capacité à travailler avec le contrôle de version, ce qui est très apprécié par les recruteurs.
Combien de temps consacrer à chaque projet pour qu’il reste solide ?
Un rythme de 4 à 6 heures par semaine, réparties sur deux ou trois sessions, donne le temps d’avancer, de tester et de corriger les bugs sans créer de surcharge. Fixez des jalons : prototype, version bêta, version finale, puis réservez une séance de documentation.
Comment présenter mes projets lors d’un entretien d’admission ou d’un stage ?
Préparez un slide de deux minutes par projet : problème rencontré, solution technique, défis majeurs et résultats obtenus. Montrez le dépôt GitHub, expliquez la structure du code et, si possible, lancez une petite démonstration en direct. Concluez en citant les compétences concrètes développées.