|
|
[](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/)
|
|
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
|
|
# Développement Web pour débutants - Programme
|
|
|
|
|
|
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'.
|
|
|
|
|
|
**Un grand merci à nos auteurs Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees et l’artiste de sketchnote Tomomi Imura!**
|
|
|
|
|
|
# Êtes vous étudiant ?
|
|
|
|
|
|
Commencez avec les ressources suivantes :
|
|
|
|
|
|
[La page Hub étudiants](https://docs.microsoft.com/fr-fr/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), vous trouverez des ressources pour les débutants, packs étudiants et des méthodes pour avoir des vouchers gratuits pour des certifications. C'est une page que vous pouvez enregistrer and vérifier de temps en temps car nous modifions le contenu mensuellement.
|
|
|
|
|
|
[Microsoft Learn Student Ambassadors](https://studentambassadors.microsoft.com/?WT.mc_id=academic-77807-sagibbon), rejoignez une communauté globale d'étudiants ambassadeurs, cela peut vous faire découvrir Microsoft.
|
|
|
|
|
|
# Pour commencer
|
|
|
|
|
|
> **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 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-77807-sagibbon) et en regardant les vidéos mentionnées ci-dessous.
|
|
|
|
|
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Vidéo promotionnelle")
|
|
|
|
|
|
Gif par [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
|
|
|
|
|
> 🎥 Cliquez sur l’image ci-dessus pour une vidéo sur le projet et les personnes qui l’ont créé!
|
|
|
|
|
|
## Pédagogie
|
|
|
|
|
|
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 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-77807-sagibbon) sur Microsoft Learn!
|
|
|
|
|
|
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-77807-sagibbon)" une collection de tutoriels vidéo, dont certains auteurs ont contribué à ce programme.
|
|
|
|
|
|
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.
|
|
|
|
|
|
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-77807-sagibbon)".
|
|
|
|
|
|
> 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!
|
|
|
|
|
|
## Chaque leçon comprend :
|
|
|
|
|
|
- note de croquis facultative (sketchnote)
|
|
|
- vidéo supplémentaire en option
|
|
|
- quiz préalable avant la leçon
|
|
|
- leçon écrite
|
|
|
- pour les leçons basées sur un projet, des guides étape par étape sur la façon de construire le projet
|
|
|
- vérifications des connaissances
|
|
|
- un défi
|
|
|
- lecture supplémentaire
|
|
|
- affectation
|
|
|
- quiz de validation des connaissances
|
|
|
|
|
|
> **Une note sur les quiz**: Tous les quiz sont contenus [dans cette application](https://ashy-river-0debb7803.1.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.
|
|
|
|
|
|
## Leçons
|
|
|
|
|
|
|
|
|
| | Nom du projet | Compétences à acquérir | Objectifs | Leçon liée | Auteur |
|
|
|
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------: | :---------------------: |
|
|
|
| 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 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é Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/translations/README.fr.md) | Christopher |
|
|
|
| 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 | 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 | 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 | 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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
|
|
|
|
|
|
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
|
|
|
|
|
|
Un PDF de toutes les leçons peut être trouvé [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
|
|
|
|
|
## Autres programmes d’études
|
|
|
|
|
|
Notre équipe produit d’autres programmes! Jetez un oeil:
|
|
|
|
|
|
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
|
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
|
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
|
|
- [AI for Beginners](https://aka.ms/ai-beginners)
|
