Comment apprendre le développement web ?

  Temps de lecture : 11 min.
Quels sont les outils à maitriser pour apprendre le développement web ? Voici la liste des technos à appendre pour devenir développeur web.

Comment apprendre le développement web et quelles technologies choisir pour débuter sur le web ?

Découvre dans cet article quels sont les outils à maitriser pour devenir développeur web.

Cet article conviendra aussi bien aux développeurs débutants qu’aux développeurs en reconversion professionnelle.

Les bases

Pour aller plus loin

Apprendre la programmation web ?

Voici une liste de tous les langages à maitriser pour devenir développeur web.

Je fais volontairement la différence entre le front-end (HTML, CSS, JS) et le back-end (côté serveur avec la base de données).

Si tu souhaites devenir développeur web, tu vas devoir passer par toutes ces étapes afin de savoir ce qui te correspond le mieux, car des métiers dans le monde du web, il y en a plein :

  • Développeur front(-end) / back(-end)
  • Développeur fullstack
  • DevOps
  • Data analyst
  • Développeur mobile (Android / IOS / …)
  • Intégrateur web

Avant de commencer le développement web

Si tu débutes l’apprentissage du développement web, il est très important que tu passes par la pratique !

Lire des tutos sans pratiquer ne te fera JAMAIS progresser.

Pour commencer à pratiquer, installe de suite un éditeur de code comme VSCode.

De cette manière dès que tu voudras commencer à coder, tu n’auras rien à installer.

C’est également très important d’avoir un projet en tête pour commencer.

Avoir un projet te permettra d'apprendre beaucoup plus rapidement et de manière ludique !

Ça te motivera également davantage.

Si tu n’as pas d’idée de projets voici quelques idées :

  • Faire son CV en ligne
  • Créer son site web perso (comme un portfolio)
  • Proposer à un ami de lui créer son site
  • Faire une application web suite à une de tes idées
Si vraiment tu n'as pas d'idée, tu peux faire une todo list. C'est amusant à faire et ça couvre pas mal de notions du web.

Autrement tu peux trouver de l’inspiration dans cet article : comment gagner de l’argent en tant que développeur.

HTML

Le HTML est un format interprété et affiché par le navigateur suivant le moteur de rendu qu’il propose.

Chaque moteur affiche le HTML de manière différente car il doit le lire pour ensuite le comprendre.

C’est pour cela que le rendu change de Chrome à Firefox, le moteur est différent.

Commencer par le HTML c'est la garantie de bien comprendre comment sont affichées les pages web.

C’est un pré-requis nécessaire au fait de devenir développeur web.

Tu as déjà dû entendre parler des balises HTML5 ?

Ce sont des marqueurs destinés à rendre plus compréhensible les balises HTML pour les robots qui les exploitent (comme celui de Google).

Structure HTML classique

Par exemple ici, la balise main n’a aucune différence avec une div.

Cependant de part son nom, on saura qu’elle comporte le contenu principal de la page.

Malinx !

Où apprendre le HTML ?

CSS

Le CSS permet d’appliquer du style à des éléments HTML : comme une couleur, des bords arrondis…

Le CSS est assez abordable dans son ensemble, car les noms sont assez transparents.

background-color: blue;

On comprend assez facilement que l’élément qui contient cela verra son fond devenir bleu.

Néanmoins le CSS peut-être très complexe… On peut faire des portraits de personnes, directement en CSS (avec du HTML bien sûr).

Apprendre CSS complexe
https://diana-adrianne.com/purecss-francine/

Heureusement la plupart du temps lorsque l’on fait de l’intégration HTML, on applique surtout du style sur des boutons, des menus, des liens…

Finalement, voici le code que l’on aura besoin de produire pour faire un simple bouton orange.

Bouton HTML et CSS
Code CSS d’un bouton stylisé en HTML

Où apprendre le CSS ?

N’oublie pas qu’avant d’apprendre le CSS, tu dois d’abord bien maitriser HTML.

JavaScript

Le JavaScript (JS) est le seul langage informatique que le navigateur comprend (en tout cas pour le moment).

Le JavaScript permet d’interagir avec la page, par exemple un clic sur un bouton ou le chargement d’une ressource.

On peut également faire des requêtes vers d’autres sites comme des API.

document.getElementById("main");

Cela permet de récupérer l’élément HTML ayant pour ID main.

On peut par exemple lui appliquer un style directement en JavaScript pour rendre notre site web dynamique.

Apprendre Javascript console Firefox
Application d’un fond bleu en JavaScript.

La MDN donne un petit exemple pour mieux comprendre.

Où apprendre le JavaScript ?

Ligne de commande

Les lignes commandes sont souvent utilisées par les développeurs pour lancer des projets ou pour installer des dépendances.

