Comment se lancer dans le développement Web?

Bonjour, bonsoir, bienvenue et bonne lecture !

Dans l'univers de la programmation, il y a tellement à apprendre, tellement de façons différentes de faire la même chose qu'on peut vite s'y perdre. Surtout quand on débute.

L'objectif de cet article est de mettre à disposition des passionnés, un guide pour les orienter au mieux dans leur apprentissage du développement web.

Deux règles fondamentales

Avant d'aller plus loin, mettons nous d'accord sur les deux importantes règles ci-dessous. Pour chacun des outils que vous voulez apprendre à manier: 

1. Soyez à l'aise avec les bases avant de continuer.
2. Utilisez autant que possible ce nouvel outil. Pratiquez, pratiquez et pratiquez !

C'est vraiment en forgeant qu'on devient forgeron. Gardez ce dicton toujours proche de vous.

Choix des cours

Sur internet, vous avez la possibilité de suivre des cours de développement web sous le format text ou vidéo (ou les deux à la fois).
Lorsque vous débutez, OpenClassrooms est une excellente plateforme pour acquérir les bases. Si vous préférez suivre exclusivement des cours au format vidéo, vous trouverez sur YouTube une pléthore de chaînes dédiées à la programmation. Vous pouvez commencer par la chaîne de TeacherDuNet ou celle de Grafikart qui ont des cours très intéressants pour les francophones. Une fois que vous avez accès à internet, toutes ces ressources sont gratuites. Vous pouvez néanmoins acheter des cours si vous en avez les moyens sur des plateformes comme Udemy.

Pour chacune des technologies que vous voulez apprendre, choisissez un cours et allez-y jusqu'au bout. Vous pouvez suivre plusieurs cours abordant le même sujet. Il est cependant préférable de suivre un cours après l'autre. L'idée étant de ne pas se perdre dans cette immense quantité de ressources disponibles.

Des étapes pour vous orienter

Comme nous l'avons dit dans l'introduction de cet article, il y a énormément de choses à apprendre. Pour ne pas se perdre, ne mettre la charrue avant les bœufs, vous pouvez suivre les étapes ci-dessous. Ce n'est pas un guide parfait. Cependant, à chaque fois que vous le consulterez, vous aurez une idée un peu plus précise de votre destination et de votre position actuelle. Deux informations indispensables si l'on veut garder le cap.

Quelles sont donc ces étapes ?

Apprendre les fondamentaux du web

Un développeur web a pour mission de concevoir des applications pour... le web !
Avant d'aller plus loin, il vous est donc essentiel de comprendre votre environnement de travail: le Web.

*

• Qu'est ce qu'internet ?
• Comment le web fonctionne-t-il ?
• Qu'est que c'est que le HTTP ?
• Comment fonctionne un navigateur web ?
• C'est quoi un nom de domaine ?
• ...

Familiarisez-vous autant que possible avec ce genre de questions.
Comprenez bien que l'objectif ici est d'avoir une idée de comment tout ceci fonctionne. On ne vous demande pas d'être un "je sais tout". Plus vous en savez, mieux s'est.

Apprendre HTML & CSS

Une fois que vous avez une idée un peu plus claire de comment fonctionne le web, que vous en savez un peu plus sur le rôle que joue le navigateur dans cet écosystème, on peut passer à l'apprentissage de HTML et CSS.

Pour un début, apprenez les bases de ces langages.

*

• Comment écrire correctement la structure d'une page web ?
• Comment styliser convenablement vos pages web ?
• Comment positionner un élément comme vous le souhaitez ?

Une fois que vous êtes capables de répondre à ces questions, vous pouvez déjà faire beaucoup de choses.

Pour aller plus loin, intéressez-vous à des sujets comme:

*

• Le responsive design
• Les animations avec CSS
• L'accessibilité
• Les bases du SEO

Faire des projets avec HTML & CSS

Nous allons surement rappeler ce principe plusieurs fois dans cet article: quand vous acquérez de nouvelles connaissances, faites-en quelques. Matérialisez ce que vous avez appris en faisant des projets.

Avec ce que vous savez, vous pouvez reproduire des pages de sites web que vous appréciez. Vous pouvez également récupérer des designs sur internet que vous implémentez avec HTML et CSS.
Vous trouverez des designs sur des plateformes comme Dribbble ou en recherchant sur Google.

