Apprenez les fondamentaux du développement web grâce à notre cours complet de 12 semaines dispensé 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, 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 codage aujourd’hui !
Rejoignez la communauté Discord Azure AI Foundry
Suivez ces étapes pour commencer à utiliser ces ressources :
- Faites un fork du dépôt : Cliquez sur
- Clonez le dépôt :
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Rejoignez le Discord Azure AI Foundry et rencontrez experts et développeurs
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) | Pendjabi (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 dépôt inclut plus de 50 traductions qui augmentent significativement la taille du téléchargement. Pour cloner sans les traductions, utilisez le sparse checkout :
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
Visitez la page Student Hub où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens d’obtenir un voucher pour un certificat gratuit. C’est une page à ajouter à vos favoris et à consulter régulièrement car nous changeons le contenu chaque mois.
Nouveau défi ajouté, cherchez "Défi GitHub Copilot Agent 🚀" dans la plupart des chapitres. C’est un nouveau défi à réaliser en utilisant GitHub Copilot et le mode Agent. Si vous n’avez pas encore utilisé le mode Agent, il peut non seulement générer du texte mais aussi créer et éditer des fichiers, exécuter des commandes et plus encore.
Nouveau projet Assistant IA vient d’être ajouté, consultez le projet
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 à l’IA générative et notre application compagnon.
- Une narration amusante et captivante, vous voyagez dans le temps !
Chaque leçon inclut un devoir à réaliser, un contrôle des connaissances et un défi pour vous guider sur des sujets tels que :
- Le prompting et l’ingénierie de prompt
- La génération d’applications de texte et d’images
- Les applications de recherche
Visitez https://aka.ms/genai-js-course pour commencer !
Enseignants, nous avons inclus quelques suggestions sur la façon d’utiliser ce programme. Vos retours sont les bienvenus dans notre forum de discussion !
Apprenants, pour chaque leçon, commencez par un quiz pré-lecture puis poursuivez avec la lecture du matériel, la réalisation des différentes 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 vous recommandons vivement d’explorer Microsoft Learn pour des ressources d’étude supplémentaires.
Ce programme dispose déjà d’un environnement de développement prêt à l’emploi ! Au démarrage, vous pouvez choisir de lancer 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.
Pour enregistrer facilement votre travail, il est recommandé de créer une copie personnelle 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 :
- Forkez le dépôt : Cliquez sur le bouton "Fork" en haut à droite de cette page.
- Clonez le dépôt :
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Dans votre copie de ce dépôt, cliquez sur le bouton Code et sélectionnez Open with Codespaces. Cela créera un nouveau Codespace pour que vous puissiez travailler dedans.
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 et outils de programmation, vous guidera à travers plusieurs options pour ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
Nous recommandons d’utiliser Visual Studio Code comme éditeur, qui dispose aussi d’un Terminal intégré. Vous pouvez télécharger Visual Studio Code ici.
-
Clonez votre dépôt sur votre ordinateur. Vous pouvez faire ceci 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>
-
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 directement dans Visual Studio Code
- Copilot - pour vous aider à écrire du code plus rapidement
- sketchnote optionnelle
- vidéo supplé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 après la leçon
Une note concernant les quiz : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total avec 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.
| 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 | 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 Outils du Métier | Jasmine |
| 02 | Premiers Pas | Bases de GitHub, incluant le travail en équipe | Comment utiliser GitHub dans votre projet, comment 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 en utilisant les méthodes de prise de décision | Prise de Décisions | Jasmine |
| 07 | Bases JS | Tableaux et Boucles | Travailler avec les données à l’aide de 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 mise en page | Introduction à 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 rendre la page responsive | Introduction au CSS | Jen |
| 10 | Terrarium | Fermetures JavaScript, manipulation du DOM | Construire le JavaScript pour rendre le terrarium fonctionnel en tant qu’interface glisser/déposer, en se concentrant sur les closures et la manipulation du DOM | Fermetures JavaScript, manipulation du 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 orientée événements | Christopher |
| 12 | Extension Navigateur Verte | Travailler avec les navigateurs | Apprendre comment fonctionnent les navigateurs, leur histoire, et comment construire les premiers éléments d’une extension | Au sujet des navigateurs | Jen |
| 13 | Extension Navigateur Verte | Construire un formulaire, appeler une API et stocker des variables localement | Construire 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 Navigateur Verte | 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 quelques optimisations | Tâches en arrière-plan et performance | Jen |
| 15 | Jeu Spatial | Développement avancé de jeux avec JavaScript | Apprendre l’héritage avec Classes et Composition ainsi que le patron Pub/Sub, en préparation à la création d’un jeu | Introduction au développement avancé de jeux | Chris |
| 16 | Jeu Spatial | Dessiner sur canvas | Apprendre l’API Canvas, utilisée pour dessiner des éléments sur un écran | Dessiner sur Canvas | Chris |
| 17 | Jeu Spatial | Déplacer des éléments à l’écran | Découvrir comment les éléments peuvent prendre du mouvement 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 des éléments et leur réaction avec les touches pressées, fournir une fonction de cooldown pour la performance du jeu | Détection de collisions | Chris |
| 19 | Jeu Spatial | Tenue du score | Effectuer des calculs mathématiques basés sur l’état et la performance du jeu | Tenue du score | Chris |
| 20 | Jeu Spatial | Finir et redémarrer le jeu | Apprendre à terminer et redémarrer 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 | Apprendre à créer l’ossature d’un site multipage utilisant le routage et les templates HTML | Templates HTML et Routes | Yohan |
| 22 | Application Bancaire | Construire un formulaire de connexion et d'inscription | Apprendre à construire des formulaires et à gérer la 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 s’en débarrasser | Données | Yohan |
| 24 | Application Bancaire | Concepts de gestion d’état | Apprendre 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 à construire votre propre assistant IA | Projet Assistant IA | Chris |
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 derniers outils et techniques utilisés par les développeurs web actuels. 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 style space-invader, et une application bancaire pour les 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 comme parcours d’apprentissage sur Microsoft Learn !
En veillant à ce que le contenu soit en adéquation avec les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est augmentée. Nous avons aussi écrit plusieurs leçons introductives sur les bases de JavaScript pour présenter les concepts, accompagnées d’une vidéo de la collection "Série Débutants sur : JavaScript", dont certains auteurs ont contribué à ce programme.
De plus, un quiz sans enjeu avant la classe fixe l’intention de l’étudiant sur l’apprentissage d’un sujet, tandis qu’un second quiz après la classe assure 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 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 étape suivante pour compléter ce programme serait d’apprendre Node.js via une autre série de vidéos : "Série Débutants sur : Node.js".
Consultez notre Code de Conduite et notre guide de Contribution. Nous accueillons vos retours constructifs !
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.
Un PDF de toutes les leçons est disponible ici.
Notre équipe produit d'autres cours ! Découvrez :
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
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 des discussions sur MCP. C'est une communauté bienveillante où les questions sont les bienvenues et le partage des connaissances est libre.
Si vous avez des retours produit ou des erreurs lors de la construction, visitez :
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 cruciales, 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 résultant de l’utilisation de cette traduction.