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 proposé par les Microsoft Cloud Advocates. 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 devoirs pratiques. Améliorez vos compétences et optimisez la rétention de vos connaissances grâce à notre pédagogie efficace basée sur les projets. Commencez votre parcours de codage dès aujourd'hui !

Rejoignez la communauté Azure AI Foundry sur Discord

Suivez ces étapes pour commencer à utiliser ces ressources :

1. Bifurquez le Référentiel : Cliquez sur
2. Clonez le Référentiel : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Rejoignez l'Azure AI Foundry Discord pour rencontrer des experts et d'autres 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 | Coréen | Lituanien | Malais | Malayalam | Marathi | Népalais | Pidgin Nigérian | Norvégien | Persan (Farsi) | Polonais | Portugais (Brésil) | Portugais (Portugal) | Punjabi (Gurmukhi) | Roumain | Russe | Serbe (Cyrillique) | Slovaque | Slovène | Espagnol | Swahili | Suédois | Tagalog (Philippin) | Tamoul | Télougou | Thaï | Turc | Ukrainien | Ourdou | Vietnamien

Vous préférez Cloner Localement ?

Ce référentiel inclut plus de 50 traductions de langues, ce qui augmente considérablement la taille du téléchargement. Pour cloner sans les traductions, utilisez un "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 donne tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.

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

🧑‍🎓 Êtes-vous étudiant(e) ?

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

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

Nouveau défi ajouté, cherchez "GitHub Copilot Agent Challenge 🚀" dans la plupart des chapitres. C’est un nouveau défi à relever 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 avec l’IA Générative

Nouveau projet d’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 au RAG.
• Interagissez avec des personnages historiques grâce à GenAI et notre application compagnon.
• Une narration amusante et engageante, vous voyagerez dans le temps !

Chaque leçon comprend un devoir à réaliser, un contrôle des connaissances et un défi pour vous guider sur des thèmes tels que :

• Le prompting et l'ingénierie de prompt
• La génération d’applications textuelles et imagées
• Les applications de recherche

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

🌱 Pour Commencer

Enseignants, nous avons inclus quelques suggestions sur la façon d’utiliser ce programme. Nous aimerions avoir votre retour sur notre forum de discussion !

Apprenants, pour chaque leçon, commencez par un quiz pré-lecture puis poursuivez avec la lecture du matériel de cours, la réalisation des diverses activités et vérifiez votre compréhension avec le quiz post-lecture.

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

Pour approfondir votre formation, nous recommandons fortement d’explorer Microsoft Learn pour des matériaux d’étude supplémentaires.

📋 Configuration de votre environnement

Ce programme dispose d’un environnement de développement prêt à l’emploi ! Lors de vos débuts, vous pouvez choisir d’exécuter le programme dans un Codespace (un environnement basé sur navigateur, sans besoin d’installation), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que Visual Studio Code.

Créez votre répertoire

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

Suivez ces étapes :

1. Bifurquez le Référentiel : Cliquez sur le bouton "Fork" en haut à droite de cette page.
2. Clonez le Référentiel : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Exécuter le programme dans un Codespace

Dans votre copie de ce répertoire que vous avez créée, cliquez sur le bouton Code et sélectionnez Open with Codespaces. Cela créera un nouveau Codespace dans lequel vous pourrez 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 plusieurs options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.

Nous recommandons d’utiliser Visual Studio Code comme éditeur, qui possède é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 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 à écrire du code plus rapidement

📂 Chaque leçon inclut :

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