Plus vous pratiquez, plus vous consolidez vos connaissances et apprenez de nouvelles choses. La magie se produit lorsqu'on pratique.

Apprendre Javascript

Quand vous mettrez en pratique vos connaissances en HTML & CSS, vous vous rendrez compte, à un moment donné, que ces deux langages ne suffisent pas pour faire tout ce que vous voulez. Vous vous sentirez limité et c'est une bonne nouvelle. Il est l'heure d'apprendre Javascript.

Javascript vous permettra de rendre vos pages web un peu plus interactives.

Ce que vous avez besoin d'apprendre ici c'est:

*

• Les bases du langage (variables, fonctions, structures de contrôle...)
• La manipulation du DOM (parcourir le DOM, ajouter, modifier, supprimer un élément).

Il y a encore des choses à apprendre mais avec ces connaissances vous pouvez faire de la magie.

Faire des projets avec HTML, CSS & Javascript

Vous avez maintenant compris le principe: c'est l'heure de concrétiser les choses.
Vous pouvez commencer par rendre les projets conçus précédemment plus interactifs. Vous pouvez également concevoir des composants web qui nécessitent l'usage de Javascript (modal, sidebar, tabs, collapsible...) ou des minis projets (calculatrice, todo app, quiz app...).

Vous pouvez vous rendre dans la documentation de Bootstrap, Materialize ou des librairies équivalentes pour essayer de reproduire les composants disponibles dans ces librairies. Les idées ne manquent pas sur internet.

Terminal, Git & GitHub

