Recherche et apprentissage

Recherche efficace

En tant que développeur·euse web, vous passerez beaucoup de temps à chercher des solutions aux problèmes rencontrés dans votre travail — vous n'êtes pas censé·e tout retenir ! Les professionnel·le·s du web utilisent des outils comme MDN Web Docs pour retrouver des informations oubliées en permanence. Comme vous le découvrirez, apprendre le développement web consiste davantage à résoudre des problèmes et à reconnaître des schémas qu'à mémoriser de nombreuses syntaxes.

Pour faciliter cela et devenir plus autonome, vous devez apprendre des stratégies efficaces pour trouver des réponses — comme discuté dans les sections ci-dessous — et savoir quand utiliser chaque stratégie. Par exemple, recherchez d'abord des informations en ligne, et ne demandez de l'aide à votre mentor, vos camarades ou un·e développeur·euse senior que lorsque vous êtes vraiment bloqué·e.

Choisir des ressources de qualité

Vous devez vous assurer que les ressources que vous choisissez pour vos recherches sont de qualité et fiables. Pour savoir quelles ressources sont réputées, demandez à votre enseignant·e ou à des collègues plus expérimenté·e·s ce qu'ils recommandent, et effectuez des recherches sur le web pour voir ce que d'autres personnes recommandent. MDN est bien sûr recommandé ; d'autres bons exemples incluent :

• Stack Overflow ^(angl.)
• Scrimba ^{(angl.) Partenaire de cours}
• YouTube
• freeCodeCamp ^(angl.)
• Codecademy ^(angl.)
• Dev.to ^(angl.)

Savoir quelles ressources utiliser et quand

La documentation existe sous différentes formes, et il est utile de savoir quand chacune est pertinente. La terminologie varie selon les sites, et il y a souvent un certain recoupement, mais en général, les types courants sont :

• Références : Comme les langues humaines ont des dictionnaires qui listent la signification de chaque mot, les langages de programmation ont des références qui tentent de couvrir de façon exhaustive l'objectif et la syntaxe de chaque fonctionnalité que les développeur·euse·s utiliseront, souvent avec des exemples d'utilisation. Les références se concentrent sur ce que fait une fonctionnalité plutôt que sur comment l'utiliser.
• Tutoriels : Permettent d'apprendre comment utiliser de nouvelles technologies. Les tutoriels sont souvent pas-à-pas et destinés aux débutant·e·s.
• Guides/Comment faire : Également associés à l'apprentissage, mais moins axés sur les débutant·e·s, et souvent orientés vers la résolution de problèmes spécifiques.
• Explications/Conceptuel : Tendent à expliquer les concepts et cas d'usage de haut niveau derrière une technologie spécifique, plutôt que d'entrer dans les détails de code bas niveau.
• Questions/Réponses/Forums : Sites où les gens posent des questions et d'autres apportent des réponses.

Vous devez consulter plusieurs sites différents, voir quels styles de documentation y sont présents, et réfléchir à ceux qui sont utiles dans différentes situations. Par exemple :

• MDN est idéal pour consulter la documentation de référence sur les différentes fonctionnalités HTML, CSS et JavaScript, et propose aussi des guides et tutoriels utiles pour apprendre de nouvelles techniques.
• Stack Overflow est un site de type Questions/Réponses, où les gens s'entraident pour trouver des solutions à des problèmes spécifiques.
• Scrimba et Codecademy proposent des tutoriels interactifs pas-à-pas. YouTube est aussi un excellent endroit pour trouver des tutoriels vidéo.

Avant tout, déterminez quelles approches d'apprentissage vous conviennent le mieux. Chacun·e apprend différemment. En réalité, vous utiliserez probablement plusieurs ressources pour vos recherches et votre apprentissage.

Rechercher efficacement

Si vous ne trouvez pas de solution à votre problème sur vos sites favoris, vous devrez élargir votre recherche au reste du web. Nous avons abordé plus tôt dans le cours des conseils généraux pour des recherches web efficaces (voir Rechercher des informations) ; cette section fournit quelques astuces spécifiques pour trouver des informations de qualité.

