Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο 12-εβδομάδων μάθημα που αναπτύχθηκε από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα αποθετήριο εκπαιδευτικού προγράμματος για τη διδασκαλία των βασικών της ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα αποτελείται από ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Βασικά Στοιχεία
### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα σε μονάδες βάση έργων
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Τραπεζική Εφαρμογή, Επεξεργαστής Κώδικα και Βοηθός AI Chat
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολυγλωσσικότητας**: Αυτόματες μεταφράσεις για 50+ γλώσσες μέσω GitHub Actions
Για λεπτομερείς οδηγίες στα μεμονωμένα έργα, ανατρέξτε στα αρχεία README:
- `quiz-app/README.md` - Εφαρμογή κουίζ Vue 3
- `7-bank-project/README.md` - Τραπεζική εφαρμογή με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού με καμβά
- `9-chat-project/README.md` - Έργο βοηθού AI chat
Για λεπτομερείς οδηγίες στα επιμέρους έργα, ανατρέξτε στα αρχεία README στα:
- `quiz-app/README.md` - Εφαρμογή quiz Vue 3
- `7-bank-project/README.md` - Εφαρμογή τραπεζικού με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού με Canvas
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI
### Δομή Monorepo
Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Μπορείτε ναδουλεύετε σε μεμονωμένα έργα χωρίς να επηρεάζετε άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριογια πλήρη εμπειρία προγράμματος σπουδών
Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Μπορείτε ναεργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζονται τα υπόλοιπα
- Κλωνοποιήστε ολόκληρο το repoγια πλήρη εμπειρία προγράμματος
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση Ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτόματες μεταφράσεις ενδέχεταινα περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα προέλευσής του πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρανοήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Αποποίηση ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορείνα περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες συνιστάται η επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που απορρέουν από τη χρήση αυτής της μετάφρασης.
# Ανάπτυξη Ιστού για Αρχαρίους - Ένα Πρόγραμμα Σπουδών
# Ανάπτυξη Ιστοσελίδων για Αρχάριους - Ένα Πρόγραμμα Σπουδών
Μάθετε τα βασικά της ανάπτυξης ιστοσελίδων με το ολοκληρωμένο 12-εβδομαδιαίο μάθημά μας από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραριαμικά, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Συμμετέχετε σε κουίζ, συζητήσεις και πρακτικές αναθέσεις. Βελτιώστε τις δεξιότητές σας και μεγιστοποιήστε τη διατήρηση γνώσεων με την αποτελεσματική παιδαγωγική μας που βασίζεται σε έργα. Ξεκινήστε το ταξίδι κωδικοποίησής σας σήμερα!
Μάθετε τα βασικά της ανάπτυξης ιστοσελίδων με το ολοκληρωμένο μας μάθημα διάρκειας 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεράριουμ, επεκτάσεις προγράμματος περιήγησης και διαστημικά παιχνίδια. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Βελτιώστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με τη στοχευμένη μας παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!
Γίνετε μέλος της κοινότητας Azure AI Foundry στο Discord
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών, που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς μεταφράσεις, χρησιμοποιήστε τον αραιό έλεγχο:
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις που αυξάνουν σημαντικά το μέγεθος λήψης. Για κλωνοποίηση χωρίς μεταφράσεις, χρησιμοποιήστε sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,39 +51,39 @@
> Αυτό σας δίνει όλα όσα χρειάζεστε γιανα ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Είστε φοιτητής;_
#### 🧑🎓 _Είσαι φοιτητής;_
Επισκεφθείτε τη [**Σελίδα για Φοιτητές**](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) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμη τρόπους να αποκτήσετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που αξίζει να αποθηκεύσετε στα αγαπημένα και να ελέγχετε τακτικά καθώς ανανεώνουμε το περιεχόμενο κάθε μήνα.
Νέα πρόκληση προστέθηκε, ψάξτε για "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
Προστέθηκε νέα Πρόκληση, αναζητήστε "GitHub Copilot Agent Challenge 🚀" στις περισσότερες ενότητες. Πρόκειται για νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, αυτή μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
### 📣 Ανακοίνωση - _Νέο Έργο γιακατασκευή με τη χρήση Generative AI_
### 📣 Ανακοίνωση - _Νέο Έργο γιαδημιουργία με τη χρήση Γενετικής Τεχνητής Νοημοσύνης_
Πρόσφατα προστέθηκε ένα νέο έργο βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
Μόλις προστέθηκε νέο έργο AI Assistant, ρίξτε μια ματιά στο [έργο](./9-chat-project/README.md)
### 📣 Ανακοίνωση - _Νέοπρόγραμμα σπουδών_ για Generative AIγια JavaScript μόλις κυκλοφόρησε
### 📣 Ανακοίνωση - _ΝέοΠρόγραμμα Σπουδών_ για Γενετική Τεχνητή Νοημοσύνηγια JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα σπουδών για Generative AI!
Μην χάσετε το νέο μας πρόγραμμα Γενετικής Τεχνητής Νοημοσύνης!
Κάθε μάθημα περιλαμβάνει ανάθεση για ολοκλήρωση, έλεγχο γνώσεων και πρόκληση που σας καθοδηγούν στην εκμάθηση θεμάτων όπως:
- Πώς να δημιουργείτε prompts και μηχανική prompts
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσεων και μια πρόκληση που θα σας καθοδηγήσει στην εκμάθηση θεμάτων όπως:
- Δημιουργία προτροπών και τεχνική prompt engineering
- Δημιουργία εφαρμογών κειμένου και εικόνας
- Εφαρμογές αναζήτησης
@ -93,130 +93,130 @@
## 🌱 Ξεκινώντας
> **Καθηγητές**, έχουμε [συμπεριλάβει ορισμένες προτάσεις](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 με ένα αντίγραφο του προγράμματος σπουδών.
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε πατώντας το κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Ακολουθήστε αυτά τα βήματα:
1. **Δημιουργήστε Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην επάνω δεξιά γωνία αυτής της σελίδας.
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 γιανα δουλέψετε μέσα.
#### Τρέξιμο του προγράμματος τοπικά στον υπολογιστή σας
#### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας
Για να τρέξετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία](../../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) ως επεξεργαστή σας, που έχει επίσης ενσωματωμένο [τερματικό](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:
Ηπρότασή μας είναι να χρησιμοποιήσετε το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως τον επεξεργαστή σας, που διαθέτει επίσης ενσωματωμένο [Τερματικό](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:
[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 που μόλις αντιγράψατε:
Στη συνέχεια, ανοίξτε το [Τερματικό](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:
> Προτεινόμενες επεκτάσεις για το Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code
- [quiz μετά το μάθημα](https://ff-quizzes.netlify.app/web/)
> **Σημείωση σχετικά με τα quiz**: Όλα τα quiz περιέχονται στο φάκελο Quiz-app, συνολικά 48 quiz με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/), η εφαρμογή quiz μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`.
> **Μια σημείωση για τα quiz**: Όλα τα quiz περιέχονται στον φάκελο Quiz-app, συνολικά 48 quiz με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) και η εφαρμογή quiz μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο 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 |
| 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 για ένα διαδικτυακό terrarium, εστιάζοντας στην κατασκευή μιας διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην Πράξη | Δημιουργήστε το CSS γιατο στυλ του διαδικτυακού terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της ανταπόκρισης της σελίδας | [Εισαγωγή στο 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 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε τα γεγονότα πληκτρολογίου γιανα κατευθύνετε τη λογική της εφαρμογής JavaScript | [Προγραμματισμός με βάση τα γεγονότα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθηκευτικό χώρο | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες τοπικά | [APIs, Φόρμες και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Φόντινες διεργασίες στον περιηγητή, απόδοση ιστοσελίδας | Χρησιμοποιήστε τις φόντινες διεργασίες του περιηγητή γιανα διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση του ιστού και ορισμένες βελτιστοποιήσεις | [Φόντινες εργασίες και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας και Κλάσεις και Σύνθεση και το πρότυπο Pub/Sub, ως προετοιμασία για τη δημιουργία παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση στον καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται γιανα ζωγραφίζετε στοιχεία σε οθόνη | [Σχεδίαση στον Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν νααποκτούν κίνηση χρησιμοποιώντας τα καρτεσιανά συντεταγμένα και το Canvas API | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν το ένα στο άλλο χρησιμοποιώντας πατήματα και παρέχετε λειτουργία ψύξης για τη βελτίωση της απόδοσης του παιχνιδιού | [Ανίχνευση Συγκρούσεων](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Διατήρηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και απόδοση του παιχνιδιού | [Διατήρηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς τιμών μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Ιστοσελίδα | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας δρομολόγηση και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση ρουτινών ελέγχου | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Λήψης και Χρήσης Δεδομένων | Πώς τα δεδομένα ρέουν μέσα κι έξω από την εφαρμογή σας, πώς να τα λαμβάνετε, να τα αποθηκεύετε και να τα απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Κώδικας Browser/VScode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση του επεξεργαστή κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με ΤΝ | Μάθετε πώς να φτιάξετε τον δικό σας βοηθό ΤΝ | [Έργο βοηθού ΤΝ](./9-chat-project/README.md) | Chris |
| 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 γιανα φτιάξετε ένα διαδικτυακό terrarium, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην Πράξη | Δημιουργήστε το CSS γιανα στυλιζάρετε το διαδικτυακό terrarium, εστιάζοντας στα βασικά του CSS και το responsive design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε το JavaScript ώστε το terrarium να λειτουργεί με drag/drop interface, εστιάζοντας στα closures και χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου γιανα καθοδηγήσετε τη λογική της εφαρμογής JavaScript σας | [Προγραμματισμός με συμβάντα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους, και πώς να στήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών τοπικά | Δημιουργήστε τα JavaScript στοιχεία της επέκτασης περιηγητή σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες τοπικά | [APIs, Φόρμες και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Παρασκηνιακές διεργασίες στον περιηγητή, απόδοση στο web | Χρησιμοποιήστε τις παρασκηνιακές διεργασίες του περιηγητή γιανα διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση και βελτιστοποιήσεις | [Παρασκηνιακές Εργασίες και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιού με JavaScript | Μάθετε για την κληρονομικότητα μέσω Κλάσεων και Σύνθεσης καθώς και το μοτίβο Pub/Sub, προετοιμαζόμενοι για ανάπτυξη παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιού](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται γιατη σχεδίαση στοιχείων σε οθόνη | [Σχεδίαση σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν νακινηθούν χρησιμοποιώντας καρτεσιανές συντεταγμένες και το Canvas API | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση Σύγκρουσης | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε συνάρτηση cooldown για την απόδοση του παιχνιδιού | [Ανίχνευση Σύγκρουσης](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Καταμέτρηση Βαθμολογίας | Πραγματοποιήστε μαθηματικούς υπολογισμούς βάσει της κατάστασης και της απόδοσης του παιχνιδιού | [Καταμέτρηση Βαθμολογίας](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς μεταβλητών | [Ο Όρος Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας διαδρομές και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και διαχείριση ελέγχων εγκυρότητας | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτάτε, αποθηκεύετε και απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Κώδικας Browser/VScode](../../8-code-editor) | Εργασία με VScode | Μάθετε πώς να χρησιμοποιείτε έναν κειμενογράφο κώδικα| [Χρήση του Visual Studio Code](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με Τεχνητή Νοημοσύνη | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό AI | [Έργο Βοηθού AI](./9-chat-project/README.md) | Chris |
## 🏫 Παιδαγωγική
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές στο μυαλό:
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές κατά νου:
* μάθηση βασισμένη σε έργα
* συχνά quiz
Το πρόγραμμα διδάσκει τα βασικά του JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σημερινοί προγραμματιστές ιστού. Οι σπουδαστές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία χτίζοντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια φιλική προς το περιβάλλον επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια τραπεζική εφαρμογήγια επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει σταθερή κατανόηση της ανάπτυξης ιστού.
Το πρόγραμμα διδάσκει τα θεμέλια της JavaScript, HTML και CSS, καθώς και τα πιο σύγχρονα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστοσελίδων. Οι μαθητές θα έχουν την ευκαιρία να αναπτύξουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια οικολογική επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια εφαρμογή τραπεζικήςγια επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια στέρεη κατανόηση της ανάπτυξης ιστού.
> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα λίγα μαθήματα αυτού του προγράμματος σπουδών ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα μαθήματα αυτής της ύλης ως [Μονοπάτι Μάθησης](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)", με ορισμένους από τους συγγραφείς της να συμβάλλουν σ' αυτό το πρόγραμμα σπουδών.
Επιπλέον, ένα ανεπίσημο quiz πριν από το μάθημα θέτει τον σκοπό του μαθητή προς την εκμάθηση μιας θεματικής ενότητας, ενώ ένα δεύτερο quiz μετά το μάθημα διασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών έχει σχεδιαστεί ώστενα είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί στο σύνολό του ή μεμονωμένα τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα μέχρι το τέλος του δωδεκαβδομαδιαίου κύκλου.
Επιπλέον, ένα quiz χαμηλής έντασης πριν από το μάθημα θέτει την πρόθεση του μαθητή για τη μάθηση ενός θέματος, ενώ ένα δεύτερο quiz μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση γνώσεων. Το πρόγραμμα σπουδών έχει σχεδιαστεί να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή μερικώς. Τα έργα ξεκινούν μικρά και γίνονται ολοένα και πιο σύνθετα μέχρι το τέλος του 12-εβδομάδων κύκλου.
Ενώ έχουμε σκοπίμως αποφύγει την εισαγωγή πλαισίων JavaScript γιανα επικεντρωθούμε στις βασικές δεξιότητες που χρειάζεται ένας προγραμματιστής ιστού πριν την υιοθέτηση πλαισίου, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος σπουδών θα ήταν η εκμάθηση του 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). Καλωσορίζουμε τις εποικοδομητικές σας παρατηρήσεις!
> Επισκεφτείτε τους [Κανόνες Συμπεριφοράς](CODE_OF_CONDUCT.md) και τις οδηγίες [Συμμετοχής](CONTRIBUTING.md). Καλωσορίζουμε τα εποικοδομητικά σας σχόλια!
## 🧭 Πρόσβαση εκτός σύνδεσης
Μπορείτε νατρέξετε αυτή την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κλωνοποιήστε το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στον τοπικό σας υπολογιστή και μετά στον ριζικό φάκελο του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην θύρα 3000 στο τοπικό σας μηχάνημα: `localhost:3000`.
Μπορείτε ναεκτελέσετε αυτή την τεκμηρίωση χωρίς σύνδεση χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κάντε fork αυτό το αποθετήριο, [εγκαταστήστε το 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).
## 🎒 Άλλα Μαθήματα
Η ομάδα μας παράγει και άλλα μαθήματα! Δείτε:
Η ομάδα μας δημιουργεί και άλλα μαθήματα! Ρίξτε μια ματιά:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -233,7 +233,7 @@
---
### Σειρά για Τη Γενετική Τεχνητή Νοημοσύνη
### Generative AI Series
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -241,7 +241,7 @@
---
### Βασική Μάθηση
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -252,7 +252,7 @@
---
### Σειρά Copilot
### Copilot Series
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Αν κολλήσετε ή έχετε απορίες σχετικά με την ανάπτυξη εφαρμογών ΤΝ, συμμετάσχετε σε συζητήσεις με άλλους μαθητές και έμπειρους προγραμματιστές για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αν κολλήσετε ή έχετε οποιεσδήποτε ερωτήσεις σχετικά με την ανάπτυξη εφαρμογών AI. Ενταχθείτε σε άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αυτό το αποθετήριο έχει άδεια υπό την άδεια MIT. Δείτε το αρχείο [LICENSE](../../LICENSE) για περισσότερες πληροφορίες.
Αυτό το αποθετήριο έχει αδειοδοτηθεί υπό την άδεια MIT. Δείτε το αρχείο [LICENSE](../../LICENSE) για περισσότερες πληροφορίες.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθυνών**:
Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρότι προσπαθούμε για ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Τοαρχικό έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε σημειώστε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Τοπρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε καμία ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Detta är ett utbildningsmaterial för att lära ut grundläggande webbutveckling för nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningscurriculum-repository för att undervisa grundläggande webbutveckling för nybörjare. Curriculumet är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Nyckelkomponenter
### Viktiga komponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
Även om detta inte är ett traditionellt monorepo, innehåller arkivet flera oberoende projekt:
- Varje lektion är fristående
- Projekten delar inga beroenden
- Arbeta på individuella projekt utan att påverka andra
- Klona hela arkivet för full kursplanserfarenhet
Även om detta inte är ett traditionellt monorepo, innehåller detta repository flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inte beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela repo för fullständig curriculumupplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess modersmål bör anses vara den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen observera att automatiska översättningar kan innehålla fel eller unøyaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
Lär dig grunderna i webb utveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Var och en av de 24 lektionerna dyker ner i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
Lär dig grunderna i webbplatsutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna går på djupet i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Engagera dig i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbehållning med vår effektiva projektbaserade pedagogik. Starta din kodningsresa idag!
> Detta repository innehåller över 50 språköversättningar vilket ökar nedladdningsstorleken avsevärt. För att klona utan översättningar, använd sparsamt utcheckning:
> Detta repo inkluderar 50+ språköversättningar vilket avsevärt ökar storleken på nedladdningen. För att klona utan översättningar, använd sparsamt incheckning:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,41 +51,41 @@ Följ dessa steg för att komma igång med att använda dessa resurser:
> Detta ger dig allt du behöver för att slutföra kursen med en mycket snabbare nedladdning.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Om du vill ha ytterligare språkstöd finns de listade [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Om du önskar stöd för flera översättningsspråk finns listade [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Är du student?_
Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och till och med sätt att få ett gratis certifikatvoucher. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi uppdaterar innehåll varje månad.
Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och till och med sätt att få en gratis certifikatkupong. Detta är sidan du vill bokmärka och kolla av med jämna mellanrum eftersom vi byter ut innehåll varje månad.
### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar att slutföra!
### 📣 Tillkännagivande - Nya GitHub Copilot Agent-läges utmaningar att slutföra!
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med GitHub Copilot och Agent-läget. Om du inte använt Agent-läget tidigare kan det inte bara generera text, utan även skapa och redigera filer, köra kommandon och mer.
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att klara av med GitHub Copilot och Agent-läge. Om du inte har använt Agent-läget tidigare kan det inte bara generera text utan också skapa och redigera filer, köra kommandon med mera.
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
### 📣 Tillkännagivande - _Nytt projekt att bygga med Generativ AI_
Nytt AI-assistentprojekt just tillagt, kolla in det [projektet](./9-chat-project/README.md)
Nytt AI Assistant-projekt precis tillagt, kolla in det [projekt](./9-chat-project/README.md)
### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript har just släppts
### 📣 Tillkännagivande - _Ny läroplan_ för Generativ AI för JavaScript har just släppts
Missa inte vår nya Generativ AI-läroplan!
Missa inte vår nya läroplan för Generativ AI!
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning som guidar dig i att lära dig ämnen som:
- Prompting och promptteknik
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i ämnen som:
- Prompting och prompt-engineering
- Text- och bildappsgenerering
- Sökappar
- Sökningsappar
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
@ -93,41 +93,41 @@ Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att
## 🌱 Komma igång
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) på hur man använder denna läroplan. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) på hur man kan använda denna läroplan. Vi vill gärna ha din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett förföreläsningsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med efterföreläsningsquizet.
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett för-quiz och fortsätt sedan med att läsa lektionsmaterialet, slutföra olika aktiviteter och kontrollera din förståelse med efter-quizet.
För att förbättra din lärandeupplevelse, koppla ihop med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns tillgängliga för att svara på dina frågor.
För att förbättra din lärandeupplevelse, koppla ihop dig med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer kommer att finnas tillgängliga för att svara på dina frågor.
För att fördjupa din utbildning rekommenderar vi starkt att utforska [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial.
För att fördjupa din utbildning rekommenderar vi starkt att du utforskar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial.
### 📋 Ställa in din miljö
### 📋 Sätta upp din miljö
Denna läroplan har en utvecklingsmiljö redo att användas! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan behov av installation_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Denna läroplan har en utvecklingsmiljö klar att använda! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan krav på installation_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Skapa ditt repository
För att enkelt spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt repository i ditt GitHub-konto med en kopia av läroplanen.
#### Skapa ditt arkiv
För att du enkelt ska kunna spara ditt arbete rekommenderas det att du skapar en egen kopia av detta arkiv. Det kan du göra genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt arkiv på ditt GitHub-konto med en kopia av läroplanen.
Följ dessa steg:
1. **Forka Repositoryt**: Klicka på knappen "Fork" uppe i högra hörnet på denna sida.
I din kopia av detta repository som du skapade, klicka på knappen **Code** och välj **Open with Codespaces**. Detta kommer att skapa en ny Codespace för dig att arbeta i.
I din kopia av detta arkiv som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta kommer att skapa en ny Codespace för dig att arbeta i.
För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg för yrket](../../1-getting-started-lessons/1-intro-to-programming-languages), guidar dig genom olika alternativ för var och en av dessa verktyg så att du kan välja det som passar dig bäst.
För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg](../../1-getting-started-lessons/1-intro-to-programming-languages), kommer att guida dig genom olika alternativ för varje verktyg så att du kan välja det som passar dig bäst.
Vår rekommendation är att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din redigerare, som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Vår rekommendation är att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din redigerare, som också har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klona ditt repository till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:en:
[CodeSpace](./images/createcodespace.png)
Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, där du byter ut `<your-repository-url>` mot URL:en du just kopierade:
Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, ersätt `<your-repository-url>` med URL:en du precis kopierade:
```bash
git clone <your-repository-url>
@ -135,81 +135,83 @@ Vår rekommendation är att använda [Visual Studio Code](https://code.visualstu
2. Öppna mappen i Visual Studio Code. Du kan göra detta genom att klicka på **File** > **Open Folder** och välja den mapp du just klonade.
> Rekommenderade tillägg för Visual Studio Code:
> Rekommenderade Visual Studio Code-tillägg:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor inom Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - för att hjälpa dig skriva kod snabbare
## 📂 Varje lektion innehåller:
- valfritt skissnotat
- valfri sketchnote
- valfri kompletterande video
- värmande quiz före lektionen
- skriven lektion
- för projektbaserade lektioner, steg-för-steg-guider för att bygga projektet
- uppvärmningsquiz före lektionen
- skriftlig lektion
- steg-för-steg guider för projektbaserade lektioner om hur man bygger projektet
- kunskapskontroller
- en utmaning
- kompletterande läsning
- uppgift
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/) och quizappen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`-mappen.
> **En notis om quiz**: Alla quiz finns i Quiz-app mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/). Quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`mappen.
## 🗃️ Lektioner
| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare |
| 01 | Kom igång | Introduktion till programmering och verktyg | Lär dig grundläggande principer bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare | [Introduktion till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kom igång | Grundläggande GitHub, inkluderar arbete i team | Hur du använder GitHub i ditt projekt och samarbetar med andra på en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbåtkomst | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS-grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera logiken i en applikation | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS-grunder | Beslutsfattande med JS | Lär dig skapa villkor i din kod med beslutsmetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-grunder | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML för att skapa ett online-terrarium, med fokus på layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS för att styla online-terrarium, med fokus på grunder i CSS inklusive responsiv design | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulering | Bygg JavaScript för att göra terrariet till en drag-och-släpp-gränssnitt, med fokus på closures och DOM-manipulering | [JavaScript-closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbords-event för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skapar basen för ett webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Skapa ett formulär, anropa en API och lagra variabler i lokal lagring | Bygg JavaScript-element i ditt webbläsartillägg för att anropa en API med variabler lagrade i lokal lagring | [API:er, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbsida prestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar för att förbättra | [Bakgrundsprocesser och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på en skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få element att kollidera och reagera på varandra med tangenttryckningar samt skapa en cooldown-funktion för att säkerställa spelets prestanda | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserade på spelets status och prestation | [Poängräkning](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att rensa tillgångar och återställa variabler | [Avslutsvillkor](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa skalmallen för en webbplats med flera sidor med routing och HTML-mallar | [HTML-mallar och rutter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg ett inloggnings- och registreringsformulär | Lär dig bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur man hämtar, lagrar och slänger den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp kring state management | Lär dig hur din app behåller state och hur du hanterar det programmatiskt | [State management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig använda en kodredigerare| [Använd VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig bygga din egen AI-assistent | [AI Assistant-projekt](./9-chat-project/README.md) | Chris |
| 01 | Komma igång | Introduktion till programmering och verktyg | Lära sig grunderna bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare i deras arbete | [Intro till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Komma igång | Grunderna i GitHub, inklusive samarbete i team | Hur man använder GitHub i ditt projekt och samarbetar med andra på en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komma igång | Tillgänglighet | Lära sig grunderna i webbtillgänglighet | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Grunder | Funktioner och Metoder | Lära sig om funktioner och metoder för att hantera en applikations logik | [Funktioner och Metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Grunder | Beslutsfattande med JS | Lära sig skapa villkor i koden med beslutsfattandemetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunder | Arrayer och Loopar | Arbeta med data genom arrayer och loopar i JavaScript | [Arrayer och Loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygga HTML för att skapa ett online-terrarium, med fokus på layoutbygge| [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygga CSS för att styla online-terrarium, med fokus på grundläggande CSS och responsiv design | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures och DOM-manipulation | Bygga JavaScript för att göra terrariet funktionellt med drag/drop, med fokus på closures och DOM-manipulation | [JavaScript closures och DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygga ett skrivspel | Lära sig använda tangentbords-händelser för att driva logiken i JavaScript-appen | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Grönt webbläsartillägg](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lära sig hur webbläsare fungerar, deras historia och bygga de första elementen i en tillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grönt webbläsartillägg](./5-browser-extension/solution/README.md) | Bygga ett formulär, anropa API och lagra variabler i lokal lagring | Bygga JavaScript-elementen i ditt tillägg för att anropa ett API med variabler sparade i lokal lagring | [API:er, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Grönt webbläsartillägg](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lära sig om webbprestanda och optimeringar | [Bakgrundsprocesser och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Rymdspel](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lära sig om arv med både klasser och komposition och Pub/Sub-mönstret inför spelbyggande | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Rymdspel](./6-space-game/solution/README.md) | Rita på canvas | Lära sig om Canvas API, som används för att rita element på en skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Rymdspel](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med hjälp av kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Rymdspel](./6-space-game/solution/README.md) | Kollisiondetektion | Få element att kollidera och reagera på varandra med knapptryckningar och ge en cooldown-funktion för att säkerställa prestanda | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Rymdspel](./6-space-game/solution/README.md) | Hålla poäng | Utför matematiska beräkningar baserat på spelets status och prestation | [Hålla poäng](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Rymdspel](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lära sig om att avsluta och starta om spelet, inklusive städningav resurser och återställning av variabler | [Avslutningsvillkor](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-mallar och rutthantering i en webbapp | Lära sig skapa stommen för en flersidig webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och routing](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bygga inloggning och registreringsformulär | Lära sig bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankapp](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur appen, hur man hämtar, sparar och gör sig av med den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Begrepp för state-hantering | Lära sig hur appen behåller state och hur man hanterar detta programmässigt | [State-hantering](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lära dig använda en kodeditor | [Använd VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lära dig bygga din egen AI-assistent | [AI Assistant project](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogik
Vårt läroplan är utformat med två viktiga pedagogiska principer i åtanke:
Vår läroplan är utformad med två viktiga pedagogiska principer i åtanke:
* projektbaserat lärande
* frekventa quiz
Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktyg och tekniker som dagens webbutvecklare använder. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, virtuellt terrarium, miljövänligt webbläsartillägg, rymdinvasionsspel och en bankapp för företag. I slutet av serien kommer studenter att ha fått en gedigen förståelse för webbutveckling.
Programmet lär ut grunderna i JavaScript, HTML och CSS samt de senaste verktygen och teknikerna som dagens webbutvecklare använder. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, ett miljövänligt webbläsartillägg, ett rymdinvasionsspel och en bankapp för företag. I slutet av serien kommer studenterna ha fått en solid förståelse för webbutveckling.
> 🎓 Du kan ta de första lektionerna i denna läroplan som en [Lärandeväg](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
> 🎓 Du kan ta de första lektionerna i denna läroplan som en [Lärväg](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Genom att säkerställa att innehållet är kopplat till projekt görs processen mer engagerande för studenter och retentionen av koncept förstärks. Vi har också skapat flera startlektioner i JavaScript-grunder för att introducera koncept, kombinerade med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samling av videotutorials, varav flera författare bidrog till denna läroplan.
Genom att säkerställa att innehållet överensstämmer med projekt blir processen mer engagerande för studenter och behållning av koncept förstärks. Vi har också skrivit flera startlektioner i JavaScript-grunder för att introducera koncept, tillsammans med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorials, där några författare bidragit till denna läroplan.
Dessutom sätter ett låginsats-quiz före en lektion studentens fokus på att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare retention. Denna läroplan är designad för att vara flexibel och rolig och kan genomföras helt eller delvis. Projekten börjar små och blir alltmer komplexa under den 12-veckorscykeln.
Dessutom sätter ett låginsats-quiz före en lektion studentens avsikt mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer vidare retention. Denna läroplan är designad för att vara flexibel och rolig och kan tas helt eller delvis. Projekten startar små och blir successivt mer komplexa under 12-veckorscykeln.
Medan vi medvetet har undvikit att introducera JavaScript-ramverk för att koncentrera oss på grundläggande färdigheter som krävs som webbutvecklare innan ett ramverk tas i bruk, är ett bra nästa steg efter denna läroplan att lära sig om Node.js via en annan videosamling: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Även om vi med avsikt undvikit att introducera JavaScript-ramverk för att fokusera på de grundläggande färdigheter som behövs som webbutvecklare innan man tar till sig ett ramverk, skulle ett bra nästa steg efter denna läroplan vara att lära sig om Node.js via en annan samling videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besök våra riktlinjer för [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidragande](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
> Besök våra [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidragsgivare](CONTRIBUTING.md) riktlinjer. Vi välkomnar din konstruktiva feedback!
## 🧭 Offlineåtkomst
Du kan köra denna dokumentation offline med hjälp av [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala dator, och skriv sedan `docsify serve` i rotmappen för detta repo. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
Du kan köra denna dokumentation offline med hjälp av [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin och skriv sedan `docsify serve` i roten av detta repo. Webbplatsen tjänstgörs på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
En PDF med alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
En PDF av alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andra kurser
@ -239,7 +241,7 @@ Vårt team producerar andra kurser! Kolla in:
---
### Kärnlärande
### Kärnundervisning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -258,21 +260,21 @@ Vårt team producerar andra kurser! Kolla in:
## Få hjälp
Om du fastnar eller har några frågor om att bygga AI-appar. Gå med andra som lär sig och erfarna utvecklare i diskussioner om MCP. Det är ett stödjande community där frågor är välkomna och kunskap delas fritt.
Om du kör fast eller har några frågor om att bygga AI-appar. Gå med i diskussioner med andra elever och erfarna utvecklare om MCP. Det är en stödjande gemenskap där frågor välkomnas och kunskap delas fritt.
Detta arkiv är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
Det här arkivet är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller onoggrheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För viktig information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
| 01 | เริ่มต้นใช้งาน | บทนำสู่การเขียนโปรแกรมและเครื่องมือในงานพัฒนา | เรียนรู้พื้นฐานเบื้องต้นที่อยู่เบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 13 | [ส่วนขยายเบราว์เซอร์สีเขียว](./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 | [ส่วนขยายเบราว์เซอร์สีเขียว](./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 | เรียนรู้เกี่ยวกับ Inheritance โดยใช้ทั้ง 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 |
| 01 | Getting Started | แนะนำการเขียนโปรแกรมและเครื่องมือของงาน | เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยนักพัฒนามืออาชีพทำงานของพวกเขา | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/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 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 |
ด้วยการทำให้เนื้อหาสอดคล้องกับโครงการ ขั้นตอนการเรียนรู้จะน่าดึงดูดใจมากขึ้นสำหรับนักเรียนและช่วยเพิ่มความจำแนวคิด เรายังเขียนบทเรียนเริ่มต้นเกี่ยวกับพื้นฐาน JavaScript เพื่อแนะนำแนวคิด พร้อมกับวิดีโอจากชุด "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?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)".
PDF ของบทเรียนทั้งหมดสามารถดูได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
ไฟล์ PDF ของบทเรียนทั้งหมดสามารถดูได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
## 🎒 หลักสูตรอื่นๆ
## 🎒 คอร์สอื่น ๆ
ทีมงานของเราผลิตหลักสูตรอื่นๆ อีก! ลองดูที่:
ทีมของเราผลิตคอร์สอื่น ๆ ด้วย! ตรวจสอบได้ที่:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -232,7 +232,7 @@ PDF ของบทเรียนทั้งหมดสามารถดู
---
### Generative AI Series
### ชุด Generative AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -240,7 +240,7 @@ PDF ของบทเรียนทั้งหมดสามารถดู
---
### Core Learning
### การเรียนรู้หลัก
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,7 +251,7 @@ PDF ของบทเรียนทั้งหมดสามารถดู
---
### Copilot Series
### ชุด Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -259,21 +259,21 @@ PDF ของบทเรียนทั้งหมดสามารถดู
## การขอความช่วยเหลือ
หากคุณติดขัดหรือมีคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนคนอื่นๆ และนักพัฒนาที่มีประสบการณ์ในการอภิปรายเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งเปิดรับคำถามและแบ่งปันความรู้กันอย่างเสรี
ถ้าคุณติดขัดหรือต้องการถามคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกลุ่มผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการสนทนาเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งเปิดรับคำถามและแบ่งปันความรู้กันอย่างอิสระ
localizeflow[bot]
6 days ago