Que faut-il apprendre pour devenir développeur web front ?

Si vous débutez dans le développement web, il y a des chances pour que soyez perdu face aux nombreux concepts et technologies à apprendre.

On commence souvent par suivre un tutoriel, puis on se demande : "Qu'est-ce que je dois apprendre ensuite ?"

Je vous ai donc préparé une roadmap, une liste de choses à découvrir et à maitriser afin de progresser sereinement dans votre apprentissage.

J'ai essayé de choisir l'ordre de tous ces éléments de manière à ce que votre apprentissage puisse être à la fois ludique et guidé par vos projets, chaque nouveau concept vous permettra d'aller plus loin dans vos créations, chaque nouvelle étape pourra être une nouvelle source de satisfaction.

Roadmap : La liste des choses à connaître

À noter que cette liste ne contient pas de lien vers des cours ou tutoriels, elle est simplement là pour vous aiguiller, mais vous pourrez trouver votre bonheur sur des sites comme Openclassrooms pour les cours gratuits ou sur Udemy pour des formations payantes.

Disclaimer : Connaître tous les concepts et technologies de cette liste ne vous garantira pas de trouver un métier en claquant des doigts. Votre implication, votre persévérance et vos projets personnels tiendront une grande place dans la suite de votre aventure.

HTML (HyperText Markup Language)

Comprendre ce qu'est un fichier HTML, comment il est construit, les différences entre l'en-tête et le corps du document ainsi que les liens hyper-textes entre différentes pages d'un site c'est comprendre la base du web.

Vous apprendrez donc à vous servir de différents éléments HTML (aussi appelés balises) afin de présenter vos différentes données, comme par exemple :

• Les titres (h1, h2, h3, ...)
• Les textes et liens (p, span, a)
• Les images (img)
• Les blocs (div, section,...)
• Les tableaux (table, tr, td, ...)
• Les formulaires (input, button, ...)
• Les listes (ul, ol, li)
• ...

Chaque élément html a une manière d'être représenté graphique par défaut, mais a aussi une sémantique (un sens, une fonction) bien précise que vous aurez l'occasion de découvrir.

CSS (Cascading Style Sheet)

Le HTML seul vous permettra de structurer vos pages et d'arriver à un résultat qui ressemble plus ou moins à un document créé sous Word ou OpenOffice. Mais avec le CSS, vous pourrez modifier le design de ce document à vos souhaits, avec votre imagination pour seule limite (ou presque).

L'apprentissage du CSS se déroule en deux étapes : les sélecteurs et les attributs.

Les sélecteurs permettent de choisir quel éléments seront affectés par votre style personnalisé grâce à différentes règles (id, classes, noms d'éléments, évènements et autres sélecteurs plus complexes)

Les attributs, eux, permettront de décider du style final appliqué à ces éléments en question, par exemple :

• L'affichage et le positionnement (display, visibility, position, left, margin-left, padding-left, ...)
• Les couleurs (color, border-color, background-color, ...)
• Les formes (width, height, border-radius, ...)
• ...

Il existe des dizaines d'attributs différents en CSS et il est très tentant de tous les essayer, mais un conseil, prenez bien le temps d'apprendre (et comprendre) le rôle des différents sélecteurs ainsi que des attributs d'affichage et de positionnement.

Une fois ces concepts-là acquis, le reste des attributs sera d'une simplicité enfantine !

Hébergement

Si vous suivez cette liste dans l'ordre, vous êtes désormais capable de construire un site avec plusieurs pages reliées entre-elles par des liens et suivant un design personnalisé, autrement dit, tout ce qu'il vous faut pour faire un site vitrine, un cv en ligne, etc...

Mais à quoi cela sert si personne d'autre ne peut le voir ? C'est pour cela que l'étape suivante est de découvrir les technologies autour de l'hébergement web, avec entre autres :

• Ce qu'est un serveur, et plus particulièrement un serveur web ?
• Qu'est-ce qu'une requête HTTP ?
• Les noms de domaines et les DNS
• Les différents types d'hébergement disponible (mutualisé, VPS,...)
• Comment déployer son site (FTP, SFTP) ?

Une fois cette partie de votre parcours terminée, vous aurez donc un site visible par tous et entièrement créé par vos soins !

Pour mettre en ligne votre site, vous pouvez passer par des hébergeurs comme Ionos, OVH ou encore o2switch pour quelques euros par mois.

Le versionning de code

Lorsque que vous codez, tout se passe dans les fichiers textes de votre projet, mais comment faire pour collaborer avec d'autres personnes sur ces fichiers sans risquer de tout corrompre ?

Ou bien comment faire pour revenir à une version antérieure du site après que des modifications en CSS aient cassé votre design sans que vous l'ayez remarqué ?

Tout simplement grâce à un gestionnaire de version comme Git et des plateformes comme Github qui vous permettront de synchroniser plusieurs instances de votre projet, de sauvegarder chaque état d'avancement du site, de travailler à plusieurs sans conflit et de revenir en arrière si besoin.

Javascript

Javascript étant le seul langage de programmation (à proprement parler) qui soit nativement interprété par le navigateur, c'est une technologie incontournable à maitriser.

L'apprentissage de la logique et des concepts de la programmation peuvent être beaucoup plus long que les parties précédentes, prenez votre temps.

À terme, Javascript vous permettra d'ajouter de la logique dans vos sites et applications, de faire des calculs (au sens large du terme, on parle plutôt d'algorithmie) et d'ajouter des interactions dans vos pages (autres que les clics sur les liens).