• Lorsque vous avez un problème avec un outil ou produit spécifique, consultez d'abord la documentation officielle. Il est surprenant de voir combien de personnes n'y pensent pas ; la documentation officielle est souvent conçue pour les débutant·e·s, donc les personnes expérimentées n'y pensent pas forcément. Si le produit que vous utilisez est la plateforme web, la documentation officieuse officielle est MDN, donc vous êtes au bon endroit !
• Vérifiez les dates des ressources trouvées. Sont-elles maintenues récemment, ou non mises à jour depuis un certain temps et donc potentiellement obsolètes ? Les sites réputés incluent généralement les dates de publication et de dernière mise à jour, justement pour que vous puissiez vérifier facilement. Idéalement, un article d'un site réputé sur une technologie ou technique moderne ne devrait pas rester non mis à jour plus de quelques années (disons 2-3). Il est tout à fait possible qu'une documentation plus ancienne sur une technologie mature (par exemple, des fonctionnalités HTML ou CSS fondamentales) reste exacte, mais gardez cela à l'esprit.
• Dans la continuité du point précédent, même des ressources nouvellement publiées peuvent contenir des informations obsolètes. Par exemple, un article sur la mise en page CSS mentionne-t-il les approches modernes comme grid et flexbox, ou présente-t-il encore des techniques obsolètes comme l'utilisation des flottants pour créer des colonnes ?
• Ne vous fiez pas à une seule source. Recoupez différentes sources, surtout si vous n'êtes pas sûr·e de la fiabilité d'une source.
• Vous pouvez aussi essayer d'utiliser des outils d'IA pour vous aider sur des problèmes de code — par exemple ChatGPT ^(angl.) ou GitHub Copilot ^(angl.). Vous devez utiliser les outils d'IA avec prudence (surtout en tant que débutant·e), et vous familiariser avec leurs forces et faiblesses :
  • Avantage : ils peuvent accélérer énormément la recherche et aider à structurer le code ou le texte.
  • Inconvénient : les outils d'IA n'ont aucune capacité de raisonnement et fournissent fréquemment des réponses trompeuses ou tout simplement fausses. Vous ne devez jamais supposer que les réponses de l'IA sont correctes — testez-les et vérifiez-les avec d'autres sources.

À propos du copier-coller de code

Qu'il soit généré par une IA ou non, copier, coller et utiliser du code que vous n'avez pas écrit et que vous ne comprenez pas a toujours été déconseillé, quel que soit votre niveau. Cela rend les bugs plus difficiles à corriger et peut entraîner des problèmes de sécurité, de performance ou d'accessibilité, souvent liés au contexte ou à la manière dont vous l'utilisez.

En tant que débutant·e, se contenter de copier-coller une solution vous fait passer à côté de l'opportunité d'apprendre en faisant vous-même, ce qui est essentiel pour mémoriser des compétences ou des concepts. Vous pouvez aussi rencontrer des problèmes de licence si le code est protégé par le droit d'auteur et que vous n'avez pas la permission de l'utiliser.

Le conseil ici est que si vous comptez utiliser une solution trouvée ailleurs, essayez au moins de comprendre comment elle fonctionne avant de la copier-coller. Idéalement, inspirez-vous-en puis écrivez votre propre version.

Construire un réseau de contacts

Nous avons assez parlé de sites web, parlons maintenant des personnes. Et des sites web.

Construire un réseau de personnes avec qui collaborer est essentiel pour être développeur·euse web. Nous en parlerons aussi dans Collaboration et travail d'équipe ; ici, nous nous concentrons sur l'utilisation de votre réseau pour la recherche.

Un réseau de recherche efficace se compose de plusieurs groupes de personnes avec différents niveaux de connaissances et de proximité :

• Pair·e·s : Il est utile de partager des informations et de poser des questions à vos pair·e·s immédiat·e·s — cela peut être vos camarades de classe ou vos collègues d'équipe — car ils·elles peuvent avoir des idées utiles à partager ou vouloir travailler sur le problème avec vous. Ils·elles ont peut-être aussi déjà rencontré le même problème et peuvent fournir une réponse.

