Fix image links and reference french assignment (#542)

* Fix small typo, links and reference fr assignment

Fix small typo, links and reference french assignment

* Fix: Add loc param and reference fr assignment

Add localization parameter on quizzes links and reference fr assignment

* fix localization param

fix localization param

* Fix image links and reference fr assignment

5-browser-extension/1-about-browsers/translations/README.fr.md

@@ -1,4 +1,4 @@
-# Projet d'extension de navigateur Partie 1 : Tout sur les navigateurs
+# Projet d'extension de navigateur Partie 1: Tout sur les navigateurs
 
 ![Sketchnote sur les navigateurs](/sketchnotes/browser.jpg)
 > Sketchnote par [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
@@ -15,11 +15,11 @@ Les extensions de navigateur ajoutent des fonctionnalités supplémentaires à u
 
 Dans cette série de leçons, vous apprendrez à créer une extension de navigateur qui fonctionnera sur les navigateurs Chrome, Firefox et Edge. Dans cette partie, vous découvrirez le fonctionnement des navigateurs et vous échafauderez les éléments de l'extension de navigateur.
 
-Mais qu'est-ce qu'un navigateur exactement ? Il s'agit d'une application logicielle qui permet à un utilisateur final d'accéder au contenu d'un serveur et de l'afficher sur des pages web.
+Mais qu'est-ce qu'un navigateur exactement? Il s'agit d'une application logicielle qui permet à un utilisateur final d'accéder au contenu d'un serveur et de l'afficher sur des pages web.
 
-✅ Un peu d'histoire : le premier navigateur s'appelait "WorldWideWeb" et a été créé par Sir Timothy Berners-Lee en 1990.
+✅ Un peu d'histoire: le premier navigateur s'appelait "WorldWideWeb" et a été créé par Sir Timothy Berners-Lee en 1990.
 
-![Les premiers navigateurs](images/earlybrowsers.jpg)
+![Les premiers navigateurs](../images/earlybrowsers.jpg)
 > Certains des premiers navigateurs, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
 
 Lorsqu'un utilisateur se connecte à l'internet en utilisant une adresse URL (Uniform Resource Locator), généralement en utilisant le protocole de transfert hypertexte via une adresse `http` ou `https`, le navigateur communique avec un serveur web et va chercher une page web.
@@ -28,34 +28,34 @@ Lorsqu'un utilisateur se connecte à l'internet en utilisant une adresse URL (Un
 
 Les navigateurs ont également la capacité de mettre en cache le contenu afin qu'il ne soit pas nécessaire de le récupérer à chaque fois sur le serveur. Ils peuvent enregistrer l'historique de l'activité de navigation d'un utilisateur, stocker des "cookies", qui sont de petits morceaux de données contenant des informations utilisées pour enregistrer l'activité d'un utilisateur, et plus encore. 
 
-Une chose très importante à retenir au sujet des navigateurs est qu'ils ne sont pas tous identiques ! Chaque navigateur a ses forces et ses faiblesses, et un développeur web professionnel doit savoir comment faire en sorte que les pages web fonctionnent bien sur plusieurs navigateurs. Cela inclut la gestion des petites fenêtres d'affichage, comme celles des téléphones portables, ainsi que la gestion des utilisateurs hors ligne.
+Une chose très importante à retenir au sujet des navigateurs est qu'ils ne sont pas tous identiques! Chaque navigateur a ses forces et ses faiblesses, et un développeur web professionnel doit savoir comment faire en sorte que les pages web fonctionnent bien sur plusieurs navigateurs. Cela inclut la gestion des petites fenêtres d'affichage, comme celles des téléphones portables, ainsi que la gestion des utilisateurs hors ligne.
 
 Le site [caniuse.com](https://www.caniuse.com) est un site Web très utile que vous devriez probablement marquer d'un signet dans le navigateur que vous préférez utiliser. Lorsque vous créez des pages Web, il est très utile d'utiliser les listes de technologies prises en charge de caniuse afin d'aider au mieux vos utilisateurs.
 
-✅ Comment pouvez-vous savoir quels sont les navigateurs les plus populaires parmi les utilisateurs de votre site Web ? Vérifiez vos analyses - vous pouvez installer divers progiciels d'analyse dans le cadre de votre processus de développement web, et ils vous indiqueront quels sont les navigateurs les plus utilisés par les différents navigateurs populaires.
+✅ Comment pouvez-vous savoir quels sont les navigateurs les plus populaires parmi les utilisateurs de votre site Web? Vérifiez vos analyses - vous pouvez installer divers progiciels d'analyse dans le cadre de votre processus de développement web, et ils vous indiqueront quels sont les navigateurs les plus utilisés par les différents navigateurs populaires.
 
 ## Extensions du navigateur
 
-Pourquoi vouloir créer une extension de navigateur ? Il s'agit d'un élément pratique à joindre à votre navigateur lorsque vous avez besoin d'un accès rapide à des tâches que vous avez tendance à répéter. Par exemple, si vous avez besoin de vérifier les couleurs des différentes pages Web avec lesquelles vous interagissez, vous pouvez installer une extension de navigateur permettant de choisir les couleurs. Si vous avez du mal à vous souvenir des mots de passe, vous pouvez utiliser une extension de navigateur pour la gestion des mots de passe. 
+Pourquoi vouloir créer une extension de navigateur? Il s'agit d'un élément pratique à joindre à votre navigateur lorsque vous avez besoin d'un accès rapide à des tâches que vous avez tendance à répéter. Par exemple, si vous avez besoin de vérifier les couleurs des différentes pages Web avec lesquelles vous interagissez, vous pouvez installer une extension de navigateur permettant de choisir les couleurs. Si vous avez du mal à vous souvenir des mots de passe, vous pouvez utiliser une extension de navigateur pour la gestion des mots de passe. 
 
 Les extensions de navigateur sont également agréables à développer. Elles ont tendance à gérer un nombre limité de tâches qu'elles exécutent bien.
 
-✅ Quelles sont vos extensions de navigateur préférées ? Quelles sont les tâches qu'elles accomplissent ?
+✅ Quelles sont vos extensions de navigateur préférées? Quelles sont les tâches qu'elles accomplissent?
 
 ### Installation des extensions
 
-Avant de commencer à construire, jetez un coup d'œil au processus de construction et de déploiement d'une extension de navigateur. Bien que chaque navigateur varie un peu dans la façon dont il gère cette tâche, le processus est similaire sur Chrome et Firefox à cet exemple sur Edge :
+Avant de commencer à construire, jetez un coup d'œil au processus de construction et de déploiement d'une extension de navigateur. Bien que chaque navigateur varie un peu dans la façon dont il gère cette tâche, le processus est similaire sur Chrome et Firefox à cet exemple sur Edge:
 
-![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](images/install-on-edge.png)
+![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../images/install-on-edge.png)
 
-En substance, le processus sera le suivant :
+En substance, le processus sera le suivant:
 
 - Construisez votre extension en utilisant `npm run build`. 
 - Naviguez dans le navigateur jusqu'au panneau des extensions en utilisant le bouton "Paramètres et plus" (l'icône `...`) en haut à droite.
 - s'il s'agit d'une nouvelle installation, choisissez `load unpacked` pour charger une nouvelle extension depuis son dossier de construction (dans notre cas, c'est `/dist`) 
 - ou, cliquez sur `reload` si vous rechargez l'extension déjà installée.
 
-✅ Ces instructions concernent les extensions que vous construisez vous-même ; pour installer des extensions qui ont été publiées dans le magasin d'extension du navigateur associé à chaque navigateur, vous devez vous rendre dans ces [magasins](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) et installer l'extension de votre choix.
+✅ Ces instructions concernent les extensions que vous construisez vous-même; pour installer des extensions qui ont été publiées dans le magasin d'extension du navigateur associé à chaque navigateur, vous devez vous rendre dans ces [magasins](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) et installer l'extension de votre choix.
 
 ### Commencer
 
@@ -64,14 +64,14 @@ l'API de CO2 Signal.
 
 **Vous avez besoin de:**
 
-- [une clé API](https://www.co2signal.com/) ; saisissez votre adresse électronique dans le champ de cette page et une clé vous sera envoyée.
+- [une clé API](https://www.co2signal.com/); saisissez votre adresse électronique dans le champ de cette page et une clé vous sera envoyée.
 - le [code pour votre région](http://api.electricitymap.org/v3/zones) correspondant à la [carte de l'électricité](https://www.electricitymap.org/map) (à Boston, par exemple, j'utilise 'US-NEISO').
-- le [code de démarrage](../start). Téléchargez le dossier `start` ; vous allez compléter le code dans ce dossier.
-- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets ; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web.
+- le [code de démarrage](../../start). Téléchargez le dossier `start`; vous allez compléter le code dans ce dossier.
+- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web.
 
 ✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
 
-Prenez une minute pour parcourir la base de code :
+Prenez une minute pour parcourir la base de code:
 
 dist
     -|manifest.json (les valeurs par défaut sont définies ici)
@@ -85,17 +85,17 @@ src
 
 ### Construire le HTML pour l'extension
 
-Cette extension a deux vues. L'une pour recueillir la clé API et le code de région :
+Cette extension a deux vues. L'une pour recueillir la clé API et le code de région:
 
-![capture d'écran de l'extension terminée ouverte dans un navigateur, affichant un formulaire avec des entrées pour le nom de la région et la clé API](images/1.png)
+![capture d'écran de l'extension terminée ouverte dans un navigateur, affichant un formulaire avec des entrées pour le nom de la région et la clé API](../images/1.png)
 
-Et le second pour afficher la consommation de carbone de la région :
+Et le second pour afficher la consommation de carbone de la région:
 
-![capture d'écran de l'extension terminée affichant les valeurs d'utilisation du carbone et le pourcentage de combustibles fossiles pour la région US-NEISO](images/2.png)
+![capture d'écran de l'extension terminée affichant les valeurs d'utilisation du carbone et le pourcentage de combustibles fossiles pour la région US-NEISO](../images/2.png)
 
 Commençons par construire le HTML du formulaire et le styliser avec le CSS.
 
-Dans le dossier `/dist`, vous allez construire un formulaire et une zone de résultat. Dans le fichier `index.html`, remplissez la zone de formulaire délimitée :
+Dans le dossier `/dist`, vous allez construire un formulaire et une zone de résultat. Dans le fichier `index.html`, remplissez la zone de formulaire délimitée:
 
 ```HTML
 <form class="form-data" autocomplete="on">
@@ -115,7 +115,7 @@ Dans le dossier `/dist`, vous allez construire un formulaire et une zone de rés
 ```
 Il s'agit du formulaire où vos informations enregistrées seront saisies et sauvegardées dans le stockage local.
 
-Ensuite, créez la zone de résultats ; sous la balise de formulaire finale, ajoutez quelques divs :
+Ensuite, créez la zone de résultats; sous la balise de formulaire finale, ajoutez quelques divs:
 
 ```HTML
 <div class="result">
@@ -130,7 +130,7 @@ Ensuite, créez la zone de résultats ; sous la balise de formulaire finale, ajo
 	<button class="clear-btn">Change region</button>
 </div>
 ```
-À ce stade, vous pouvez essayer une construction. Assurez-vous d'installer les dépendances du paquet de cette extension :
+À ce stade, vous pouvez essayer une construction. Assurez-vous d'installer les dépendances du paquet de cette extension:
 
 ```
 npm install
@@ -146,7 +146,7 @@ Félicitations, vous avez franchi les premières étapes de la création d'une e
 
 ## 🚀 Défi
 
-Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers de manière intéressante. Que découvrez-vous ?
+Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers de manière intéressante. Que découvrez-vous?
 
 ## Quiz de validation des connaissances
 
@@ -154,7 +154,7 @@ Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en un
 
 ## Révision et étude personnelle
 
-Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur Web; profitez-en pour découvrir comment les inventeurs du World Wide Web envisageaient son utilisation en lisant d'autres documents sur son histoire. Voici quelques sites utiles :
+Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur Web; profitez-en pour découvrir comment les inventeurs du World Wide Web envisageaient son utilisation en lisant d'autres documents sur son histoire. Voici quelques sites utiles:
 
 [L'histoire des navigateurs Web](https://www.mozilla.org/firefox/browsers/browser-history/)
 
@@ -164,5 +164,5 @@ Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur
 
 ## Affectation 
 
-[Restylez votre extension](assignment.md)
+[Restylez votre extension](assignment.fr.md)