Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών της ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που αναπτύχθηκε από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα αποθετήριο εκπαιδευτικού προγράμματος για τη διδασκαλία βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Κύρια Στοιχεία
### Κύρια Συστατικά
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε μονάδες βασισμένες σε έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Τραπεζική Εφαρμογή, Κώδικας Επεξεργαστή και Βοηθός Συνομιλίας με Τεχνητή Νοημοσύνη
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολλαπλών Γλωσσών**: Αυτόματες μεταφράσεις γιαπάνω από 50 γλώσσες μέσω GitHub Actions
Για λεπτομερείς οδηγίες γιακάθε έργο, ανατρέξτε στα README αρχεία:
- `quiz-app/README.md` - Εφαρμογή quiz Vue 3
- `7-bank-project/README.md` - Τραπεζική εφαρμογή με ταυτοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού με καμβά
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας με ΤΝ
Για λεπτομερείς οδηγίες γιαμεμονωμένα έργα, ανατρέξτε στα αρχεία 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, το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε τα άλλα
- Εργαστείτε σε ανεξάρτητα έργα χωρίς να επηρεάζετε τα άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
---
<!-- 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 μέσα από πρακτικά έργα όπως τεραριούμια, επεκτάσεις browser και διαστημικά παιχνίδια. Συμμετέχετε σε κουίζ, συζητήσεις, και πρακτικές εργασίες. Αναβαθμίστε τις δεξιότητές σας και βελτιώστε την απόκτηση γνώσεων με τη μεθοδολογία μας βάσει έργων. Ξεκινήστε το ταξίδι του προγραμματισμού σας σήμερα!
Γίνετε μέλος της κοινότητας Azure AI Foundry στο Discord
Εγγραφείτε στο Discord του Azure AI Foundry και γνωρίστε ειδικούς και άλλους προγραμματιστές.
Ακολουθήστε αυτά τα βήματα γιανα ξεκινήσετε με αυτούς τους πόρους:
1. **Δημιουργήστε Fork στο Αποθετήριο**: Πατήστε [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Γίνετε μέλος του Azure AI Foundry Discord και γνωρίστε ειδικούς και άλλους προγραμματιστές**](https://discord.com/invite/ByRwuEEgH4)
Ακολουθήστε αυτά τα βήματα γιανα ξεκινήσετε να χρησιμοποιείτε αυτούς τους πόρους:
1. **Δημιουργήστε Fork το Αποθετήριο**: Κάντε κλικ στο [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Κατεβάστε το Αποθετήριο (Clone)**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Εγγραφείτε στο Discord του Azure AI Foundry και γνωρίστε ειδικούς και άλλους προγραμματιστές**](https://discord.com/invite/ByRwuEEgH4)
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις που αυξάνουν σημαντικά το μέγεθος λήψης. Για κλωνοποίηση χωρίς μεταφράσεις, χρησιμοποιήστε sparse checkout:
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κατεβάσετε χωρίς μεταφράσεις, χρησιμοποιήστε sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,95 +48,95 @@
> 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)
#### 🧑🎓 _Είσαι φοιτητής;_
Επισκεφθείτε τη σελίδα [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμη τρόπους να αποκτήσετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που αξίζει να αποθηκεύσετε στα αγαπημένα και να ελέγχετε τακτικά καθώς ανανεώνουμε το περιεχόμενο κάθε μήνα.
Επισκεφτείτε τη [**Σελίδα Φοιτητών (Student Hub)**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και τρόπους να αποκτήσετε δωρεάν εκπαιδευτικό κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που πρέπει να αποθηκεύσετε γιανα την ελέγχετε τακτικά καθώς ανανεώνουμε το περιεχόμενο μηνιαίως.
Προστέθηκε νέα Πρόκληση, αναζητήστε "GitHub Copilot Agent Challenge 🚀" στις περισσότερες ενότητες. Πρόκειται για νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, αυτή μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
Προστέθηκε νέα πρόκληση, αναζητήστε "GitHub Copilot Agent Challenge 🚀" στις περισσότερες ενότητες. Πρόκειται για μια νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε ξαναχρησιμοποιήσει τη λειτουργία Agent, μπορεί όχι μόνο να παράγει κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και περισσότερα.
### 📣 Ανακοίνωση - _ΝέοΈργο για δημιουργία με τη χρήση Γενετικής Τεχνητής Νοημοσύνης_
### 📣 Ανακοίνωση - _Νέοέργο για κατασκευή με τη χρήση Generative AI_
Μόλις προστέθηκε νέο έργο AI Assistant, ρίξτε μια ματιά στο [έργο](./9-chat-project/README.md)
Προστέθηκε νέο έργο Βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
### 📣 Ανακοίνωση - _Νέο Πρόγραμμα Σπουδών_γιαΓενετική Τεχνητή Νοημοσύνη για JavaScript μόλις κυκλοφόρησε
### 📣 Ανακοίνωση - _Νέο Πρόγραμμα Σπουδών_γιαGenerative AI με JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα Γενετικής Τεχνητής Νοημοσύνης!
Μην χάσετε το νέο μας πρόγραμμα σπουδών για Generative AI!
Επισκεφτείτε το [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) γιανα ξεκινήσετε!
## 🌱 Ξεκινώντας
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε τα σχόλιά σας [στο φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Καθηγητές**, έχουμε [συμπεριλάβει ορισμένες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα θέλαμε να λάβουμε τα σχόλιά σας [στο φόρουμ συζήτησης](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-μάθημα κουίζ και συνεχίστε διαβάζοντας το υλικό, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγχοντας την κατανόησή σας με το κουίζ μετά το μάθημα.
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα κουίζ πριν από τη διάλεξη και συνεχίστε με την ανάγνωση του υλικού διάλεξης, την ολοκλήρωση των διαφόρων δραστηριοτήτων και ελέγξτε την κατανόησή σας με το κουίζ μετά τη διάλεξη.
Για ναβελτιώσετε την εκπαιδευτική σας εμπειρία, συνδεθείτε με τους συναδέλφους σας γιανα δουλέψετε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμη να απαντήσει στις ερωτήσεις σας.
Για ναενισχύσετε την εμπειρία μάθησής σας, συνδεθείτε με τους συμφοιτητές σας γιανα δουλέψετε τα έργα από κοινού! Η συζήτηση ενθαρρύνεται στο [φόρουμ συζήτησής μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των μεσαζόντων μας θα είναι διαθέσιμη να απαντήσει στις ερωτήσεις σας.
Για περαιτέρω εκπαίδευση, προτείνουμε ανεπιφύλακτανα εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον εκπαιδευτικό υλικό.
Για περαιτέρω εκπαίδευση, συνιστούμε έντονανα εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικά μελέτης.
### 📋 Ρύθμιση του περιβάλλοντος εργασίας σας
### 📋 Ρύθμιση του περιβάλλοντός σας
Αυτό το πρόγραμμα έχει ένα έτοιμο περιβάλλον ανάπτυξης! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε ένα [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς να χρειάζεται εγκατάσταση_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας ένα επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Αυτό το πρόγραμμα σπουδών διαθέτει έτοιμο περιβάλλον ανάπτυξης! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον βασισμένο σε browser χωρίς ανάγκη εγκαταστάσεων_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Δημιουργήστε το αποθετήριό σας
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε πατώντας το κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Ακολουθήστε αυτά τα βήματα:
1. **Δημιουργήστε Fork στο Αποθετήριο**: Πατήστε το κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας.
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Δημιουργήστε Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας.
2. **Κατεβάστε το Αποθετήριο (Clone)**: `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), θα σας καθοδηγήσει μέσα από τις διάφορες επιλογές κάθε εργαλείου ώστε να επιλέξετε τι ταιριάζει καλύτερα σε εσάς.
Για να τρέξετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν περιηγητή (browser) και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία](../../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)
Στη συνέχεια, ανοίξτε το [Τερματικό](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) - γιανα σας βοηθά να γράφετε κώδικα πιο γρήγορα
@ -145,78 +145,78 @@
- προαιρετικό σκίτσο
- προαιρετικό συμπληρωματικό βίντεο
- προθέρμανση με quiz πριν το μάθημα
- προθέρμανση πριν το μάθημα με κουίζ
- γραπτό μάθημα
- για μαθήματα με έργα, οδηγούς βήμα-βήμα για το πώς να φτιάξετε το έργο
- για μαθήματα βασισμένα σε έργο, βήμα-βήμα οδηγίες για την κατασκευή του έργου
- ελέγχους γνώσης
- μια πρόκληση
- συμπληρωματική ανάγνωση
- ανάθεση εργασίας
- [quiz μετά το μάθημα](https://ff-quizzes.netlify.app/web/)
> **Μια σημείωση για τα quiz**: Όλα τα quiz περιέχονται στον φάκελο Quiz-app, συνολικά 48 quiz με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) και η εφαρμογή quiz μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`.
> **Σημείωση σχετικά με τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, 48 συνολικά κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) eta εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`.
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία της Επαγγελματίας | Μάθετε τις βασικές αρχές που διέπουν τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει συνεργασία με ομάδα | Πώς να χρησιμοποιείτε το GitHub στο έργο σας και πώς να συνεργάζεστε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στο διαδίκτυο | [Βασικά Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Βασικά JS | Τύποι Δεδομένων JavaScript | Τα βασικά για τους τύπους δεδομένων στη JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για συναρτήσεις και μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine και Christopher |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικα σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην Πράξη | Δημιουργήστε το HTML γιανα φτιάξετε ένα διαδικτυακό 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 |
| 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 και στην ανταπόκριση της σελίδας | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, διαχείριση DOM | Δημιουργήστε την JavaScript ώστε να κάνει το terrarium λειτουργικό ως διεπαφή μεταφοράς και απόθεσης, εστιάζοντας στα κλεισίματα και τη διαχείριση 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 χρησιμοποιώντας μεταβλητές αποθηκευμένες τοπικά | [API, Φόρμες και Τοπική Αποθήκευση](./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 Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή ενός πολυσέλιδου ιστότοπου χρησιμοποιώντας δρομολόγηση και πρότυπα 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 Code](../../8-code-editor) | Εργασία με VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση Επεξεργαστή Κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Βοηθοί AI](./9-chat-project/README.md) | Εργασία με AI | Μάθετε πώς να δημιουργήσετε το δικό σας βοηθό 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 μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση γνώσεων. Το πρόγραμμα σπουδών έχει σχεδιαστείνα είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή μερικώς. Τα έργα ξεκινούν μικρά και γίνονται ολοένα και πιο σύνθετα μέχρι το τέλος του 12-εβδομάδων κύκλου.
Επιπλέον, ένα κουίζ χαμηλού ρίσκου πριν από το μάθημα θέτει την πρόθεση του μαθητή γιανα μάθει ένα θέμα, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση. Το πρόγραμμα αυτό σχεδιάστηκε γιανα είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή μεμονωμένα. Τα έργα ξεκινούν μικρά και γίνονται ολοένα πιο σύνθετα μέχρι το τέλος του 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 frameworks γιανα επικεντρωθούμε στις βασικές δεξιότητες που απαιτούνται ως προγραμματιστής ιστού πριν από την υιοθέτηση ενός framework, ένα καλό επόμενο βήμα γιανα ολοκληρώσετε αυτό το πρόγραμμα θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Επισκεφτείτε τους [Κανόνες Συμπεριφοράς](CODE_OF_CONDUCT.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 σας: `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
@ -260,21 +260,21 @@
## Λήψη Βοήθειας
Αν κολλήσετε ή έχετε οποιεσδήποτε ερωτήσεις σχετικά με την ανάπτυξη εφαρμογών AI. Ενταχθείτε σε άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις για το 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). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Καθώς η παράδοση είναι [MM/YY]**: [Όνομα Εργασίας](assignment.md)
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση Ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το αρχικό έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Detta är ett utbildningscurriculum för att lära ut grunderna i webbutveckling till nybörjare. Curriculumet är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningscurriculum för att lära ut grunderna i webbutveckling för nybörjare. Curriculumen ä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 det inte är ett traditionellt monorepo innehåller detta repository flera oberoende projekt:
Även om detta inte är ett traditionellt monorepo så innehåller repot flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inte beroenden
- Arbeta med individuella projekt utan påverkan på andra
- Klona hela repositoryt för hela curriculum-upplevelsen
- Projekt delar inga beroenden
- Arbeta med individuella projekt utan att påverka andra
- Klona hela repot för hela curriculum-upplevelsen
---
<!-- 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 vänlig notera att automatiska översättningar kan innehålla fel eller felaktigheter. 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 från användningen av denna översättning.
Det här dokumentet 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 inkonsekvenser. Det ursprungliga dokumentet på dess originalsprå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 vid användning av denna översättning.
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!
Lär dig grunderna i webbuteckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje 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 kunskapsbevaring med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
Gå med i Azure AI Foundry Discord Community
Gå med i Azure AI Foundry Discord och möt experter och andra utvecklare.
> 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:
> Detta repository inkluderar 50+ språköversättningar vilket avsevärt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,83 +51,83 @@ 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 ö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)**
**Om du önskar fler översättningar, finns de stödda språken 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å 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.
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 certifikat-voucher. Detta är sidan du vill bokmärka och kolla av då och då eftersom vi byter innehåll varje månad.
### 📣 Tillkännagivande - Nya GitHub Copilot Agent-läges utmaningar att slutföra!
### 📣 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 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.
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 har använt Agent-läget tidigare kan det inte bara generera text utan kan även skapa och redigera filer, köra kommandon och mer.
### 📣 Tillkännagivande - _Nytt projekt att bygga med Generativ AI_
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
Nytt AI Assistant-projekt precis tillagt, kolla in det [projekt](./9-chat-project/README.md)
Nytt AI-assistentprojekt precis tillagt, kolla in det [projektet](./9-chat-project/README.md)
### 📣 Tillkännagivande - _Ny läroplan_ för Generativ AI för JavaScript har just släppts
### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript släpptes just
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 inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i ämnen som:
- Prompting och prompt-engineering
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i att lära dig ämnen som:
- Prompting och promptengineering
- Text- och bildappsgenerering
- Sökningsappar
- Sökappar
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
## 🌱 Komma igång
## 🌱 Kom Igång
> **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)!
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) på hur ni kan använda denna läroplan. Vi tar gärna emot er 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ör-quiz och fortsätt sedan med att läsa lektionsmaterialet, slutföra olika aktiviteter och kontrollera din förståelse med efter-quizet.
**[Studerande](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett för-lektionsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med ett efter-lektionsquiz.
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örbättra din inlärningsupplevelse, koppla samman med dina kamrater för att samarbeta med projekten! 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ö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.
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.
### 📋 Sätta upp din miljö
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).
Denna läroplan har en utvecklingsmiljö redo att användas! När du börjar kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan installationer_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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.
#### Skapa ditt repository
För att du enkelt ska kunna spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra det 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. **Fork:a arkivet**: Klicka på "Fork"-knappen i övre högra hörnet på denna sida.
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.
I din kopia av detta repository som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar 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), kommer att guida dig genom olika alternativ för varje 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 för yrket](../../1-getting-started-lessons/1-intro-to-programming-languages), går igenom olika val för varje av dessa verktyg så att du kan välja vad 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 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).
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, ersätt `<your-repository-url>` med URL:en du precis 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 just kopierade:
```bash
git clone <your-repository-url>
@ -135,7 +135,6 @@ 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 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
@ -143,75 +142,74 @@ Vår rekommendation är att använda [Visual Studio Code](https://code.visualstu
## 📂 Varje lektion innehåller:
- valfri sketchnote
- valfri skissnote
- valfri kompletterande video
- uppvärmningsquiz före lektionen
- för-lektions uppvärmningsquiz
- skriftlig lektion
- steg-för-steg guider för projektbaserade lektioner om hur man bygger projektet
- för projektbaserade lektioner, steg-för-steg guiden om hur man bygger projektet
- kunskapskontroller
- en utmaning
- kompletterande läsning
- uppgift
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
> **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.
> **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 `quiz-app` mappen.
| 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ädning av 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 |
| | Projekt Namn | Begrepp som lärs ut | Lärandemål | Länkad Lektion | Författare |
| 01 | Komma igång | Introduktion till programmering och verktyg | Lära sig de grundläggande principerna bakom de flesta programmeringsspråk och om mjukvara 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 | Grundläggande GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, hur man samarbetar med andra i en kodbas | [Intro till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Komma 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 Grundläggande | 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 Grundläggande | 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 Grundläggande | Arrayer och loopar | Arbeta med data med hjälp av 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å grunderna i CSS inklusive responsiv sida | [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 göra terrariet 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 | [Skrivspel](./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 | [Grön webbläsartillägg](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skapar de första elementen i ett webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grön webbläsartillägg](./5-browser-extension/solution/README.md) | Bygga ett formulär, anropa ett API och lagra variabler i lokal lagring | Bygg JavaScript-elementen i ditt webbläsartillägg för att anropa ett 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 | [Grön 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är dig om webbprestanda och optimeringar | [Bakgrundsuppgifter 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är dig om arv med både klasser och komposition och 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 | [Rymdspel](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på skärmen | [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 kartesiska koordinater och Canvas API| [Flytta element](./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 tangenttryckningar och ge en cooldown-funktion för att säkra prestanda i spelet | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Rymdspel](./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 | [Rymdspel](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att städa upp resurser och återställa variabelvärden | [Avslutningsvillkor](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankapp](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig hur man skapar stommen för en flersidig webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och rutter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Bankapp](./7-bank-project/solution/README.md) | Bygg 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 | [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 din app, hur man hämtar, lagrar och kassera det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankapp](./7-bank-project/solution/README.md) | Begrepp om 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 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:
* projektbaserat lärande
* frekventa quiz
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!
Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktyg och tekniker som webb utvecklare använder idag. Studenter kommer att få möjlighet att utveckla praktisk erfarenhet genom att skapa ett skrivspel, virtuellt terrarium, miljövänligt webbläsartillägg, rymdinspirerat spel och en bankapp för företag. I slutet av serien kommer studenterna att ha fått en gedigen förståelse för webbutveckling.
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.
> 🎓 Du kan ta de första lektionerna i detta läroplan som en [Lärstig](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
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.
Genom att säkerställa att innehållet är kopplat till projekt blir processen mer engagerande för elever och konceptbevarandet stärks. Vi har också skrivit flera introduktionslektioner i JavaScript-grunder för att introducera koncepten, ihop 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, där några av författarna bidragit till detta läroplan.
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)".
Dessutom sätter ett lågintensivt quiz före en klassning elevens intention att lära sig ett ämne, medan ett andra quiz efter klassen säkerställer ytterligare beständighet. Detta läroplan är designat för att vara flexibelt och roligt och kan tas i sin helhet eller delvis. Projekten börjar små och blir alltmer komplexa mot slutet av en 12-veckors cykel.
> Besök våra riktlinjer för [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidragande](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
Vi har medvetet undvikit att introducera JavaScript-ramverk för att koncentrera oss på de grundläggande färdigheter som behövs som webb utvecklare innan man tar till sig ett ramverk, ett bra nästa steg efter att ha slutfört detta läroplan är 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 [Bidrag](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
## 🧭 Offlineåtkomst
## 🧭 Offline tillgång
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`.
Du kan köra denna dokumentation offline genom att använda [Docsify](https://docsify.js.org/#/). Fork'a detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin, och kör sedan `docsify serve` i rotmappen i detta repo. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
En PDF av alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
En PDF med alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andra kurser
@ -241,7 +239,7 @@ Vårt team producerar andra kurser! Kolla in:
---
### Kärnundervisning
### Kärninlärning
[](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)
@ -260,21 +258,21 @@ Vårt team producerar andra kurser! Kolla in:
## Få hjälp
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.
Om du kör fast eller har några frågor om att bygga AI-appar. Gå med andra elever och erfarna utvecklare i diskussioner om MCP. Det är en stöttande gemenskap där frågor är välkomna och kunskap delas fritt.
Det här arkivet är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
Detta arkiv är licensierat under MIT-licensen. Se [LICENSE](../../LICENSE)-filen 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 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.
**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 notera 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 kan uppstå 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, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalsprå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.
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 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 från användningen av denna översättning.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
ในการรันหลักสูตรนี้แบบโลคอลบนคอมพิวเตอร์ คุณต้องใช้โปรแกรมแก้ไขข้อความ, เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) จะพาคุณไปรู้จักทางเลือกต่าง ๆ ของเครื่องมือเหล่านี้เพื่อให้คุณเลือกใช้ได้ตามที่เหมาะสมกับตัวเอง
เราขอแนะนำให้ใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) เป็นโปรแกรมแก้ไขของคุณ ซึ่งมี [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัวด้วย คุณสามารถดาวน์โหลด Visual Studio Code ได้ที่ [นี่](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
| 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 |
| 13 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | การสร้างฟอร์ม เรียกใช้ API และจัดเก็บตัวแปรใน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์เพื่อเรียกใช้ API โดยใช้ตัวแปรที่เก็บใน local storage | [API, ฟอร์ม และ local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
> 🎓 คุณสามารถเรียนบทเรียนแรกๆ ในหลักสูตรนี้เป็น [Learn Path](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)" ซึ่งผู้เขียนบางท่านได้ร่วมสนับสนุนหลักสูตรนี้
ถ้าคุณติดขัดหรือต้องการถามคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกลุ่มผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการสนทนาเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งเปิดรับคำถามและแบ่งปันความรู้กันอย่างอิสระ
หากคุณติดขัดหรืมีคำถามใด ๆ เกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนอื่น ๆ และนักพัฒนาที่มีประสบการณ์ในการพูดคุยเกี่ยวกับ MCP นี่คือชุมชนที่ให้การสนับสนุน ที่ซึ่งคำถามเป็นที่ต้อนรับและความรู้ได้รับการแบ่งปันอย่างเสรี
localizeflow[bot]
3 months ago