msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Merge pull request #1482 from microsoft/update-translations

Browse Source 
🌐 Update translations via Co-op Translator
pull/1483/head
Lee Stott 1 week ago committed by GitHub
parent f5454c782b 890c069f2b
commit 1e3ae770fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 168 additions and 160 deletions
Show Stats Download Patch File Download Diff File

142
translations/el/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-26T21:18:25+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T02:54:23+00:00",
"source_file": "README.md",
"language_code": "el"
}
@ -21,31 +21,34 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Ανάπτυξη Ιστού για Αρχάριους - Ένα Εκπαιδευτικό Πρόγραμμα
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
Μάθετε τα βασικά της ανάπτυξης ιστού με το 12-εβδομαδιαίο ολοκληρωμένο πρόγραμμα της Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εστιάζει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως terrariums, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Συμμετέχετε σε κουίζ, συζητήσεις και πρακτικές εργασίες. Βελτιώστε τις δεξιότητές σας και ενισχύστε τη γνώση σας με την αποτελεσματική παιδαγωγική που βασίζεται σε έργα. Ξεκινήστε το ταξίδι σας στον προγραμματισμό σήμερα!
Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε να χρησιμοποιείτε αυτούς τους πόρους:
1. **Κάντε Fork το Αποθετήριο**: Πατήστε [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Γίνετε μέλος στο Azure AI Foundry Discord και γνωρίστε ειδικούς και άλλους προγραμματιστές**](https://discord.com/invite/ByRwuEEgH4)
# Ανάπτυξη Ιστού για Αρχάριους - Ένα Πρόγραμμα Σπουδών
Μάθετε τα βασικά της ανάπτυξης ιστού με το 12-εβδομάδων ολοκληρωμένο μάθημα από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εστιάζει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραριούμ, επεκτάσεις προγράμματος περιήγησης και παιχνίδια διαστήματος. Συμμετέχετε σε κουίζ, συζητήσεις και πρακτικές εργασίες. Βελτιώστε τις δεξιότητές σας και ενισχύστε τη διατήρηση της γνώσης σας με την αποτελεσματική παιδαγωγική μας που βασίζεται σε έργα. Ξεκινήστε το ταξίδι σας στον προγραμματισμό σήμερα!
#### 🧑‍🎓 _Είστε φοιτητής;_
Επισκεφθείτε τη [**σελίδα Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμη και τρόπους να αποκτήσετε δωρεάν πιστοποιητικό. Αυτή είναι η σελίδα που πρέπει να προσθέσετε στους σελιδοδείκτες σας και να ελέγχετε τακτικά, καθώς το περιεχόμενο αλλάζει κάθε μήνα.
Επισκεφθείτε τη [**σελίδα Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμη και τρόπους για να αποκτήσετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που θέλετε να προσθέσετε στους σελιδοδείκτες σας και να ελέγχετε τακτικά, καθώς αλλάζουμε το περιεχόμενο κάθε μήνα.
### 📣 Ανακοίνωση - _Νέο Εκπαιδευτικό Πρόγραμμα_ για Γενετική Τεχνητή Νοημοσύνη με JavaScript μόλις κυκλοφόρησε
### 📣 Ανακοίνωση - _Νέο Πρόγραμμα Σπουδών_ για Γενετική Τεχνητή Νοημοσύνη με JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας εκπαιδευτικό πρόγραμμα για Γενετική Τεχνητή Νοημοσύνη!
Μην χάσετε το νέο μας πρόγραμμα σπουδών για Γενετική Τεχνητή Νοημοσύνη!
Επισκεφθείτε [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) για να ξεκινήσετε!
<div>
<img src="./images/background.png" width="600px" />
</div>
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.el.png)
- Μαθήματα που καλύπτουν τα πάντα, από τα βασικά έως το RAG.
- Αλληλεπιδράστε με ιστορικούς χαρακτήρες χρησιμοποιώντας GenAI και την εφαρμογή μας.
- Διασκεδαστική και ενδιαφέρουσα αφήγηση, θα ταξιδέψετε στον χρόνο!
- Αλληλεπιδράστε με ιστορικές προσωπικότητες χρησιμοποιώντας το GenAI και την εφαρμογή συνοδού μας.
- Διασκεδαστική και συναρπαστική αφήγηση, θα ταξιδέψετε στον χρόνο!
<div>
<img src="./images/character.png" width="600px" />
</div>
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.el.png)
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσεων και μια πρόκληση για να σας καθοδηγήσει σε θέματα όπως:
- Δημιουργία προτροπών και μηχανική προτροπών
@ -56,52 +59,52 @@ CO_OP_TRANSLATOR_METADATA:
## 🌱 Ξεκινώντας
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το εκπαιδευτικό πρόγραμμα. Θα θέλαμε να ακούσουμε τη γνώμη σας [στο φόρουμ συζητήσεων μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα θέλαμε πολύ τα σχόλιά σας [στο φόρουμ συζητήσεων μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα κουίζ πριν το μάθημα και συνεχίστε με την ανάγνωση του υλικού, την ολοκλήρωση των δραστηριοτήτων και ελέγξτε την κατανόησή σας με το κουίζ μετά το μάθημα.
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα κουίζ πριν το μάθημα και συνεχίστε διαβάζοντας το υλικό του μαθήματος, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγξτε την κατανόησή σας με το κουίζ μετά το μάθημα.
Για να βελτιώσετε την εμπειρία μάθησης σας, συνδεθείτε με τους συναδέλφους σας για να εργαστείτε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμη να απαντήσει στις ερωτήσεις σας.
Για να βελτιώσετε την εμπειρία μάθησής σας, συνδεθείτε με τους συναδέλφους σας για να δουλέψετε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεων μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμη για να απαντήσει στις ερωτήσεις σας.
Για να προχωρήσετε την εκπαίδευσή σας, συνιστούμε ανεπιφύλακτα να εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικό μελέτης.
### 📋 Ρύθμιση του περιβάλλοντός σας
Αυτό το εκπαιδευτικό πρόγραμμα έχει έτοιμο περιβάλλον ανάπτυξης! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να εκτελέσετε το πρόγραμμα σε ένα [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον που βασίζεται στον περιηγητή, χωρίς ανάγκη εγκατάστασης_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Αυτό το πρόγραμμα σπουδών έχει ένα έτοιμο περιβάλλον ανάπτυξης! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να εκτελέσετε το πρόγραμμα σπουδών σε ένα [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον που βασίζεται σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκατάστασης_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Δημιουργία του αποθετηρίου σας
Για να αποθηκεύσετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε ένα αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας στο GitHub με ένα αντίγραφο του εκπαιδευτικού προγράμματος.
#### Δημιουργήστε το αποθετήριό σας
Για να αποθηκεύσετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε πατώντας το κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Ακολουθήστε αυτά τα βήματα:
1. **Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας.
2. **Clone το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Κάντε Fork το Αποθετήριο**: Πατήστε το κουμπί "Fork" στην επάνω δεξιά γωνία αυτής της σελίδας.
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Εκτέλεση του προγράμματος σε ένα Codespace
#### Εκτέλεση του προγράμματος σπουδών σε ένα Codespace
Στο αντίγραφο του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace για να εργαστείτε.
Στο αντίγραφο αυτού του αποθετηρίου που δημιουργήσατε, πατήστε το κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace για να δουλέψετε.
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
[!Codespace](../..)./images/createcodespace.png)
#### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας
#### Εκτέλεση του προγράμματος σπουδών τοπικά στον υπολογιστή σας
Για να εκτελέσετε το πρόγραμμα τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν περιηγητή και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία ώστε να επιλέξετε αυτό που σας ταιριάζει καλύτερα.
Για να εκτελέσετε αυτό το πρόγραμμα σπουδών τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, ένα πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και τα Εργαλεία του Επαγγέλματος](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει στις διάφορες επιλογές για καθένα από αυτά τα εργαλεία, ώστε να επιλέξετε αυτό που σας ταιριάζει καλύτερα.
Η πρότασή μας είναι να χρησιμοποιήσετε το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως επεξεργαστή, το οποίο διαθέτει επίσης ενσωματωμένο [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Μπορείτε να κατεβάσετε το Visual Studio Code [εδώ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Κλωνοποιήστε το αποθετήριο σας στον υπολογιστή σας. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Code** και αντιγράφοντας το URL:
1. Κλωνοποιήστε το αποθετήριό σας στον υπολογιστή σας. Μπορείτε να το κάνετε πατώντας το κουμπί **Code** και αντιγράφοντας το URL:
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
Στη συνέχεια, ανοίξτε το [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την παρακάτω εντολή, αντικαθιστώντας το `<your-repository-url>` με το URL που μόλις αντιγράψατε:
Στη συνέχεια, ανοίξτε το [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα από το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την παρακάτω εντολή, αντικαθιστώντας το `<your-repository-url>` με το URL που μόλις αντιγράψατε:
```bash
git clone <your-repository-url>
```
2. Ανοίξτε τον φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **File** > **Open Folder** και επιλέγοντας τον φάκελο που μόλις κλωνοποιήσατε.
2. Ανοίξτε τον φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε πατώντας **File** > **Open Folder** και επιλέγοντας τον φάκελο που μόλις κλωνοποιήσατε.
> Συνιστώμενες επεκτάσεις για το Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - για προεπισκόπηση σελίδων HTML μέσα από το Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - για να σας βοηθήσει να γράφετε κώδικα πιο γρήγορα
## 📂 Κάθε μάθημα περιλαμβάνει:
@ -110,43 +113,43 @@ CO_OP_TRANSLATOR_METADATA:
- προαιρετικό συμπληρωματικό βίντεο
- κουίζ προθέρμανσης πριν το μάθημα
- γραπτό μάθημα
- για μαθήματα που βασίζονται σε έργα, οδηγίες βήμα προς βήμα για την κατασκευή του έργου
- έλεγχοι γνώσεων
- για μαθήματα που βασίζονται σε έργα, οδηγίες βήμα-βήμα για την κατασκευή του έργου
- ελέγχους γνώσεων
- μια πρόκληση
- συμπληρωματική ανάγνωση
- εργασία
- κουίζ μετά το μάθημα
- [κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/)
> **Σημείωση για τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Συνδέονται μέσα από τα μαθήματα και η εφαρμογή κουίζ μπορεί να εκτελεστεί τοπικά ή να αναπτυχθεί στο Azure. Ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`. Τα κουίζ μεταφράζονται σταδιακά.
> **Σημείωση για τα κουίζ**: Όλα τα κουίζ περιέχονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/) και η εφαρμογή κουίζ μπορεί να εκτελεστεί τοπικά ή να αναπτυχθεί στο Azure. Ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`.
## 🗃️ Μαθήματα
| | Όνομα Έργου | Διδασκόμενες Έννοιες | Στόχοι Μάθησης | Συνδεδεμένο Μάθημα | Συγγραφέας |
| | Όνομα Έργου | Διδασκόμενες Έννοιες | Μαθησιακοί Στόχοι | Συνδεδεμένο Μάθημα | Συγγραφέας |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και Εργαλεία | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει εργασία με ομάδα | Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργαστείτε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Βασικές Αρχές Προσβασιμότητας](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Βασικά JS | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων JavaScript | [Τύποι Δεδομένων](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και τις μεθόδους για τη διαχείριση της λογικής ροής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](/2-js-basics/2-functions-methods/README.md) | Jasmine και Christopher |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη JavaScript | [Πίνακες και Βρόχοι](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML στην Πράξη | Δημιουργήστε το HTML για να φτιάξετε ένα online terrarium, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS στην Πράξη | Δημιουργήστε το CSS για να σχεδιάσετε το online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένου του να κάνετε τη σελίδα responsive | [Εισαγωγή στο CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε το JavaScript για να κάνετε το terrarium να λειτουργεί ως διεπαφή drag/drop, εστιάζοντας στα κλεισίματα και τον χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου για να καθοδηγήσετε τη λογική της εφαρμογής σας | [Προγραμματισμός με Βάση Συμβάντα](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να δημιουργήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό storage | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες στο τοπικό storage | [APIs, Φόρμες και Τοπικό Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Διεργασίες παρασκηνίου στον περιηγητή, απόδοση ιστού | Χρησιμοποιήστε τις διεργασίες παρασκηνίου του περιηγητή για να διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση ιστού και κάποιες βελτιστοποιήσεις | [Διεργασίες Παρασκηνίου και Απόδοση](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Πιο Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας τόσο Κλάσεις όσο και Σύνθεση και το μοτίβο Pub/Sub, ως προετοιμασία για τη δημιουργία ενός παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το API του Καμβά, που χρησιμοποιείται για να σχεδιάσετε στοιχεία στην οθόνη | [Σχεδίαση σε Καμβά](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν να αποκτήσουν κίνηση χρησιμοποιώντας καρτεσιανές συντεταγμένες και το API του Καμβά | [Μετακίνηση Στοιχείων](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε μια λειτουργία cooldown για την απόδοση του παιχνιδιού | [Ανίχνευση Συγκρούσεων](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Καταγραφή σκορ | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και την απόδοση του παιχνιδιού | [Καταγραφή Σκορ](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένης της εκκαθάρισης πόρων και της επαναφοράς τιμών μεταβλητών | [Συνθήκη Τερματισμού](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή της αρχιτεκτονικής μιας ιστοσελίδας πολλαπλών σελίδων χρησιμοποιώντας διαδρομές και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση διαδικασιών επικύρωσης | [Φόρμες](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς τα δεδομένα ρέουν μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτήσετε, να τα αποθηκεύσετε και να τα διαχειριστείτε | [Δεδομένα](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να τη διαχειριστείτε προγραμματιστικά | [Διαχείριση Κατάστασης](/7-bank-project/4-state-management/README.md) | Yohan |
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία του Επαγγέλματος | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές στη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και τα Εργαλεία του Επαγγέλματος](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει εργασία με ομάδα | Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργαστείτε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Βασικές Αρχές Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Βασικά JS | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων στη JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Τεραριούμ](./3-terrarium/solution/README.md) | HTML στην Πράξη | Δημιουργήστε το HTML για να φτιάξετε ένα online τεραριούμ, εστιάζοντας στη δημιουργία μιας διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Τεραριούμ](./3-terrarium/solution/README.md) | CSS στην Πράξη | Δημιουργήστε το CSS για να διαμορφώσετε το online τεραριούμ, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της προσαρμογής της
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, Χειρισμός DOM | Δημιουργήστε τον κώδικα JavaScript για να λειτουργεί το terrarium ως διεπαφή drag/drop, εστιάζοντας στα κλεισίματα και τον χειρισμό DOM | [Κλεισίματα JavaScript, Χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε γεγονότα πληκτρολογίου για να καθοδηγήσετε τη λογική της εφαρμογής σας σε JavaScript | [Προγραμματισμός με Γεγονότα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους, και πώς να δημιουργήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στην τοπική αποθήκευση | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές που αποθηκεύονται στην τοπική αποθήκευση | [APIs, Φόρμες, και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Διεργασίες παρασκηνίου στον περιηγητή, απόδοση ιστού | Χρησιμοποιήστε τις διεργασίες παρασκηνίου του περιηγητή για να διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση ιστού και κάποιες βελτιστοποιήσεις για να το πετύχετε | [Διεργασίες Παρασκηνίου και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Πιο Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας τόσο Κλάσεις όσο και Σύνθεση και το μοτίβο Pub/Sub, ως προετοιμασία για τη δημιουργία ενός παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το API του Καμβά, που χρησιμοποιείται για να σχεδιάσετε στοιχεία στην οθόνη | [Σχεδίαση σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν να αποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το API του Καμβά | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Ανίχνευση σύγκρουσης | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε μια λειτουργία καθυστέρησης για να εξασφαλίσετε την απόδοση του παιχνιδιού | [Ανίχνευση Σύγκρουσης](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Καταγραφή σκορ | Εκτελέστε μαθηματικούς υπολογισμούς βασισμένους στην κατάσταση και την απόδοση του παιχνιδιού | [Καταγραφή Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένης της εκκαθάρισης πόρων και της επαναφοράς τιμών μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Εφαρμογή Ιστού | Μάθετε πώς να δημιουργήσετε τη δομή της αρχιτεκτονικής μιας ιστοσελίδας πολλαπλών σελίδων χρησιμοποιώντας διαδρομές και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση διαδικασιών επικύρωσης | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς τα δεδομένα ρέουν μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτήσετε, να τα αποθηκεύσετε και να τα διαχειριστείτε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να τη διαχειριστείτε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 Παιδαγωγική
@ -155,26 +158,27 @@ CO_OP_TRANSLATOR_METADATA:
* μάθηση βασισμένη σε έργα
* συχνά κουίζ
Το πρόγραμμα διδάσκει τα βασικά του JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι web developers. Οι μαθητές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια φιλική προς το περιβάλλον επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια σταθερή κατανόηση της ανάπτυξης ιστού.
Το πρόγραμμα διδάσκει τα βασικά του JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σημερινοί προγραμματιστές ιστού. Οι μαθητές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια φιλική προς το περιβάλλον επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια σταθερή κατανόηση της ανάπτυξης ιστού.
> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα μαθήματα αυτού του προγράμματος σπουδών ως [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
Με την εξασφάλιση ότι το περιεχόμενο ευθυγραμμίζεται με έργα, η διαδικασία γίνεται πιο ενδιαφέρουσα για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Γράψαμε επίσης αρκετά εισαγωγικά μαθήματα στα βασικά του JavaScript για την εισαγωγή εννοιών, συνοδευόμενα από ένα βίντεο από τη συλλογή "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" με εκπαιδευτικά βίντεο, μερικοί από τους συγγραφείς των οποίων συνέβαλαν σε αυτό το πρόγραμμα σπουδών.
Με την εξασφάλιση ότι το περιεχόμενο ευθυγραμμίζεται με έργα, η διαδικασία γίνεται πιο ενδιαφέρουσα για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Γράψαμε επίσης αρκετά εισαγωγικά μαθήματα στα βασικά του JavaScript για να εισαγάγουμε έννοιες, συνοδευόμενα από ένα βίντεο από τη συλλογή "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" με εκπαιδευτικά βίντεο, μερικοί από τους συγγραφείς των οποίων συνέβαλαν σε αυτό το πρόγραμμα σπουδών.
Επιπλέον, ένα κουίζ χαμηλού κινδύνου πριν από την τάξη θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά την τάξη εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε για να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή εν μέρει. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο περίπλοκα μέχρι το τέλος του 12-εβδομαδιαίου κύκλου.
Επιπλέον, ένα κουίζ χαμηλού κινδύνου πριν από την τάξη θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά την τάξη εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε για να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή τμηματικά. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο περίπλοκα μέχρι το τέλος του 12-εβδομαδιαίου κύκλου.
Παρόλο που αποφύγαμε σκόπιμα την εισαγωγή JavaScript frameworks για να επικεντρωθούμε στις βασικές δεξιότητες που χρειάζονται ως web developer πριν από την υιοθέτηση ενός framework, ένα καλό επόμενο βήμα μετά την ολοκλήρωση αυτού του προγράμματος σπουδών θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Παρόλο που αποφύγαμε σκόπιμα την εισαγωγή πλαισίων JavaScript για να επικεντρωθούμε στις βασικές δεξιότητες που χρειάζονται ως προγραμματιστής ιστού πριν από την υιοθέτηση ενός πλαισίου, ένα καλό επόμενο βήμα μετά την ολοκλήρωση αυτού του προγράμματος σπουδών θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Επισκεφθείτε τις [Οδηγίες Συμπεριφοράς](CODE_OF_CONDUCT.md) και τις [Οδηγίες Συνεισφοράς](CONTRIBUTING.md). Καλωσορίζουμε τα εποικοδομητικά σας σχόλια!
## 🧭 Πρόσβαση εκτός σύνδεσης
Μπορείτε να εκτελέσετε αυτήν την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κάντε fork αυτό το repo, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στον τοπικό σας υπολογιστή και στη συνέχεια, στον root φάκελο αυτού του repo, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα εξυπηρετείται στην πόρτα 3000 του localhost σας: `localhost:3000`.
Μπορείτε να εκτελέσετε αυτήν την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κλωνοποιήστε αυτό το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στον τοπικό σας υπολογιστή και στη συνέχεια, στον ριζικό φάκελο αυτού του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα εξυπηρετηθεί στην θύρα 3000 του localhost σας: `localhost:3000`.
## 📘 PDF
Ένα PDF όλων των μαθημάτων μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Ένα PDF με όλα τα μαθήματα μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Άλλα Μαθήματα
@ -198,7 +202,7 @@ CO_OP_TRANSLATOR_METADATA:
## Άδεια Χρήσης
Αυτό το αποθετήριο έχει άδεια χρήσης υπό την άδεια MIT. Δείτε το αρχείο [LICENSE](../../LICENSE) για περισσότερες πληροφορίες.
Αυτό το αποθετήριο έχει άδεια χρήσης MIT. Δείτε το αρχείο [LICENSE](../../LICENSE) για περισσότερες πληροφορίες.
---

186
translations/th/README.md
Unescape View File

@ -1,8 +1,8 @@
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b672130244189715ac084c3259f6ab58",
"translation_date": "2025-08-26T21:19:34+00:00",
"original_hash": "efa251c5fc089367f0a81c572874afca",
"translation_date": "2025-08-28T02:55:50+00:00",
"source_file": "README.md",
"language_code": "th"
}
@ -21,164 +21,168 @@ CO_OP_TRANSLATOR_METADATA:
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# การพัฒนาเว็บไซต์สำหรับผู้เริ่มต้น - หลักสูตร
[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
เรียนรู้พื้นฐานการพัฒนาเว็บไซต์ผ่านหลักสูตร 12 สัปดาห์ที่ครอบคลุมโดย Microsoft Cloud Advocates แต่ละบทเรียนจากทั้งหมด 24 บทจะเจาะลึก JavaScript, CSS และ HTML ผ่านโปรเจกต์ที่ลงมือทำจริง เช่น การสร้างสวนขวดออนไลน์ ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีแบบทดสอบ การอภิปราย และงานที่ต้องทำเพื่อเพิ่มพูนทักษะของคุณ พร้อมทั้งช่วยให้คุณจดจำความรู้ได้อย่างมีประสิทธิภาพด้วยวิธีการเรียนรู้ที่เน้นโปรเจกต์ เริ่มต้นเส้นทางการเขียนโค้ดของคุณได้เลยวันนี้!
ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้นใช้งานทรัพยากรเหล่านี้:
1. **Fork Repository**: คลิก [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**เข้าร่วม Azure AI Foundry Discord เพื่อพบปะผู้เชี่ยวชาญและนักพัฒนาคนอื่นๆ**](https://discord.com/invite/ByRwuEEgH4)
#### 🧑‍🎓 _คุณเป็นนักเรียนหรือเปล่า?_
# การพัฒนาเว็บไซต์สำหรับผู้เริ่มต้น - หลักสูตร
เยี่ยมชม [**หน้าสำหรับนักเรียน**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ซึ่งคุณจะพบแหล่งข้อมูลสำหรับผู้เริ่มต้น ชุดเครื่องมือสำหรับนักเรียน และแม้กระทั่งวิธีการรับบัตรกำนัลสำหรับใบรับรองฟรี นี่คือหน้าที่คุณควรบันทึกไว้และกลับมาเช็คเป็นระยะ เพราะเราจะเปลี่ยนเนื้อหาใหม่ทุกเดือน
เรียนรู้พื้นฐานการพัฒนาเว็บไซต์ผ่านหลักสูตร 12 สัปดาห์ที่ครอบคลุมโดย Microsoft Cloud Advocates แต่ละบทเรียนทั้ง 24 บทจะเจาะลึก JavaScript, CSS และ HTML ผ่านโปรเจกต์ที่ลงมือทำจริง เช่น การสร้างสวนขวดออนไลน์ ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีแบบทดสอบ การอภิปราย และงานที่ต้องทำจริงเพื่อเพิ่มทักษะและช่วยให้คุณจดจำความรู้ได้อย่างมีประสิทธิภาพ เริ่มต้นเส้นทางการเขียนโค้ดของคุณวันนี้!
### 📣 ประกาศ - _หลักสูตรใหม่_ เกี่ยวกับ Generative AI สำหรับ JavaScript เพิ่งเปิดตัว
#### 🧑‍🎓 _คุณเป็นนักเรียนหรือเปล่า?_
อย่าพลาดหลักสูตรใหม่เกี่ยวกับ Generative AI!
เยี่ยมชม [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ซึ่งคุณจะพบทรัพยากรสำหรับผู้เริ่มต้น ชุดเครื่องมือสำหรับนักเรียน และวิธีการรับบัตรกำนัลใบรับรองฟรี นี่คือหน้าที่คุณควรบันทึกไว้และกลับมาเยี่ยมชมเป็นระยะๆ เพราะเราจะเปลี่ยนเนื้อหาใหม่ทุกเดือน
เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น!
### 📣 ประกาศ - _หลักสูตรใหม่_ เกี่ยวกับ Generative AI สำหรับ JavaScript เพิ่งเปิดตัว
<div>
<img src="./images/background.png" width="600px" />
</div>
อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา!
- บทเรียนที่ครอบคลุมตั้งแต่พื้นฐานจนถึง RAG
- โต้ตอบกับตัวละครในประวัติศาสตร์ผ่าน GenAI และแอปคู่หูของเรา
- เนื้อหาที่สนุกและน่าสนใจ คุณจะได้เดินทางข้ามเวลา!
เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น!
<div>
<img src="./images/character.png" width="600px" />
</div>
![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.th.png)
แต่ละบทเรียนประกอบด้วยงานที่ต้องทำ แบบทดสอบความรู้ และความท้าทายเพื่อช่วยให้คุณเรียนรู้หัวข้อต่าง ๆ เช่น:
- บทเรียนครอบคลุมตั้งแต่พื้นฐานจนถึง RAG
- โต้ตอบกับตัวละครในประวัติศาสตร์โดยใช้ GenAI และแอปคู่หูของเรา
- เนื้อเรื่องที่สนุกและน่าสนใจ คุณจะได้เดินทางข้ามเวลา!
![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.th.png)
แต่ละบทเรียนประกอบด้วยงานที่ต้องทำ แบบทดสอบความรู้ และความท้าทายเพื่อช่วยให้คุณเรียนรู้หัวข้อต่างๆ เช่น:
- การสร้างคำสั่งและการออกแบบคำสั่ง
- การสร้างแอปข้อความและภาพ
- แอปค้นหา
เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น!
เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น!
## 🌱 เริ่มต้นใช้งาน
## 🌱 เริ่มต้นใช้งาน
> **ครูผู้สอน**, เราได้ [รวมคำแนะนำบางส่วน](for-teachers.md) เกี่ยวกับวิธีการใช้หลักสูตรนี้ เราอยากได้ความคิดเห็นของคุณ [ในฟอรัมการอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **ครู**, เราได้ [รวมคำแนะนำบางส่วน](for-teachers.md) เกี่ยวกับวิธีการใช้หลักสูตรนี้ เราอยากได้ความคิดเห็นของคุณ [ในฟอรัมการอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[ผู้เรียน](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, สำหรับแต่ละบทเรียน เริ่มต้นด้วยแบบทดสอบก่อนการบรรยายและอ่านเนื้อหาบรรยายให้จบ ทำกิจกรรมต่าง ๆ และตรวจสอบความเข้าใจของคุณด้วยแบบทดสอบหลังการบรรยาย
**[ผู้เรียน](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, สำหรับแต่ละบทเรียน เริ่มต้นด้วยแบบทดสอบก่อนการบรรยายและอ่านเนื้อหาการบรรยาย ทำกิจกรรมต่างๆ และตรวจสอบความเข้าใจของคุณด้วยแบบทดสอบหลังการบรรยาย
เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ เชื่อมต่อกับเพื่อน ๆ เพื่อทำโปรเจกต์ร่วมกัน! การอภิปรายได้รับการสนับสนุนใน [ฟอรัมการอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ซึ่งทีมผู้ดูแลของเราจะพร้อมตอบคำถามของคุณ
เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ เชื่อมต่อกับเพื่อนๆ เพื่อทำโปรเจกต์ร่วมกัน! การอภิปรายได้รับการสนับสนุนใน [ฟอรัมการอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ซึ่งทีมผู้ดูแลของเราจะพร้อมตอบคำถามของคุณ
เพื่อการศึกษาที่ลึกซึ้งยิ่งขึ้น เราขอแนะนำให้สำรวจ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) สำหรับแหล่งข้อมูลการเรียนเพิ่มเติม
เพื่อการศึกษาต่อ เราขอแนะนำให้สำรวจ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) เพื่อค้นหาเนื้อหาการเรียนเพิ่มเติม
### 📋 การตั้งค่าสภาพแวดล้อมของคุณ
### 📋 การตั้งค่าสภาพแวดล้อมของคุณ
หลักสูตรนี้มีสภาพแวดล้อมการพัฒนาที่พร้อมใช้งาน! เมื่อคุณเริ่มต้น คุณสามารถเลือกที่จะรันหลักสูตรใน [Codespace](https://github.com/features/codespaces/) (_สภาพแวดล้อมที่ใช้เบราว์เซอร์ ไม่ต้องติดตั้งใด ๆ_) หรือในเครื่องคอมพิวเตอร์ของคุณโดยใช้โปรแกรมแก้ไขข้อความ เช่น [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
หลักสูตรนี้มีสภาพแวดล้อมการพัฒนาที่พร้อมใช้งาน! เมื่อคุณเริ่มต้น คุณสามารถเลือกที่จะเรียกใช้หลักสูตรใน [Codespace](https://github.com/features/codespaces/) (_สภาพแวดล้อมที่ใช้เบราว์เซอร์ ไม่ต้องติดตั้ง_) หรือในเครื่องคอมพิวเตอร์ของคุณโดยใช้โปรแกรมแก้ไขข้อความ เช่น [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
#### สร้างที่เก็บของคุณ
เพื่อให้คุณบันทึกงานของคุณได้ง่ายขึ้น ขอแนะนำให้คุณสร้างสำเนาของที่เก็บนี้ คุณสามารถทำได้โดยคลิกปุ่ม **Use this template** ที่ด้านบนของหน้า ซึ่งจะสร้างที่เก็บใหม่ในบัญชี GitHub ของคุณพร้อมสำเนาหลักสูตร
#### สร้าง Repository ของคุณ
เพื่อให้คุณบันทึกงานของคุณได้ง่ายขึ้น ขอแนะนำให้คุณสร้างสำเนาของ Repository นี้ คุณสามารถทำได้โดยคลิกปุ่ม **Use this template** ที่ด้านบนของหน้า ซึ่งจะสร้าง Repository ใหม่ในบัญชี GitHub ของคุณพร้อมสำเนาหลักสูตร
ทำตามขั้นตอนเหล่านี้:
1. **Fork ที่เก็บ**: คลิกปุ่ม "Fork" ที่มุมขวาบนของหน้านี้
2. **Clone ที่เก็บ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Fork Repository**: คลิกปุ่ม "Fork" ที่มุมขวาบนของหน้านี้
2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### การรันหลักสูตรใน Codespace
#### การเรียกใช้หลักสูตรใน Codespace
ในสำเนาที่เก็บของคุณที่คุณสร้างขึ้น คลิกปุ่ม **Code** และเลือก **Open with Codespaces** สิ่งนี้จะสร้าง Codespace ใหม่สำหรับคุณในการทำงาน
ในสำเนา Repository ของคุณที่คุณสร้างขึ้น คลิกปุ่ม **Code** และเลือก **Open with Codespaces** สิ่งนี้จะสร้าง Codespace ใหม่สำหรับคุณในการทำงาน
<img src="./images/createcodespace.png" alt="Create codespace" style="width:270px;"/>
[!Codespace](../..)./images/createcodespace.png)
#### การรันหลักสูตรในเครื่องคอมพิวเตอร์ของคุณ
#### การเรียกใช้หลักสูตรในเครื่องคอมพิวเตอร์ของคุณ
เพื่อรันหลักสูตรนี้ในเครื่องคอมพิวเตอร์ของคุณ คุณจะต้องมีโปรแกรมแก้ไขข้อความ เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา [Introduction to Programming Languages and Tools of the Trade](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages) จะอธิบายตัวเลือกต่าง ๆ สำหรับเครื่องมือเหล่านี้เพื่อให้คุณเลือกสิ่งที่เหมาะกับคุณที่สุด
เพื่อเรียกใช้หลักสูตรนี้ในเครื่องคอมพิวเตอร์ของคุณ คุณจะต้องมีโปรแกรมแก้ไขข้อความ เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) จะอธิบายตัวเลือกต่างๆ สำหรับเครื่องมือเหล่านี้เพื่อให้คุณเลือกสิ่งที่เหมาะสมที่สุดสำหรับคุณ
คำแนะนำของเราคือใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) เป็นโปรแกรมแก้ไข ซึ่งมี [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัว คุณสามารถดาวน์โหลด Visual Studio Code [ที่นี่](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
คำแนะนำของเราคือใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) เป็นโปรแกรมแก้ไข ซึ่งมี [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัว คุณสามารถดาวน์โหลด Visual Studio Code [ที่นี่](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
1. Clone ที่เก็บของคุณลงในเครื่องคอมพิวเตอร์ คุณสามารถทำได้โดยคลิกปุ่ม **Code** และคัดลอก URL:
1. Clone Repository ของคุณลงในคอมพิวเตอร์ของคุณ คุณสามารถทำได้โดยคลิกปุ่ม **Code** และคัดลอก URL:
<img src="./images/createcodespace.png" alt="Copy your repository URL" style="width:270px;"/>
[!CodeSpace](./images/createcodespace.png)
จากนั้น เปิด [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ใน [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) และรันคำสั่งต่อไปนี้ โดยแทนที่ `<your-repository-url>` ด้วย URL ที่คุณเพิ่งคัดลอก:
จากนั้น เปิด [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ใน [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) และรันคำสั่งต่อไปนี้ โดยแทนที่ `<your-repository-url>` ด้วย URL ที่คุณเพิ่งคัดลอก:
```bash
git clone <your-repository-url>
```
```
2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิก **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่ง Clone
2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิก **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่ง Clone
> ส่วนขยาย Visual Studio Code ที่แนะนำ:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - เพื่อดูตัวอย่างหน้า HTML ใน Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น
## 📂 แต่ละบทเรียนประกอบด้วย:
## 📂 แต่ละบทเรียนประกอบด้วย:
- ภาพสเก็ตช์ (ถ้ามี)
- วิดีโอเสริม (ถ้ามี)
- ภาพสเก็ตช์ (ตัวเลือก)
- วิดีโอเสริม (ตัวเลือก)
- แบบทดสอบก่อนบทเรียน
- เนื้อหาบทเรียนที่เขียนไว้
- บทเรียนที่เขียน
- สำหรับบทเรียนที่เน้นโปรเจกต์ มีคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการสร้างโปรเจกต์
- การตรวจสอบความรู้
- ความท้าทาย
- การอ่านเสริม
- งานที่ต้องทำ
- แบบทดสอบหลังบทเรียน
- [แบบทดสอบหลังบทเรียน](https://ff-quizzes.netlify.app/)
> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app มีทั้งหมด 48 แบบทดสอบ แต่ละแบบมี 3 คำถาม แบบทดสอบเหล่านี้เชื่อมโยงจากในบทเรียน และแอปแบบทดสอบสามารถรันในเครื่องหรือปรับใช้ใน Azure; ทำตามคำแนะนำในโฟลเดอร์ `quiz-app` แบบทดสอบกำลังอยู่ในกระบวนการแปลภาษา
> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวมทั้งหมด 48 แบบทดสอบ แต่ละแบบทดสอบมีสามคำถาม สามารถเข้าถึงได้ [ที่นี่](https://ff-quizzes.netlify.app/) แอปแบบทดสอบสามารถรันในเครื่องหรือ Deploy ไปยัง Azure; ทำตามคำแนะนำในโฟลเดอร์ `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 | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | [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 รวมถึงการทำให้หน้าเว็บตอบสนอง | [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) | สร้างเกมพิมพ์ | เรียนรู้วิธีใช้เหตุการณ์คีย์บอร์ดเพื่อขับเคลื่อนตรรกะของแอป JavaScript | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การทำงานร่วมกับเบราว์เซอร์ | เรียนรู้เกี่ยวกับการทำงานของเบราว์เซอร์ ประวัติของมัน และวิธีการสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์ | [เกี่ยวกับเบราว์เซอร์](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | การสร้างฟอร์ม เรียก API และจัดเก็บตัวแปรใน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์เพื่อเรียก API โดยใช้ตัวแปรที่จัดเก็บใน local storage | [APIs, Forms, และ Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | กระบวนการเบื้องหลังในเบราว์เซอร์ และประสิทธิภาพเว็บ | ใช้กระบวนการเบื้องหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการปรับปรุงบางอย่างเพื่อเพิ่มประสิทธิภาพ | [งานเบื้องหลังและประสิทธิภาพ](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมตัวสำหรับการสร้างเกม | [แนะนำการพัฒนาเกมขั้นสูง](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | การวาดลงบน canvas | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบลงบนหน้าจอ | [การวาดลงบน Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบบนหน้าจอ | ค้นพบวิธีที่องค์ประกอบสามารถเคลื่อนไหวได้โดยใช้พิกัด Cartesian และ Canvas API | [การเคลื่อนย้ายองค์ประกอบ](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | การตรวจจับการชนกัน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม และเพิ่มฟังก์ชัน cooldown เพื่อให้เกมมีประสิทธิภาพ | [การตรวจจับการชนกัน](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | การนับคะแนน | ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | [การนับคะแนน](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | การจบและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการจบและเริ่มเกมใหม่ รวมถึงการทำความสะอาดทรัพยากรและการรีเซ็ตค่าตัวแปร | [เงื่อนไขการจบเกม](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML Templates และ Routes ในเว็บแอป | เรียนรู้วิธีการสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ routing และ HTML templates | [HTML Templates และ Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | การสร้างฟอร์มเข้าสู่ระบบและลงทะเบียน | เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการกระบวนการตรวจสอบ | [ฟอร์ม](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | วิธีการดึงข้อมูลและการใช้งานข้อมูล | วิธีการที่ข้อมูลไหลเข้าและออกจากแอปของคุณ วิธีการดึงข้อมูล จัดเก็บ และกำจัดข้อมูล | [ข้อมูล](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | แนวคิดเกี่ยวกับการจัดการสถานะ | เรียนรู้ว่าแอปของคุณรักษาสถานะอย่างไรและวิธีการจัดการสถานะด้วยโปรแกรม | [การจัดการสถานะ](/7-bank-project/4-state-management/README.md) | Yohan |
| | ชื่อโปรเจกต์ | แนวคิดที่สอน | วัตถุประสงค์การเรียนรู้ | บทเรียนที่เชื่อมโยง | ผู้เขียน |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 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 | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | [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 รวมถึงการทำให้หน้าเว็บตอบสนอง | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | การใช้ JavaScript Closures และการจัดการ DOM | สร้าง JavaScript เพื่อทำให้ terrarium ทำงานเป็นอินเทอร์เฟซแบบลากและวาง โดยเน้นที่ 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) | สร้างเกมพิมพ์ดีด | เรียนรู้วิธีใช้เหตุการณ์จากคีย์บอร์ดเพื่อควบคุมตรรกะของแอป JavaScript ของคุณ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การทำงานกับเบราว์เซอร์ | เรียนรู้ว่าเบราว์เซอร์ทำงานอย่างไร ประวัติของมัน และวิธีการสร้างองค์ประกอบแรกของส่วนขยายเบราว์เซอร์ | [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 ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก 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) | กระบวนการเบื้องหลังในเบราว์เซอร์, ประสิทธิภาพของเว็บ | ใช้กระบวนการเบื้องหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; เรียนรู้เกี่ยวกับประสิทธิภาพของเว็บและการปรับปรุงบางอย่าง | [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 | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ 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) | การตรวจจับการชนกัน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม และเพิ่มฟังก์ชัน cooldown เพื่อให้เกมทำงานได้อย่างมีประสิทธิภาพ | [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 Templates และ 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 Management](./7-bank-project/4-state-management/README.md) | Yohan |
## 🏫 การเรียนการสอน
## 🏫 การสอน
หลักสูตรของเราออกแบบโดยยึดหลักการเรียนการสอนสำคัญสองประการ:
* การเรียนรู้แบบโครงการ
* การทำแบบทดสอบบ่อยครั้ง
หลักสูตรของเราออกแบบโดยยึดหลักการสอนสำคัญสองประการ:
* การเรียนรู้ผ่านโครงการ
* แบบทดสอบบ่อยครั้ง
โปรแกรมนี้สอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บในปัจจุบันใช้ นักเรียนจะมีโอกาสพัฒนาประสบการณ์จริงโดยการสร้างเกมพิมพ์ข้อความ, สวนเสมือน, ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม, เกมสไตล์ Space Invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบหลักสูตรนี้ นักเรียนจะมีความเข้าใจที่มั่นคงเกี่ยวกับการพัฒนาเว็บ
โปรแกรมนี้สอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บในปัจจุบันใช้ นักเรียนจะมีโอกาสพัฒนาประสบการณ์จริงโดยการสร้างเกมพิมพ์ดีด, terrarium เสมือน, ส่วนขยายเบราว์เซอร์ที่เป็นมิตรต่อสิ่งแวดล้อม, เกมสไตล์ space-invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบหลักสูตร นักเรียนจะมีความเข้าใจที่มั่นคงเกี่ยวกับการพัฒนาเว็บ
> 🎓 คุณสามารถเรียนบทเรียนแรกในหลักสูตรนี้ได้ใน [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn!
> 🎓 คุณสามารถเรียนบทเรียนแรกๆ ในหลักสูตรนี้ได้ในรูปแบบ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn!
โดยการทำให้เนื้อหาสอดคล้องกับโครงการ กระบวนการเรียนรู้จะน่าสนใจยิ่งขึ้นสำหรับนักเรียน และการจดจำแนวคิดจะเพิ่มขึ้น เราได้เขียนบทเรียนเริ่มต้นหลายบทในพื้นฐาน JavaScript เพื่อแนะนำแนวคิด พร้อมกับวิดีโอจาก "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" คอลเลกชันวิดีโอสอน ซึ่งบางส่วนของผู้เขียนได้มีส่วนร่วมในหลักสูตรนี้
ด้วยการทำให้เนื้อหาสอดคล้องกับโครงการ กระบวนการเรียนรู้จะน่าสนใจยิ่งขึ้นสำหรับนักเรียน และช่วยเพิ่มการจดจำแนวคิด นอกจากนี้ เรายังเขียนบทเรียนเริ่มต้นในพื้นฐาน JavaScript เพื่อแนะนำแนวคิดต่างๆ ควบคู่ไปกับวิดีโอจาก "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ซึ่งผู้เขียนบางส่วนมีส่วนร่วมในหลักสูตรนี้
นอกจากนี้ การทำแบบทดสอบที่มีความเสี่ยงต่ำก่อนเรียนจะช่วยตั้งเป้าหมายของนักเรียนในการเรียนรู้หัวข้อ และการทำแบบทดสอบครั้งที่สองหลังเรียนจะช่วยเพิ่มการจดจำ หลักสูตรนี้ออกแบบมาให้ยืดหยุ่นและสนุกสนาน และสามารถเรียนได้ทั้งแบบเต็มหรือบางส่วน โครงการเริ่มต้นจากขนาดเล็กและมีความซับซ้อนมากขึ้นเมื่อจบวงจร 12 สัปดาห์
นอกจากนี้ แบบทดสอบที่มีความเสี่ยงต่ำก่อนเรียนจะช่วยตั้งเป้าหมายให้นักเรียนมุ่งเน้นไปที่การเรียนรู้หัวข้อ ขณะที่แบบทดสอบหลังเรียนจะช่วยเพิ่มการจดจำแนวคิด หลักสูตรนี้ออกแบบมาให้ยืดหยุ่นและสนุกสนาน และสามารถเรียนได้ทั้งหมดหรือบางส่วน โครงการเริ่มต้นจากขนาดเล็กและมีความซับซ้อนมากขึ้นในช่วง 12 สัปดาห์
แม้ว่าเราจะหลีกเลี่ยงการแนะนำ JavaScript frameworks เพื่อมุ่งเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะนำ framework มาใช้ ขั้นตอนต่อไปที่ดีหลังจากจบหลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านคอลเลกชันวิดีโออีกชุดหนึ่ง: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
แม้ว่าเราจะหลีกเลี่ยงการแนะนำ JavaScript frameworks เพื่อมุ่งเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะใช้ framework แต่ขั้นตอนต่อไปที่ดีหลังจากจบหลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านวิดีโอชุด "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และ [Contributing](CONTRIBUTING.md) ของเรา เรายินดีรับฟังความคิดเห็นที่สร้างสรรค์ของคุณ!
## 🧭 การเข้าถึงแบบออฟไลน์
คุณสามารถเรียกใช้เอกสารนี้แบบออฟไลน์โดยใช้ [Docsify](https://docsify.js.org/#/). Fork repo นี้, [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนเครื่องของคุณ และในโฟลเดอร์ root ของ repo นี้ ให้พิมพ์ `docsify serve`. เว็บไซต์จะถูกให้บริการบนพอร์ต 3000 บน localhost ของคุณ: `localhost:3000`.
คุณสามารถเรียกใช้เอกสารนี้แบบออฟไลน์ได้โดยใช้ [Docsify](https://docsify.js.org/#/). Fork repo นี้, [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนเครื่องของคุณ และในโฟลเดอร์ root ของ repo นี้ ให้พิมพ์ `docsify serve`. เว็บไซต์จะถูกให้บริการบนพอร์ต 3000 บน localhost ของคุณ: `localhost:3000`.
## 📘 PDF
PDF ของบทเรียนทั้งหมดสามารถพบได้ [ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
คุณสามารถดาวน์โหลด PDF ของบทเรียนทั้งหมดได้ [ที่นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 หลักสูตรอื่น ๆ
## 🎒 หลักสูตรอื่นๆ
ทีมของเราผลิตหลักสูตรอื่น ๆ! ลองดู:
ทีมของเราผลิตหลักสูตรอื่นๆ ด้วย! ลองดู:
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
@ -195,11 +199,11 @@ PDF ของบทเรียนทั้งหมดสามารถพบ
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
## License
## ใบอนุญาต
Repo นี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม.
Repo นี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม
---
**ข้อจำกัดความรับผิดชอบ**:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้องมากที่สุด แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้องมากที่สุด แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้
Write Preview
Loading…
Cancel
Save