• Enseignant·e·s ou collègues expérimenté·e·s : Si vos pair·e·s ne peuvent pas aider, l'étape suivante consiste généralement à demander à un·e collègue expérimenté·e, un·e responsable ou un·e enseignant·e. Ils·elles auront plus d'expérience que vos pair·e·s, mais gardez à l'esprit qu'ils·elles auront moins de temps libre. Vous obtiendrez de meilleurs résultats et plus de reconnaissance si vous montrez que vous avez déjà essayé de résoudre le problème vous-même, et que vous respectez leur temps. Pour cela :

  • Tenez un registre de ce que vous avez déjà essayé. Qu'est-ce qui a déjà échoué ?
  • Si le sujet de la recherche est un exemple de code ou une technique que vous n'arrivez pas à faire fonctionner, créez un cas de test en ligne avec un site comme CodePen ^(angl.) ou Scrimba ^{(angl.) Partenaire de cours} que vous pourrez leur montrer.
  • Réfléchissez bien aux questions à leur poser — quel est précisément le problème ? Si vous avez plusieurs questions à leur poser, classez-les par ordre de priorité pour aborder les points les plus importants.
  • Fixez un objectif pour la session, par exemple « essayer de trouver une solution au problème le plus prioritaire ». Notez aussi que résoudre le plus gros problème peut aussi permettre de corriger d'autres problèmes.
  • Demandez-leur comment ils·elles préfèrent communiquer avec vous à propos du problème, pour rendre l'échange le plus confortable possible.
  • Si vous organisez une réunion, ne réservez pas plus de temps que nécessaire. Si vous n'êtes pas sûr·e du temps requis, limitez la session à 30 minutes. Vous pourrez toujours leur demander de l'aide à nouveau plus tard.

• Réseau communautaire élargi : Cela peut être une communauté en ligne dédiée comme des forums ou des groupes de discussion (par exemple le Discord MDN Web Docs ^(angl.) ou les forums freeCodeCamp ^(angl.)), ou une rencontre physique comme une conférence ou un événement de partage de compétences.

• Réseau mondial : Parfois, vous pouvez être à court d'options, auquel cas vous pouvez essayer de poser votre question sur une communauté mondiale générale comme un réseau social. Parfois, des réponses utiles viennent d'endroits inattendus.

Le plus important est d'être respectueux·euse et bienveillant·e en toutes circonstances, avec toutes les personnes avec qui vous interagissez. Vous devez aussi apprendre à donner autant qu'à recevoir : les développeur·euse·s web qui rendent service et aident les autres sont beaucoup plus susceptibles de tisser des liens solides et de continuer à recevoir de l'aide.

Élaborer un plan d'apprentissage

Il est judicieux de créer un plan pour vous aider à apprendre ce que vous souhaitez apprendre.

Commencer par un objectif

Cela peut sembler anodin, mais vous devriez commencer par une phrase qui exprime ce que vous souhaitez accomplir. Soyez ambitieux·se mais aussi réaliste.

Les exemples suivants ont des portées différentes, mais sont tous réalistes et atteignables :

• Je veux devenir développeur·euse web professionnel·le dans deux ans.
• Je veux apprendre suffisamment pour créer un site web pour mon club de tennis amateur local.
• Je veux apprendre HTML et CSS afin d'élargir mon rôle et pouvoir mettre à jour le contenu du site web de mon entreprise.

Les exemples suivants sont moins réalistes :

• Je veux passer de total·e débutant·e à développeur·euse web senior en trois mois.
• Je veux créer ma propre entreprise et bâtir un réseau social qui surpassera Facebook, en deux ans.

Définir ce dont vous aurez besoin

Une fois votre objectif défini, il est judicieux de rechercher ce dont vous aurez besoin pour l'atteindre.

Par exemple :

• Matériel nécessaire :
  • Un ordinateur
  • Un accès à Internet
  • Des stylos et du papier
• Connaissances nécessaires :
  • Comment utiliser HTML, CSS, JavaScript et les outils et bonnes pratiques associés pour créer des sites et applications web (nous pouvons clairement vous aider sur ce point !).
  • Comment obtenir un nom de domaine, un hébergement, et les utiliser pour mettre un site ou une application en ligne.
  • Comment gérer une petite entreprise.
  • Comment faire la promotion de mon entreprise et attirer des client·e·s.

Estimer le temps nécessaire

Ensuite, commencez à rédiger un planning pour atteindre votre objectif. Cela peut être aussi simple que :

« Il me faudra environ 500 heures pour apprendre ce dont j'ai besoin, et j'ai un an pour le faire. Si je compte 2 semaines de vacances, je devrai travailler là-dessus 10 heures par semaine. Je suis disponible le soir et le week-end, donc je vais organiser mon temps autour de ces créneaux. »

Ne vous inquiétez pas de la précision du plan. Une estimation approximative suffit — il est plus important d'avoir quelque chose sur lequel s'appuyer.

Le temps que vous pouvez y consacrer dépend bien sûr de votre situation. Si vous êtes à l'école, vous avez beaucoup plus de temps libre que si vous avez un emploi et des enfants à charge. Il est toujours possible d'atteindre vos objectifs, mais il faut être réaliste sur la rapidité avec laquelle vous pouvez y arriver.

Si vous suivez une formation universitaire ou en école pour apprendre le développement web, la plupart de cette planification est déjà faite pour vous — tant mieux !