En tant que futur développeur web, tu verras que tu les utilises souvent.

Les interfaces graphiques sont lourdes et parfois inutiles pour lancer un petit bout de coder.

npm install bootstrap

Cette simple ligne permet par exemple de lancer la commande npm avec l’argument install et le paramètre bootstrap.

Ce genre de commande, tu vas souvent être amené à en lancer.

Où apprendre la ligne de commande ?

Suivant le système d’exploitation que tu utilises, les commandes ne seront pas les mêmes.

Git

Git permet de versionner ses fichiers et de les partager avec d’autres développeurs.

Expliquer Git serait trop long et de très bons tutoriels l’expliqueront mieux que moi.

Il ne faut par ailleurs pas confondre Git et Github 🙂

Github permet de mettre du code via Git et de l'exposer à d'autres développeurs.

Une fois que tu maitriseras git, il est très important que tu comprennes le git flow.

La plupart des procédures de livraisons de code utilise ce système.

Où apprendre Git ?

Sass et SCSS

Ce sont des langages de programmations destinés à améliorer l’écriture du code CSS.

Ces langages ne sont pas interprétés par le navigateur et doivent être compilés avant.

Ils permettent de gagner beaucoup de temps et de séparer les feuilles de style de manière propre (on évite de tout mettre dans une seule grosse feuille de style style.css).

Que choisir entre Sass et SCSS ?

Tous les deux utilisent le même moteur de rendu.

Le code sera compilé exactement de la même manière.

Ce qui fera la différence c’est la syntaxe du langage de programmation.

Exemple code SASS
Certains préfèrent écrire en SASS.
Exemple code SCSS
D’autres en SCSS.

C’est une question de goût.

Code SASS/SCSS compilé
Le code SASS ou SCSS ci-dessus aura pour rendu le code CSS suivant.

Où apprendre Sass et SCSS ?

Il n’y a rien de très compliqué quand on sait déjà coder en CSS.

Sass apporte surtout des petites astuces pour réduire la taille du code et mieux organiser ses fichiers.

Apprendre Sass et Scss
Différence entre SCSS et CSS

Pour la mise en place de Sass, tu auras toujours des outils clés en main pour t’aider.

Mais si tu veux l’installer tout seul, consulte la page d’installation de Sass.

Le web design

Les développeurs ne sont pas toujours sensibles au graphisme.

Pour ma part, j’ai même détesté ça pendant un moment.

Aligner des div, c'est galère !

J’ai dû apprendre le design et désormais, j’adore ça.

N’oublions pas que le design influe sur énormément de choses, notamment celles-ci :

  • La fiabilité du site (avec un site moche on ne te prend pas au sérieux)
  • Les taux de conversion (le site doit donner envie)

L’habit fait le moine.

Si tu es développeur front, tu dois absolument développer une sensibilité graphiques.

Comment apprendre le web-design ?

J’étais nul en design (je le suis désormais un peu moins), mais j’ai pu m’améliorer.

Pour preuve, j’ai fait le design de ce blog tout seul et j’en suis assez fier !

Pour apprendre le design

  • Si tu es vraiment nul, utilise des frameworks CSS comme Bulma avec des boutons déjà tout fait, ils sont déjà tout beaux, ça te donnera une ligne directrice ;
  • Regarde les sites internet ayant les meilleurs design ;
  • Fais de la veille, sur Dribbble par exemple ;
  • Essaye d’intégrer une équipe côté front (même si les clients viennent souvent avec une maquette, tu assimileras des choses en l’intégrant) ;
  • Sois curieux, suis les tendances comme le Material Design ;
  • Utilise Google pour t’améliorer, par exemple si tu crées un portfolio, tape « design portfolio » ;
  • Suis des formations.

Framework CSS

Les frameworks CSS sont des outils créés par d’autres développeurs web et mis à disposition, le plus souvent gratuitement pour la communauté.

Le principe des frameworks CSS est le suivant :

Plutôt que de réinventer la roue, utilise des éléments que d'autres développeurs ont fait avant toi.

Le but, c’est de te simplifier la vie.

Par exemple, tu cherches à créer une barre de progression pour ton application.

En utilisant un framework CSS, voici ce que tu peux faire, en une seule ligne de HTML (le style est inclût dans le framework).

Utiliser un framework CSS
https://bulma.io/documentation/elements/progress/#colors

Quel framework CSS choisir ?

Il existe beaucoup de framework CSS, tous ont leur particularité.

En voici quelques-uns.

Framework JS

Les frameworks JavaScript sont d’une telle popularité qu’aujourd’hui, des développeurs front-end sont spécialisés sur certaines technos JS comme Angular, React ou Vue.

* Je ne fais pas de distinction entre Framework et Library afin de rendre cette section plus abordable.