Vous devrez d'abord apprendre la logique de programmation ainsi que la syntaxe du langage, puis vous pourrez faire interagir votre code Javascript avec vos pages HTML grâce aux API du navigateur par la suite.

Les APIs du navigateur

Une API (Application-programming interface) désigne un ensemble de solutions logicielles dont la complexité est cachée derrière un ensemble de méthodes simples d'utilisation pour un développeur.

Un navigateur web va donc mettre à disposition un certains nombre de ces APIs à disposition des développeurs pour que ces denières soient appelés en Javascript.

L'API la plus connue est celle du DOM (Document Object Model) qui donne la possibilité au développeur d'intéragir avec les éléments HTML présents sur la page pour :

• Modifier le contenu de la page
• Unjecter du contenu dynamique (textes, images, etc...).
• Ajouter des intéractions lors d'un évènement (clic, scroll, touche clavier)
• Récupérer les données entrées par l'utilisateur dans des champs HTML
• ...

Même si l'API du DOM est absolument indispensable à maîtriser, il existe bien d'autres API mise à votre disposition qui sont très puissantes :

• le localStorage (pour stocker des données en local, même après fermeture du navigateur)
• les APIs audio et vidéo
• le bluetooth
• la lecture de fichiers
• ...

En exploitant toute la puissance mise à disposition par le navigateur, vous pourrez alors créer des applications complexes et très intéressantes pour vos utilisateurs.

Algorithmie

Si l'on associe souvent l'algorithmie avec le développement côté logiciel ou back-end, il ne faut pas négliger son importance dans le navigateur.

L'algorithmie consiste à trouver une solution technique à une problématique en associant des éléments de logique et de mathématique, exemple : Trier une liste d'utilisateurs en fonction de leur nom et de leur profession.

Il existe de nombreuses plateformes d'entrainement à la programmation et à l'algorithmie, je vous partage un article dans lequel je vous conseille les meilleures d'entre-elles.

---

Si vous envisagez de suivre un parcours de développeur web fullstack, c'est à partir d'ici que je vous conseille de découvrir les concepts back-end, sinon continuez votre lecture !

Une version alternative de ce guide en version fullstack sera bientôt disponible

---

Les appels HTTP

Dans l'une des parties précédentes j'ai listé les APIs du navigateur, en faisant exprès d'ommetre une catégorie en particulier : les appels HTTP.

Les navigateurs mettent à disposition deux APIs en particulier, l'une plus ancienne "XMLHTTPRequest" et l'autre beaucoup plus récente : "Fetch"

Malgré leurs noms bien différents, toutes deux permettent d'effectuer des appels à un serveur de données dans le but soit de récupérer des données détenues par le serveur, soit d'en envoyer, le tout sans changer de page.

Vous pouvez faire appel à votre propre serveur (que vous aurez développé au choix en PHP, Java, Python, NodeJS ou autre), soit à des APIs publiques qui vous permettront de récupérer des données spécifiques.

Voilà un lien vers l'article où je donne des exemples d'APIs publiques à utiliser dans vos projets !

La sécurité et les failles (XSS, cors)

Comme le dit si bien Spiderman : "Avec de grands pouvoirs, viennent de grandes responsabilités" et c'est aussi application pour la sécurité de vos applications web.

À partir du moment où votre site web commence à dialoguer avec un serveur, à envoyer et à récupérer des données, vous devez être au courant des enjeux de la sécurité web.

Vous devez entre autres connaître :

• Les failles XSS
• Les failles CSRF
• Les règles CORS
• Le protocole HTTPS (SSL)
• ...

