Web-Dev-For-Beginners/translations/fr

Développement Web pour Débutants - Un Programme

Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines conçu par les Défenseurs du Cloud Microsoft. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques comme des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, des discussions et des exercices pratiques. Améliorez vos compétences et optimisez votre rétention des connaissances grâce à notre pédagogie efficace basée sur des projets. Commencez votre apprentissage du code dès aujourd'hui !

Rejoignez la Communauté Azure AI Foundry sur Discord

Suivez ces étapes pour commencer à utiliser ces ressources :

1. Faites un fork du dépôt : Cliquez sur
2. Clonez le dépôt : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Rejoignez le Discord Azure AI Foundry et rencontrez des experts ainsi que d'autres développeurs

🌐 Support Multilingue

Pris en charge via GitHub Action (Automatisé et Toujours à Jour)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

Vous préférez cloner localement ?

Ce dépôt comprend plus de 50 traductions, ce qui augmente significativement la taille du téléchargement. Pour cloner sans les traductions, utilisez le checkout sparse :

Bash / macOS / Linux :

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

CMD (Windows) :

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"

Cela vous donne tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.

Si vous souhaitez que d'autres langues de traduction soient prises en charge, elles sont listées ici

🧑‍🎓 Êtes-vous étudiant ?

Visitez la page Hub Étudiant où vous trouverez des ressources pour débutants, des packs pour étudiants et même des moyens d'obtenir un bon de certificat gratuit. C’est la page que vous voudrez mettre en favori et consulter régulièrement car son contenu est mis à jour chaque mois.

📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à compléter !

Nouveau défi ajouté, cherchez le "Défi GitHub Copilot Agent 🚀" dans la plupart des chapitres. C’est un nouveau défi à compléter en utilisant GitHub Copilot et le mode Agent. Si vous n'avez jamais utilisé le mode Agent, il est capable non seulement de générer du texte, mais aussi de créer et modifier des fichiers, exécuter des commandes et plus encore.

📣 Annonce - Nouveau projet à construire en utilisant l’IA générative

Nouveau projet Assistant IA ajouté, consultez le projet

📣 Annonce - Nouveau programme sur l’IA générative pour JavaScript vient d’être publié

Ne manquez pas notre nouveau programme sur l’IA générative !

Visitez https://aka.ms/genai-js-course pour commencer !

• Des leçons couvrant tout, des bases au RAG.
• Interagissez avec des personnages historiques grâce à GenAI et notre application compagnon.
• Une narration amusante et immersive, vous voyagerez dans le temps !

Chaque leçon comprend un devoir à réaliser, un contrôle de connaissances et un défi pour vous guider dans l’apprentissage de sujets comme :

• Le prompt et l’ingénierie du prompt
• La génération d’applications texte et image
• Les applications de recherche

Visitez https://aka.ms/genai-js-course pour commencer !

🌱 Pour commencer

Enseignants, nous avons inclus quelques suggestions sur comment utiliser ce programme. Nous attendons vos retours dans notre forum de discussion !

Apprenants, pour chaque leçon, commencez par un quiz pré-conférence puis lisez le contenu de la conférence, complétez les diverses activités et vérifiez votre compréhension via le quiz post-conférence.

Pour améliorer votre expérience d’apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées sur notre forum de discussion où notre équipe de modérateurs sera disponible pour répondre à vos questions.

Pour approfondir vos connaissances, nous recommandons vivement d’explorer Microsoft Learn pour des supports d’étude supplémentaires.

📋 Configuration de votre environnement

Ce programme dispose d’un environnement de développement prêt à l’emploi ! Pour démarrer, vous pouvez choisir d’exécuter le programme dans un Codespace (un environnement basé sur navigateur, sans installation nécessaire), ou localement sur votre ordinateur avec un éditeur de texte comme Visual Studio Code.

Créez votre dépôt

Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton Use this template en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.

Suivez ces étapes :

1. Faites un fork du dépôt : Cliquez sur le bouton "Fork" en haut à droite de cette page.
2. Clonez le dépôt : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Exécuter le programme dans un Codespace

Dans votre copie de ce dépôt, cliquez sur le bouton Code puis sélectionnez Open with Codespaces. Cela créera un nouveau Codespace pour que vous puissiez travailler.

Exécuter le programme localement sur votre ordinateur

Pour exécuter ce programme localement, vous aurez besoin d’un éditeur de texte, d’un navigateur et d’un outil en ligne de commande. Notre première leçon, Introduction aux langages de programmation et outils du métier, vous guidera à travers diverses options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.