Avec HTML, CSS et Javascript, vous pouvez concevoir énormément de projets.
Il est essentiel, à partir de maintenant, d'apprendre à utiliser un outil de versioning (Git) et d'apprendre à utiliser GitHub (ou une plateforme équivalente) pour stocker vos projets en ligne (et dans l'avenir collaborer sur des projets).
L'usage de Git (et d'autres outils d'ailleurs) requiert que vous soyez familier avec le terminal.

Au début, utiliser Git et GitHub peut vous sembler superflu. Mais, une fois que vous aurez un niveau un peu plus avancé vous comprendrez que ces outils sont indispensables.

Encore une fois, focalisez votre attention sur les bases. Apprenez ce dont vous avez besoin et pratiquez.

Apprendre et Utiliser JQuery

JQuery est une librairie Javascript conçue pour faciliter la manipulation du DOM et plus.
Vous n'êtes pas obligés de l'utiliser dans vos projets mais il est important de comprendre comment ça marche.
Vous pouvez être amené à travailler sur des projets qui utilisent cette librairie.
La librairie Bootstrap, par exemple, utilise JQuery.

Une fois que vous avez les connaissances de base en Javascript, apprendre les fondamentaux de JQuery peut se faire en quelques heures.

N'oubliez surtout pas de mettre en pratique vos connaissances.

Apprendre une librairie Front End (Bootstrap, Materialize...)

Quand vous avez travaillez sur plusieurs projets avec du HTML, CSS et Javascript pures, vous vous rendrez compte que vous vous répétez énormément. Bootstrap, Materialize (ou les outils équivalents) résolvent ce problème.
Ces outils aident à aller plus vite et à développer des interfaces graphiques plus épurées, plus accessibles, qui sont plus en accord avec les conventions en vigueur.
Choisissez une librairie, apprenez à l'utiliser et utilisez-la dans vos projets.

Faire des projets avec cette libraire

Vous pouvez refaire vos précédents projets en vous servant de la librairie de votre choix.

A ce stade, vous pouvez développer les interfaces graphiques de quasiment tous vos sites préférés. Vous pouvez coder les interfaces graphiques d'un blog, un site e-commerce, de Twitter, de LinkedIn... 
La seule principale limite que vous pouvez avoir ici, c'est la capacité à rendre ces projets dynamiques. Nous verrons comment le faire dans la section suivante.

Apprendre un langage de programmation serveur (PHP, Javascript avec Node, Python, Ruby...)

Vous l'aurez compris, HTML, CSS, Javascript et les librairies rattachées à ces langages ne vous permettent que de développer les interfaces graphiques pour vos applications (exception faite pour Javascript utilisé côté serveur avec NodeJs).

Si vous souhaitez conserver des données (utilisateurs, produits, transactions...), mettre en place un système d'authentification, si vous souhaitez avoir des applications web complètes, l'usage d'un nouvel outil s'impose. Plusieurs outils peuvent vous aider à parvenir à vos fins. Choisissez celui qui vous convient.

Avec PHP vous pouvez directement faire des sites web dynamiques. Quant aux autres langages (Python, Javascript via NodeJs, Ruby...), il vous faudra généralement apprendre un framework de ce langage dédié au développement web (Django, Flask, ExpressJs, Ruby On Rails...).
Par contre, même avec PHP, une fois dans le monde professionnel, il vous faut la connaissance d'au moins un framework (Laravel, Symfony, CodeIgniter...) pour travailler sur des projets concrets.

Faites des projets avec ce langage/framework.

Vous n'êtes pas obligés de repartir de zéro. Commencez à transformer vos projets statiques (faits seulement avec du HTML, CSS et Javascript) en des projets dynamiques avec le langage de programmation/framework de votre choix.

Une fois que, vous êtes à ce stade, vous vous rendez compte que la conception d'une application web peut principalement se scinder en deux catégories:

1. Mettre en place les interfaces graphiques (avec HTML, CSS et Javascript)
2. Rendre dynamique ces interfaces (avec le langage/framework de votre choix)

Il se peut que l'une de ces catégories vous plaise plus que l'autre. Si c'est le cas, c'est peut-être le moment de vous spécialiser.

Frontend, backend ou fullstack ?

Une fois que vous êtes à ce niveau, cherchez à comprendre ce qu'est un développeur frontend, un développeur backend et un développeur fullstack.
Il vous sera essentiel, pour aller plus loin, de comprendre ce qu'est une API, comment en faire, comment l'utiliser (ou la consommer).
Les notions de serveur, client doivent êtres claires pour vous.

Développeur Frontend

Dans une équipe IT, le développeur front-end est celui qui se charge d'implémenter, à partir d'un design qui lui a été fourni, l'interface graphique à travers laquelle l'utilisateur interagit avec l'application.

Le développeur frontend doit donc savoir manier HTML, CSS, et JavaScript avec aise.

Pour la plupart des projets, des connaissances solides en bootstrap (ou librairie équivalente) peuvent s'avérer suffisantes.
Mais, pour se présenter actuellement en tant que développeur frontend, il vous faudra ajouter un framework/librairie Javascript à votre bagage. Vous avez le choix entre Angular, React et Vue (pour ne citer que ceux-là).

Développeur Backend

Le développeur backend quant à lui, est chargé de s'occuper de toute la logique derrière votre application. Il est aussi, entre autres,  le garant des données utilisées par votre application.

Si c'est cette partie du développement web qui vous intéresse le plus, vous devez approfondir vos connaissances dans au moins un des nombreux framework web disponibles (Django, Laravel, Flask, ExpressJs, Symfony, Ruby On Rails...).

Développeur Fullstack

C'est le titre qu'on donne au développeur qui est à la fois frontend et backend. En gros, vous savez "tout" faire !

Conclusion

Terminons cet article en vous rappelant qu'il ne faut surtout pas attendre d'être "expert" avant de commencer un projet ou de passer à l'étape suivante. Dès que vous avez les bases, faites-en quelque chose. La pratique fait partie intégrante de l'apprentissage. Ne vous laissez pas dominer par ce que qu'on appelle communément "le syndrome de l'imposteur".
Essayer ! Et si vous rencontrez des erreurs, Google est votre ami. La plupart des problèmes que vous rencontrerez ont déjà au moins une solution sur StackOverflow. Et si vous ne trouvez pas de solution sur ces plateformes, demandez à des gens dans le domaine. Les groupes de développeurs sur les différents réseaux sociaux servent aussi à cela.

Finalement, une autre étape de l'apprentissage, c'est le partage. Soyez prompt à aider les développeurs qui rencontrent des difficultés, contribuez autant que possible à l'évolution de la communauté.

Nous avons essayé, autant que possible, d'aller droit au but. Si certaines parties ne sont pas claires, si vous avez autre chose à rajouter, nous pouvons continuer l'échange dans l'espace commentaire.

On peut également rentrer en contact via Twitter et LinkedIn.

Merci !