https://www.codeinwp.com/blog/angular-vs-vue-vs-react/

Les développeurs spécialisés dans des technos ont souvent moins de mal à trouver du travail en tant que développeur web.

Quel framework JS choisir ?

Tout dépend de ton besoin et de tes affinités avec le framework.

Tu peux aussi te baser sur la communauté et les recherches d’emploi pour ce framework.

Les 3 frameworks dont on parlait plus haut sont les tops des frameworks JS.

Cependant Svelte est aussi en train de gagner de plus en plus en popularité.

Finalement peu importe ton choix, si tu choisis un de ces quatre-là tu es sûr de ne pas perdre.

Langage de programmation back-end

Afin de pouvoir récupérer du contenu, tu vas avoir besoin d’utiliser des APIs.

Les APIs sont des routes exposants des données.

Par exemple si tu souhaites afficher une liste d’utilisateurs depuis le Front, tu peux appeler la route suivante

GET https://jsonplaceholder.typicode.com/users

Et cette API te renverra une liste d’utilisateurs au format JSON.

https://jsonplaceholder.typicode.com/users

C’est le genre de données que l’on expose côté back-end.

Les contrôleurs appellent généralement des ressources dans une base de données.

On se sert des APIs pour créer, supprimer, mettre à jour des informations...

Aussi simple que cela !

Le back-end comporte aussi des notions de sécurité, des queues, de la validation de données, de l’envoi de mail, de l’authentification, des imports, etc.

Quel langage back-end choisir ?

Chaque langage dispose de ses propres frameworks, encore une fois.

Là où JavaScript propose quelques frameworks pour le front, le back est bien plus riches en technologies.

Choisir un langage se fait surtout selon ces 4 critères :

  • Popularité
  • Communauté
  • Affinités avec la syntaxe
  • Réponse à tes besoins

Si jamais tu souhaites commencer dans le web, je te conseille de partir sur PHP avec le framework Symfony.

C’est assez simple à apprendre et la documentation est d’une grande qualité.

Les bases de données

Comme leurs noms l’indique, les bases de données permettent de… stocker des données.

Le plus souvent, on les stocke sous forme de table.

Exemple table base de données
Table SQL utilisateurs de WordPress.

On crée ensuite des relations entre ces tables, par exemple pour dire qu’un utilisateur appartient à une entreprise.

Quelle base de données choisir ?

Tu as le choix entre deux types de base de données.

Les bases de données relationnelles classiques (comme MySQL / MariaDB ou PostgreSQL) ou celle dites « NoSQL » (No pour Not Only) comme MongoDB.

Très honnêtement pour commencer la programmation, pars sur la stack la plus simple possible.

MySQL est très abordable pour les débutants.

Si jamais tu es parti sur un univers full JS, tu peux t’amuser avec MongoDB et Mongoose.

Où apprendre le SQL ?

Aujourd’hui, on fait rarement des requêtes SQLs à la main.

On privilégie l’abstraction avec des ORM / ODM pour modéliser la structure de données.

Voici un exemple avec Doctrine (pour PHP).

Modéliser objet SQL
Une classe Produit que l’on peut envoyer en base de données.
SQL Insert avec un ORM
On crée un nouveau produit sans utiliser de INSERT SQL.

La commande SQL que Doctrine va lancer devrait ressembler à celle-ci :

INSERT INTO products (name) VALUES ("Formation pour devenir un nouveau développeur");

Mais pour toi, c’est totalement transparent.

Je suis tout de même de ceux qui pensent qu’avoir une base en SQL est important pour un développeur web, alors voici quelques ressources.

Les serveurs (web, dns, ftp)

Si tu travailles dans le web, il va falloir te familiariser avec l’administration système en général.

Comprendre comment est fait un site c’est bien, mais comprendre comment on accède à ce site est encore mieux.

Les hébergeurs comme OVH proposent des solutions tout-en-uns comprenant serveur de base de données, web, dns et ftp.

Les serveurs web exposent des pages à l’utilisateur. Ces pages peuvent par exemple être en HTML ou en JSON comme on l’a vu tout à l’heure.

Les serveurs web les plus connus sont :

Les serveurs DNS permettent de traduire des IPs en nom de domaine, mais aussi de configurer des services e-mails.

Les serveurs FTP offrent la possibilité de gérer des fichiers sur un serveur distant.

Conclusion

Voici la roadmap pour appendre le développement web, toutes les technologies à maitriser pour débuter y sont renseignées.

Bien entendu, tu peux te spécialiser dans le back, le front ou devenir fullstack (en faisant les deux).

Apprendre développement web est une aventure incroyable.

Bon courage pour ton apprentissage !

❤️ Tu as aimé cet article ?️

J'ai mis un moment à l'écrire... Ce serait top si tu pouvais le partager à la communauté !