Il est utile d'écrire quelques sous-objectifs sous votre objectif principal, pour suivre plus facilement votre progression. Par exemple :

• Bases de HTML et CSS acquises d'ici l'été
• Bases de JavaScript acquises d'ici décembre
• Projet de site web exemple réalisé d'ici avril prochain
• etc.

Si vous ne savez pas quels éléments mettre sur votre liste d'objectifs, notre programme peut vous aider.

Quand vous avez établi un planning hebdomadaire, tenez un journal de ce que vous parvenez à faire chaque semaine dans un simple tableur ou même dans un carnet ! Réfléchissez régulièrement à vos progrès et ajustez votre plan si besoin.

Rester motivé·e

Il est difficile de rester motivé·e, surtout si vous essayez d'apprendre une compétence complexe comme la programmation ou le développement web. Voici quelques conseils pour rester motivé·e et continuer à apprendre :

• Essayez de rendre votre environnement de travail aussi productif que possible. Installez-vous à un bureau et sur une chaise confortables, assurez-vous d'avoir assez de lumière pour voir ce que vous faites, et essayez d'inclure des éléments qui vous aident à vous concentrer (par exemple, musique douce, parfums, tout ce dont vous avez besoin). N'essayez pas de travailler dans une pièce pleine de distractions — par exemple une télévision allumée, avec vos ami·e·s qui regardent un match ! Laissez aussi votre téléphone portable hors de la pièce — la plupart des gens sont beaucoup distraits par leur téléphone, donc laissez-le ailleurs.
• Mangez, faites de l'exercice et dormez. Mangez sainement, faites de l'exercice régulièrement, et assurez-vous de dormir suffisamment. Cela semble évident, mais il est facile de l'oublier quand on est absorbé·e par le code. Intégrez ces éléments essentiels à votre emploi du temps, et veillez à ne pas programmer plus de temps d'apprentissage au détriment de ces besoins.
• Accordez-vous des récompenses. Prévoyez des activités plaisantes à faire après chaque session d'apprentissage, que vous ne ferez que lorsque la session sera terminée. Si vous aimez vraiment les jeux vidéo, par exemple, il est très motivant de se dire « pas de jeu ce soir tant que je n'ai pas fait mes 3 heures d'apprentissage ». Il ne vous reste plus qu'à faire preuve de volonté. Bonne chance !
• Apprendre à plusieurs et présenter son travail. Ce n'est pas possible pour tout le monde, mais si vous le pouvez, essayez d'apprendre avec d'autres personnes. Là encore, c'est plus facile si vous suivez une formation en développement web, mais peut-être pouvez-vous convaincre un·e ami·e d'apprendre avec vous, ou quelqu'un lors d'un meetup local ? Il est vraiment utile et motivant d'avoir quelqu'un avec qui discuter d'idées et demander de l'aide, et vous devriez aussi prendre le temps de présenter votre travail. Les encouragements reçus vous motiveront davantage.

Prendre des pauses et parler à un canard en plastique

Si vous avez du mal à trouver la réponse à une question ou un problème, ou à vous concentrer sur votre apprentissage, il est utile de faire une pause. Allez marcher 15 minutes, préparez-vous une tasse de café, ou écoutez de la musique. Ou combinez les trois !

Il est aussi mauvais pour la santé de travailler trop longtemps sans pause : regarder un écran trop longtemps peut fatiguer les yeux, et rester assis·e trop longtemps peut être mauvais pour le dos ou les jambes. Vous pouvez réduire le risque de fatigue oculaire avec la règle « 20-20-20 » : toutes les 20 minutes, regardez quelque chose à 20 mètres pendant 20 secondes. Nous recommandons aussi de faire une vraie pause de 15 minutes toutes les heures à 1h30.

Pendant votre pause, essayez de discuter de votre problème avec un·e collègue, un·e ami·e ou un membre de votre famille. Même s'ils·elles ne peuvent pas vous donner la réponse, il y a de grandes chances que vous trouviez la solution par vous-même en raisonnant dans votre tête. Cela fonctionne même en expliquant le problème à voix haute, à vous-même ou à un objet inanimé.

Cette technique est appelée débogage par le canard en plastique ^(angl.) (ou Méthode du canard en plastique), car traditionnellement, l'idée était d'expliquer son problème de code à un canard en plastique.

Résolution efficace de problèmes

Il n'existe pas une seule méthode efficace pour résoudre tous les problèmes (et tout apprendre) liés au développement web, mais il y a quelques conseils généraux qui vous serviront dans la plupart des cas.

