Devenir développeur·se front-end : quel parcours ?

Revenons aux bases.
Trop souvent mises de cĂ´tĂ© par toutes les formations de dĂ©veloppeurs, pour soit disant « gagner du temps », elles restent indispensables pour ne pas oublier l’essentiel de notre mĂ©tier. Alors, pa oĂą commencer, et comment mettre de l’ordre dans tes idĂ©es si tu veux te lancer dans le dĂ©veloppement front-end ?

Quel est le travail d’un·e intĂ©grateur·rice web ?

Le ou la dĂ©veloppeur•se front-end, par dĂ©finition, est spĂ©cialisé•e dans la face visible cĂ´tĂ© client. Il ou elle travaille en coopĂ©ration Ă©troite avec un·e designer qui s’occupe de la conception UX/UI. Son boulot, c’est de produire des interfaces qui s’affichent correctement Ă  partir de ce travail.

C’est la partie Ă©mergĂ©e de l’iceberg d’un site Internet : celle oĂą l’internaute navigue de pages en pages, oĂą il prendra plaisir Ă  ĂŞtre guidĂ© dans ses actions, oĂą il pourra ĂŞtre Ă©merveillĂ© par toutes les paillettes que tu peux mettre dans le code.

Bien que cette partie soit visible, elle cache beaucoup de choses :

  • Traduire les maquettes en interface fonctionnelle dans un navigateur ;
  • Rendre compatible un site web sur tous les navigateurs (en tout cas, ceux qui sont encore utilisĂ©s…) ;
  • Faciliter l’accessibilitĂ© des contenus pour les diffĂ©rents handicaps
  • Optimiser un site pour les moteurs de recherche
  • Et bien d’autres, on te garantis des surprises qui vont mobiliser ton cerveau !…

Le code tu apprendras !
Oui mais…

Avant de mettre les mains dans le cambouis, ce serait bien que tu comprennes dans quel monde tu te lances. Quel univers va bercer tes journées (et/ou tes nuits… au choix) ?

J’ai essayĂ© de te prĂ©parer un plan de route le plus exhaustif possible, pour que tu puisses avancer Ă  ton rythme et surtout te projeter avec un peu plus de finesse dans les qualitĂ©s requises, et les bases nĂ©cessaires pour enfin te proclamer « dev front » ou « intĂ©grateur ». Parce qu’on a envie que tu aies confiance en tes compĂ©tences, et que tu intègres la profession avec les honneurs !

Internet, c’est quoi ?

Avant de vouloir coder, essayons de comprendre dans quel écosystème un.e dévélopeur.se va évoluer…

  • Comment fonctionne Internet ?
  • Qu’est-ce que le HTTP ?
  • Comment fonctionnent les navigateurs ?
  • Comment fonctionnent les DNS ?
  • Qu’est-ce qu’un nom de domaine ?
  • Qu’est-ce qu’un hĂ©bergement ?

Apprendre le HTML

  • DĂ©couvrir les bases du HTML
  • Savoir reprĂ©senter une maquette sous forme de blocs
  • Écrire du code qui respecte la sĂ©mantique
  • DĂ©couvrir les formulaires
  • Appliquer les bonnes pratiques
  • Rendre accessible une page web
  • Les bases du SEO technique

Maîtriser le CSS

  • Comment associer la structure et la mise en page ?
  • Comment styliser une page web ?
    • Manipuler les diffĂ©rents modèles de boĂ®tes
    • Savoir identifier les Ă©lĂ©ments flottants
    • Positionner les Ă©lĂ©ments
  • Appliquer des mises en page avancĂ©es
    • Utiliser Flexbox
    • MaĂ®triser CSS Grid
  • Savoir adapter les styles en fonction des supports avec les Media Queries
    • Rendre compatible un site pour les mobiles et tablettes
  • DĂ©couvrir des sĂ©lecteurs avancĂ©s
    • Pseudo-classes et pseudo-Ă©lĂ©ments
    • DĂ©couvrir des sĂ©lecteurs exotiques

Apprendre les bases de JavaScript

  • DĂ©couvrir la syntaxe
  • Manipuler les Ă©lĂ©ments du DOM
  • Qu’est-ce que l’AJAX et comment l’utiliser pour rĂ©cupĂ©rer des informations d’une API ?
  • DĂ©couverte des standards JavaScript, ES5, ES6 et ESNext
  • RĂ©soudre les problèmes d’Hoisting
  • Comprendre le concept d’Event Bubbling
  • Qu’est-ce que le Shadow DOM ?

DĂ©couverte de Git pour versionner ses projets

  • Pourquoi utiliser un système de versioning ?
  • Quel service d’hĂ©bergement de code utiliser ?
    • Github
    • GitLab
    • Bitbucket

Apprendre l’animation

Certain•e•s se dĂ©couvriront Ă  travers le mouvement. Faire bouger des Ă©lĂ©ments dans une page web devient vite addictif. Donner du sens, soutenir une direction artistique, bref les plus crĂ©atif·ve·s d’entre vous auront hâte d’apprendre GSAP pour donner vie Ă  leurs sites Internet.

Comment organiser son CSS ?

Avec le CSS-in-JS, plus besoin de se préoccuper de cette question. Cependant, il est intéressant de connaître les différentes architectures CSS disponibles :

  • BEM
  • OOCSS
  • SMACSS

Ce qui dans un second temps te permettra de construire ton framework CSS ou de découvrir les préprocesseurs tels que :

  • Sass
  • PostCSS
  • Less

Choisir un framework JavaScript

Devenir développeur·se React.js

Devenir développeur·se Vue.js

Devenir développeur·se Angular

Apprendre le CSS-in-JS

  • DĂ©couverte des Styled Components
  • Comment crĂ©er des modules CSS ?

Ce parcours est basé sur le travail de Kamran Ahmed sur roadmap.sh