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 comme des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, discussions et travaux pratiques. Améliorez vos compétences et optimisez votre rétention de connaissances grâce à notre pédagogie efficace basée sur des projets. Commencez votre parcours de codage dès aujourd'hui !

🧑‍🎓 Êtes-vous étudiant ?

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 la page à bookmarker et à consulter régulièrement car nous mettons à jour le contenu chaque mois.

📣 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 à l'IA Générative et notre application compagnon.
Un récit amusant et captivant, vous voyagerez dans le temps !

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

L'incitation et l'ingénierie des prompts
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 la façon d'utiliser ce programme. Nous serions ravis d'avoir vos retours dans notre forum de discussion !

Apprenants, pour chaque leçon, commencez par un quiz pré-leçon et suivez la lecture du matériel de cours, complétez les différentes activités et vérifiez votre compréhension avec le quiz post-leçon.

Pour enrichir 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 éducation, nous vous recommandons vivement 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 ! Lorsque vous commencez, 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 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 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 :

Forgez 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

Exécution du programme dans un Codespace

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

Exécution du 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 diverses 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 dispose également d'un Terminal intégré. 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 :

Ensuite, ouvrez le 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 recommandées pour Visual Studio Code :

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 :

une esquisse facultative
une vidéo supplémentaire facultative
un quiz d'échauffement pré-leçon
une leçon écrite
pour les leçons basées sur des projets, des guides étape par étape pour construire le projet
des contrôles de connaissances
un défi
des lectures supplémentaires
un travail à réaliser
un quiz post-leçon

Remarque sur les quiz : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total de trois questions chacun. Ils sont liés depuis les leçons et l'application de quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier quiz-app. Ils sont progressivement localisés.

🗃️ Leçons

	Nom du Projet	Concepts Enseignés	Objectifs d'Apprentissage	Leçon Liée	Auteur
01	Pour Commencer	Introduction à la Programmation et Outils du Métier	Apprendre les bases sous-jacentes à la plupart des langages de programmation et les logiciels utilisés par les développeurs professionnels	Intro aux Langages de Programmation et Outils du Métier	Jasmine
02	Pour Commencer	Bases de GitHub, incluant le travail en équipe	Comment utiliser GitHub dans votre projet, comment collaborer avec d'autres sur une base de code	Intro à GitHub	Floor
03	Pour Commencer	Accessibilité	Apprendre les bases de l'accessibilité web	Fondamentaux de l'Accessibilité	Christopher
04	Bases de JS	Types de Données en JavaScript	Les bases des types de données en JavaScript	Types de Données	Jasmine
05	Bases de JS	Fonctions et Méthodes	Apprendre les fonctions et méthodes pour gérer la logique d'une application	Fonctions et Méthodes	Jasmine et Christopher
06	Bases de JS	Prendre des 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 de JS	Tableaux et Boucles	Travailler avec des données en utilisant 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 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 la création d'une page responsive	Introduction au CSS	Jen
10	Terrarium	Fermetures en JavaScript, Manipulation du DOM	Construire le JavaScript pour faire fonctionner le terrarium comme une interface de glisser-déposer, en se concentrant sur les fermetures et la manipulation du DOM	Fermetures en 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 de Navigateur Verte	Travailler avec les Navigateurs	Apprendre comment fonctionnent les navigateurs, leur histoire, et comment échafauder les premiers éléments d'une extension de navigateur	À Propos des Navigateurs	Jen
13	Extension de Navigateur Verte	Construction d'un formulaire, appel d'une API et stockage de variables dans le stockage local	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 de 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 sur la performance web et certaines optimisations à faire	Tâches en Arrière-plan et Performance	Jen
15	Jeu Spatial	Développement de Jeu Plus Avancé avec JavaScript	Apprendre l'héritage en utilisant les Classes et la Composition et le modèle Pub/Sub, en préparation pour la construction d'un jeu	Introduction au Développement de Jeu Avancé	Chris
16	Jeu Spatial	Dessiner sur un canevas	Apprendre l'API Canvas, utilisée pour dessiner des éléments à l'écran	Dessiner sur un Canevas	Chris
17	Jeu Spatial	Déplacer des éléments à l'écran	Découvrir comment les éléments peuvent gagner du mouvement en utilisant les coordonnées cartésiennes et l'API Canvas	Déplacer des Éléments	Chris
18	Jeu Spatial	Détection de Collision	Faire en sorte que les éléments entrent en collision et réagissent entre eux en utilisant des touches et fournir une fonction de recharge pour assurer la performance du jeu	Détection de Collision	Chris
19	Jeu Spatial	Garder le Score	Effectuer des calculs mathématiques basés sur l'état et la performance du jeu	Garder le Score	Chris
20	Jeu Spatial	Terminer et Redémarrer le Jeu	Apprendre à terminer et redémarrer le jeu, y compris le nettoyage des ressources et la réinitialisation des valeurs des variables	Condition de Fin	Chris
21	Application Bancaire	Modèles HTML et Routes dans une Application Web	Apprendre à créer l'échafaudage de l'architecture d'un site web multipage en utilisant le routage et les 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 et hors 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 programmatiquement	Gestion d'État	Yohan

🏫 Pédagogie

Notre programme est conçu avec deux principes pédagogiques clés en tête :

l'apprentissage par projet
des 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 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 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 sous forme de Parcours d'Apprentissage sur Microsoft Learn !

En veillant à ce que le contenu s'aligne sur des projets, le processus est rendu plus engageant pour les étudiants et la rétention des concepts sera augmentée. Nous avons également écrit plusieurs leçons d'introduction sur les bases de JavaScript pour présenter les concepts, accompagnées d'une vidéo de la collection "Série pour Débutants : JavaScript", dont certains auteurs ont contribué à ce programme.

De plus, un quiz à faible enjeu avant un cours fixe l'intention de l'étudiant vers l'apprentissage d'un sujet, tandis qu'un deuxième quiz après le cours assure une rétention supplémentaire. Ce programme a été conçu pour être flexible et amusant et peut être suivi en entier 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 après avoir terminé ce programme serait d'apprendre Node.js via une autre collection de vidéos : "Série pour Débutants : Node.js".

Consultez notre Code de Conduite et nos Directives de Contribution. Nous accueillons vos retours constructifs !

🧭 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 sera servi sur le port 3000 de votre localhost : localhost:3000.

📘 PDF

Un PDF de toutes les leçons peut être trouvé ici.

🎒 Autres Cours

Notre équipe produit d'autres cours ! Consultez :

Licence

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