Une note au sujet des quiz : Tous les quiz sont regroupés dans le dossier Quiz-app, avec un total de 48 quiz composés chacun de trois questions. 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 liée	Auteur
01	Prise en main	Introduction à la programmation et aux outils du métier	Apprenez les bases communes à la plupart des langages de programmation et sur les logiciels qui aident les développeurs professionnels	Introduction aux langages de programmation et outils du métier	Jasmine
02	Prise en main	Bases de GitHub, y compris travailler en équipe	Comment utiliser GitHub dans votre projet, comment collaborer avec d’autres sur une base de code	Introduction à GitHub	Floor
03	Prise en main	Accessibilité	Apprenez les bases de l’accessibilité web	Fondamentaux de l’accessibilité	Christopher
04	Bases JS	Types de données JavaScript	Les bases des types de données en JavaScript	Types de données	Jasmine
05	Bases JS	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	Bases JS	Prise de décision 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	Bases JS	Tableaux et boucles	Travaillez avec les données en utilisant les tableaux et les 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 de la mise en page	Introduction à HTML	Jen
09	Terrarium	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 responsive	Introduction à CSS	Jen
10	Terrarium	Fermetures JavaScript, manipulation du DOM	Construisez le JavaScript pour rendre le terrarium fonctionnel en tant qu’interface drag/drop, en vous concentrant sur les fermetures et la manipulation du DOM	Fermetures JavaScript, manipulation du DOM	Jen
11	Jeu de frappe	Construire un jeu de frappe	Apprenez à utiliser les événements clavier pour piloter la logique de votre application JavaScript	Programmation événementielle	Christopher
12	Extension de navigateur verte	Travailler avec les navigateurs	Apprenez comment fonctionnent les navigateurs, leur histoire, et comment structurer 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 en local storage	Construisez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées en local storage	API, 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	Tâches d’arrière-plan et performances	Jen
15	Jeu spatial	Développement de jeu plus avancé avec JavaScript	Apprenez l’héritage avec Classes et Composition ainsi que le pattern Pub/Sub, en préparation à la création d’un jeu	Introduction au développement de jeu avancé	Chris
16	Jeu spatial	Dessin sur canvas	Apprenez l’API Canvas, utilisée pour dessiner des éléments sur un écran	Dessin sur Canvas	Chris
17	Jeu spatial	Déplacer des éléments à l’écran	Découvrez comment les éléments peuvent se déplacer en utilisant les coordonnées cartésiennes et l’API Canvas	Déplacement des éléments	Chris
18	Jeu spatial	Détection de collision	Faites se percuter et réagir les éléments en utilisant les pressions de touches et fournissez une fonction de temps de recharge pour assurer les performances du jeu	Détection de collision	Chris
19	Jeu spatial	Tenir le score	Effectuez des calculs mathématiques basés sur le statut et les performances du jeu	Tenir le score	Chris
20	Jeu spatial	Terminer et relancer le jeu	Apprenez à terminer et relancer le jeu, y compris nettoyer les ressources et réinitialiser les variables	La condition de fin	Chris
21	Application bancaire	Templates HTML et routes dans une application web	Apprenez à créer l’ossature de l’architecture d’un site multipage en utilisant le routage et les modèles HTML	Templates HTML et routes	Yohan
22	Application bancaire	Construire 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 de récupération et d’utilisation des données	Comment les données entrent et sortent de votre application, comment les récupérer, les stocker et les éliminer	Données	Yohan
24	Application bancaire	Concepts de gestion d’état	Apprenez comment votre application conserve l’état et comment le gérer par programmation	Gestion d’état	Yohan
25	Navigateur/Editeur VScode	Travailler avec VScode	Apprenez à utiliser un éditeur de code	Utiliser l’éditeur de code VScode	Chris
26	Assistants IA	Travailler avec IA	Apprenez à créer votre propre assistant IA	Projet assistant IA	Chris

🏫 Pédagogie

Notre programme est conçu selon 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 les plus récents utilisés par les développeurs web d’aujourd’hui. Les étudiants auront l’opportunité d’acquérir une expérience pratique en créant 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 cursus sous forme de parcours d’apprentissage sur Microsoft Learn !

En assurant que le contenu est aligné sur des projets, l’apprentissage devient plus engageant pour les étudiants et la rétention des concepts est améliorée. Nous avons également rédigé plusieurs leçons d’introduction aux bases de JavaScript pour présenter 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.

En outre, un quiz à faible enjeu avant un cours fixe l’intention de l’étudiant pour l’apprentissage d’un sujet, tandis qu'un second quiz après le cours assure une meilleure rétention. Ce programme a été conçu pour être flexible et amusant, il peut être suivi dans sa 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 pour 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 après ce cursus serait d’apprendre Node.js via une autre collection de vidéos : "Beginner Series to: Node.js".

Visitez nos Règles de conduite et Contribuer. 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 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 IA. Rejoignez d’autres apprenants et des développeurs expérimentés dans des discussions sur MCP. C’est une communauté solidaire où les questions sont les bienvenues et où les connaissances sont librement partagées.

Si vous avez des retours sur le produit ou rencontrez des erreurs lors de la création, 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 automatique Co-op Translator. Bien que nous nous efforçons d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.