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!**
# 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)!
> **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!
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 !
## Pedagogie
On a choisi deux pédagogies pour créer ce cours.
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 🎓)
> 🎓 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!
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).
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.
On rappelle que ce cours comporte le HTML, CSS et le Javascript. Donc, on n'a pas traité les Frameworks Javascript comme le React.
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).
Vos retours sont vivement acceptés.
>
## Chaque leçon comporte :
- Un sketchnote
- Une vidéo supplémentaire
- Quiz des dernières compétences acquises
- Les traces écrites
- Un challenge
- Une explication **très détaillée** pour réussir le challenge
| 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 |
| 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 |
| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité au Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 10 | [Terrarium](/3-terrarium/solution) | 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 |
| 11 | [Typing Game](/4-typing-game/solution) | 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 |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | 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 |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | 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 |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | 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 |
| 15 | [Jeu de l'espace](/6-space-game/solution) | 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 |
| 16 | [Jeu de l'espace](/6-space-game/solution) | 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 |
| 17 | [Jeu de l'espace](/6-space-game/solution) | 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 |
| 18 | [Jeu de l'espace](/6-space-game/solution) | 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 |
| 19 | [Jeu de l'espace](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu de l'espace](/6-space-game/solution) | 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 |
| 21 | [Application bancaire](/7-bank-project/solution) | 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 |
| 22 | [Application bancaire](/7-bank-project/solution) | 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 |
| 23 | [Application bancaire](/7-bank-project/solution) | Fetch et utilisation des données | Savoir comment une application manipule les données | [Données](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](/7-bank-project/solution) | 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 |
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`.
