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 par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques tels que des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, discussions et 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 parcours de programmation dès aujourd’hui !

Rejoignez le Discord Azure AI Foundry et rencontrez des experts et autres développeurs.

Suivez ces étapes pour commencer à utiliser ces ressources :

1. Forkez le 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 experts et développeurs

🌐 Support Multilingue

Pris en charge via GitHub Action (Automatisé & Toujours à jour)

Arabe | Bengali | Bulgare | Birman (Myanmar) | Chinois (Simplifié) | Chinois (Traditionnel, Hong Kong) | Chinois (Traditionnel, Macao) | Chinois (Traditionnel, Taïwan) | Croate | Tchèque | Danois | Néerlandais | Estonien | Finnois | Français | Allemand | Grec | Hébreu | Hindi | Hongrois | Indonésien | Italien | Japonais | Kannada | Khmer | Coréen | Lituanien | Malais | Malayalam | Marathi | Népalais | Pidgin Nigérian | Norvégien | Persan (Farsi) | Polonais | Portugais (Brésil) | Portugais (Portugal) | Pendjabi (Gurmukhi) | Roumain | Russe | Serbe (Cyrillique) | Slovaque | Slovène | Espagnol | Swahili | Suédois | Tagalog (Philippin) | Tamoul | Télougou | Thaï | Turc | Ukrainien | Ourdou | Vietnamien

Préférez cloner localement ?

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

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 fournit tout ce dont vous avez besoin pour compléter le cours avec un téléchargement beaucoup plus rapide.

Si vous souhaitez d’autres traductions, les langues supportées sont listées ici. ici

🧑‍🎓 Vous êtes étudiant ?

Visitez la page du Student Hub où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens pour obtenir un bon de certificat gratuit. C’est la page à mettre en favori et à consulter de temps en temps car le contenu change chaque mois.

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

Nouveau défi ajouté, recherchez « GitHub Copilot Agent Challenge 🚀 » dans la plupart des chapitres. C’est un nouveau défi à réaliser avec GitHub Copilot et le mode Agent. Si vous n’avez jamais utilisé le mode Agent auparavant, il peut non seulement générer du texte, mais aussi créer et modifier des fichiers, exécuter des commandes, et plus encore.

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

Nouveau projet Assistant IA ajouté, découvrez-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 !

• Leçons couvrant tout, des bases à la RAG.
• Interagissez avec des personnages historiques grâce à GenAI et notre application compagnon.
• Narration amusante et engageante, vous voyagerez dans le temps !

Chaque leçon inclut un exercice à réaliser, une vérification des connaissances et un défi pour vous guider dans l’apprentissage de sujets tels que :

• La formulation de requêtes et l’ingénierie de prompts
• La génération d’applications de texte et d’image
• Les applications de recherche

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

🌱 Pour Bien Commencer

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

Apprenants, pour chaque leçon, commencez par un quiz avant la leçon et poursuivez en lisant le matériel, en réalisant les différentes activités puis vérifiez votre compréhension avec le quiz après la leçon.

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 votre formation, nous recommandons vivement d’explorer Microsoft Learn pour des ressources complémentaires.

📋 Configuration de votre environnement

Ce programme dispose d’un environnement de développement prêt à l’emploi ! Dès le début, vous pouvez choisir d’exécuter le programme dans un Codespace (un environnement dans le navigateur, sans installation nécessaire), ou localement sur votre ordinateur en utilisant 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 Utiliser ce modèle 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. Forkez le 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 que vous avez créée, cliquez sur le bouton Code puis sélectionnez Ouvrir avec Codespaces. Cela créera un nouveau Codespace pour vous permettre de travailler.

Exécuter le programme localement sur votre ordinateur

Pour exécuter ce programme localement sur votre ordinateur, 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 différentes options pour chacun de ces outils afin que vous choisissiez ce qui vous convient le mieux.

Nous recommandons d’utiliser Visual Studio Code comme éditeur, qui dispose également d’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 un 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 à coder plus rapidement

📂 Chaque leçon comprend :

• sketchnote optionnel
• 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
• lecture complémentaire
• devoir
• quiz post-leçon

