26 KiB

Raw Blame History

Développement Web pour Débutants - Un Programme

Apprenez les bases 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 exercices pratiques. Améliorez vos compétences et optimisez votre apprentissage grâce à notre pédagogie basée sur les projets. Commencez votre aventure de codage dès aujourd'hui !

🧑‍🎓 Vous êtes é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 bon de certification gratuit. C'est une page à mettre en favori et à consulter régulièrement, car nous changeons 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 !

Leçons couvrant tout, des bases à 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 inclut un exercice à réaliser, une vérification des connaissances et un défi pour vous guider dans l'apprentissage de sujets tels que :

Les prompts 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 !

🌱 Premiers pas

Enseignants, nous avons inclus quelques suggestions sur la façon d'utiliser ce programme. Nous aimerions avoir vos retours dans notre forum de discussion !

Apprenants, pour chaque leçon, commencez par un quiz pré-lecture, puis lisez le contenu de la leçon, réalisez les différentes activités et vérifiez votre compréhension avec le quiz post-lecture.

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 ressources 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 de suivre le programme dans un Codespace (un environnement basé sur le navigateur, sans installation nécessaire), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que 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 :

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

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 et sélectionnez Open with Codespaces. Cela créera un nouveau Codespace pour 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 de travail, vous guidera à travers les différentes 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 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 File > Open Folder 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 directement dans Visual Studio Code

Copilot - pour vous aider à écrire du code plus rapidement

📂 Chaque leçon inclut :

un sketchnote optionnel
une vidéo complémentaire optionnelle
un quiz d'échauffement avant la 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 vérifications des connaissances
un défi
des lectures complémentaires
un exercice
un quiz après la leçon

À propos des quiz : Tous les quiz sont contenus dans le dossier Quiz-app, 48 quiz au total avec trois questions chacun. Ils sont liés dans 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 traduits.

🗃️ Leçons

	Nom du projet	Concepts enseignés	Objectifs d'apprentissage	Leçon liée	Auteur
01	Premiers pas	Introduction à la programmation et outils de travail	Apprenez les bases communes à la plupart des langages de programmation et les outils utilisés par les développeurs professionnels	Introduction aux langages de programmation et outils de travail	Jasmine
02	Premiers pas	Bases de GitHub, y compris le travail en équipe	Comment utiliser GitHub dans votre projet et 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	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	Apprenez à utiliser les fonctions et méthodes pour gérer le flux logique d'une application	Fonctions et méthodes	Jasmine et Christopher
06	Bases JS	Prendre des décisions avec JS	Apprenez à créer des conditions dans votre code en utilisant des méthodes de prise de décision	Prendre des décisions	Jasmine
07	Bases JS	Tableaux et boucles	Travaillez avec des données en utilisant 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, y compris rendre la page responsive	Introduction au CSS	Jen
10	Terrarium	Fermetures JavaScript, manipulation du DOM	Construisez le JavaScript pour faire fonctionner le terrarium comme une interface glisser-déposer, 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 pilotée par événements	Christopher
12	Green Browser Extension	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	Green Browser Extension	Construire un formulaire, appeler une API et stocker des variables en local storage	Créez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées en local storage	APIs, Formulaires et Local Storage	Jen
14	Green Browser Extension	Processus en arrière-plan dans le navigateur, performance web	Utilisez les processus en arrière-plan du navigateur pour gérer l'icône de l'extension ; découvrez la performance web et quelques optimisations à apporter	Tâches en arrière-plan et performance	Jen
15	Space Game	Développement de jeu plus avancé avec JavaScript	Découvrez l'héritage en 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 de jeu avancé	Chris
16	Space Game	Dessiner sur canvas	Découvrez l'API Canvas, utilisée pour dessiner des éléments à l'écran	Dessiner sur Canvas	Chris
17	Space Game	Déplacer des éléments sur l'écran	Découvrez comment les éléments peuvent se déplacer en utilisant les coordonnées cartésiennes et l'API Canvas	Déplacer des éléments	Chris
18	Space Game	Détection de collision	Faites en sorte que les éléments entrent en collision et réagissent entre eux en utilisant les touches du clavier, et ajoutez une fonction de cooldown pour garantir la performance du jeu	Détection de collision	Chris
19	Space Game	Comptabiliser les points	Effectuez des calculs mathématiques basés sur l'état et la performance du jeu	Comptabiliser les points	Chris
20	Space Game	Terminer et redémarrer le jeu	Apprenez à terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les valeurs des variables	Condition de fin	Chris
21	Banking App	Modèles HTML et routes dans une application web	Apprenez à créer la structure d'architecture d'un site web multipage en utilisant le routage et les modèles HTML	Modèles HTML et routes	Yohan
22	Banking App	Construire un formulaire de connexion et d'inscription	Découvrez comment créer des formulaires et gérer les routines de validation	Formulaires	Yohan
23	Banking App	Méthodes pour récupérer et utiliser des données	Découvrez comment les données circulent dans et hors de votre application, comment les récupérer, les stocker et les supprimer	Données	Yohan
24	Banking App	Concepts de gestion d'état	Apprenez comment votre application conserve son état et comment le gérer de manière programmatique	Gestion d'état	Yohan

🏫 Pédagogie

Notre programme est conçu autour de deux principes pédagogiques clés :

apprentissage basé sur les projets
quiz fréquents

Le programme enseigne les bases 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 dactylographie, 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 programme sous forme de parcours d'apprentissage sur Microsoft Learn !

En veillant à ce que le contenu soit aligné avec les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est augmentée. Nous avons également écrit plusieurs leçons d'introduction aux bases de JavaScript, accompagnées d'une vidéo de la collection "Beginners Series to: JavaScript", dont certains auteurs ont contribué à ce programme.

De plus, un quiz à faible enjeu avant un cours oriente l'intention de l'étudiant vers 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, 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 après avoir terminé 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 Contributions. 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 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 :

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 efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. 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 résultant de l'utilisation de cette traduction.

26 KiB Raw Blame History