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