Web Dev For Beginners Télécharger - Web Dev For Beginners Téléchargement du code source

Web Dev For Beginners

Autre code source

1.0.0

Télécharger

Développement Web pour les débutants - Un programme

Apprenez les bases du développement Web avec notre cours complet de 12 semaines dispensé par Microsoft Cloud Advocates. Chacune des 24 leçons plonge dans JavaScript, CSS et HTML à travers des projets pratiques tels que des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, des discussions et des travaux pratiques. Améliorez vos compétences et optimisez la rétention de vos connaissances grâce à notre pédagogie efficace par projet. Commencez votre voyage de codage dès aujourd'hui !

Êtes-vous un é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 certificat gratuit. C'est la page que vous souhaitez ajouter à vos favoris et vérifier de temps en temps à mesure que nous changeons de contenu chaque mois.

Annonce - Un nouveau programme sur l'IA générative vient d'être publié !

Ne manquez pas notre NOUVEAU programme de 12 cours sur l'IA générative !

Chaque leçon comprend un devoir à réaliser, une vérification des connaissances et un défi pour vous guider sur des sujets d'apprentissage tels que :

incitation et ingénierie rapide
génération d'applications de texte et d'image
rechercher des applications

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

Commencer

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

Les apprenants , pour chaque leçon, commencent par un quiz pré-cours et poursuivent la lecture du matériel de cours, réalisent les différentes activités et vérifient leur compréhension avec le quiz post-cours.

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 poursuivre vos études, nous vous recommandons fortement d’explorer Microsoft Learn pour obtenir du matériel d’étude supplémentaire.

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 un navigateur, sans installation nécessaire ) ou localement sur votre ordinateur à l'aide d'un éditeur de texte tel que Visual Studio Code.

Créez votre référentiel

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

Suivez ces étapes :

Fork the Repository : Cliquez sur le bouton "Fork" dans le coin supérieur droit de cette page.
Cloner le référentiel : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Exécuter le programme dans un espace de codes

Dans votre copie de ce référentiel que vous avez créé, cliquez sur le bouton Code et sélectionnez Ouvrir avec Codespaces . Cela créera un nouvel espace de code dans lequel vous pourrez travailler.

Créer un espace de code

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 de ligne de commande. Notre première leçon, Introduction aux langages de programmation et aux outils du métier, vous guidera à travers différentes options pour chacun de ces outils afin que vous puissiez sélectionner ce qui vous convient le mieux.