Nous recommandons l’utilisation de Visual Studio Code comme éditeur, qui inclut également un Terminal intégré. Vous pouvez télécharger Visual Studio Code ici.

1. Clonez votre dépôt sur votre ordinateur. Vous pouvez le faire en cliquant sur le bouton Code et en copiant l’URL :

   CodeSpace

   Ensuite, ouvrez Terminal dans Visual Studio Code et exécutez la commande suivante, en remplaçant <your-repository-url> par l'URL que vous venez de copier :

   git clone <your-repository-url>
   

2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur Fichier > Ouvrir le dossier et en sélectionnant le dossier que vous venez de cloner.

Extensions Visual Studio Code recommandées :

• Live Server - pour prévisualiser les pages HTML dans Visual Studio Code
• Copilot - pour vous aider à écrire du code plus rapidement

📂 Chaque leçon comprend :

• sketchnote optionnelle
• vidéo complémentaire optionnelle
• quiz d’échauffement avant la leçon
• leçon écrite
• pour les leçons basées sur un projet, des guides étape par étape pour construire le projet
• vérifications des connaissances
• un défi
• lectures complémentaires
• devoir
• quiz post-leçon

Une note à propos des quiz : Tous les quiz sont contenus dans le dossier Quiz-app, avec 48 quiz au total de trois questions chacun. Ils sont disponibles ici ; l’application de quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier quiz-app.

🗃️ Leçons

	Nom du Projet	Concepts Enseignés	Objectifs d’Apprentissage	Leçon Associée	Auteur
01	Premiers Pas	Introduction à la Programmation et Outils du Métier	Apprendre les bases communes à la plupart des langages de programmation et sur les logiciels qui aident les développeurs pros	Introduction aux langages de programmation et aux outils	Jasmine
02	Premiers Pas	Bases de GitHub, y compris le travail en équipe	Comment utiliser GitHub dans votre projet et collaborer avec d’autres sur une base de code	Introduction à GitHub	Floor
03	Premiers Pas	Accessibilité	Apprendre les bases de l’accessibilité web	Fondamentaux de l’accessibilité	Christopher
04	Bases JS	Types de données en JavaScript	Les bases des types de données en JavaScript	Types de données	Jasmine
05	Bases JS	Fonctions et Méthodes	Apprendre les fonctions et méthodes pour gérer le flux logique d’une application	Fonctions et Méthodes	Jasmine et Christopher
06	Bases JS	Prise de décisions avec JS	Apprendre à créer des conditions dans votre code grâce aux méthodes de prise de décisions	Prise de décisions	Jasmine
07	Bases JS	Tableaux et Boucles	Travailler avec les données en utilisant tableaux et boucles en JavaScript	Tableaux et boucles	Jasmine
08	Terrarium	HTML en Pratique	Construire le HTML pour créer un terrarium en ligne, en se concentrant sur la création d’une mise en page	Introduction au HTML	Jen
09	Terrarium	CSS en Pratique	Construire le CSS pour styliser le terrarium en ligne, en se concentrant sur les bases du CSS y compris le rendu responsive	Introduction au CSS	Jen
10	Terrarium	Fermetures JavaScript, manipulation DOM	Écrire le JavaScript pour rendre le terrarium fonctionnel en tant qu’interface drag/drop, en se concentrant sur les closures et DOM	Closures JS, manipulation DOM	Jen
11	Jeu de frappe	Construire un jeu de frappe	Apprendre à utiliser les événements clavier pour piloter la logique de votre application JavaScript	Programmation événementielle	Christopher
12	Extension Navigateur Vert	Travailler avec les navigateurs	Découvrir comment fonctionnent les navigateurs, leur histoire, et comment initier les premiers éléments d’une extension	À propos des navigateurs	Jen
13	Extension Navigateur Vert	Construire un formulaire, appeler une API et stocker localement	Construire les éléments JavaScript de votre extension navigateur pour appeler une API en utilisant des variables en stockage local	APIs, formulaires et stockage local	Jen
14	Extension Navigateur Vert	Processus en arrière-plan dans le navigateur, performance web	Utiliser les processus en arrière-plan du navigateur pour gérer l’icône de l’extension ; apprendre la performance web et optimisations	Tâches en arrière-plan et performance	Jen
15	Jeu Spatial	Développement avancé de jeu avec JavaScript	Apprendre l’héritage utilisant classes et composition ainsi que le pattern Pub/Sub, en préparation au développement d’un jeu	Introduction au développement avancé	Chris
16	Jeu Spatial	Dessiner sur Canvas	Découvrir l’API Canvas, utilisée pour dessiner des éléments sur écran	Dessiner sur Canvas	Chris
17	Jeu Spatial	Déplacer des éléments à l’écran	Découvrir comment les éléments peuvent se déplacer avec les coordonnées cartésiennes et l’API Canvas	Déplacer des éléments	Chris
18	Jeu Spatial	Détection de collisions	Faire entrer en collision les éléments et réagir grâce aux pressions de touches, avec une fonction de refroidissement pour la performance	Détection de collisions	Chris
19	Jeu Spatial	Gestion du score	Effectuer des calculs mathématiques basés sur le statut et la performance du jeu	Gestion du score	Chris
20	Jeu Spatial	Fin et redémarrage du jeu	Apprendre à terminer et redémarrer une partie, y compris le nettoyage des ressources et la réinitialisation des variables	La condition de fin	Chris
21	Application bancaire	Templates HTML et Routes dans une application web	Apprendre à créer l’ossature d’un site web multipages avec routage et templates HTML	Templates HTML et Routes	Yohan
22	Application bancaire	Construire un formulaire de connexion et d'inscription	Apprendre la construction de formulaires et la gestion des validations	Formulaires	Yohan
23	Application bancaire	Méthodes pour récupérer et utiliser les données	Comment les données entrent et sortent de votre application, comment les récupérer, stocker et gérer	Données	Yohan
24	Application bancaire	Concepts de gestion d’état	Comprendre comment votre application conserve l’état et comment le gérer par programmation	Gestion d’état	Yohan
25	Code Navigateur/VScode	Travailler avec VScode	Apprendre à utiliser un éditeur de code	Utiliser l’éditeur de code VScode	Chris
26	Assistants IA	Travailler avec l’IA	Apprendre à créer votre propre assistant IA	Projet Assistant IA	Chris

