Roadmap pour devenir un.e développeur.se web front-end

Roadmap pour une personne qui souhaiterait monter en compétences sur le développement front-end.

Intégration HTML/CSS

HTML

• Connaître les éléments de base en HTML
• Accessibilité et RGAA
  1. Savoir ce qu’est le WCAG et le RGAA (https://accessibilite.numerique.gouv.fr/ ) et à quoi sert l’accessibilité
  2. Savoir ce qu’est l’accessibility tree
  3. Connaître les bases en HTML sémantique et ARIA (principalement formulaires accessibles, images accessibles, boutons/liens)
  4. Comment tester l’accessibilité :
     • Essayer de tester un screen reader (lecteur d’écran)
     • Tester différentes extensions utiles lors du dev pour tester l’accessibilité : WAVE, axe Dev Tools, lighthouse…
     • https://wiki.lalutineduweb.fr/accessibilite/tester/
  • (On peut regarder une checklist simplifiée de règles d’accessibilité pour commencer : https://www.accede-web.com/notices/html-et-css/ )

CSS

• Les bases
  1. Principes à connaître pour comprendre le CSS
     • Sélecteur, cascade
     • Box model
     • Flow layout
     • Stacking context et positionnement absolu/relatif/sticky
     • flexbox et css grid
  2. Comment gérer le responsive : unités responsives, breakpoints/media queries, layout fluide avec calc/min/max/clamp / flexbox
  3. Utilisation des devtools pour debugger du CSS
  4. Utiliser un préprocesseur (SCSS) et connaître ce que ça apporte (mixin, function, variable scss)
  5. Animations CSS : utilisation de transform, transition, et des keyframes
• Pour aller plus loin
  • Bonnes pratiques CSS
  • Architecture/méthodo CSS (ITCSS par exemple, BEM, utility-first, découpage avec des variables CSS ou SCSS) ⇒https://matthiasott.com/notes/how-i-structure-my-css
  • Langues sinistroverses et propriétés logiques (https://rtlstyling.com/posts/rtl-styling)
• (Formation top très complète que je recommande : https://css-for-js.dev/ )

Javascript

1. Connaître les bases du javascript (en pratique - essayer de faire des petits algos/kata en js vanilla)
   • Connaître les fonctionnalités es6 les plus connues : map, filter, reduce, spread operator…
   • Asynchrone : promesse, async/await, XHR (fetch, axios, etc.)
2. Créer un projet from scratch pour tester les différentes conaissances ci-dessous
   1. Choisir une librairie/framework JS entre React ou VueJS
   2. Créer le projet depuis la CLI ou from scratch
   3. Connaissance de l’outillage/écosystème JS
      • Comprendre NPM et sa gestion de packages (package.json, installation d’un paquet, etc)
      • Tester un “module bundler” (webpack, vite,…) et comprendre à quoi cela sert
   4. Création de composants
      • Suivre le getting started et les tutos de la librairie front choisie pour comprendre comment créer un composant et les différentes manières d’afficher conditionnellement, faire des boucles dans le DOM,… (JSX pour React et directives pour VueJS)
      • Comment bien découper un composant : composant ui vs métier,…
        • Approche Atomic Design de Brad Frost : https://atomicdesign.bradfrost.com/table-of-contents/ (découpage atome/molécule/organisme)
        • Deux confs intéressantes sur le découpage d’un composant :
          • Designing components with composition
          • Building (And Re-Building) the Airbnb Design System | Maja Wichrowska & Tae Kim
   5. Notion de store / gestion de l’état : tester l’utilisation d’un store : redux, vuex, pinia, autre,…
   6. Architecture front et design patterns
      • Connaître quelques architectures différentes : hexagonale, clean architecture,…
      • Connaître quelques design patterns appliquables en front-end
   7. Tests en JS : e2e, unitaires (jest, cypress, react testing library…)
3. Connaître les bases du typescript : interfaces,…

• Pour aller encore plus loin
  • Shadow DOM et web component

Design system

• Comprendre ce qu’est un design system et les différentes composantes (design tokens, composants,…)
• https://wiki.lalutineduweb.fr/atomic-design-style-guide/guide-style/