Découper les problèmes en sous-parties

Lorsque vous essayez de réaliser quelque chose de précis et que cela vous semble difficile à appréhender, essayez de le découper en plusieurs petits problèmes ou sous-parties.

Par exemple, si vous devez « Créer un site web simple à deux colonnes », vous pouvez le découper ainsi :

• Créer la structure HTML.
• Définir la typographie de base du site.
• Définir une palette de couleurs de base.
• Mettre en place une structure générale : en-tête, menu de navigation horizontal, zone de contenu principale avec colonne principale et colonne latérale, et pied de page.
• Mettre en place un menu de navigation horizontal.
• etc.

Vous pouvez ensuite détailler davantage. Par exemple, « Mettre en place un menu de navigation horizontal » peut se détailler ainsi :

• Marquer une liste d'éléments de menu.
• Disposer les éléments de menu horizontalement sur une ligne.
• Supprimer les valeurs par défaut inutiles, comme l'espacement des listes et les puces.
• Mettre en forme les états survolé/sélectionné/actif des éléments de menu.
• Espacer uniformément les éléments de menu.
• Donner suffisamment d'espace vertical aux éléments de menu.
• S'assurer que le texte est centré dans chaque élément de menu.
• etc.

Chacun de ces petits problèmes paraît bien moins difficile à résoudre que le gros problème initial.

Apprendre à reconnaître les schémas

Le développement web consiste surtout à résoudre des problèmes et à reconnaître des schémas.

Une fois que vous avez listé ce qu'il faut faire pour résoudre un problème précis, vous pouvez commencer à déterminer quelles fonctionnalités techniques utiliser. Par exemple, les professionnel·le·s du web ont créé de nombreux menus de navigation horizontaux, donc ils·elles penseront immédiatement à une solution comme celle-ci :

1. Un menu de navigation est généralement créé à partir d'une liste de liens, par exemple :

   html

   <ul>
     <li><a href="">Premier élément de menu</a></li>
     <li><a href="">Deuxième élément de menu</a></li>
     <li><a href="">Troisième élément de menu</a></li>
     <li><a href="">etc.</a></li>
   </ul>
   

2. Pour placer tous les éléments sur une même ligne, la façon moderne la plus simple est d'utiliser flexbox :

   css

   ul {
     display: flex;
   }
   

3. Pour supprimer l'espacement et les puces inutiles, on peut faire :

   css

   ul {
     list-style-type: none;
     padding: 0;
   }
   

4. (Les autres étapes suivent.)

La quantité de recherche nécessaire pour trouver la solution dépendra de votre expérience et du fait d'avoir déjà réalisé quelque chose de similaire. Vous pouvez reconnaître le schéma d'un projet précédent, et n'avoir qu'à rechercher quelques détails de syntaxe oubliés.

Quand vous trouvez des solutions à ce type de problèmes, il est utile de prendre des notes sur ce que vous avez fait, et de conserver quelques exemples de code minimal dans un dossier pour pouvoir y revenir plus tard.

Regarder le code des autres

Le web propose des outils de développement qui permettent de voir le code utilisé pour construire n'importe quel site. Si vous n'avez pas de solution disponible, une bonne méthode de recherche consiste à trouver des sites avec des fonctionnalités similaires et à regarder comment ils ont fait.

Esprit d'apprentissage constant

Vous devez adopter un état d'esprit d'apprentissage constant. Le web évolue sans cesse, les technologies et tendances changent en permanence, et il faut constamment mettre à jour ses connaissances pour suivre. Vous n'apprendrez jamais tout !

Pour vous faciliter la tâche :

• Soyez curieux·se. Si vous voyez une fonctionnalité de site intéressante, intrigante, ou que vous ne comprenez pas, faites des recherches pour savoir comment c'est fait. Cela peut devenir la base de votre prochain projet ou tâche d'apprentissage.
• Pratiquez régulièrement la lecture ou de petits projets de recherche. Prévoyez du temps dédié à l'acquisition de nouvelles compétences.
• Prenez l'habitude de lire régulièrement l'actualité technique, des blogs et les notes de version des navigateurs pour découvrir les nouveautés à apprendre.
• Continuez à pratiquer. Plus vous vous entraînez à résoudre un problème, plus vos connexions neuronales se renforcent dans ce domaine, plus il devient facile de se rappeler les détails et la logique de ce problème, et plus vous serez à l'aise pour apprendre des solutions similaires à l'avenir.

• Aperçu : Compétences générales
• Suivant