🏫 Pédagogie

Notre programme est conçu autour de deux principes pédagogiques clés :

• apprentissage par projets
• quiz fréquents

Le programme enseigne les fondamentaux du JavaScript, HTML et CSS, ainsi que les outils et techniques les plus récents utilisés par les développeurs web d’aujourd’hui. Les étudiants auront l’opportunité de développer une expérience pratique en construisant un jeu de frappe, un terrarium virtuel, une extension de navigateur écologique, un jeu de type space-invader, et une application bancaire pour entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.

🎓 Vous pouvez suivre les premières leçons de ce programme en tant que Parcours d’apprentissage sur Microsoft Learn !

En alignant le contenu sur des projets, le processus est rendu plus attrayant pour les étudiants et la rétention des concepts est améliorée. Nous avons aussi créé plusieurs leçons de base en JavaScript pour introduire les concepts, associées à une vidéo de la collection de tutoriels vidéo "Beginners Series to: JavaScript", dont certains auteurs ont contribué à ce programme.

De plus, un quiz à faible enjeu avant la classe prépare l’intention d’apprentissage de l’étudiant sur un sujet, tandis qu’un second quiz après la classe assure une meilleure rétention. Ce programme est conçu pour être flexible et ludique et peut être suivi en totalité ou en partie. Les projets commencent petits 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 avant l’adoption d’un framework, une bonne étape suivante serait d’apprendre Node.js via une autre collection de vidéos : "Beginner Series to: Node.js".

Consultez nos directives Code de conduite et Contribution. Nous accueillons vos retours constructifs !

🧭 Accès hors ligne

Vous pouvez consulter cette documentation hors ligne en utilisant Docsify. Forkez ce dépôt, installez Docsify sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez docsify serve. Le site sera servi sur le port 3000 sur votre localhost : localhost:3000.

📘 PDF

Un PDF de toutes les leçons est disponible ici.

🎒 Autres cours

Notre équipe produit d'autres cours ! Découvrez :

LangChain

Azure / Edge / MCP / Agents

---

Série IA générative

---

Apprentissage de base

---

Série Copilot

Obtenir de l'aide

Si vous êtes bloqué ou avez des questions sur la création d'applications d'IA, rejoignez d'autres apprenants et développeurs expérimentés dans les discussions sur MCP. C'est une communauté de soutien où les questions sont les bienvenues et où les connaissances sont librement partagées.

Si vous avez des retours produit ou des erreurs lors du développement, rendez-vous sur :

Licence

Ce dépôt est sous licence MIT. Consultez le fichier LICENSE pour plus d'informations.

---

Avertissement :
Ce document a été traduit à l'aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue native doit être considéré comme la source faisant foi. Pour des informations cruciales, une traduction professionnelle humaine est recommandée. Nous ne sommes pas responsables des malentendus ou des interprétations erronées résultant de l'utilisation de cette traduction.