RGPD

La "Réglementation Générale pour la Protection des Données" est un ensemble de règle à suivre lorsque l'on édite un site web en Europe et que l'on collecte des données utilisateurs.

Un non-respect de la RGPD peut entraîner une forte amende basée sur le chiffre d'affaires de l'entreprise et la responsabilité en tant que développeur peut vous en être incombé.

Voici le site officiel de la CNIL à propos de la RGPD

Accessibilité (a11y)

L'accessibilité web est un vaste sujet qu'il faut absolument comprendre, je le résumerai par "un ensemble de techniques à mettre en place afin que le site produit soit accessible à toutes les personnes, quelque soit leur handicap, leur équipement ou leur localisation géographique."

Voici le lien vers ma série d'articles (en cours) sur les bases de l'accessibilité web

SEO

Le SEO est un acronyme anglais pour le "référencement naturel", autrement dit les méthodes et les bonnes pratiques à connaitre afin que le site puisse être trouvé de la manière la plus efficace possible sur les moteurs de recherches.

Voici le lien vers ma série d'article (en cours) sur les bases du SEO

Optimisation

L'optimisation d'un contenu web passe par de nombreuses pratiques et influence notamment l'accessibilité et le SEO.

Voici quelques exemples d'optimisation à creuser :

• Mettre en place un CDN (content delivery network)
• Gérer le cache
• Mettre en place une compression Gzip
• Faire attention à la taille/nombre des fichiers (images, js, css, ...)
• ...

Tooling (Webpack)

Le tooling représente l'ensemble des outils utilisés autour de votre projet afin d'optimiser votre temps, votre facilité à développer ainsi que la compatibilité ou les performances de votre projet web.

On peut par exemple citer quelques outils comme :

• Webpack pour gérer des modules, minifier et optimiser ses fichiers
• Babel pour transpiler du code Javascript vers d'ancienne version pour améliorer la compatibilité avec certains navigateurs
• NPM pour gérer ses dépendances
• ...

Frameworks CSS

Il existe énormément de frameworks et de bibliothèques CSS que vous pouvez utiliser pour gagner du temps, mais attention à ne pas les utiliser trop tôt dans votre apprentissage car cela pourrait freiner votre apprentissage et votre compréhension du CSS.

Une fois que vous aurez une bonne maîtrise du HTML et du CSS, voilà quelques outils intéressants que vous pourrez étudier :

• Les pré-processeurs (SASS/LESS/SCSS)
• Les frameworks (Bootstrap, Bulma, ...)
• Les bibliothèques (Tailwind, ...)
• ...

Frameworks Javascript

React, Vue ou encore Angular, tous sont à la fois différents, puissant et méritent d'être testés afin de choisir celui que vous préférez.

La majorités des postes pour devenir développeur front-end demandent désormais au moins la maitrise de l'un de ces trois frameworks Javascript majeurs.

Personnellement, je conseillerais à un débutant de commencer par VueJS qui est à mon sens celui le plus accessible et permettra de s'introduire facilement au concept des composants web réutilisables, même si aujourd'hui React possède une plus grande part de marché. À vous de choisir !

Lien vers le site officiel de VueJS

Typescript

Beaucoup de développeurs recommandent l'apprentissage de Typescript bien plus tôt dans le parcours (si vous avez choisi Angular précédemment, alors vous faites déjà du Typescript).

Personnellement je pense qu'il faut avoir suffisamment éprouvé les faiblesses de Javascript pour vraiment comprendre la force de Typescript, voilà pourquoi il se trouve à la fin de cette roadmap.

Pour faire court, Typescript est un langage qui sera transpilé en Javascript et qui perme, entre autres, aux développeurs de rendre le typage des variables stricts, contrairement au typage dynamique de Javascript, et donc d'éviter de nombreuses erreurs lors de la phase de développement.

Le site officiel de Typescript

Et plus...

Il existe bien d'autres concepts et technologies à découvrir, mais cela fera partie de votre veille et de votre auto-formation quotidienne, je vous laisserai donc les découvrir par vous-même, ou au travers des autres articles que je publie régulièrement sur le blog !

En résumé

Dans l'ordre, je vous conseille d'aborder les thématiques ci-dessous :

• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheet)
• Hébergement
• Le versionning de code
• Javascript
• Les APIs du navigateur
• Algorithmie
• AJAX
• Sécurité
• RGPD
• Accessibilité
• SEO
• Optimisation
• Tooling
• Frameworks CSS
• Frameworks Javascript
• Typescript