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.

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

Le dĂ©veloppeur front-end, par dĂ©finition, est spĂ©cialisĂ© cĂ´tĂ© client. Il travaille de mèche avec un.e designer qui s’occupe de la conception UX/UI. Son dada c’est de pondre des interfaces bien lĂ©chĂ©es.

C’est la partie visible de l’iceberg d’un site Internet : celle oĂą l’internaute navigue de pages en pages et oĂą il prendra plaisir Ă  ĂŞtre guidĂ© dans ses actions.

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, tu verras…

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 avant de t’auto-proclamer « dev front » ou « intĂ©grateur ».

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

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