Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines proposé par les défenseurs du cloud Microsoft. 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 aux quiz, discussions et missions 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 dès aujourd’hui !
Rejoignez la communauté Azure AI Foundry sur Discord
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 des experts et d’autres 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) | Punjabi (Gurmukhi) | Roumain | Russe | Serbe (Cyrillique) | Slovaque | Slovène | Espagnol | Swahili | Suédois | Tagalog (Filipino) | Tamoul | Télougou | Thaï | Turc | Ukrainien | Ourdou | Vietnamien
Préférez-vous cloner localement ?
Ce dépôt contient plus de 50 traductions, ce qui augmente considérablement 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 fournit tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.
Si vous souhaitez avoir des langues supplémentaires 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 bon de certification gratuit. C’est la page à mettre en favori et à consulter régulièrement car nous mettons à jour le contenu chaque mois.
Nouveau défi ajouté, cherchez "GitHub Copilot Agent Challenge 🚀" 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 jamais utilisé le mode Agent, il est capable non seulement de générer du texte mais aussi de créer et éditer des fichiers, d’exécuter des commandes et plus encore.
Nouveau projet Assistant IA ajouté, découvrez-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 utilisant GenAI et notre application compagnon.
- Narration ludique et engageante, vous voyagez dans le temps !
Chaque leçon inclut une mission à accomplir, une vérification des connaissances et un défi pour vous guider sur des sujets comme :
- Le prompt et l’ingénierie des prompts
- Génération d’applications de texte et d’images
- Applications de recherche
Visitez https://aka.ms/genai-js-course pour commencer !
Enseignants, nous avons inclus quelques suggestions sur la manière d’utiliser ce programme. Nous serions ravis d’avoir vos retours sur notre forum de discussion !
Apprenants, pour chaque leçon, commencez par un quiz avant le cours, 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 après le cours.
Pour enrichir 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 supports d’études supplémentaires.
Ce programme dispose d’un environnement de développement prêt à l’emploi ! Au début, vous pouvez choisir d’exécuter le programme dans un Codespace (un environnement basé sur navigateur, sans besoin d’installer quoi que ce soit), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que Visual Studio Code.
Pour enregistrer 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 sur 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 que vous avez créée, cliquez sur le bouton Code puis sélectionnez Open with Codespaces. Cela créera un nouveau Codespace où travailler.
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 les différentes options pour chacun de ces outils afin de sélectionner ce qui vous convient le mieux.
Nous recommandons d’utiliser Visual Studio Code comme éditeur, qui inclut également un Terminal. Vous pouvez télécharger Visual Studio Code ici.
-
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>
-
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
- un sketchnote optionnel
- une vidéo complémentaire optionnelle
- un quiz d’échauffement avant la leçon
- la leçon écrite
- pour les leçons basées sur un projet, des guides étape par étape pour construire le projet
- des vérifications des connaissances
- un défi
- des lectures complémentaires
- un devoir
- un quiz post-leçon
Une note à propos des quiz : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total composés de trois questions chacun. Ils sont disponibles ici ; l’application 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 | Prise en main | Introduction à la programmation et aux outils du métier | Apprendre les bases sous-jacentes de 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 | Prise en main | Bases de GitHub, travail collaboratif 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é | 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 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 des méthodes de prise de décision | Prise de décisions | Jasmine |
| 07 | Bases JS | Tableaux et boucles | Travailler avec des données via des tableaux et des 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 construction d’une 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 le responsive design | Introduction au CSS | Jen |
| 10 | Terrarium | Closures JavaScript, manipulation du DOM | Construire le JavaScript pour faire fonctionner le terrarium comme une interface de glisser-déposer, en se concentrant sur les closures et la manipulation du DOM | Closures 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 événementielle | Christopher |
| 12 | Extension navigateur verte | Travailler avec les navigateurs | Apprendre comment fonctionnent les navigateurs, leur histoire, et comment structurer les premiers éléments d’une extension | À propos 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 navigateur pour appeler une API en utilisant des variables stockées localement | API, 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 les performances web et quelques optimisations | Tâches en arrière-plan et performance | Jen |
| 15 | Jeu spatial | Développement de jeux avancé avec JavaScript | Apprendre l’héritage avec 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 un canvas | Apprendre l’API Canvas, utilisée pour dessiner des éléments à l’écran | Dessiner sur Canvas | Chris |
| 17 | Jeu spatial | Déplacer des éléments à l’écran | Découvrir comment donner du mouvement aux éléments à l’aide des coordonnées cartésiennes et de l’API Canvas | Déplacement d’éléments | Chris |
| 18 | Jeu spatial | Détection de collision | Faire entrer en collision les éléments et réagir via des frappes clavier, et prévoir une fonction de temps de recharge pour assurer la performance du jeu | Détection de collision | Chris |
| 19 | Jeu spatial | Tenue 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 à finir et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les variables | Condition de fin | Chris |
| 21 | Application bancaire | Modèles HTML et routes dans une application web | Apprendre à créer le squelette d’un site multipage avec routage et modèles HTML | Modèles HTML et routes | Yohan |
| 22 | Application bancaire | Construire un formulaire de connexion et d’inscription | Apprendre à 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 circulent dans votre application, comment les récupérer, les stocker et les éliminer | Données | Yohan |
| 24 | Application bancaire | Concepts de gestion de l’état | Apprendre comment votre application conserve l’état et comment le gérer de façon programmatique | Gestion de l’état | Yohan |
| 25 | Code Browser/VScode | Travailler avec VScode | Apprendre à utiliser un éditeur de code | Utiliser l’éditeur VScode | Chris |
| 26 | Assistants IA | Travailler avec l'IA | Apprendre à construire son propre assistant IA | Projet assistant IA | Chris |
Notre curriculum est conçu en tenant compte 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 derniers outils et techniques utilisés par les développeurs web actuels. Les étudiants auront l’occasion de développer 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 curriculum sous la forme d’un Parcours d’apprentissage sur Microsoft Learn !
En veillant à ce que le contenu soit aligné sur les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est renforcée. Nous avons également écrit 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 curriculum.
De plus, un quiz à faible enjeu avant la classe fixe l’intention de l’étudiant à apprendre un sujet, tandis qu’un second quiz après la classe assure une meilleure rétention. Ce curriculum a été conçu pour être flexible et amusant et peut être suivi dans son intégralité ou en partie. Les projets commencent petits et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
Même si nous avons volontairement é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 étape suivante pour compléter ce curriculum serait d’apprendre Node.js via une autre collection de vidéos : « Beginner Series to: Node.js ».
Consultez notre Code de conduite et nos lignes directrices pour la Contribution. Nous accueillons vos retours constructifs !
Vous pouvez utiliser 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 IA. Rejoignez d'autres apprenants et des développeurs expérimentés dans des discussions sur MCP. C'est une communauté d'entraide où les questions sont les bienvenues et les connaissances partagées librement.
Si vous avez des retours sur le produit ou des erreurs lors de la création, visitez :
Ce dépôt est sous licence MIT. Voir 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 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 ne saurions être tenus responsables des malentendus ou interprétations erronées résultant de l’utilisation de cette traduction.