Une note concernant les quiz : Tous les quiz se trouvent dans le dossier Quiz-app, 48 quiz au total avec trois questions chacun. Ils sont disponibles ici ; l’application de quiz peut être lancé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 liée	Auteur
01	Premiers pas	Introduction à la programmation et aux outils du métier	Découvrez les bases communes à la plupart des langages de programmation et les logiciels qui aident les développeurs professionnels dans leur travail	Intro aux langages de programmation et outils	Jasmine
02	Premiers pas	Notions de base de GitHub, y compris travail en équipe	Apprenez à utiliser GitHub dans vos projets, comment collaborer avec d’autres sur une base de code	Introduction à GitHub	Floor
03	Premiers pas	Accessibilité	Apprenez les bases de l’accessibilité web	Fondamentaux de l’accessibilité	Christopher
04	JS Basics	Types de données JavaScript	Les bases des types de données en JavaScript	Types de données	Jasmine
05	JS Basics	Fonctions et méthodes	Apprenez les fonctions et méthodes pour gérer le flux logique d’une application	Fonctions et méthodes	Jasmine et Christopher
06	JS Basics	Prise de décisions avec JS	Apprenez à créer des conditions dans votre code en utilisant les méthodes de prise de décision	Prise de décisions	Jasmine
07	JS Basics	Tableaux et boucles	Manipulez des données avec des tableaux et des boucles en JavaScript	Tableaux et boucles	Jasmine
08	Terrarium	HTML en pratique	Construisez le HTML pour créer un terrarium en ligne, en vous concentrant sur la création d’une mise en page	Introduction au HTML	Jen
09	Terrarium	CSS en pratique	Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS dont la responsivité de la page	Introduction au CSS	Jen
10	Terrarium	Fermetures JavaScript, manipulation du DOM	Construisez le JavaScript pour rendre le terrarium fonctionnel avec une interface glisser-déposer, en vous concentrant sur les fermetures et la manipulation du DOM	Fermetures JavaScript, manipulation du DOM	Jen
11	Typing Game	Construire un jeu de frappe	Apprenez à utiliser les événements clavier pour diriger la logique de votre application JavaScript	Programmation événementielle	Christopher
12	Extension de navigateur verte	Travailler avec les navigateurs	Apprenez le fonctionnement des navigateurs, leur histoire, et comment créer les premiers éléments d’une extension de navigateur	À propos des navigateurs	Jen
13	Extension de navigateur verte	Construire un formulaire, appeler une API et stocker des variables dans le stockage local	Construisez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées localement	APIs, formulaires et stockage local	Jen
14	Extension de navigateur verte	Processus d’arrière-plan dans le navigateur, performance web	Utilisez les processus d’arrière-plan du navigateur pour gérer l’icône de l’extension ; apprenez la performance web et des optimisations pour l’améliorer	Tâches de fond et performance	Jen
15	Jeu spatial	Développement de jeux avancé avec JavaScript	Apprenez l’héritage utilisant à la fois les classes et la composition ainsi que le modèle Pub/Sub, en préparation à la création d’un jeu	Introduction au développement avancé de jeux	Chris
16	Jeu spatial	Dessiner sur le canevas	Découvrez l’API Canvas, utilisée pour dessiner des éléments à l’écran	Dessiner sur le canevas	Chris
17	Jeu spatial	Déplacer des éléments à l’écran	Découvrez comment déplacer des éléments en utilisant les coordonnées cartésiennes et l’API Canvas	Déplacer des éléments	Chris
18	Jeu spatial	Détection de collision	Faites collisionner les éléments et réagir mutuellement avec des pressions sur les touches et fournissez une fonction de temps de récupération pour assurer une bonne performance du jeu	Détection de collision	Chris
19	Jeu spatial	Tenue du score	Effectuez des calculs mathématiques en fonction du statut et de la performance du jeu	Tenue du score	Chris
20	Jeu spatial	Fin et redémarrage du jeu	Apprenez à terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les variables	La condition de fin	Chris
21	Application bancaire	Modèles HTML et routes dans une application web	Apprenez à créer la structure d’un site web multipage avec routage et modèles HTML	Modèles HTML et routes	Yohan
22	Application bancaire	Créer un formulaire de connexion et d’inscription	Apprenez à construire des formulaires et gérer les routines de validation	Formulaires	Yohan
23	Application bancaire	Méthodes pour récupérer et utiliser des données	Comment les données entrent et sortent de votre application, comment les récupérer, stocker et éliminer	Données	Yohan
24	Application bancaire	Concepts de gestion d’état	Apprenez comment votre application conserve son état et comment le gérer programmatiquement	Gestion d’état	Yohan
25	Code navigateur/VScode	Travailler avec VScode	Apprenez à utiliser un éditeur de code	Utiliser l’éditeur de code VScode	Chris
26	Assistants IA	Travailler avec l’IA	Apprenez à construire 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 projet
• quiz fréquents

Le programme enseigne les fondamentaux de JavaScript, HTML et CSS, ainsi que les outils et techniques actuels utilisés par les développeurs web. Les étudiants auront l’occasion 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 les entreprises. À la fin de la série, les étudiants auront acquis une compréhension solide du développement web.

🎓 Vous pouvez suivre les premières leçons de ce programme comme un parcours d’apprentissage sur Microsoft Learn !

En veillant à ce que les contenus correspondent aux projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est renforcée. Nous avons également rédigé plusieurs leçons d’introduction aux bases de JavaScript pour présenter les concepts, accompagnées d’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 à enjeu faible avant le cours oriente l’intention de l’étudiant vers l’apprentissage d’un sujet, tandis qu’un second quiz après le cours garantit une meilleure rétention. Ce programme a été 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 volontairement évité d’introduire des frameworks JavaScript pour nous concentrer sur les compétences de base nécessaires en tant que développeur web avant d’adopter un framework, une bonne étape suivante pour compléter ce programme serait d’apprendre Node.js via une autre collection de vidéos : "Beginner Series to: Node.js".

Consultez notre Code de conduite et nos directives de contribution. Vos retours constructifs sont les bienvenus !

🧭 Accès hors ligne

Vous pouvez exécuter 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 web sera servi sur le port 3000 de 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 fondamental

---

Série Copilot

Obtenir de l'aide

Si vous êtes bloqué ou si vous avez des questions sur la création d'applications d'IA. Rejoignez d'autres apprenants et développeurs expérimentés pour discuter de MCP. C'est une communauté bienveillante où les questions sont les bienvenues et le savoir est partagé librement.

Si vous avez des retours produit ou des erreurs lors du développement, visitez :

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 automatisée Co-op Translator. Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue natale doit être considéré comme la source faisant foi. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées découlant de l’utilisation de cette traduction.