Notre recommandation est 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 référentiel 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 <votre-url-depot>
```
Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur Fichier > Ouvrir le 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 comprend :

note de croquis facultative
vidéo supplémentaire en option
quiz d'échauffement avant le cours
leçon écrite
pour des leçons basées sur des projets, des guides étape par étape sur la façon de construire le projet
contrôles de connaissances
un défi
lecture supplémentaire
affectation
quiz d'après cours

Une note sur les quiz : tous les quiz sont contenus dans le dossier Quiz-app, soit 48 quiz au total de trois questions chacun. Ils sont liés à partir des leçons, 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	Commencer	Introduction à la programmation et aux outils du métier	Apprenez les bases de la plupart des langages de programmation et les logiciels qui aident les développeurs professionnels à faire leur travail.	Introduction aux langages de programmation et aux outils du métier	Jasmin
02	Commencer	Les bases de GitHub, notamment le travail en équipe	Comment utiliser GitHub dans votre projet, comment collaborer avec d'autres sur une base de code	Introduction à GitHub	Sol
03	Commencer	Accessibilité	Apprenez les bases de l'accessibilité Web	Fondamentaux de l’accessibilité	Christophe
04	Les bases de JS	Types de données JavaScript	Les bases des types de données JavaScript	Types de données	Jasmin
05	Les bases de JS	Fonctions et méthodes	Découvrez les fonctions et les méthodes pour gérer le flux logique d'une application	Fonctions et méthodes	Jasmin et Christophe
06	Les bases de JS	Prendre des décisions avec JS	Apprenez à créer des conditions dans votre code à l'aide de méthodes de prise de décision	Prendre des décisions	Jasmin
07	Les bases de JS	Tableaux et boucles	Travailler avec des données à l'aide de tableaux et de boucles en JavaScript	Tableaux et boucles	Jasmin
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	Créez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, notamment en rendant la page réactive.	Introduction au CSS	Jen
10	Terrarium	Fermetures JavaScript, manipulation DOM	Créez le JavaScript pour que le terrarium fonctionne comme une interface glisser/déposer, en vous concentrant sur les fermetures et la manipulation du DOM.	Fermetures JavaScript, manipulation DOM	Jen
11	Jeu de dactylographie	Construire un jeu de dactylographie	Découvrez comment utiliser les événements de clavier pour piloter la logique de votre application JavaScript.	Programmation événementielle	Christophe
12	Extension de navigateur verte	Travailler avec les navigateurs	Découvrez comment fonctionnent les navigateurs, leur historique et comment échafauder 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 dans le stockage local	Créez les éléments JavaScript de votre extension de navigateur pour appeler une API à l'aide de variables stockées dans le stockage local	API, formulaires et stockage local	Jen
14	Extension de navigateur verte	Processus en arrière-plan dans le navigateur, performances Web	Utilisez les processus d'arrière-plan du navigateur pour gérer l'icône de l'extension ; découvrez les performances web et quelques optimisations à réaliser	Tâches en arrière-plan et performances	Jen
15	Jeu spatial	Développement de jeux plus avancé avec JavaScript	Découvrez l'héritage en utilisant à la fois les classes, la composition et 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 toile	Découvrez l'API Canvas, utilisée pour dessiner des éléments sur un écran	Dessiner sur toile	Chris
17	Jeu spatial	Déplacer des éléments sur l'écran	Découvrez comment les éléments peuvent gagner du mouvement à l'aide des coordonnées cartésiennes et de l'API Canvas	Déplacer des éléments	Chris
18	Jeu spatial	Détection des collisions	Faites entrer en collision les éléments et réagissez les uns aux autres en appuyant sur les touches et fournissez une fonction de temps de recharge pour garantir les performances du jeu.	Détection des collisions	Chris
19	Jeu spatial	Garder le score	Effectuer des calculs mathématiques basés sur l'état et les performances du jeu	Garder le score	Chris
20	Jeu spatial	Terminer et redémarrer le jeu	Découvrez comment terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les valeurs des variables.	La condition finale	Chris
21	Application bancaire	Modèles HTML et itinéraires dans une application Web	Apprenez à créer l'échafaudage de l'architecture d'un site Web multipage à l'aide de modèles de routage et HTML.	Modèles et itinéraires HTML	Yohan
22	Application bancaire	Créer un formulaire de connexion et d'inscription	En savoir plus sur la création de formulaires et la gestion des 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 de l'État	Découvrez comment votre application conserve son état et comment la gérer par programmation	Gestion de l'État	Yohan

Pédagogie

Notre programme est conçu en tenant compte de deux principes pédagogiques clés :

apprentissage par projet
des quiz fréquents

Le programme enseigne les bases 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'occasion de développer une expérience pratique en créant un jeu de dactylographie, un terrarium virtuel, une extension de navigateur respectueuse de l'environnement, un jeu de style envahisseur spatial 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 en tant que parcours d’apprentissage sur Microsoft Learn !

En garantissant que le contenu correspond aux projets, le processus devient plus engageant pour les étudiants et la rétention des concepts sera augmentée. Nous avons également écrit plusieurs leçons de base sur les bases de JavaScript pour introduire les concepts, associées à une vidéo de la collection de didacticiels vidéo « Série pour débutants : JavaScript », dont certains auteurs ont contribué à ce programme.

De plus, un quiz à faible enjeu avant le cours détermine l'intention de l'élève d'apprendre un sujet, tandis qu'un deuxième quiz après le cours garantit une rétention accrue. Ce programme a été conçu pour être flexible et amusant et peut être suivi en totalité ou en partie. Les projets commencent modestement 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 pour terminer ce programme serait d'en apprendre davantage sur Node.js via une autre collection de vidéos : "Série pour débutants pour : Node.js".

Consultez notre code de conduite et nos directives de contribution. Nous apprécions vos commentaires 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 ordinateur local, puis dans le dossier racine de ce dépôt, tapez docsify serve . Le site Web sera servi sur le port 3000 de votre hôte local : localhost:3000 .