You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
17 KiB
115 lines
17 KiB
3 years ago
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||
|
|
[](http://makeapullrequest.com)
|
||
|
|
|
||
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||
|
|
|
||
|
|
|
||
|
|
# Développement Web pour débutants - Programme
|
||
|
|
|
||
3 years ago
|
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.
|
||
|
3 years ago
|
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.
|
||
|
|
Accessible [ici](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)
|
||
|
|
|
||
|
|
> 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
|
||
|
|
- Ressources
|
||
|
|
- Des exercices
|
||
|
|
- Quiz sur ce que l'élève a appris
|
||
|
|
|
||
|
|
> **Les quizs**: Les quizs sont disponibles [ici](https://nice-beach-0fe9e9d0f.azurestaticapps.net/), un total de 48 quizs avec 3 questions chacun.
|
||
|
|
Ils sont accessible via le dossier `quiz-app`.
|
||
|
|
|
||
|
|
## Lessons
|
||
|
|
|
||
|
|
| | Nom du projet | Compétences à acquérir | Objectifs | Leçon | 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 |
|
||
|
|
| 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 |
|
||
|
|
|
||
|
|
## 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`.
|
||
|
|
|
||
|
|
## PDF
|
||
|
|
|
||
|
3 years ago
|
Ce cours est disponible en PDF. [Cliquez ici](../pdf/readme.pdf)
|
||
|
3 years ago
|
|
||
|
|
## Autres Cours
|
||
|
|
|
||
|
|
Découvrez d'autres cours :
|
||
|
|
|
||
|
|
- [Machine Learning pour débutants](https://aka.ms/ml-beginners)
|
||
|
|
- [IoT pour débutants](https://aka.ms/iot-beginners)
|