Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών της ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα ταξινομημένα σε ενότητες έργων
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI
- **Διαδραστικά Quiz**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις σε 50+ γλώσσες μέσω GitHub Actions
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε ενότητες με βάση έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Browser, Παιχνίδι στο Διάστημα, Τραπεζική Εφαρμογή, Επεξεργαστής Κώδικα και Βοηθός Chat με AI
- **Διαδραστικά Κουίζ**: 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` - Παιχνίδι βασισμένο σε canvas
Για λεπτομερείς οδηγίες σε μεμονωμένα έργα, ανατρέξτε στα αρχεία README σε:
- `quiz-app/README.md` - Εφαρμογή quiz με Vue 3
- `7-bank-project/README.md` - Τραπεζική εφαρμογή με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης browser
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού βασισμένου σε Canvas
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI
### Δομή Monorepo
Παρόλο που δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι ανεξάρτητο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε επιμέρους έργα χωρίς να επηρεάζετε άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε τα άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο γιατην πλήρη εμπειρία προγράμματος σπουδών
---
<!-- 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). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτοματοποιημένες μεταφράσεις μπορείνα περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
# Ανάπτυξη Ιστού για Αρχάριους - Ένα Πρόγραμμα Σπουδών
# Ανάπτυξη Ιστού για Αρχαρίους - Ένα Πρόγραμμα Σπουδών
Μάθετε τα βασικά της ανάπτυξης ιστού με το ολοκληρωμένο μας μάθημα 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεραρίουμ, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Αναβαθμίστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με την αποτελεσματική παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!
Μάθετε τα βασικά της ανάπτυξης ιστοσελίδων με το ολοκληρωμένο 12-εβδομαδιαίο μάθημά μας από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραριαμικά, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Συμμετέχετε σε κουίζ, συζητήσεις και πρακτικές αναθέσεις. Βελτιώστε τις δεξιότητές σας και μεγιστοποιήστε τη διατήρηση γνώσεων με την αποτελεσματική παιδαγωγική μας που βασίζεται σε έργα. Ξεκινήστε το ταξίδι κωδικοποίησής σας σήμερα!
Εγγραφείτε στην Κοινότητα Discord Azure AI Foundry
Γίνετε μέλος της κοινότητας Azure AI Foundry στο Discord
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς τις μεταφράσεις, χρησιμοποιήστε sparse checkout:
> **Προτιμάτε να κλωνοποιήσετε τοπικά;**
>
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών, που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς μεταφράσεις, χρησιμοποιήστε τον αραιό έλεγχο:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Αυτό σας δίνει όλα όσα χρειάζεστε γιανα ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Εάν επιθυμείτε να υποστηριχθούν επιπλέον γλώσσες μετάφρασης, αυτές είναι καταγεγραμμένες [εδώ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Εάν επιθυμείτε να υποστηρίζονται επιπλέον γλώσσες μετάφρασης, αναφέρονται [εδώ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Είσαι φοιτητής/φοιτήτρια;_
#### 🧑🎓 _Είστε φοιτητής;_
Επισκεφθείτε τη [**σελίδα Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα φοιτητών και ακόμα τρόπους να λάβετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στα αγαπημένα σας και να ελέγχετε περιστασιακά καθώς ενημερώνουμε το περιεχόμενο κάθε μήνα.
Επισκεφθείτε τη [**Σελίδα για Φοιτητές**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμα τρόπους να πάρετε δωρεάν κουπόνι πιστοποιητικού. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στα αγαπημένα σας και να ελέγχετε περιοδικά καθώς ανανεώνουμε το περιεχόμενο κάθε μήνα.
Προστέθηκε νέα πρόκληση, αναζητήστε το "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και το Agent mode. Αν δεν έχετε χρησιμοποιήσει το Agent mode πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
Νέα πρόκληση προστέθηκε, ψάξτε για "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
### 📣 Ανακοίνωση - _Νέο έργο για κατασκευή με χρήση Γενετικής Τεχνητής Νοημοσύνης_
### 📣 Ανακοίνωση - _Νέο Έργο για κατασκευή με τη χρήση Generative AI_
Πρόσθετο νέο έργο Βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
Πρόσφατα προστέθηκε ένα νέο έργο βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
### 📣 Ανακοίνωση - _ΝέοΠρόγραμμα Σπουδών_ για Γενετική Τεχνητή Νοημοσύνη σε JavaScript μόλις κυκλοφόρησε
### 📣 Ανακοίνωση - _Νέοπρόγραμμα σπουδών_ για Generative AI για JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα σπουδών γιαΓενετική Τεχνητή Νοημοσύνη!
Μην χάσετε το νέο μας πρόγραμμα σπουδών γιαGenerative AI!
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσης και μια πρόκληση γιανα σας καθοδηγήσει στη μάθηση θεμάτων όπως:
- Εντολές και μηχανική εντολών
Κάθε μάθημα περιλαμβάνει ανάθεση για ολοκλήρωση, έλεγχο γνώσεων και πρόκληση που σας καθοδηγούν στην εκμάθηση θεμάτων όπως:
- Πώς να δημιουργείτε prompts και μηχανική prompts
- Δημιουργία εφαρμογών κειμένου και εικόνας
- Εφαρμογές αναζήτησης
@ -83,130 +93,129 @@
## 🌱 Ξεκινώντας
> **Καθηγητές**, έχουμε [περιλάβει μερικές προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε το feedback σας [στο φόρουμ συζητήσεών μας](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" στην πάνω δεξιά γωνία αυτής της σελίδας.
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), θα σας καθοδηγήσει στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία γιανα επιλέξετε εκείνο που σας ταιριάζει καλύτερα.
Η σύστασή μας είναι να χρησιμοποιήσετε [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-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει ανάμεσα στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία, γιανα επιλέξετε ποια δουλεύει καλύτερα για εσάς.
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)
Στη συνέχεια, ανοίξτε το [Τερματικό](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:
> Προτεινόμενες επεκτάσεις 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) - γιανα σας βοηθήσει να γράφετε κώδικα πιο γρήγορα
## 📂 Κάθε μάθημα περιλαμβάνει:
- προαιρετική σχεδίαση ιδεών (sketchnote)
- προαιρετικό σκιτσάκι
- προαιρετικό συμπληρωματικό βίντεο
- προθέρμανση quiz πριν το μάθημα
- προ-μαθησιακό quiz για προθέρμανση
- γραπτό μάθημα
- για μαθήματα βασισμένα σε project, οδηγίες βήμα προς βήμα για το πώς να χτίσετε το έργο
- για μαθήματα βασισμένα σε έργα, οδηγούς βήμα προς βήμα για την κατασκευή του έργου
- ελέγχους γνώσης
- μια πρόκληση
- συμπληρωματική ανάγνωση
- εργασίες
- [τεστ μετά το μάθημα](https://ff-quizzes.netlify.app/web/)
> **Μια σημείωση για τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) και η εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο 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 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 | [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 design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα γιανα κάνει το terrarium λειτουργικό ως interface με σύρσιμο και απόθεση, εστιάζοντας σε κλεισίματα και χειρισμό 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 και Διαδρομές σε μια Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας routing και πρότυπα 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 | [Κώδικας Περιηγητή/VSCode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση επεξεργαστή κώδικα VScode](./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 |
| 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 |
## 🏫 Παιδαγωγική
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές στο μυαλό:
* μάθηση βασισμένη σε έργα
* συχνά κουίζ
* συχνά quiz
Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα πιο σύγχρονα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστού. Οι μαθητές θα έχουν την ευκαιρία να αναπτύξουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια οικολογική επέκταση περιηγητή, ένα παιχνίδι τύπου εισβολέα στο διάστημα και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια στέρεη κατανόηση της ανάπτυξης στον ιστό.
Το πρόγραμμα διδάσκει τα βασικά του 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)" με βιντεομαθήματα, με μερικούς από τους συγγραφείς τους να έχουν συμβάλει σε αυτό το πρόγραμμα σπουδών.
Επιπλέον, ένα χαμηλού ρίσκου κουίζ πριν το μάθημα θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή κατά τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα προς το τέλος του κύκλου των 12 εβδομάδων.
Επιπλέον, ένα ανεπίσημο quiz πριν από το μάθημα θέτει τον σκοπό του μαθητή προς την εκμάθηση μιας θεματικής ενότητας, ενώ ένα δεύτερο quiz μετά το μάθημα διασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών έχει σχεδιαστεί ώστε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί στο σύνολό του ή μεμονωμένα τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα μέχρι το τέλος του δωδεκαβδομαδιαίου κύκλου.
Παρόλο που αποφεύγουμε εσκεμμένα την εισαγωγή πλαισίων εργασίας 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/#/). Κάντε fork αυτό το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στη τοπική σας μηχανή και μετά στο ριζικό φάκελο αυτού του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην πόρτα 3000 στον τοπικό σας υπολογιστή: `localhost:3000`.
Μπορείτε νατρέξετε αυτή την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κλωνοποιήστε το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στον τοπικό σας υπολογιστή και μετά στον ριζικό φάκελο του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην θύρα 3000 στο τοπικό σας μηχάνημα: `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 -->
@ -224,7 +233,7 @@
---
### Σειρά γιαΔημιουργική Τεχνητή Νοημοσύνη
### Σειρά γιαΤη Γενετική Τεχνητή Νοημοσύνη
[](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)
@ -232,7 +241,7 @@
---
### Κεντρική Μάθηση
### Βασική Μάθηση
[](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,11 +260,11 @@
## Λήψη Βοήθειας
Αν κολλήσετε ή έχετε ερωτήσεις σχετικά με τη δημιουργία εφαρμογών AI, συμμετάσχετε με άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις σχετικά με το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αν κολλήσετε ή έχετε απορίες σχετικά με την ανάπτυξη εφαρμογών ΤΝ, συμμετάσχετε σε συζητήσεις με άλλους μαθητές και έμπειρους προγραμματιστές για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας υπηρεσία μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλείστε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για τυχόν παρερμηνείες ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Αποποίηση ευθυνών**:
Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρότι προσπαθούμε για ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το αρχικό έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Detta är ett utbildningsbibliotek för att lära ut grunderna i webbapputveckling för nybörjare. Kursplanen är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningsprogramsförråd för att lära ut grunderna i webbdesign till nybörjare. Kursplanen är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Viktiga komponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
Även om detta inte är ett traditionellt monorepo, innehåller detta bibliotek flera oberoende projekt:
Även om det inte är ett traditionellt monorepo innehåller detta förråd flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inga beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela repot för full utbildningsupplevelse
- Projekten delar inte beroenden
- Arbeta på individuella projekt utan att påverka andra
- Klona hela förrådet för hela kursplanens upplevelse
---
<!-- 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 bör du vara medveten om att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungsspråk ska betraktas som den auktoritativa källan. För viktig 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.
**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, var vänlig observera att automatiska översättningar kan innehålla fel eller brister. Originaldokumentet på dess ursprungliga språk ska 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 till följd av användningen av denna översättning.
Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna fördjupar sig i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i frågesporter, 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 webbutveckling 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!
> Detta förråd inkluderar över 50 språköversättningar som betydligt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt utläsning:
> **Föredrar du att klona lokalt?**
>
> 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:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> 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 översättningsspråk stödjs dessa [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**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)**
[](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 även sätt att få ett gratis certifikat-voucher. Detta är sidan du vill bokmärka och kolla då och då eftersom vi byter ut innehållet 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å ett gratis certifikatvoucher. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi uppdaterar innehåll varje månad.
### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar 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äge. Om du inte har använt Agent-läge tidigare kan det inte bara generera text utan kan också skapa och redigera filer, köra kommandon med mera.
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.
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
Nytt AI Assistant-projekt nyligen tillagt, kolla in det [projekt](./9-chat-project/README.md)
Nytt AI-assistentprojekt just tillagt, kolla in det [projektet](./9-chat-project/README.md)
### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript har just släppts
Missa inte vår nya läroplan för Generativ AI!
Missa inte vår nya Generativ AI-läroplan!
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning som vägleder dig genom ämnen som:
- Frågeteknik och promptteknik
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
- Text- och bildappsgenerering
- Sökappar
@ -82,130 +93,127 @@ 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) om hur du kan använda 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 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ärande](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med en för-foreläsningsfrågesport och fortsätt med att läsa föreläsningsmaterialet, komplettera de olika aktiviteterna och kontrollera din förståelse med post-foreläsningsfrågesporten.
**[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.
För att förbättra din inlärningsupplevelse, anslut med dina kamrater för att arbeta med 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 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 vidareutbilda dig 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 utforska [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ö
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, ingen installation behövs-miljö_), 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ö 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).
#### Skapa ditt förråd
För att du enkelt ska kunna spara ditt arbete rekommenderas att du skapar din egen kopia av detta förråd. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt förråd i ditt GitHub-konto med en kopia av läroplanen.
#### 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.
Följ dessa steg:
1. **Forka FÖrrådet**: Klicka på "Fork"-knappen i det övre högra hörnet på denna sida.
I din kopia av detta förråd som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i.
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.
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), guidar dig genom olika alternativ för varje av dessa verktyg så att du kan välja det som passar dig bäst.
Vårt rekommenderade redigeringsprogram är [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 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).
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.
1. Klona ditt förråd till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:
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).
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, byt 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, där du byter ut `<your-repository-url>` mot URL:en du just kopierade:
```bash
git clone <your-repository-url>
```
2. Öppna mappen i Visual Studio Code. Det kan du göra genom att klicka på **File** > **Open Folder** och välja mappen du just klonade.
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 Visual Studio Code-tillägg:
> Rekommenderade tillägg för Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor i Visual Studio Code
> * [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 inkluderar:
## 📂 Varje lektion innehåller:
- valfri sketchnote
- valfritt skissnotat
- valfri kompletterande video
- förberedande quiz före lektionen
- skriftlig lektion
- för projektbaserade lektioner, steg-för-steg guider för hur man bygger projektet
- värmande quiz före lektionen
- skriven lektion
- för projektbaserade lektioner, steg-för-steg-guider för att bygga 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/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i mappen `quiz-app`.
> **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.
## 🗃️ Lektioner
| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare |
| 01 | Kom igång | Introduktion till programmering och verktyg| Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och 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 | Grunder i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, och hur man samarbetar med andra i 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 webbtillgänglighet | [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 applikationens logik | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Grunder | Beslutsfattande med JS | Lär dig att skapa villkor i din kod med hjälp av 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 | Bygg HTML:en 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:en för att styla online-terrarium, med fokus på CSS-grunder, inklusive responsivt webbdesign | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-closures, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett drag/drop-gränssnitt, med fokus på closures och DOM-manipulation | [JavaScript-closures, DOM-manipulation](./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 tangentbordevenemang 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 skissar de första elementen i en 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) | Bygg ett formulär, anropa en API och lagra variabler lokalt | Bygg JavaScript-komponenterna i din webbläsartillägg för att anropa en API med hjälp av variabler lagrade lokalt | [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, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar | [Bakgrundsuppgifter 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) | Kollisionsdetektion | Få element att kollidera och reagera på varandra med hjälp av knapptryckningar och ge en cooldown-funktion för spelets prestanda| [Kollisionsdetektion](./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 baserat på spelets status och prestanda | [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 variabelvärden | [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 grunden till en multipages webbplats arkitektur 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 om att 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) | Sätt att hämta och använda data | Hur data flyter in och ut ur din app, hur man hämtar, lagrar och gör sig av med det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp i tillståndshantering | Lär dig hur din app behåller tillstånd och hur du hanterar det programmässigt | [Tillståndshantering](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig hur man använder 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 hur du bygger din egen AI-assistent | [AI Assistentprojekt](./9-chat-project/README.md) | Chris |
| | 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 |
## 🏫 Pedagogik
Vår läroplan är utformad med två viktiga pedagogiska principer i åtanke:
Vårt läroplan är utformat 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 verktygen och teknikerna som används av dagens webbutvecklare. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, en miljövänlig webbläsartillägg, ett rymd-invaderarspel och en bankapp för företag. I slutet av serien kommer studenter att ha en gedigen förståelse för webbutveckling.
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.
> 🎓 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 överensstämmer med projekten blir processen mer engagerande för studenterna och konceptens bestående förstärks. Vi skrev också flera grundläggande lektioner i JavaScript 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, vars några författare bidrog till denna läroplan.
Dessutom sätter ett lågrisk-quiz före en lektion studentens fokus mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare bestående förståelse. Denna läroplan är designad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar smått och blir successivt mer komplexa vid slutet av 12-veckorscykeln.
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.
Medan vi medvetet har undvikit att introducera JavaScript-ramverk för att fokusera på grundläggande färdigheter som webbutvecklare innan ett ramverk används, är ett bra nästa steg efter att ha genomfört 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)".
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.
> Besök våra riktlinjer för [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidrag](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
Ä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 [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 genom att använda [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin, och sedan i rotmappen av detta repo skriver du `docsify serve`. 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 dator, och skriv sedan `docsify serve` i rotmappen för detta repo. Webbplatsen kommer att serveras 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).
## 🎒 Andra kurser
Vårt team producerar andra kurser! Kolla in:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -223,7 +231,7 @@ Vårt team producerar andra kurser! Kolla in:
---
### Generative AI Series
### Generativ AI-serie
[](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)
@ -231,7 +239,7 @@ Vårt team producerar andra kurser! Kolla in:
---
### Core Learning
### Kärnlärande
[](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)
@ -242,7 +250,7 @@ Vårt team producerar andra kurser! Kolla in:
---
### Copilot Series
### Copilot-serie
[](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)
@ -250,21 +258,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 studenter och erfarna utvecklare i diskussioner om MCP. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt.
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.
Detta förråd är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
Detta arkiv ä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, var god notera att automatiska översättningar kan innehålla fel eller brister. 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 några missförstånd eller feltolkningar som uppstår till följd av 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 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.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
| 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 | เรียนรู้เกี่ยวกับ 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 | เริ่มต้นใช้งาน | บทนำสู่การเขียนโปรแกรมและเครื่องมือในงานพัฒนา | เรียนรู้พื้นฐานเบื้องต้นที่อยู่เบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้ | [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 |
ในขณะที่เราได้ตั้งใจหลีกเลี่ยงการแนะนำเฟรมเวิร์ก 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](CODE_OF_CONDUCT.md) และแนวทาง [การมีส่วนร่วม](CONTRIBUTING.md) ของเรา เรายินดีรับข้อเสนอแนะเชิงสร้างสรรค์จากคุณ!
> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และแนวทาง [Contributing](CONTRIBUTING.md) ของเรา เรายินดีรับฟังความคิดเห็นในการพัฒนาของคุณ!
localizeflow[bot]
2 days ago