SmashedFrenzy16
3 years ago
committed by
GitHub
commit
b7c79e4374
@ -0,0 +1,161 @@
|
||||
# Utilisation d'un éditeur de code
|
||||
|
||||
Cette leçon couvre les bases de l'utilisation de [VSCode.dev](https://vscode.dev), un éditeur de code pour le Web qui vous permet d'apporter des modifications à votre code et de contribuer à un projet sans installer quoi que ce soit sur votre ordinateur.
|
||||
|
||||
<!----
|
||||
TODO : ajouter une image optionnelle
|
||||
|
||||
> Sketchnote par [Nom de l'auteur](https://example.com)
|
||||
---->
|
||||
|
||||
<!---
|
||||
## Quiz pré-lecture
|
||||
[Quiz pré-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
|
||||
---->
|
||||
|
||||
## Objectifs d'apprentissage
|
||||
|
||||
Dans cette leçon, vous apprendrez à :
|
||||
|
||||
- Utiliser un éditeur de code dans un projet de code
|
||||
- Suivre les modifications avec le contrôle de version
|
||||
- Personnaliser l'éditeur pour le développement
|
||||
|
||||
### Prérequis
|
||||
|
||||
Avant de commencer, vous devez créer un compte sur [GitHub] (https://github.com). Rendez-vous sur [GtiHub](https://github.com/) et créez un compte si ce n'est pas déjà fait.
|
||||
|
||||
### Introduction
|
||||
|
||||
Un éditeur de code est un outil essentiel pour écrire des programmes et collaborer à des projets de codage existants. Une fois que vous aurez compris les bases d'un éditeur et que vous saurez comment utiliser ses fonctionnalités, vous serez en mesure de les appliquer lors de l'écriture de code.
|
||||
|
||||
## Démarrer avec VSCode.dev
|
||||
|
||||
[VSCode.dev] (https://vscode.dev) est un éditeur de code sur le Web. Vous n'avez pas besoin d'installer quoi que ce soit pour l'utiliser, comme pour ouvrir n'importe quel autre site Web. Pour commencer à utiliser l'éditeur, ouvrez le lien suivant : [https://vscode.dev](https://vscode.dev). Si vous n'êtes pas connecté à [GtiHub](https://github.com/), suivez les instructions pour vous connecter ou créez un nouveau compte, puis connectez-vous.
|
||||
|
||||
Une fois le site chargé, il devrait ressembler à cette image :
|
||||
|
||||
|
||||
|
||||
Il y a trois sections principales, en commençant par l'extrême gauche et en allant vers la droite :
|
||||
|
||||
1. La _barre d'activité_ qui comprend quelques icônes, comme la loupe 🔎, l'engrenage ⚙️ et quelques autres.
|
||||
1. La barre d'acivité élargie qui s'affiche par défaut dans l'_Explorateur_, appelée _barre latérale_.
|
||||
1. Et enfin, la zone de code à droite.
|
||||
|
||||
Cliquez sur chacune des icônes pour afficher un menu différent. Une fois que vous avez terminé, cliquez sur l'_Explorateur_ pour revenir à votre point de départ.
|
||||
|
||||
Lorsque vous commencez à créer du code ou à modifier du code existant, cela se passe dans la plus grande zone à droite. Vous utiliserez également cette zone pour visualiser le code existant, ce que vous ferez ensuite.
|
||||
|
||||
|
||||
## Ouvrir un répertoire GitHub
|
||||
|
||||
La première chose dont vous aurez besoin est d'ouvrir un répertoire GitHub. Il existe plusieurs façons d'ouvrir un dépôt. Dans cette section, vous verrez deux façons différentes d'ouvrir un dépôt afin de pouvoir commencer à travailler sur les changements.
|
||||
|
||||
### 1. Avec l'éditeur
|
||||
|
||||
Utilisez l'éditeur lui-même pour ouvrir un répertoire distant. Si vous allez sur [VSCode.dev](https://vscode.dev), vous verrez un bouton _"Open Remote Repository"_ :
|
||||
|
||||
|
||||
|
||||
Vous pouvez également utiliser la palette de commande. La palette de commande est une boîte de saisie dans laquelle vous pouvez taper n'importe quel mot faisant partie d'une commande ou d'une action pour trouver la bonne commande à exécuter. Utilisez le menu en haut à gauche, puis sélectionnez _Visualisation_, et ensuite choisissez _Palette de commande_, ou en utilisant le raccourci clavier suivant : Ctrl-Shift-P (sur MacOS, ce serait Command-Shift-P).
|
||||
|
||||
|
||||
|
||||
Une fois le menu ouvert, tapez _open remote repository_, puis sélectionnez la première option. Plusieurs dépôts dont vous faites partie ou que vous avez ouverts récemment s'afficheront. Vous pouvez également utiliser une URL GitHub complète pour en sélectionner un. Utilisez l'URL suivante et collez-la dans le champ :
|
||||
|
||||
```
|
||||
https://github.com/microsoft/Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
✅ Si vous réussissez, vous verrez tous les fichiers de ce répertoire chargés dans l'éditeur de texte.
|
||||
|
||||
|
||||
### 2. Utilisation de l'URL
|
||||
|
||||
Vous pouvez également utiliser une URL directement pour charger un répertoire. Par exemple, l'URL complète du dépôt actuel est [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), mais vous pouvez remplacer le domaine GitHub par `VSCode.dev/github` et charger le répertoire directement. L'URL résultante serait [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
|
||||
|
||||
|
||||
## Modifier les fichiers
|
||||
Une fois que vous avez ouvert le répertoire sur le navigateur/ vscode.dev, la prochaine étape serait d'effectuer des mises à jour ou des modifications du projet.
|
||||
|
||||
### 1. Créer un nouveau fichier
|
||||
|
||||
Vous pouvez soit créer un fichier dans un dossier existant, soit le créer dans le répertoire/dossier racine. Pour créer un nouveau fichier, ouvrez un emplacement/répertoire dans lequel vous souhaitez que le fichier soit enregistré et sélectionnez l'icône _'Nouveau fichier ...'_ dans la barre d'activité _(gauche)_, donnez-lui un nom et appuyez sur Entrée.
|
||||
|
||||
|
||||
|
||||
### 2. Modifier et enregistrer un fichier sur le répertoire
|
||||
|
||||
L'utilisation de vscode.dev est utile lorsque vous souhaitez effectuer des mises à jour rapides de votre projet sans avoir à charger un logiciel localement.
|
||||
Pour mettre à jour votre code, cliquez sur l'icône "Explorer", également située dans la barre d'activités, pour afficher les fichiers et les dossiers du répertoire.
|
||||
Sélectionnez un fichier pour l'ouvrir dans la zone de code, effectuez vos modifications et enregistrez.
|
||||
|
||||
|
||||
|
||||
Une fois que vous avez terminé la mise à jour de votre projet, sélectionnez l'icône _`source control`_ qui contient toutes les nouvelles modifications que vous avez apportées à votre répertoire.
|
||||
|
||||
Pour visualiser les modifications que vous avez apportées à votre projet, sélectionnez le(s) fichier(s) dans le dossier `Changes` dans la barre d'activité étendue. Cela ouvrira un "arbre de travail" pour vous permettre de voir visuellement les modifications que vous avez apportées au fichier. Le rouge indique une ommission dans le projet, tandis que le vert signifie un ajout.
|
||||
|
||||
|
||||
|
||||
Si vous êtes satisfait des changements que vous avez effectués, survolez le dossier `Changes` et cliquez sur le bouton `+` pour mettre en scène les changements. La mise en scène signifie simplement que vous préparez vos modifications pour les livrer sur GitHub.
|
||||
|
||||
Si toutefois vous n'êtes pas à l'aise avec certains changements et que vous voulez les abandonner, survolez le dossier "Changes" et sélectionnez l'icône "annuler".
|
||||
|
||||
Ensuite, tapez un `message de validation` _(Une description de la modification que vous avez apportée au projet)_, cliquez sur l'icône `check` pour valider et pousser vos modifications.
|
||||
|
||||
Une fois que vous avez terminé de travailler sur votre projet, sélectionnez l'icône de menu "hamburger" en haut à gauche pour revenir au répertoire sur github.com.
|
||||
|
||||
|
||||
|
||||
## Utilisation des extensions
|
||||
L'installation d'extensions sur VSCode vous permet d'ajouter de nouvelles fonctionnalités et des options d'environnement de développement personnalisé sur votre éditeur afin d'améliorer votre flux de travail de développement. Ces extensions vous aident également à ajouter le support de plusieurs langages de programmation et sont souvent soit des extensions génériques, soit des extensions basées sur le langage.
|
||||
|
||||
Pour parcourir la liste de toutes les extensions disponibles, cliquez sur l'icône _`Extensions`_ de la barre d'activités et commencez à taper le nom de l'extension dans le champ de texte intitulé _'Search Extensions in Marketplace'_.
|
||||
Vous verrez une liste d'extensions, chacune contenant **le nom de l'extension, le nom de l'éditeur, une description d'une phrase, le nombre de téléchargements** et **un classement par étoiles**.
|
||||
|
||||
|
||||
|
||||
Vous pouvez également voir toutes les extensions précédemment installées en développant le dossier _`Installed`_, les extensions populaires utilisées par la plupart des développeurs dans le dossier _`Popular`_ et les extensions recommandées pour vous par les utilisateurs du même espace de travail ou basées sur vos fichiers récemment ouverts dans le dossier _`recommended`_.
|
||||
|
||||
|
||||
|
||||
|
||||
### 1. Installer des extensions
|
||||
Pour installer une extension, tapez le nom de l'extension dans le champ de recherche et cliquez dessus pour afficher des informations supplémentaires sur l'extension dans la zone de code une fois qu'elle apparaît dans la barre d'activités étendue.
|
||||
|
||||
Vous pouvez soit cliquer sur le _bouton d'installation bleu_ de la barre d'activité élargie pour l'installer, soit utiliser le bouton d'installation qui apparaît dans la zone de code une fois que vous avez sélectionné l'extension pour charger des informations supplémentaires.
|
||||
|
||||
|
||||
|
||||
### 2. Personnaliser les extensions
|
||||
Après avoir installé l'extension, vous pouvez avoir besoin de modifier son comportement et de la personnaliser en fonction de vos préférences. Pour ce faire, sélectionnez l'icône Extensions, et cette fois, votre extension apparaîtra dans le dossier _Installed_, cliquez sur l'icône _**Gear**_ et naviguez jusqu'à _Extensions Setting_.
|
||||
|
||||
|
||||
|
||||
### 3. Gérer les extensions
|
||||
Après avoir installé et utilisé votre extension, vscode.dev offre des options pour gérer votre extension en fonction de différents besoins. Par exemple, vous pouvez choisir de :
|
||||
- **Désactiver:** _(Vous désactivez temporairement une extension lorsque vous n'en avez plus besoin mais ne souhaitez pas la désinstaller complètement)_.
|
||||
|
||||
Sélectionnez l'extension installée dans la barre d'activités étendue > cliquez sur l'icône en forme d'engrenage > sélectionnez "Désactiver" ou "Désactiver (espace de travail)". **OU** Ouvrez l'extension dans la zone de code et cliquez sur le bouton bleu Désactiver.
|
||||
|
||||
|
||||
- **Désinstaller:** Sélectionnez l'extension installée dans la barre d'activité étendue > cliquez sur l'icône en forme d'engrenage > sélectionnez "Désinstaller" **OU** Ouvrez l'extension dans la zone de code et cliquez sur le bouton bleu de désinstallation.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Travail à faire
|
||||
[Créer un site web de CV en utilisant vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
|
||||
|
||||
|
||||
<!----
|
||||
## Quiz post-conférence
|
||||
[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
|
||||
---->
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
En savoir plus sur [VSCode.dev] (https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) et sur certaines de ses autres fonctionnalités.
|
||||
@ -0,0 +1,51 @@
|
||||
# [Sujet de la Leçon]
|
||||
|
||||
|
||||
|
||||
## [Quizz précédant la leçon](url-du-quizz)
|
||||
|
||||
[Décrire ce que nous avons appris]
|
||||
|
||||
### Introduction
|
||||
|
||||
Décrire ce que nous avons couvert
|
||||
|
||||
> Notes
|
||||
|
||||
### Prérequis
|
||||
|
||||
Quelles étapes avons-nous couvert avant cette leçon?
|
||||
|
||||
### Préparation
|
||||
|
||||
Etapes de préparation afin de commencer cette leçon
|
||||
|
||||
---
|
||||
|
||||
[Parcourir le contenu en blocs]
|
||||
|
||||
## [Sujet 1]
|
||||
|
||||
### Tâche:
|
||||
|
||||
Travailler ensemble afin d'améliorer progressivement votre base de code afin de construire le projet avec du code partagé:
|
||||
|
||||
```html
|
||||
code blocks
|
||||
```
|
||||
|
||||
✅ Vérification de connaissance - utiliser ce moment pour augmenter la connaissance des étudiants avec des questions ouvertes
|
||||
|
||||
## [Sujet 2]
|
||||
|
||||
## [Sujet 3]
|
||||
|
||||
🚀 Challenge: Ajouter un challenge pour les étudiants afin de travailler en collaboration en classe pour améliorer le projet
|
||||
|
||||
Optionnel: ajouter une capture d'écran de l'interface utilisateur de la leçon complétée, le cas échéant
|
||||
|
||||
## [Quizz suivant la leçon](url-du-quizz)
|
||||
|
||||
## Relecture et Etude personelle
|
||||
|
||||
**Devoir du au [MM/AA]**: [Nom du Devoir](assignment.fr.md)
|
||||
@ -0,0 +1,9 @@
|
||||
# [Nom de la Mission]
|
||||
|
||||
## Instructions
|
||||
|
||||
## Rubrique
|
||||
|
||||
| Critère | Exemplaire | Adéquat | A Améliorer |
|
||||
| ------- | ---------- | ------- | ----------- |
|
||||
| | | | |
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 438 KiB |
@ -0,0 +1,85 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# नवशिक्यांसाठी वेब विकास - एक कोर्स
|
||||
|
||||
सर्व JavaScript, CSS आणि HTML मूलभूत गोष्टींचा समावेश असलेला 12-आठवड्याचा, 24-धडा अभ्यासक्रम ऑफर करताना Microsoft च्या Azure Cloud Advocates खूश आहेत. प्रत्येक धड्यात पाठपूर्व आणि पाठोत्तर प्रश्नमंजुषा, धडा पूर्ण करण्यासाठी लिखित सूचना, उपाय, असाइनमेंट आणि बरेच काही समाविष्ट आहे. आमची प्रकल्प-आधारित अध्यापनशास्त्र तुम्हाला तुम्ही तयार करत असताना शिकण्याची परवानगी देते, नवीन कौशल्ये 'स्टिक=' करण्याचा एक सिद्ध मार्ग.
|
||||
|
||||
** आमच्या लेखक जेन लूपर, ख्रिस नॉरिंग, ख्रिस्तोफर हॅरिसन, जास्मिन ग्रीनवे, योहान लासोरा, फ्लोर ड्राईस आणि स्केचनोट कलाकार टोमोमी इमुरा यांचे मनःपूर्वक आभार!**
|
||||
|
||||
> **शिक्षक**, आम्ही हा अभ्यासक्रम कसा वापरायचा याबद्दल [काही टिपा](for-teachers.en.md) समाविष्ट केल्या आहेत. तुम्हाला तुमचा स्वतःचा मजकूर तयार करायचा असल्यास, आम्ही एक [मजकूर टेम्पलेट](leson-template/translations/README.mar.md) देखील समाविष्ट केले आहे.
|
||||
|
||||
> **विद्यार्थी**, या कोर्समध्ये स्वतःहून प्रवेश करण्यासाठी, संपूर्ण रेपो फोर्क करा आणि स्वतःच व्यायाम पूर्ण करा, व्याख्यानापूर्वीच्या प्रश्नमंजुषापासून सुरुवात करा, नंतर व्याख्यान वाचून उर्वरित क्रियाकलाप पूर्ण करा. सोल्यूशन कोड कॉपी करण्याऐवजी, धडे समजून घेऊन प्रकल्प तयार करण्याचा प्रयत्न करा; तथापि हा कोड प्रत्येक प्रकल्पाभिमुख धड्यातील /सोल्यूशन्स फोल्डरमध्ये उपलब्ध आहे. दुसरी कल्पना म्हणजे मित्रांसोबत अभ्यास गट तयार करणे आणि एकत्रितपणे साहित्याचा अभ्यास करणे. पुढील अभ्यासासाठी, आम्ही [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) आणि पाहिल्यानंतर खालील व्हिडिओची शिफारस करतो.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "प्रोमो व्हिडिओ")
|
||||
|
||||
> प्रकल्प आणि ज्या लोकांनी तो बनवला त्याबद्दलच्या व्हिडिओसाठी वरील इमेजवर क्लिक करा!
|
||||
|
||||
## अध्यापनशास्त्र
|
||||
|
||||
हा अभ्यासक्रम तयार करताना आम्ही दोन अध्यापनशास्त्रीय तत्त्वे निवडली: ते प्रकल्प-आधारित असल्याची खात्री करणे आणि त्यात पुनरावृत्ती झालेल्या प्रश्नमंजुषा समाविष्ट आहेत. या मालिकेच्या शेवटी, विद्यार्थ्यांनी एक टायपिंग गेम, एक व्हर्च्युअल टेरॅरियम, एक 'ग्रीन' ब्राउझर विस्तार, एक 'स्पेस इन्व्हेस्टर्स' प्रकारचा गेम आणि एक व्यवसाय-प्रकार बँकिंग अॅप तयार केला असेल आणि JavaScript च्या मूलभूत गोष्टी शिकल्या असतील. आजच्या वेब डेव्हलपरच्या आधुनिक टूलचेनसह HTML आणि CSS.
|
||||
|
||||
सामग्री प्रकल्पांशी संरेखित असल्याची खात्री करून, प्रक्रिया विद्यार्थ्यांसाठी अधिक आकर्षक बनविली जाते आणि संकल्पनांची धारणा वाढविली जाईल. आम्ही संकल्पनांचा परिचय करून देण्यासाठी JavaScript मूलभूत गोष्टींमध्ये अनेक स्टार्टर धडे देखील लिहिले, ज्यात व्हिडिओ ट्यूटोरियलच्या "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT) समाविष्ट आहे. .mc_id=academic-13441-cxa)", ज्यांच्या काही लेखकांनी या अभ्यासक्रमासाठी योगदान दिले आहे.
|
||||
|
||||
शिवाय, वर्गापूर्वी कमी-स्टेक्स क्विझ विद्यार्थ्याचा विषय शिकण्याचा हेतू ठरवते, तर वर्गानंतर दुसरी क्विझ कायम ठेवण्याची खात्री देते. हा कोर्स लवचिक आणि मजेदार आणि संपूर्ण किंवा काही प्रमाणात घेतला जाऊ शकतो. प्रकल्प लहान सुरू होतात आणि 12 आठवड्यांच्या चक्राच्या शेवटी ते अधिकाधिक जटिल बनतात.
|
||||
|
||||
आम्ही जावास्क्रिप्ट फ्रेमवर्कची ओळख करून देण्याचे हेतुपुरस्सर टाळले आहे, फ्रेमवर्क स्वीकारण्यापूर्वी वेब डेव्हलपर म्हणून आवश्यक असलेल्या मूलभूत कौशल्यांवर लक्ष केंद्रित करण्यासाठी, हा अभ्यासक्रम पूर्ण करण्यासाठी पुढील चांगली पायरी म्हणजे व्हिडिओंचा दुसरा संग्रह. Node.js बद्दल याद्वारे शिकू: "[प्रारंभिक मालिका ते: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441 -cxa)".
|
||||
|
||||
आमची [आचारसंहिता](/CODE_OF_CONDUCT.md), [योगदान](/CONTRIBUTING.md), आणि [अनुवाद](/TRANSLATIONS.md) मार्गदर्शक तत्त्वे शोधा. आम्ही तुमच्या रचनात्मक अभिप्रायाचे स्वागत करतो!
|
||||
,
|
||||
## प्रत्येक धड्यात हे समाविष्ट आहे:
|
||||
|
||||
- पर्यायी स्केचनोट
|
||||
- पर्यायी पूरक व्हिडिओ
|
||||
- प्री-लेक्चर वॉर्मअप क्विझ
|
||||
- लिखित मजकूर
|
||||
- प्रकल्प-आधारित धड्यांसाठी, प्रकल्प तयार करण्यासाठी चरण-दर-चरण मार्गदर्शक
|
||||
- ज्ञान तपासणी
|
||||
- एक आव्हान
|
||||
- परिशिष्ट वाचन
|
||||
- असाइनमेंट
|
||||
- पोस्ट लेक्चर क्विझ
|
||||
|
||||
> **क्विझबद्दल एक टीप**: सर्व प्रश्नमंजुषा [या अॅपमध्ये](https://ashy-river-0debb7803.1.azurestaticapps.net/)
|
||||
|
||||
## धडा
|
||||
|
||||
| | प्रकल्पाचे नाव | शिकवलेल्या संकल्पना | शिकण्याचे उद्दिष्ट | लिंक केलेला मजकूर | लिखित मजकूर | स्केचनोट | असाइनमेंट | नवशिक्या क्विझ | अंतिम क्विझ | विडिओ | लेखक |
|
||||
| :---: | :------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------------------------------------: | :------: | :---: | :----: | :----------: | :---------: | :---: | :-------------: |
|
||||
| 01 | सुरू करण्यासाठी | ट्रैड प्रोग्रामिंग और उपकरणों का परिचय | बर्याच प्रोग्रामिंग भाषांमागील मूलभूत गोष्टी जाणून घ्या आणि सॉफ्टवेअर जे व्यावसायिक विकासकांना त्यांची कामे करण्यात मदत करतात | [क्वाड प्रोग्रामिंग आणि टूल्सचा परिचय](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 02 | सुरू करण्यासाठी | टीमसोबत काम करण्यासह गिटहबच्या मूलभूत गोष्टी | तुमच्या प्रोजेक्टमध्ये GitHub कसे वापरावे, कोड बेसवर इतरांशी सहयोग कसे करावे | [GitHub परिचय](/1-getting-started-lessons/2-github-basics/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | फलर |
|
||||
| 03 | सुरू करण्यासाठी | प्रवेशयोग्यता | वेब ऍक्सेसिबिलिटीची मूलभूत माहिती जाणून घ्या | [सुलभता निधी](/1-getting-started-lessons/3-accessibility/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | क्रिस्टोफर |
|
||||
| 04 | JS च्या मूलभूत गोष्टी | जावास्क्रिप्ट डेटा प्रकार | Javascript डेटा प्रकारांची मूलभूत माहिती | [डेटा प्रकार](/2-js-basics/1-data-types/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 05 | JS च्या मूलभूत गोष्टी | कार्ये आणि पद्धती | अनुप्रयोगाचा तर्क प्रवाह व्यवस्थापित करण्यासाठी कार्ये आणि पद्धतींबद्दल जाणून घ्या | [फंगक्शनस और मेथड्स](/2-js-basics/2-functions-methods/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन and क्रिस्टोफर |
|
||||
| 06 | JS च्या मूलभूत गोष्टी | JS सह निर्णय | ननिर्णय घेण्याच्या पद्धती वापरून तुमच्या कोडमध्ये परिस्थिती निर्माण करायला शिका | [निर्णय घेणे](/2-js-basics/3-making-decisions/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 07 | JS च्या मूलभूत गोष्टी | अररेस और लूपस | Javascript मध्ये अॅरे आणि ल्युपस वापरून डेटासह कार्य करा | [अररेस और लूपस](/2-js-basics/4-arrays-loops/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||
| 08 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सराव मध्ये HTML | लेआउटवर लक्ष केंद्रित करून ऑनलाइन टेरेरियम तयार करण्यासाठी HTML तयार करा | [HTML चा परिचय](/3-terrarium/1-intro-to-html/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 09 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सीएसएस | पृष्ठ प्रतिसादासह CSS च्या मूलभूत गोष्टींवर लक्ष केंद्रित करून टेरेरियम ऑनलाइन स्टाइल करण्यासाठी CSS तयार करा | [CSS चा परिचय](/3-terrarium/2-intro-to-css/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 10 | [टेरारियम](/3-terrarium/solution/README.md) | Javascript क्लोजर, DOM मॅनिपुलेशन | क्लोजर आणि डीओएम मॅनिपुलेशनवर लक्ष केंद्रित करून ड्रॅग/ड्रॉप इंटरफेस म्हणून टेरेरियम फंक्शन तयार करण्यासाठी JavaScript तयार करा | [जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 11 | [टायपिंग गेम](/4-typing-game/solution/README.md) | एक टायपिंग गेम बनाए | तुमच्या JavaScript अॅपचे लॉजिक चालविण्यासाठी कीबोर्ड इव्हेंट कसे वापरायचे ते शिका | [ईवेंट-संचालित प्रोग्रामिंग](/4-typing-game/typing-game/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | क्रिस्टोफर |
|
||||
| 12 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउझरसह कार्य करणे | ब्राउझर कसे कार्य करतात, त्यांचा इतिहास जाणून घ्या आणि ब्राउझर विस्तारांचे प्रथम घटक तयार करा | [ब्राउझर बद्दल](/5-browser-extension/1-about-browsers/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 13 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | फॉर्म तयार करणे, API कॉल करणे आणि स्थानिक स्टोरेजमध्ये व्हेरिएबल्स संचयित करणे | लोकल स्टोरेजमध्ये संग्रहित व्हेरिएबल्स वापरून API कॉल करण्यासाठी तुमच्या ब्राउझर विस्ताराचे JavaScript घटक तयार करा | [API, फॉर्म आणि स्थानिक कथा](/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | जेन |
|
||||
| 14 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउझर, वेब डिस्प्ले मधील पार्श्वभूमी प्रक्रिया | विस्ताराचे चिन्ह व्यवस्थापित करण्यासाठी ब्राउझरच्या पार्श्वभूमी प्रक्रिया वापरा; वेब कार्यप्रदर्शन तयार करण्यासाठी काही ऑप्टिमायझेशनबद्दल जाणून घ्या आणि | [पार्श्वभूमी कार्ये आणि कार्यप्रदर्शन](/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||
| 15 | [स्पेस गेम](/6-space-game/solution/README.md) | JavaScript सह अधिक प्रगत गेम डेव्हलपमेंट | गेम तयार करण्याच्या तयारीसाठी रचना आणि पब/सब पॅटर्न दोन्ही वापरून वर्ग आणि वारसा याविषयी जाणून घ्या | [प्रगत गेम विकासाचा परिचय](/6-space-game/1-introduction/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 16 | [स्पेस गेम](/6-space-game/solution/README.md) | कॅनव्हासवर काढा | कॅनव्हास API बद्दल जाणून घ्या, जो स्क्रीनवर घटक काढण्यासाठी वापरला जातो | [कॅनव्हासवर काढा](/6-space-game/2-drawing-to-canvas/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 17 | [स्पेस गेम](/6-space-game/solution/README.md) | स्क्रीनभोवती हलणारे घटक | कॅनव्हास API वापरून कार्टेशियन निर्देशांक आणि घटक कसे मिळवायचे ते शोधा | [हलणारे घटक](/6-space-game/3-moving-elements-around/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 18 | [स्पेस गेम](/6-space-game/solution/README.md) | टक्कर शोध | की दाबून घटक एकमेकांना टक्कर द्या आणि प्रतिक्रिया द्या आणि गेम कार्यप्रदर्शन सुनिश्चित करण्यासाठी कूलडाउन फंक्शन प्रदान करा | [टक्कर शोध](/6-space-game/4-collision-detection/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 19 | [स्पेस गेम](/6-space-game/solution/README.md) | स्कोअर ठेवा | खेळाची स्थिती आणि कामगिरीवर आधारित गणिताची गणना करा | [स्कोअर ठेवा](/6-space-game/5-keeping-score/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 20 | [स्पेस गेम](/6-space-game/solution/README.md) | गेम समाप्त करा आणि रीस्टार्ट करा | मालमत्ता साफ करणे आणि पुली मूल्ये रीसेट करणे यासह गेम कसा संपवायचा आणि रीस्टार्ट कसा करायचा ते जाणून घ्या | [शेवटची स्थिती](/6-space-game/6-end-condition/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||
| 21 | [बैंकिंग एप](/7-bank-project/solution/README.md) | HTML टेम्पलेट्स आणि वेब अॅपमध्ये रूट करा | राउटिंग आणि एचटीएमएल टेम्पलेट्स वापरून मल्टीफेस वेबसाइटचे आर्किटेक्चर स्कॅफोल्ड करायला शिका | [HTML टेम्पलेट आणि मार्ग](/7-bank-project/1-template-route/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||
| 22 | [बैंकिंग एप](/7-bank-project/solution/README.md) | लॉगिन आणि नोंदणी फॉर्म तयार करा | फॉर्म तयार करणे आणि प्रमाणीकरण दिनचर्या सुपूर्द करणे याबद्दल जाणून घ्या | [फॉर्म्स](/7-bank-project/2-forms/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||
| 23 | [बैंकिंग एप](/7-bank-project/solution/README.md) | डेटा कसा आणायचा आणि वापरायचा | तुमच्या अॅपवर डेटा कसा प्रवाहित होतो, तो कसा आणायचा, तो कसा संग्रहित करायचा आणि त्याची विल्हेवाट कशी लावायची | [डाटा](/7-bank-project/3-data/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||
| 24 | [बैंकिंग एप](/7-bank-project/solution/README.md) | राज्य व्यवस्थापनाच्या संकल्पना | तुमचे अॅप स्थिती कशी राखते आणि ते सेंद्रिय पद्धतीने कसे व्यवस्थापित करते ते जाणून घ्या | [स्टेट प्रबंधन](/7-bank-project/4-state-management/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | योहन |
|
||||
|
||||
## ऑफलाइन प्रवेश
|
||||
|
||||
तुम्ही [Docsify](https://docsify.js.org/#/) वापरून हा दस्तऐवज ऑफलाइन डाउनलोड करू शकता. तुमच्या स्थानिक मशीनवर या रेपोला फोर्क करा, [installed docsify](https://docsify.js.org/#/quickstart) आणि नंतर या रेपोच्या रूट फोल्डरमध्ये `docsify serve` टाइप करा. वेबसाइट तुमच्या लोकलहोस्ट: `localhost:3000` वर पोर्ट 3000 वर दिली जाईल.
|
||||
@ -0,0 +1,112 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# หลักสูตรการพัฒนาเว็บสำหรับมือใหม่
|
||||
|
||||
Azure Cloud Adveocates ที่ Microsoft ยินดีที่จะเสนอหลักสูตร 12 สัปดาห์ 24 บทเรียนเกี่ยวกับ JavaScript CSS และพื้นฐาน HTML โดยแต่ละบทเรียนประกอบด้วยคำถามก่อน และหลังการเรียน มีแนวทางในการพิชิตบทเรียน วิธีแก้ปัญหา รวมถึงโจทย์ปัญหาและอื่น ๆ อีกมากมาย
|
||||
การสอนแบบ project-based (เรียนรู้จากการทำโปรเจกต์)ของเราจะให้คุณได้เรียนรู้ในการสร้างสิ่งใหม่ ๆ ไปด้วยกัน ซึ่งเป็นวิธีที่ได้รับการพิสูจน์แล้วว่าจะเสริมสร้างทักษะใหม่ ๆ ให้'ติดตัว'ต่อไปได้
|
||||
|
||||
**ขอขอบพระคุณเหล่าผู้เขียนของเรา Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, และศิลปินผู้วาด sketchnote Tomomi Imura!**
|
||||
|
||||
# คุณเป็นผู้เรียนใช่หรือไม่?
|
||||
|
||||
เริ่มเลยด้วยแหล่งข้อมูลดังต่อไปนี้:
|
||||
|
||||
- [Student Hub page](https://docs.microsoft.com/en-gb/learn/student-hub?WT.mc_id=academic-13441-cxa) ในเว็บนี้คุณจะเจอแหล่งข้อมูลสำหรับผู้ที่กำลังเริ่มต้น ซึ่งจะมีชุดสำหรับผู้เรียนรวมถึงโอกาสที่จะได้รับบัตรส่วนลดใบรับรองฟรี แนะนำให้ทำบุ๊กมาร์กและกลับมาดูเป็นครั้งคราวเพราะเราเปลี่ยนเนื้อหาใหม่ทุกเดือนเป็นอย่างต่ำ
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) เข้าร่วมชุมชน student ambassadors ที่นี่อาจเป็นหนทางที่จะพาคุณเข้ามาเป็นส่วนหนึ่งกับ Microsoft ได้
|
||||
|
||||
# เริ่มต้น
|
||||
|
||||
> **สำหรับผู้สอน** เรามี[คำแนะนำ](../for-teachers.md)ให้เกี่ยวกับวิธีการใช้งานหลักสูตรนี้ โดยเรายินดีเป็นอย่างมากที่จะรับฟังข้อเสนอแนะของคุณ[ในฟอรั่มแสดงความคิดเห็นของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **[สำหรับผู้เรียน](https://aka.ms/student-page)** ที่เรียนหลักสูตรนี้ด้วยตนเอง ให้ทำการ fork repository นี้ แล้วทำแบบทดสอบด้วยตนเอง โดยเริ่มจากการทำแบบทดสอบก่อนเรียน แล้วอ่านเนื้อหา ทำกิจกรรมที่เหลือให้ครบ ลองสร้างโปรเจกต์ด้วยการทำความเข้าใจบทเรียนมากกว่าที่จะลอกคำตอบ อย่างไรก็ตามจะมีโค้ดเฉลยอยู่ในโฟลเดอร์ /solutions ในแต่ละบทเรียน หรืออีกหนึ่งวิธีคือจัดกลุ่มเรียนกับเพื่อนเรียนด้วยกัน สำหรับผู้ที่ต้องการเรียนเพิ่มเติม เราขอแนะนำ [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) และดูจากวิดีโอด้านล่าง
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSIII)
|
||||
|
||||
ภาพ Gif โดย [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 คลิกที่รูปด้านบนเพื่อดูวิดีโอเกี่ยวกับโปรเจกต์และเหล่าทีมงานผู้สร้าง!
|
||||
|
||||
## การสอน
|
||||
|
||||
เราได้เลือกหลักการสอน 2 อย่างในระหว่างที่สร้างหลักสูตรนี้ขึ้นมา คือต้องมั่นใจว่าเป็นแบบ project-based และมีหลายแบบทดสอบให้ทำ โดยในตอนท้ายของการเรียน ผู้เรียนจะได้สร้างเกมพิมพ์ดีด, virtual terrarium, 'green' browser extension, space invaders และแอพลิเคชั่นธนาคารประเภทธุรกิจ รวมถึงเรียนรู้พื้นฐานของภาษา JavaScript, HTML และ CSS ควบคู่ไปกับการใช้เครื่องมือที่ทันสมัยของนักพัฒนาเว็บในปัจจุบัน
|
||||
|
||||
> 🎓 คุณสามารถใช้บทเรียนแรก ๆ ในหลักสูตรนี้เป็น[เส้นทางการเรียนรู้](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) บน Microsoft Learn ได้!
|
||||
|
||||
การทำให้แน่ใจว่าเนื้อหาสอดคล้องกับโปรเจกต์นี้ทำให้นักเรียนมีส่วนร่วมมากขึ้น และทำให้จดจำคอนเซปต์ได้มากขึ้นอีกด้วย เรายังมีบทเรียนสำหรับผู้เริ่มต้นในพื้นฐาน JavaScript เพื่อปูพื้นฐานแนวคิด จับคู่กับวิดีโอจาก ชุดการสอน "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" ซึ่งผู้จัดทำบางคนเป็นผู้ร่วมพัฒนาหลักสูตรนี้
|
||||
|
||||
นอกจากนี้การทำแบบทดสอบก่อนเรียนจะช่วยให้ผู้เรียนสนใจในเนื้อหาที่จะเรียนได้ อีกทั้งการให้แบบทดสอบหลังเรียนจะช่วยให้ผู้เรียนจดจำและต่อยอดผลการเรียนเพิ่มมากขึ้นอีกด้วย หลักสูตรนี้ถูกออกแบบมาให้มีความยืดหยุ่น สนุก และสามารถเรียนรู้ทั้งหมด หรือเฉพาะบางส่วนก็ได้ โดยโปรเจกต์เริ่มต้นจากเล็ก ๆ และเพิ่มความซับซ้อนมากขึ้น ๆ เมื่อครบช่วง 12 สัปดาห์
|
||||
|
||||
แม้ว่าเราตั้งใจที่จะเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะนำเอาเฟรมเวิร์กมาใช้ เพื่อที่จะสำเร็จหลักสูตรนี้ได้เราขอแนะนำให้ได้เรียนรู้เกี่ยวกับ Node.js ผ่านอีกชุดการสอน: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> ตรวจดูแนวทาง [จรรยาบรรณ](../CODE_OF_CONDUCT.md), [การมีส่วนช่วย](../CONTRIBUTING.md), และ [การแปล](../TRANSLATIONS.md) เรายินดีรับข้อเสนอแนะที่สร้างสรรค์ของคุณ!
|
||||
|
||||
## แต่ละบทเรียนประกอบไปด้วย:
|
||||
|
||||
- โน้ตเสริม
|
||||
- วิดีโอเพิ่มเติม
|
||||
- คำถามก่อนการเรียน
|
||||
- บทเรียน
|
||||
- สำหรับบทเรียนแบบ project-based จะมีขั้นตอนวิธีทำโปรเจกต์แบบ step-by-step
|
||||
- ตัวตรวจวัดความรู้
|
||||
- แบบทดสอบที่ท้าทาย
|
||||
- เนื้อหาสำหรับอ่านเพิ่มเติม
|
||||
- การบ้าน
|
||||
- คำถามหลังการเรียน
|
||||
|
||||
> **หมายเหตุเกี่ยวกับคำถามแบบทดสอบ**: ทุกคำถามรวมอยู่[ในแอปนี้](https://ashy-river-0debb7803.1.azurestaticapps.net/) ทั้ง 48 แบบทดสอบมี 3 คำถามที่เกี่ยวข้องกับบทเรียน โดยแอปนี้สามารถใช้งานแบบ local ได้โดยการทำตามจากโฟลเดอร์ `quiz-app` ซึ่งกำลังทะยอยแปลภาษากันอยู่
|
||||
|
||||
## บทเรียน
|
||||
|
||||
| | ชื่อโปรเจกต์ | แนวคิดที่สอน | วัตถุประสงค์ของการเรียน | บทเรียนที่เกี่ยวข้อง | ผู้เขียน |
|
||||
| :-: | :----------------------------------------------------------------: | :---------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | เริ่มต้น | แนะนำการเขียนโปรแกรมและเครื่องมือที่ใช้ | เรียนรู้พื้นฐานเบื้องหลังภาษาโปรแกรมมิ่งส่วนใหญ่และซอฟต์แวร์ที่ช่วยเหลือการทำงานของนักพัฒนามืออาชีพ | [Intro to Programming Languages and Tools of the Trade](../1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | เริ่มต้น | พื้นฐาน GitHub รวมถึงการทำงานร่วมกับทีม | วิธีการใช้ GitHub ในโปรเจกต์ของคุณ และวิธีการทำงานร่วมกับผู้อื่นบนโค้ดเบส | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | เร่ิมต้น | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บ | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | พื้นฐาน JS | ชนิดข้อมูลบน JavaScript | พื้นฐานของชนิดข้อมูลบน JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | พื้นฐาน JS | ฟังก์ชันและเมธทอด | เรียนเกี่ยวกับฟังก์ชันและเมธอดที่ใช้จัดการการทำงานลอจิกของแอพลิเคชั่น | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | พื้นฐาน JS | สร้างการตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยการใช้ decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | พื้นฐาน JS | อาเรย์และการวนซ้ำ | ทำงานกับข้อมูลด้วยอาเรย์และการวนซ้ำใน JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML ในทางปฏิบัติ | เขียน HTML เพื่อสร้างระบบนิเวศจำลองออนไลน์ โดยเน้นไปที่การจัดวางเลย์เอาต์ | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS ในทางปฏิบัติ | เขียน CSS เพื่อตกแต่งระบบนิเวศจำลองออนไลน์ โดยเน้นที่พื้นฐาน CSS รวมถึงการทำ responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures และการจัดการ DOM | เขียน JavaScript เพื่อสร้างฟังก์ชันให้ระบบนิเวศจำลองเช่นการลากวาง โดยเน้นที่หลักการ closures และการจัดการ DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | เรียนรู้วิธีการรับค่าจากคีย์บอร์ดเพื่อขับเคลื่อนการทำงานลอจิกบนแอพ JavaScript ของคุณ | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานกับ Browsers | เรียนรู้การทำงานของ browsers ความเป็นมา และวิธีจัดวางองค์ประกอบแรกของส่วนขยาย browser | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | สร้างแบบฟอร์ม การเรียกใช้ API และการจัดเก็บตัวแปรบน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยาย browser เพื่อเรียกใช้ API โดยเรียกใช้ตัวแปรที่เก็บบน local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานเบื้องหลัง Browser และประสิทธิภาพของเว็บ | ใช้การทำงานเบื้องหลังของ browser ในการจัดการไอคอนของส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการเพิ่มประสิทธิภาพ | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Space Game](/6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้คลาสและคอมโพสิชั่น และ Pub/Sub แพทเทิร์น ในการเตรียมพร้อมสำหรับสร้างเกม | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Space Game](/6-space-game/solution/README.md) | วาดรูปด้วย Canvas | เรียนรู้เกี่ยวกับ Canvas API สำหรับวาดภาพบนหน้าจอ | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Space Game](/6-space-game/solution/README.md) | การขยับองค์ประกอบไปรอบ ๆ จอ | ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนไหวโดยใช้พิกัดคาร์ทีเซียนและ Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Space Game](/6-space-game/solution/README.md) | ตรวจสอบการชน | ทำให้องค์ประกอบชนกันและโต้ตอบกันและกันโดยใช้การกดปุ่มและสร้างฟังก์ชั่นคูลดาวน์เพื่อรับรองประสิทธิภาพของเกม | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Space Game](/6-space-game/solution/README.md) | การเก็บแต้ม | ทำการคำนวณทางคณิตศาสตร์ตามสถานะของเกม | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Space Game](/6-space-game/solution/README.md) | การจบเกมและเริ่มใหม่ | เรียนรู้เกี่ยวกับการจบเกมและเริ่มเกมใหม่ รวมถึงการล้างค่าและรีเซ็ตตัวแปร | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | เทมเพลท HTML และ Routes ในเว็บแอพ | เรียนรู้วิธีการสร้างโครงสำหรับเว็บหลายหน้าโดยใช้ routing และ HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | สร้างแบบฟอร์มล็อกอิน และสมัครสมาชิก | เรียนรู้เกี่ยวกับการสร้างฟอร์มและตรวจสอบความถูกต้องของข้อมูล | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการเดินทางของข้อมูลบนแอพ วิธีการดึง จัดเก็บ และกำจัดข้อมูลเหล่านั้น | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | แนวคิดการจัดการ State | เรียนรู้วิธีการเก็บ state ให้คงอยู่ และวิธีจัดการด้วยการโปรแกรม | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## การเข้าถึงแบบออฟไลน์
|
||||
|
||||
คุณสามารถเปิดเอกสารนี้แบบออนไลน์ได้โดยใช้ [Docsify](https://docsify.js.org/#/) ทำการ Fork repo นี้แล้ว [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนอุปกรณ์ของคุณ จากนั้นใช้คำสั่ง `docsify serve` บน repo ที่ติดตั้งบนเครื่อง เว็บไซต์ก็จะให้บริการบนพอร์ต 3000 บนเครื่องของคุณ: `localhost:3000`
|
||||
|
||||
## PDF
|
||||
|
||||
ไฟล์ PDF ของทุกบทเรียนสามารถหาได้จาก[ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
|
||||
|
||||
## หลักสูตรอื่น ๆ
|
||||
|
||||
ทีมของเรายังมีหลักสูตรที่น่าสนใจอีกมากมาย ดูได้ตามนี้เลย!:
|
||||
|
||||
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||
- [AI for Beginners](https://aka.ms/ai-beginners)
|
||||
@ -0,0 +1,33 @@
|
||||
## Para Educadores
|
||||
|
||||
¿Te gustaría usar este curso en tu clase? ¡Estamos encantados de ayudarte! Aquí hay algunas sugerencias para ayudarte a comenzar.
|
||||
|
||||
De hecho, puedes usarlo dentro de GitHub usando GitHub Classroom.
|
||||
|
||||
Para hacerlo, haz un fork de este repositorio. Necesitarás crear un repositorio para cada lección, por lo que necesitarás extraer cada carpeta en un repositorio separado. De esta manera, [GitHub Classroom](https://classroom.github.com/classrooms) puede seleccionar cada lección por separado.
|
||||
|
||||
Estas [instrucciones](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) te darán una idea de cómo configurar tu aula.
|
||||
|
||||
## Usando el repositorio en Moodle, Canvas o Blackboard.
|
||||
|
||||
Este curso funciona bien en estos Sistemas de Gestión de Aprendizaje. Usa el archivo [Moodle](/teaching-files/webdev-moodle.mbz) para el contenido completo, o prueba el archivo [Common Cartridge](/teaching-files/webdev-common-cartridge.imscc) que contiene parte del contenido. Moodle Cloud no admite exportaciones completas de Common Cartridge, por lo que es preferible usar el archivo de descarga de Moodle que se puede cargar en Canvas. Por favor, háganos saber cómo podemos mejorar esta experiencia.
|
||||
|
||||
|
||||
> El curso en Moodle Classroom
|
||||
|
||||
|
||||
> El curso en Canvas
|
||||
|
||||
## Usando el repositorio de la forma en que está
|
||||
|
||||
Si deseas usar este repositorio tal como está, sin usar GitHub Classroom, también lo puedes hacer. Para ello, deberías conversar con tus estudiantes sobre qué lección van a trabajar juntos.
|
||||
|
||||
En un ambiente en línea (Zoom, Teams, u otro) podrías formar _breakout rooms_ (salas de descanso) para que tus alumnos presenten sus exámenes, y ayudar a los estudiantes para prepararse a aprender. Otro ejemplo, puedes invitar a los estudiantes a que participen en los exámenes y envíen sus respuestas como 'issues' a cierta hora. Podrías hacer lo mismo con las tareas, si quieres que los estudiantes trabajen de forma colaborativa externa.
|
||||
|
||||
Si prefieres un ambiente más privado, pide a tus estudiantes que hagan un fork del curso, lección por lección, a sus propios repositorios de GitHub como repositorios privados y te den acceso. Luego pueden completar los exámenes y las tareas de forma privada y enviártelas a través de "issues" en tu repositorio de aula.
|
||||
|
||||
Hay muchas formas de hacer funcionar el curso en un formato en línea. ¡Haznos saber cómo lo estás haciendo!
|
||||
|
||||
## Por favor, ayúdanos a mejorar
|
||||
|
||||
Queremos mejorar este curso para que sea más útil para los educadores y los estudiantes. Si tienes alguna sugerencia, por favor déjanos tus [comentarios](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
|
||||
@ -0,0 +1,23 @@
|
||||
## शिक्षकांसाठी
|
||||
|
||||
तुम्हाला हा कोर्स तुमच्या वर्गात वापरायला आवडेल का? कृपया मोकळे व्हा!
|
||||
|
||||
खरं तर, तुम्ही ते GitHub क्लासरूम वापरून GitHub मध्ये वापरू शकता.
|
||||
|
||||
हे करण्यासाठी, हा रेपो फोर्क करा. तुम्हाला प्रत्येक धड्यासाठी रेपो तयार करणे आवश्यक आहे, म्हणून तुम्हाला प्रत्येक फोल्डर वेगळ्या रेपोमध्ये काढावे लागेल. अशा प्रकारे, [GitHub Classroom](https://classroom.github.com/classrooms) प्रत्येक धडा स्वतंत्रपणे घेऊ शकतात.
|
||||
|
||||
या [संपूर्ण सूचना](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) तुम्हाला तुमचा वर्ग कसा सेट करायचा याची कल्पना देईल.
|
||||
|
||||
## रेपो जसा आहे तसा वापरा
|
||||
|
||||
GitHub Classroom न वापरता तुम्हाला हा रेपो वापरायचा असल्यास, जे काही करता येईल. तुम्हाला तुमच्या विद्यार्थ्यांशी संवाद साधावा लागेल जे एकत्र काम शिकवतात.
|
||||
|
||||
ऑनलाइन फॉरमॅटमध्ये (झूम, टीम्स किंवा इतर) विद्यार्थ्यांना शिकण्यासाठी तयार होण्यासाठी तुम्ही क्विझ आणि मार्गदर्शनासाठी ब्रेकआउट रूम तयार करू शकता. नंतर विद्यार्थ्यांना प्रश्नमंजुषा साठी आमंत्रित करा आणि दिलेल्या वेळी 'समस्या' समस्या म्हणून उपस्थित करा. विद्यार्थ्यांनी खुलेपणाने सहकार्य करावे असे तुम्हाला वाटत असल्यास, तुम्ही असाइनमेंटसह देखील असेच करू शकता.
|
||||
|
||||
जर तुम्हाला अधिक खाजगी स्वरूप आवडत असेल, तर तुमच्या विद्यार्थ्यांना तुम्हाला अभ्यासक्रमात प्रवेश देण्यास सांगा, पाठानुसार धडा, वैयक्तिक प्रतिनिधी म्हणून तुमचा स्वतःचा GitHub रेपो आणि बरेच काही. ते नंतर खाजगीरित्या क्विझ आणि असाइनमेंट पूर्ण करू शकतात आणि तुमच्या क्लास रेपोवरील समस्यांद्वारे तुम्हाला सबमिट करू शकतात.
|
||||
|
||||
ऑनलाइन क्लासरूम फॉरमॅटमध्ये हे करण्याचे अनेक मार्ग आहेत. कृपया आपल्यासाठी काय सर्वोत्तम आहे ते आम्हाला कळवा!
|
||||
|
||||
## कृपया आपले विचार कळवा!
|
||||
|
||||
आम्हाला हा कोर्स तुमच्यासाठी आणि तुमच्या विद्यार्थ्यांसाठी उपयुक्त बनवायचा आहे. कृपया आम्हाला [फीडबॅक](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWQ4WLKY) द्या.
|
||||
Loading…
Reference in new issue