* 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
* Refactor and update of the base readme french translation
* Fix typos and broken links from #602 review
Fix typos and broken links according to @jlooper review
pull/605/head
Charles Emmanuel S. Ndiaye3 years agocommitted byGitHub
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Développement Web pour débutants - Programme
# Développement Web pour débutants - Programme
Azure Cloud Advocates de Microsoft sont heureux de vous offrir un cours de 24 leçons portant sur les bases du HTML, CSS et JavaScript.
Azure Cloud Advocates de Microsoft ont le plaisir de vous proposer un programme de 12 semaines et 24 leçons sur les bases de JavaScript, CSS et HTML. Chaque leçon comprend des quiz avant et après la leçon, des instructions écrites pour terminer la leçon, une solution, un devoir et plus encore. Notre pédagogie basée sur des projets vous permet d’apprendre tout en construisant, un moyen éprouvé pour que de nouvelles compétences puissent 'coller'.
Chaque leçon comporte des instructions, des projets et des quizs.
Grâce à la pédagogie basée sur la pratique, vous pouvez apprendre tout en créant des interfaces.
Ce qui représente une méthode qui consiste à acquérir des compétances et s'en rappelant !.
**Un très grand merci à Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, et Tomomi Imura!**
**Un grand merci à nos auteurs Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees et l’artiste de sketchnote Tomomi Imura!**
# Pour commencer
# Pour commencer
> **Instituteurs**, on vous a préparé des [suggestions](for-teachers.md). On attend votre retour sur ce cours au [forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Instituteurs**, nous avons [inclus quelques suggestions](for-teachers.fr.md) sur la façon d’utiliser ce programme. Nous aimerions avoir vos commentaires [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Elèves**, pour en bénéficier de ce cours le plus grand possible. Effectuer un Fork et compléter les exercices, réaliser les quizs!
> **Elèves**, pour utiliser ce programme par vous-même, effectuer un Fork l’ensemble du dépôt et compléter les exercices par vous-même, en commençant par un quiz préalable, puis en lisant le cours et en complétant le reste des activités. Essayez de créer les projets en comprenant les leçons plutôt que de copier le code de la solution; toutefois, ce code est disponible dans les dossiers /solutions de chaque leçon orientée projet. Une autre idée serait de former un groupe d’étude avec des amis et de parcourir le contenu ensemble. Pour une étude plus approfondie, nous recommandons [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) et en regardant les vidéos mentionnées ci-dessous.
N'oubliez pas de créer les projets posant sur ce que vous venez d'apprendre puis comparez-les avec les éléments de réponse.
Vous pouvez travailler en groupe, ce qui représente un bon moyen d'apprentissage.
Vous trouverez autres sujets complétants ce cours sur [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa).
[](https://youtube.com/watch?v=R1wrdtmBSII "Bande-annonce du cours")
> 🎥 Cliquez sur l'image pour visualiser une vidéo à propos des créateurs de ce cours !
Gif par [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
## Pedagogie
> 🎥 Cliquez sur l’image ci-dessus pour une vidéo sur le projet et les personnes qui l’ont créé!
On a choisi deux pédagogies pour créer ce cours.
## Pédagogie
En premier lieu, on a veillé à ce qu'il soit basé sur un projet et en réalité, vous auriez à la fin de ce cours codé un jeu de typing, une extension web, une application bancaire et d'autres intéressants projets.
En dernier lieu, on a mis à votre disposition des quizs pour vous évaluez vous-même.
Et à la fin, vous auriez appris beaucoup de choses à propos du HTML, CSS et Javascript. Et vous voilà, un développeur web 🎓 !
> En 12 semaines, vous pourrez réaliser cet exploit (de devenir un développeur web 🎓)
Nous avons choisi deux principes pédagogiques lors de l’élaboration de ce programme : s’assurer qu’il est basé sur des projets et qu’il comprend des quiz fréquents. À la fin de cette série, les élèves auront construit un jeu de dactylographie, un terrarium virtuel, une extension de navigateur 'verte', un jeu de type 'space invaders' et une application bancaire de type professionnel, et auront appris les bases de JavaScript, HTML et CSS ainsi que la chaîne d’outils moderne du développeur Web d’aujourd’hui.
> 🎓 Vous pouvez découvrir les premières leçons en tant que [Learn Path Programme](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) de Microsoft Learn!
> 🎓 Vous pouvez prendre les premières leçons de ce programme en tant que [Parcours d’apprentissage](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) sur Microsoft Learn!
Pour s'assurer du bon contenu fourni, on a mis à votre disposition un pack de bases du Javascript contenant une introduction complète à ce langage de programmation [accessible ici](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa).
En veillant à ce que le contenu s’aligne sur les projets, le processus est rendu plus attrayant pour les étudiants et la rétention des concepts sera augmentée. Nous avons également écrit plusieurs leçons de démarrage sur les bases de JavaScript pour introduire des concepts, associées à une vidéo de la "[Série pour débutants à : JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" une collection de tutoriels vidéo, dont certains auteurs ont contribué à ce programme.
Il s'agit d'une collection de vidéos faites par les créateurs de ce cours.
En plus, les quizs disponibles sont des quizs qui évaluent les compétences acquises de la leçon précédente et d'autres qui évaluent les compétences acquises dans la leçon actuelle.
En outre, un quiz à faible enjeu avant un cours définit l’intention de l’élève d’apprendre un sujet, tandis qu’un deuxième quiz après le cours assure une rétention supplémentaire. Ce programme a été conçu pour être flexible et amusant et peut être pris en tout ou en partie. Les projets commencent petit et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
On rappelle que ce cours comporte le HTML, CSS et le Javascript. Donc, on n'a pas traité les Frameworks Javascript comme le React.
Bien que nous ayons délibérément évité d’introduire des frameworks JavaScript afin de nous concentrer sur les compétences de base nécessaires en tant que développeur Web avant d’adopter un framework, une bonne prochaine étape pour compléter ce programme serait d’en apprendre davantage sur Node.js via une autre collection de vidéos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
Mais voici une série de vidéos éducatives à suivre après avoir complété ce cours, elle traite le Node.js en tant qu'un Framework Javascript.
> Lisez [le Code of Conduct](CODE_OF_CONDUCT.md), [le guide pour contribuer](CONTRIBUTING.md), et [le guide de la traduction du cours](TRANSLATIONS.md).
> Trouvez nos directives de [Code de conduite](../CODE_OF_CONDUCT.md), pour [Contribuer](../CONTRIBUTING.md) et de [Traduction](../TRANSLATIONS.md). Vos commentaires constructifs sont les bienvenus!
Vos retours sont vivement acceptés.
>
## Chaque leçon comprend :
## Chaque leçon comporte :
- Un sketchnote
- note de croquis facultative (sketchnote)
- Une vidéo supplémentaire
- vidéo supplémentaire en option
- Quiz des dernières compétences acquises
- quiz préalable avant la leçon
- Les traces écrites
- leçon écrite
- Un challenge
- pour les leçons basées sur un projet, des guides étape par étape sur la façon de construire le projet
- Une explication **très détaillée** pour réussir le challenge
- vérifications des connaissances
- Ressources
- un défi
- Des exercices
- lecture supplémentaire
- Quiz sur ce que l'élève a appris
- affectation
- quiz de validation des connaissances
> **Les quizs**: Les quizs sont disponibles [ici](https://happy-mud-02d95f10f.azurestaticapps.net/), un total de 48 quizs avec 3 questions chacun.
> **Une note sur les quiz**: Tous les quiz sont contenus [dans cette application](https://happy-mud-02d95f10f.azurestaticapps.net/), pour un total de 48 quiz de trois questions chacun. Ils sont liés à partir des leçons, mais l’application de quiz peut être exécutée localement; suivez les instructions dans le dossier `quiz-app`. Ils sont progressivement localisés.
Ils sont accessible via le dossier `quiz-app`.
## Lessons
## Leçons
| | Nom du projet | Compétences à acquérir | Objectifs | Leçon | Auteur |
| | Nom du projet | Compétences à acquérir | Objectifs | Leçon liée | Auteur |
| 01 | Pour commencer | Introduction à la programmation | Savoir les bases de quelques langages de programmation et leur utilité dans la création de solutions informatiques | [Introduction à la programmation](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Pour commencer | Introduction à la programmation et aux outils métiers | Savoir les bases de quelques langages de programmation et leur utilité dans la création de solutions informatiques | [Introduction à la programmation](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md) | Jasmine |
| 02 | Pour commencer | Les bases de Github et le travail au groupe | Apprendre comment utiliser GitHub et contribuer à des projets | [Introduction aux bases de GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Pour commencer | Les bases de Github et le travail en groupe | Apprendre comment utiliser GitHub et contribuer à des projets | [Introduction aux bases de GitHub](/1-getting-started-lessons/2-github-basics/translations/README.fr.md) | Floor |
| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité au Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/translations/README.fr.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
| 04 | Les bases de JS | Types de données JavaScript | Les bases des types de données JavaScript | [Types de données](/2-js-basics/1-data-types/translations/README.fr.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 05 | Les bases de JS | Fonctions et méthodes | En savoir plus sur les fonctions et les méthodes de gestion du flux logique d’une application flow | [Fonctions et méthodes](/2-js-basics/2-functions-methods/translations/README.fr.md) | Jasmine et Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | Les bases de JS | Prendre des décisions avec JS | Découvrez comment créer des conditions dans votre code à l’aide de méthodes de prise de décision methods | [Prendre des décisions](/2-js-basics/3-making-decisions/translations/README.fr.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Les bases de JS | Tableaux et boucles | Utiliser des données à l’aide de tableaux et de boucles en JavaScript | [Tableaux et boucles](/2-js-basics/4-arrays-loops/translations/README.fr.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | HTML en pratique | Construisez le code HTML pour créer un terrarium en ligne, en vous concentrant sur la construction d’une mise en page | [Introduction to HTML](/3-terrarium/1-intro-to-html/translations/README.fr.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | CSS en pratique | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, y compris rendre la page réactive | [Introduction to CSS](/3-terrarium/2-intro-to-css/translations/README.fr.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | Fermetures JavaScript, manipulation DOM | Construisez le JavaScript pour que le terrarium fonctionne comme une interface glisser/déposer, en vous concentrant sur les fermetures et la manipulation du DOM | [Fermetures JavaScript, manipulation DOM](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](/4-typing-game/solution/translations/README.fr.md) | Créer un jeu de frappe | Découvrez comment utiliser les événements de clavier pour piloter la logique de votre application JavaScript | [Event-Driven Programming](/4-typing-game/typing-game/translations/README.fr.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Utilisation des navigateurs | Découvrez comment fonctionnent les navigateurs, leur historique et comment échafauder les premiers éléments d’une extension de navigateur | [About Browsers](/5-browser-extension/1-about-browsers/translations/README.fr.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Création d’un formulaire, appel d’une API et stockage de variables dans le stockage local | Générez les éléments JavaScript de votre extension de navigateur pour appeler une API à l’aide de variables stockées dans le stockage local | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Processus en arrière-plan dans le navigateur, performances Web | Utilisez les processus d’arrière-plan du navigateur pour gérer l’icône de l’extension; en savoir plus sur les performances Web et quelques optimisations à faire | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/translations/README.fr.md) | Jen |
| 15 | [Jeu de l'espace](/6-space-game/solution/README.md) | Développement avancé d'un jeu en Javascript | Savoir les bases de l'**Inheritance** avec les **Classes and Composition et les Pub/Sub pattern**, afin de créer un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/README.md) | Chris |
| 15 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Développement avancé d'un jeu en Javascript | En savoir plus sur l’héritage en utilisant à la fois les classes et la composition et le modèle Pub/Sub, en préparation de la création d’un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/translations/README.fr.md) | Chris |
| 16 | [Jeu de l'espace](/6-space-game/solution/README.md) | Les Canvas | Savoir à propos du Canvas API, utilisé pour dessiner des éléments | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Les Canvas | En savoir plus sur l’API Canvas, utilisée pour dessiner des éléments sur un écran | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/translations/README.fr.md) | Chris |
| 17 | [Jeu de l'espace](/6-space-game/solution/README.md) | Déplacer les éléments | En utilisant les données cartésiennes et le Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Déplacement d’éléments autour de l’écran | Découvrez comment les éléments peuvent gagner du mouvement à l’aide des coordonnées cartésiennes et de l’API Canvas | [Moving Elements Around](/6-space-game/3-moving-elements-around/translations/README.fr.md) | Chris |
| 18 | [Jeu de l'espace](/6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Détection de collision | Faire entrer en collision les éléments et les faire réagir les uns aux autres à l’aide d’appuis sur les touches et fournir une fonction de refroidissement pour assurer les performances du jeu | [Collision Detection](/6-space-game/4-collision-detection/translations/README.fr.md) | Chris |
| 19 | [Jeu de l'espace](/6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Garder le score | Effectuez des calculs mathématiques en fonction de l’état du jeu et des performances | [Keeping Score](/6-space-game/5-keeping-score/translations/README.fr.md) | Chris |
| 20 | [Jeu de l'espace](/6-space-game/solution/README.md) | Commencer et finir un jeu | Savoir manipuler les variables, démarrer un jeu et mettre fin. | [Fin Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Fin et redémarrage du jeu | Découvrez comment terminer et redémarrer le jeu, y compris le nettoyage des ressources et la réinitialisation des valeurs variables | [Fin Condition](/6-space-game/6-end-condition/translations/README.fr.md) | Chris |
| 21 | [Application bancaire](/7-bank-project/solution/README.md) | HTML Templates et Routes dans une application web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Modèles et Routes HTML dans une application Web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/translations/README.fr.md) | Yohan |
| 22 | [Application bancaire](/7-bank-project/solution/README.md) | Créer un formulaire de connexion | Apprendre le fonctionnement d'un formulaire et la vérification des données saisies | [Formulaires](/7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Créez un formulaire de connexion et d’inscription | En savoir plus sur la création de formulaires et la gestion des routines de validation | [Formulaires](/7-bank-project/2-forms/translations/README.fr.md) | Yohan |
| 23 | [Application bancaire](/7-bank-project/solution/README.md) | Fetch et utilisation des données | Savoir comment une application manipule les données | [Données](/7-bank-project/3-data/README.md) | Yohan |
| 23 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Fetch et utilisation des données | Comment les données entrent et sortent de votre application, comment les récupérer, les stocker et les supprimer | [Données](/7-bank-project/3-data/translations/README.fr.md) | Yohan |
| 24 | [Application bancaire](/7-bank-project/solution/README.md) | Concepts de la gestion des states | En savoir comment une application gère les states | [Gestion des states](/7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Concepts de la gestion des states | Découvrez comment votre application conserve son état et comment la gérer par programme | [Gestion des states](/7-bank-project/4-state-management/translations/README.fr.md) | Yohan |
## Accéder au cours hors connexion
## Accéder au cours hors connexion
Vous pouvez y accéder en utilisant [Docsify](https://docsify.js.org/#/). Effectuez un Fork, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine, et tapez `docsify serve` dans le dossier root. Le site web va apparaître dans votre navigateur au port 3000 du localhost `localhost:3000`.
Vous pouvez exécuter cette documentation hors connexion à l’aide de [Docsify](https://docsify.js.org/#/). Effectuez un Fork de ce référentiel, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre ordinateur local, puis dans le dossier racine de ce référentiel, tapez `docsify serve`. Le site Web va apparaître dans votre navigateur au port 3000 du localhost:`localhost:3000`.
## PDF
## PDF
Ce cours est disponible en PDF. [Cliquez ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
Un PDF de toutes les leçons peut être trouvé [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
## Autres Cours
## Autres programmes d’études
Découvrez d'autres cours :
Notre équipe produit d’autres programmes! Jettez un oeil:
- [Machine Learning pour débutants](https://aka.ms/ml-beginners)
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
- [IoT pour débutants](https://aka.ms/iot-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
Charles Emmanuel S. Ndiaye
3 years ago
committed by
GitHub