Αυτό είναι ένα αποθετήριο εκπαιδευτικού προγράμματος για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα είναι ένα ολοκληρωμένο 12-εβδομαδιαίο μάθημα που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα εκπαιδευτικό αποθετήριο διδακτικού προγράμματος για τη διδασκαλία των βασικών της ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο 12-εβδομάδων μάθημα που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Βασικά Στοιχεία
### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (πριν/μετά το μάθημα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις για 50+ γλώσσες μέσω GitHub Actions
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε μονάδες με βάση έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τράπεζας, Κειμενογράφος, και Βοηθός Συνομιλίας 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` - Ανάπτυξη παιχνιδιού καμβά
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI
### Δομή Monorepo
Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι ανεξάρτητο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάσετε άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για την πλήρη εμπειρία προγράμματος σπουδών
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται η επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε καμία ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
# Ανάπτυξη Ιστού για Αρχάριους - Μια Διδακτική Ενότητα
# Ανάπτυξη Ιστού για Αρχάριους - Ένα Αναλυτικό Πρόγραμμα Σπουδών
Μάθετε τα θεμέλια της ανάπτυξης ιστού με το ολοκληρωμένο μάθημα 12 εβδομάδων από τους Υποστηρικτές Microsoft Cloud. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραρίουμ, επεκτάσεις περιηγητή και διαστημικά παιχνίδια. Εμπλακείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Ενισχύστε τις δεξιότητές σας και βελτιστοποιήστε την απομνημόνευση γνώσεων με την αποτελεσματική παιδαγωγική μας βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον προγραμματισμό σήμερα!
Μάθετε τα βασικά της ανάπτυξης ιστού με το ολοκληρωμένο 12-εβδομάδων μάθημά μας από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα διερευνά JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεράρια, επεκτάσεις προγράμματος περιήγησης και διαστημικά παιχνίδια. Εμπλακείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Ενισχύστε τις δεξιότητές σας και βελτιστοποιήστε την απομνημόνευση γνώσεων με τη αποτελεσματική παιδαγωγική μας βάσει έργων. Ξεκινήστε το ταξίδι σας στον προγραμματισμό σήμερα!
Ενταχθείτε στην κοινότητα Azure AI Foundry στο Discord
Εγγραφείτε στην Κοινότητα Azure AI Foundry Discord
Ακολουθήστε αυτά τα βήματα γιανααρχίσετε να χρησιμοποιείτε αυτούς τους πόρους:
1. **Κάντε Fork το Αποθετήριο**: Κάντε κλικ στο [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
Ακολουθήστε αυτά τα βήματα γιαναξεκινήσετε να χρησιμοποιείτε αυτούς τους πόρους:
1. **Κλωνοποιήστε το Αποθετήριο**: Κάντε κλικ στο [](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)
3. [**Εγγραφείτε στο Azure AI Foundry Discord και γνωρίστε ειδικούς και συναδέλφους προγραμματιστές**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Υποστήριξη Πολύγλωσσης Επικοινωνίας
### 🌐 Υποστήριξη Πολλαπλών Γλωσσών
#### Υποστηρίζεται μέσω GitHub Action (Αυτοματοποιημένο& Πάντα Ενημερωμένο)
#### Υποστηρίζεται μέσω GitHub Action (Αυτόματο& Πάντα Ενημερωμένο)
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 γλωσσικές μεταφράσεις που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς τις μεταφράσεις, χρησιμοποιήστε sparse checkout:
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς μεταφράσεις, χρησιμοποιήστε sparse checkout:
> 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)
#### 🧑🎓 _Είσαι φοιτητής;_
Επισκεφθείτε τη [**Σελίδα Φοιτητή**](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 γιανα ολοκληρώσετε!
Προστέθηκε νέα πρόκληση, βρείτε την "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!
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε τα σχόλιά σας [στο φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Καθηγητές**, περιλαμβάνουμε [κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα θέλαμε το σχόλιό σας [στο φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-διάλεξη κουίζ και συνεχίστε με την ανάγνωση του υλικού διάλεξης, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγχοντας την κατανόησή σας με το μετα-διάλεξη κουίζ.
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-παρουσίασης κουίζ και ακολουθήστε με την ανάγνωση του διδακτικού υλικού, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγχοντας την κατανόηση σας με το μετά-παρουσίασης κουίζ.
Για να βελτιώσετε την εκπαιδευτική σας εμπειρία, συνδεθείτε με τους συνομηλίκους σας γιανα εργαστείτε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των μεσαζόντων μας θα είναι διαθέσιμη γιανα απαντήσει στις ερωτήσεις σας.
Για να βελτιώσετε την εμπειρία μάθησής σας, συνδεθείτε με τους συμμαθητές σας γιανα εργαστείτε από κοινού στα έργα! Ενθαρρύνονται οι συζητήσεις στο [φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμη γιανα απαντήσει στις ερωτήσεις σας.
Για να προχωρήσετε στην εκπαίδευσή σας, συνιστούμε ανεπιφύλακτανα εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικά μελέτης.
Για να προχωρήσετε περαιτέρω στην εκπαίδευσή σας, σας προτείνουμε έντονανα εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικό μελέτης.
### 📋 Ρύθμιση του περιβάλλοντός σας
Αυτό το πρόγραμμα σπουδών διαθέτει έτοιμο περιβάλλον ανάπτυξης! Όταν ξεκινάτε μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε ένα [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκαταστάσεων_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Αυτό το πρόγραμμα σπουδών έχει έτοιμο περιβάλλον ανάπτυξης! Καθώς ξεκινάτε μπορείτε να επιλέξετε να εκτελέσετε το πρόγραμμα σε [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκαταστάσεων_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Δημιουργία του αποθετηρίου σας
Για να αποθηκεύετε εύκολα την εργασία σας, προτείνεται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στο λογαριασμό GitHub σας με ένα αντίγραφο του προγράμματος σπουδών.
#### Δημιουργία αποθετηρίου
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Use this template** στο επάνω μέρος της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Ακολουθήστε αυτά τα βήματα:
1. **Κάντε Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" πάνω δεξιά σε αυτή τη σελίδα.
1. **Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας.
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Εκτέλεση του προγράμματος σε Codespace
Στο αντίγραφό σας αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace γιανα εργαστείτε μέσα.
Στο αντίγραφο του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace γιανα εργαστείτε.
#### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας
Για να εκτελέσετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν περιηγητή και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις γλώσσες προγραμματισμού και στα εργαλεία του επαγγέλματος](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία ώστενα επιλέξετε αυτό που σας ταιριάζει καλύτερα.
Για να εκτελέσετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, ένα πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και τα Εργαλεία του Εμπορίου](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει σε διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία γιανα επιλέξετε αυτό που σας ταιριάζει καλύτερα.
Η σύστασή μας είναι να χρησιμοποιήσετε το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως επεξεργαστή, το οποίο έχει επίσης ενσωματωμένο [τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Μπορείτε να κατεβάσετε το Visual Studio Code [εδώ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Η σύστασή μας είναι να χρησιμοποιείτε το [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:
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 που μόλις αντιγράψατε:
Στη συνέχεια, ανοίξτε το [Τερματικό](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. Μπορείτε να το κάνετε κάνοντας κλικ στο**Αρχείο** > **Άνοιγμα Φακέλου** και επιλέγοντας τον φάκελο που μόλις αντιγράψατε.
2. Ανοίξτε το φάκελο στο 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) - γιαναβοηθήσει στη γρηγορότερη συγγραφή κώδικα
> * [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
- γραπτό μάθημα
- για μαθήματα με έργα, βήμα-βήμα οδηγίες για την κατασκευή του έργου
- ελέγχους γνώσης
- για μαθήματα βασισμένα σε έργα, βήμα προς βήμα οδηγούς για το πώς να κατασκευάσετε το έργο
- έλεγχοι γνώσης
- μια πρόκληση
- συμπληρωματική ανάγνωση
- ανάθεση
- [κουίζ μετά το μάθημα](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 |
| 04 | JS Basics | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων στη JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Συναρτήσεις και Μέθοδοι | Μάθετε για συναρτήσεις και μεθόδους για τη διαχείριση ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη 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, εστιάζοντας σε κλεισίματα και στον χειρισμό του DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε γεγονότα πληκτρολογίου γιανα διαχειριστείτε τη λογική της εφαρμογής σας στη JavaScript | [Προγραμματισμός Βασισμένος σε Γεγονότα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Κατασκευή φόρμας, κλήση API και αποθήκευση μεταβλητών σε τοπική αποθήκευση | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή για την κλήση API χρησιμοποιώντας μεταβλητές αποθηκευμένες στην τοπική αποθήκευση | [APIs, Φόρμες, και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Παρασκηνιακές διεργασίες στον περιηγητή, απόδοση web | Χρησιμοποιήστε τις παρασκηνιακές διεργασίες του περιηγητήγιανα διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση ιστού και κάποιες βελτιστοποιήσεις | [Παρασκηνιακές Διεργασίες και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας Τάξεις και Σύνθεση καθώς και το μοτίβο Pub/Sub, προετοιμαζόμενοι για την κατασκευή ενός παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Ζωγραφική σε καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται γιανα σχεδιάζετε στοιχεία σε οθόνη | [Ζωγραφική σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν νακινηθούν χρησιμοποιώντας καρτεσιανές συντεταγμένες και το Canvas API | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν το ένα στο άλλο χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε λειτουργία ψύξης γιανα εξασφαλιστεί η απόδοση του παιχνιδιού | [Ανίχνευση Συγκρούσεων](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Καταγραφή σκορ | Εκτελέστε μαθηματικούς υπολογισμούς βασισμένους στη κατάσταση και την απόδοση του παιχνιδιού | [Καταγραφή Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς τιμών μεταβλητών | [Ο Όρος Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε Web App | Μάθετε πώς να δημιουργείτε τη δομή αρχιτεκτονικής ενός πολλαπλών σελίδων ιστότοπου χρησιμοποιώντας δρομολόγηση και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση των διαδικασιών επικύρωσης | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτήσετε, αποθηκεύσετε και διαχειριστείτε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Εργασία με VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα| [Χρήση Επεξεργαστή Κώδικα VScode](./8-code-editor/1-using-a-code-editor/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 Basics | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων στην JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Συναρτήσεις και Μέθοδοι | Μάθετε γιατις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στην JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην Πράξη | Κατασκευάστε το HTML γιανα δημιουργήσετε ένα διαδικτυακό τεράριουμ, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην Πράξη | Κατασκευάστε το CSS γιανα μορφοποιήσετε το διαδικτυακό τεράριουμ, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένου του responsive design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα που θα κάνει το τεράριουμ να λειτουργεί ως διεπαφή drag/drop, εστιάζοντας στα closures και στον χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου γιανα καθοδηγήσετε τη λογική της εφαρμογής σας σε JavaScript | [Προγραμματισμός Βασισμένος σε Συμβάντα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Εργασία με Browsers | Μάθετε πώς λειτουργούν οι browsers, την ιστορία τους και πώς να δημιουργήσετε τα πρώτα στοιχεία μιας επέκτασης browser | [Σχετικά με Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στη τοπική αποθήκευση | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης browser σας για κλήση API χρησιμοποιώντας μεταβλητές αποθηκευμένες στην τοπική αποθήκευση | [APIs, Φόρμες και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Διαδικασίες υπόβαθρου στον browser, απόδοση ιστού | Χρησιμοποιήστε τις διαδικασίες στο παρασκήνιο του browserγιανα διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση διαδικτύου και ορισμένες βελτιστοποιήσεις | [Εργασίες Υπόβαθρου και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την κληρονομικότητα χρησιμοποιώντας τόσο τις Κλάσεις όσο και τη Σύνθεση και το μοτίβο Pub/Sub, προετοιμασία για τη δημιουργία παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το API Canvas, που χρησιμοποιείται για τη σχεδίαση στοιχείων σε οθόνη | [Σχεδίαση σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν νααποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το API Canvas | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν το ένα στο άλλο χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε λειτουργία cooldown γιανα διασφαλιστεί η απόδοση του παιχνιδιού | [Ανίχνευση Συγκρούσεων](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Παρακολούθηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς βασισμένους στην κατάσταση και απόδοση του παιχνιδιού | [Παρακολούθηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς τιμών μεταβλητών | [Ο Όρος Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML Πρότυπα και Διαδρομές σε Web App | Μάθετε πώς να δημιουργήσετε τη δομή πολλαπλών σελίδων ιστοσελίδας χρησιμοποιώντας διαδρομές και πρότυπα HTML | [HTML Πρότυπα και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Σύνδεσης και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση διαδικασιών επικύρωσης | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτήσετε, αποθηκεύσετε και αποδεσμεύσετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν κειμενογράφο κώδικα| [Χρήση Επεξεργαστή Κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Εργασία με AI | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό AI | [Έργο Βοηθού AI](./9-chat-project/README.md) | Chris |
## 🏫 Παιδαγωγική
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές:
* μάθηση με βάση έργα
* συχνά κουίζ
Το πρόγραμμα σπουδών μας σχεδιάστηκε με δύο βασικές παιδαγωγικές αρχές κατά νου:
* μάθηση μέσω έργων
* συχνά quiz
Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστού. Οι φοιτητές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία κατασκευάζοντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια περιβαλλοντικά φιλική επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια εφαρμογή τραπεζικής για επιχειρήσεις. Στο τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια σταθερή κατανόηση της ανάπτυξης ιστοσελίδων.
Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα νεότερα εργαλεία και τεχνικές που χρησιμοποιούν οι σημερινοί προγραμματιστές ιστού. Οι φοιτητές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό τεράριουμ, μια οικολογική επέκταση browser, ένα παιχνίδι τύπου 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-εβδομαδιαίου κύκλου.
Παρόλο που έχουμε αποφύγει σκόπιμα την εισαγωγή πλαισίων 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 σας: `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).
## 🎒 Άλλα Μαθήματα
@ -211,61 +211,61 @@
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Σειρά γιαGenerative AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
### Generative AI Series
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Βασική Μάθηση
[](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)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Σειρά Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](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)
Αν κολλήσετε ή έχετε οποιεσδήποτε ερωτήσεις σχετικά με την κατασκευή εφαρμογών 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). Παρόλο που καταβάλουμε προσπάθεια για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες, συνιστάται η επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
**Αποποίηση Ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης με Τεχνητή Νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
To repozytorium edukacyjne służy do nauczania podstaw tworzenia stron internetowych dla początkujących. Program nauczania to kompleksowy 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML.
To repozytorium z kursem edukacyjnym do nauczania podstaw tworzenia stron internetowych dla początkujących. Program nauczania to kompleksowy, 12-tygodniowy kurs stworzony przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML.
### Kluczowe elementy
### Kluczowe komponenty
- **Treści edukacyjne**: 24 uporządkowane lekcje zorganizowane w moduły oparte na projektach
- **Projekty praktyczne**: Terrarium, Gra w pisanie, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (oceny przed/po lekcji)
- **Wsparcie dla wielu języków**: Automatyczne tłumaczenia na ponad 50 języków za pomocą GitHub Actions
- **Materiał edukacyjny**: 24 zorganizowane lekcje pogrupowane w moduły projektowe
- **Projekty praktyczne**: Terrarium, Gra na pisanie, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu i Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (oceny przed i po lekcji)
- **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na 50+ języków za pomocą GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) polecany dla uczących się
- Dodatkowe kursy: Generative AI, Data Science, ML, IoT dostępne w programie nauczania
- Dodatkowe kursy: AI generatywne, Data Science, ML, IoT
### Praca z konkretnymi projektami
Szczegółowe instrukcje dotyczące poszczególnych projektów znajdziesz w plikach README w:
Szczegółowe instrukcje dotyczące poszczególnych projektów znajdują się w plikach README:
- `quiz-app/README.md` - aplikacja quizowa Vue 3
- `7-bank-project/README.md` - aplikacja bankowa z uwierzytelnianiem
- `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki
- `6-space-game/README.md` - rozwój gry opartej na Canvas
- `5-browser-extension/README.md` - rozwój rozszerzenia przeglądarki
- `6-space-game/README.md` - tworzenie gry na canvasie
- `9-chat-project/README.md` - projekt asystenta czatu AI
### Struktura monorepo
Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów:
Choć to nie klasyczne monorepo, to repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest samodzielna
- Projekty nie dzielą zależności
- Pracuj nad poszczególnymi projektami bez wpływu na inne
- Sklonuj całe repozytorium, aby uzyskać pełne doświadczenie programu nauczania
- Projekty nie współdzielą zależności
- Pracuj nad pojedynczymi projektami bez wpływu na inne
- Sklonuj całe repozytorium dla pełnego doświadczenia kursu
---
**Zastrzeżenie**:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż staramy się zapewnić dokładność, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego języku źródłowym powinien być uznawany za autorytatywne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony przy użyciu automatycznego serwisu tłumaczeniowego AI [Co-op Translator](https://github.com/Azure/co-op-translator). Choć dokładamy starań, aby tłumaczenie było jak najbardziej precyzyjne, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być uznawany za źródło wiążące. W przypadku informacji krytycznych zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia przeglądarki i gry kosmiczne. Angażuj się w quizy, dyskusje i praktyczne zadania. Rozwijaj swoje umiejętności i optymalizuj zapamiętywanie dzięki naszej skutecznej, opartej na projektach metodyce nauczania. Zacznij swoją przygodę z kodowaniem już dziś!
# Tworzenie stron internetowych dla początkujących – program nauczania
Poznaj podstawy tworzenia stron internetowych dzięki naszemu 12-tygodniowemu, kompleksowemu kursowi prowadzonemu przez Microsoft Cloud Advocates. Każda z 24 lekcji zagłębia się w JavaScript, CSS i HTML poprzez praktyczne projekty, takie jak terraria, rozszerzenia do przeglądarek oraz gry kosmiczne. Weź udział w quizach, dyskusjach i praktycznych zadaniach. Rozwijaj swoje umiejętności i optymalizuj przyswajanie wiedzy dzięki naszej skutecznej, opartej na projektach metodzie nauczania. Zacznij swoją przygodę z kodowaniem już dziś!
Dołącz do społeczności Azure AI Foundry na Discordzie
Postępuj zgodnie z tymi krokami, aby zacząć korzystać z tych zasobów:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Dzięki temu masz wszystko, co potrzebne do ukończenia kursu, z dużo szybszym pobieraniem.
> Dzięki temu otrzymasz wszystko, czego potrzebujesz, aby ukończyć kurs, a pobieranie będzie szybsze.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Jeśli chcesz, aby kolejne języki były wspierane, są one wymienione [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Jeśli chcesz, aby dodano wsparcie dla innych języków, lista obsługiwanych jest dostępna [tutaj](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Jesteś studentem?_
Odwiedź [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz materiały dla początkujących, pakiety dla studentów, a nawet sposoby na zdobycie bezpłatnego vouchera na certyfikat. To strona, którą warto zapisać w zakładkach i regularnie odwiedzać, ponieważ co miesiąc aktualizujemy zawartość.
Odwiedź [**Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz materiały dla początkujących, pakiety dla studentów, a nawet sposoby na zdobycie darmowego vouchera na certyfikat. To strona, którą warto dodać do zakładek i od czasu do czasu sprawdzać, ponieważ co miesiąc aktualizujemy zawartość.
### 📣 Ogłoszenie - nowe wyzwania trybu GitHub Copilot Agent do wykonania!
### 📣 Ogłoszenie – Nowe wyzwania z trybem agenta GitHub Copilot do wykonania!
Dodano nowe wyzwanie, szukaj "GitHub Copilot Agent Challenge 🚀" w większości rozdziałów. To nowe wyzwanie dla Ciebie do wykonania z użyciem GitHub Copilot i trybu Agent. Jeśli wcześniej nie korzystałeś z trybu Agent, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i więcej.
Dodano nowe wyzwanie, szukaj „GitHub Copilot Agent Challenge 🚀” w większości rozdziałów. To nowe wyzwanie do wykonania z użyciem GitHub Copilot i trybu agenta. Jeśli wcześniej nie korzystałeś z trybu agenta, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, wykonywać polecenia i więcej.
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z użyciem generatywnej AI_
### 📣 Ogłoszenie – _Nowy projekt do zbudowania z użyciem Generative AI_
Dodano nowy projekt Asystenta AI, zobacz [projekt](./9-chat-project/README.md)
Dodano nowy projekt AI Assistant, sprawdź go [projekt](./9-chat-project/README.md)
### 📣 Ogłoszenie - _Nowy program nauczania_ dotyczący generatywnej AI dla JavaScript właśnie został wydany
### 📣 Ogłoszenie –_Nowy program nauczania_ z zakresu Generative AI dla JavaScript właśnie został wydany
Nie przegap naszego nowego kursu o generatywnej AI!
Nie przegap naszego nowego kursu Generative AI!
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
Każda lekcja zawiera zadanie do wykonania, sprawdzian wiedzy i wyzwanie, które pomogą Ci nauczyć się takich tematów jak:
- Tworzenie i inżynieria promptów
- Generowanie aplikacji tekstowych i obrazów
- Aplikacje wyszukiwania
Odwiedź [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), aby zacząć!
Każda lekcja zawiera zadanie do wykonania, sprawdzenie wiedzy i wyzwanie, które pomaga w nauce takich tematów jak:
- Promptowanie i inżynieria promptów
- Generowanie aplikacji tekstowych i graficznych
- Aplikacje do wyszukiwania
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
## 🌱 Zacznijmy
> **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Chętnie poznamy Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
## 🌱 Rozpoczęcie
**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, dla każdej lekcji rozpocznij od quizu przed wykładem, następnie czytaj materiał, realizuj różne aktywności i sprawdź swoją wiedzę za pomocą quizu po wykładzie.
> **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Chętnie poznamy waszą opinię [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
Aby wzbogacić swoje doświadczenia edukacyjne, łączcie się z kolegami, by wspólnie pracować nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie nasz zespół moderatorów jest gotowy odpowiadać na Twoje pytania.
**[Uczący się](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, dla każdej lekcji zacznij od quizu wstępnego, zapoznaj się z materiałem, wykonaj różne aktywności i sprawdź swoją wiedzę w quizie podsumowującym.
Aby poszerzać wiedzę, gorąco polecamy eksplorację [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) dla dodatkowych materiałów do nauki.
Aby wzbogacić doświadczenie nauki, połącz się z rówieśnikami i pracujcie razem nad projektami! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie zespół moderatorów jest gotowy odpowiedzieć na Twoje pytania.
Aby pogłębić swoją edukację, zdecydowanie polecamy eksplorację [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) w celu zdobycia dodatkowych materiałów do nauki.
### 📋 Konfiguracja środowiska
Ten program nauczania ma gotowe środowisko deweloperskie! Na początek możesz uruchomić kurs w [Codespace](https://github.com/features/codespaces/) (_środowisko przeglądarkowe bez potrzeby instalacji_) lub lokalnie na swoim komputerze, korzystając z edytora tekstu, takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ten program nauczania ma gotowe do użycia środowisko deweloperskie! Na początek możesz wybrać uruchomienie kursu w [Codespace](https://github.com/features/codespaces/) (_środowisko przeglądarkowe bez konieczności instalacji_) lub lokalnie na swoim komputerze, korzystając z edytora tekstu, takiego jak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Utwórz swoje repozytorium
Aby łatwo zapisywać swoją pracę, zalecamy utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template** na górze strony. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania.
#### Utwórz swoje repozytorium
Aby łatwo zapisać swoją pracę, zaleca się utworzenie własnej kopii tego repozytorium. Możesz to zrobić, klikając przycisk **Use this template** na górze strony. To utworzy nowe repozytorium na Twoim koncie GitHub z kopią tego programu nauczania.
Postępuj według tych kroków:
1. **Zrób forka repozytorium**: Kliknij przycisk „Fork” w prawym górnym rogu tej strony.
W utworzonej kopii repozytorium kliknij przycisk **Code** i wybierz **Open with Codespaces**. Spowoduje to utworzenie nowego Codespace, w którym możesz pracować.
W swojej kopii repozytorium, które utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. To utworzy dla Ciebie nowe środowisko Codespace do pracy.
Aby uruchomić ten kurs lokalnie na komputerze, potrzebujesz edytora tekstu, przeglądarki oraz narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi pracy](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać to, co najlepiej Ci odpowiada.
Aby uruchomić kurs lokalnie na swoim komputerze, potrzebujesz edytora tekstu, przeglądarki oraz narzędzia wiersza poleceń. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), przeprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać, co najlepiej Ci odpowiada.
Rekomendujemy użycie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który ma również wbudowany [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Możesz pobrać Visual Studio Code [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Polecamy używanie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) jako edytora, który ma również wbudowany [terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Możesz pobrać Visual Studio Code [tutaj](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić klikając przycisk **Code** i kopiując adres URL:
1. Sklonuj swoje repozytorium na komputer. Możesz to zrobić, klikając przycisk **Code** i kopiując adres URL:
[CodeSpace](./images/createcodespace.png)
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `<your-repository-url>`adresem URL, który właśnie skopiowałeś:
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `<your-repository-url>`właśnie skopiowanym URL-em:
```bash
git clone <your-repository-url>
@ -112,82 +127,83 @@ Rekomendujemy użycie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_
2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **Plik** > **Otwórz folder** i wybierając folder, który właśnie sklonowałeś.
> Polecane rozszerzenia Visual Studio Code:
> Zalecane rozszerzenia Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML w Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - do podglądu stron HTML bezpośrednio w Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby pomóc Ci szybciej pisać kod
## 📂 Każda lekcja zawiera:
- opcjonalną notatkę graficzną
- opcjonalny film uzupełniający
- quiz rozgrzewający przed lekcją
- lekcję pisaną
- w projektowo-opartych lekcjach, przewodniki krok po kroku jak zbudować projekt
- opcjonalny sketchnote
- opcjonalny uzupełniający film
- quiz rozgrzewkowy przed lekcją
- lekcję pisemną
- w przypadku lekcji projektowych, przewodniki krok po kroku dotyczące tworzenia projektu
- sprawdziany wiedzy
- wyzwanie
- lekturę uzupełniającą
- zadanie
- dodatkową lekturę
- zadanie domowe
- [quiz po lekcji](https://ff-quizzes.netlify.app/web/)
> **Uwaga o quizach**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/), aplikację quizu można uruchomić lokalnie lub wdrożyć na Azure; wykonaj instrukcje w folderze `quiz-app`.
> **Notatka dotycząca quizów**: Wszystkie quizy znajdują się w folderze Quiz-app, łącznie 48 quizów po trzy pytania każdy. Są dostępne [tutaj](https://ff-quizzes.netlify.app/web/). Aplikację quizową można uruchomić lokalnie lub opublikować na Azure; postępuj zgodnie z instrukcjami w folderze `quiz-app`.
## 🗃️ Lekcje
| | Nazwa projektu | Nauczane koncepcje | Cele nauczania | Powiązana lekcja | Autor |
| 01 | Pierwsze kroki | Wprowadzenie do programowania i narzędzia pracy | Poznaj podstawy większości języków programowania oraz oprogramowanie, które pomaga profesjonalnym programistom w pracy | [Wstęp do języków programowania i narzędzi pracy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Pierwsze kroki | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie, jak współpracować z innymi nad bazą kodu | [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Pierwsze kroki | Dostępność | Poznaj podstawy dostępności stron internetowych | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Podstawy JS | Typy danych w JavaScript | Podstawy typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Podstawy JS | Funkcje i metody | Naucz się o funkcjach i metodach do zarządzania logiką aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Podstawy JS | Podejmowanie decyzji w JS | Naucz się tworzyć warunki w kodzie używając metod podejmowania decyzji | [Podejmowanie decyzji](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Podstawy JS | Tablice i pętle | Pracuj z danymi za pomocą tablic i pętli w JavaScript | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Zbuduj HTML aby stworzyć internetowe terrarium, skupiając się na budowaniu układu | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS do stylizacji internetowego terrarium, skupiając się na podstawach CSS, w tym na responsywności strony | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Zamknięcia JavaScript, manipulacja DOM | Zbuduj JavaScript, aby terrarium działało jako interfejs drag/drop, z naciskiem na zamknięcia i manipulację DOM | [Zamknięcia JavaScript, manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tworzenie gry w pisanie | Naucz się używać zdarzeń klawiatury do sterowania logiką aplikacji JavaScript | [Programowanie zdarzeniowe](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Dowiedz się, jak działają przeglądarki, ich historia i jak stworzyć pierwsze elementy rozszerzenia przeglądarki | [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tworzenie formularza, wywoływanie API i przechowywanie zmiennych w local storage | Zbuduj elementy JavaScript twojego rozszerzenia, aby wywoływać API z użyciem zmiennych przechowywanych w local storage | [API, formularze i local storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle w przeglądarce, wydajność sieci | Użyj procesów w tle przeglądarki do obsługi ikony rozszerzenia; poznaj wydajność sieci i optymalizacje, by ją poprawić | [Zadania w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowany rozwój gier w JavaScript | Naucz się o dziedziczeniu za pomocą klas i kompozycji oraz wzorca pub/sub, w przygotowaniu do tworzenia gry | [Wprowadzenie do zaawansowanego tworzenia gier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na kanwie | Poznaj API Canvas, używane do rysowania elementów na ekranie | [Rysowanie na kanwie](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Przemieszczanie elementów na ekranie | Odkryj, jak elementy mogą się poruszać za pomocą współrzędnych kartezjańskich i API Canvas | [Przemieszczanie elementów](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, by elementy ze sobą kolidowały i reagowały za pomocą klawiszy oraz dodaj funkcję przerwy czasowej dla wydajności gry | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne bazujące na stanie i wydajności gry | [Liczenie punktów](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kończenie i restart gry | Naucz się kończyć i restartować grę, w tym sprzątać zasoby i resetować wartości zmiennych | [Warunek zakończenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i trasy w aplikacji webowej | Naucz się tworzyć szkielet architektury wielostronicowej strony internetowej z użyciem routingu i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do i z twojej aplikacji, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Naucz się, jak twoja aplikacja przechowuje stan i jak nim zarządzać programowo | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Naucz się korzystać z edytora kodu | [Korzystanie z edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca ze sztuczną inteligencją | Naucz się tworzyć własnego asystenta AI | [Projekt Asystent AI](./9-chat-project/README.md) | Chris |
| | Nazwa projektu | Nauczane koncepcje | Cele nauczania | Powiązana lekcja | Autor |
| 01 | Zacznijmy | Wprowadzenie do programowania i narzędzia pracy | Poznanie podstaw większości języków programowania oraz oprogramowania wspierającego profesjonalnych programistów | [Wprowadzenie do języków programowania i narzędzi pracy](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Zacznijmy | Podstawy GitHub, w tym praca zespołowa | Jak korzystać z GitHub w projekcie, jak współpracować z innymi nad kodem | [Wprowadzenie do GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Zacznijmy | Dostępność | Poznanie podstaw dostępności w sieci | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Podstawy JS | Typy danych w JavaScript | Podstawy dotyczące typów danych w JavaScript | [Typy danych](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Podstawy JS | Funkcje i metody | Poznanie funkcji i metod zarządzających logiką aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Podstawy JS | Tworzenie decyzji w JS | Nauka tworzenia warunków w kodzie za pomocą metod podejmowania decyzji | [Tworzenie decyzji](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Podstawy JS | Tablice i pętle | Praca z danymi za pomocą tablic i pętli w JavaScript | [Tablice i pętle](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML w praktyce | Tworzenie HTML do zbudowania wirtualnego terrarium, koncentrując się na układzie | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Tworzenie CSS do stylizacji wirtualnego terrarium, ze szczególnym uwzględnieniem podstaw CSS i responsywności strony | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures w JavaScript, manipulacja DOMem | Tworzenie kodu JavaScript, który pozwoli terrarium działać jako interfejs drag/drop, ze szczególnym uwzględnieniem closures i manipulacji DOM | [Closures i manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Tworzenie gry do pisania | Nauka korzystania z zdarzeń klawiatury do sterowania logiką aplikacji w JavaScript | [Programowanie zdarzeniowe](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Praca z przeglądarkami | Poznanie działania przeglądarek, ich historii oraz jak zbudować pierwsze elementy rozszerzenia do przeglądarki | [O przeglądarkach](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Budowa formularza, wywołanie API i przechowywanie zmiennych | Tworzenie elementów JavaScript rozszerzenia do przeglądarki, które wywołują API korzystając z lokalnego przechowywania zmiennych | [API, formularze i lokalne przechowywanie](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesy w tle w przeglądarce, wydajność sieciowa | Korzystanie z procesów działających w tle do zarządzania ikoną rozszerzenia, poznanie wydajności sieci i optymalizacji | [Procesy w tle i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Bardziej zaawansowany rozwój gier w JavaScript | Poznanie dziedziczenia za pomocą klas i kompozycji oraz wzorca Pub/Sub, przygotowanie do tworzenia gry | [Wprowadzenie do zaawansowanego tworzenia gier](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rysowanie na canvas | Nauka o API Canvas używanym do rysowania elementów na ekranie | [Rysowanie na Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Przemieszczanie elementów na ekranie | Odkryj, jak elementy mogą poruszać się przy użyciu współrzędnych kartezjańskich i API Canvas | [Przemieszczanie elementów](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, by elementy zderzały się i reagowały na siebie nawzajem za pomocą naciśnięć klawiszy oraz zapewnij funkcję cooldown | [Wykrywanie kolizji](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Liczenie punktów | Wykonuj obliczenia matematyczne na podstawie statusu i wydajności gry | [Liczenie punktów](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Kończenie i restartowanie gry | Nauka o kończeniu i restartowaniu gry, w tym sprzątaniu zasobów i resetowaniu zmiennych | [Warunek zakończenia](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Szablony HTML i trasy w aplikacji webowej | Nauka tworzenia szkieletu architektury wielostronicowej strony internetowej z wykorzystaniem tras i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Budowa formularza logowania i rejestracji | Poznanie budowania formularzy i obsługi walidacji | [Formularze](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metody pobierania i używania danych | Jak dane przepływają do aplikacji i z niej, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Koncepcje zarządzania stanem | Nauka, jak aplikacja przechowuje stan i jak nim sterować programistycznie | [Zarządzanie stanem](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Praca z VScode | Nauka korzystania z edytora kodu | [Używanie edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z AI | Nauka tworzenia własnego asystenta AI | [Projekt asystenta AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Nasz program nauczania oparty jest na dwóch kluczowych zasadach pedagogicznych:
* nauka projektowa
Nasz program nauczania zaprojektowano w oparciu o dwie kluczowe zasady pedagogiczne:
* naukę opartą na projektach
* częste quizy
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik stosowanych przez dzisiejszych deweloperów stron internetowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu space invader oraz aplikację bankową dla firm. Pod koniec serii studenci zdobędą solidne zrozumienie tworzenia stron internetowych.
Program uczy podstaw JavaScript, HTML i CSS, a także najnowszych narzędzi i technik stosowanych przez współczesnych programistów webowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do pisania, wirtualne terrarium, przyjazne środowisku rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Pod koniec cyklu studenci zdobędą solidną wiedzę na temat tworzenia stron internetowych.
> 🎓 Możesz rozpocząć od pierwszych lekcji tego programu jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
> 🎓 Możesz odbyć pierwsze lekcje tego programu jako [Ścieżkę nauki](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) na Microsoft Learn!
Zapewnienie zgodności treści z projektami sprawia, że proces jest bardziej angażujący dla uczniów, a utrwalanie koncepcji jest usprawnione. Napisaliśmy także kilka wprowadzających lekcji podstaw JavaScript, aby przedstawić koncepcje, połączonych z filmem z kolekcji "[Seria dla początkujących: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do powstania tego programu.
Dzięki dopasowaniu treści do projektów proces nauki jest bardziej angażujący dla studentów, a zapamiętywanie konceptów zostanie wzmocnione. Napisaliśmy także kilka lekcji wprowadzających do podstaw JavaScript, którym towarzyszy wideo z serii "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których niektórzy autorzy przyczynili się do tego programu.
Ponadto quiz o niskim stopniu ryzyka przed zajęciami nastawia ucznia na naukę danego tematu, a drugi quiz po lekcji zapewnia jego dalsze utrwalenie. Ten program został zaprojektowany tak, aby był elastyczny i przyjemny, można go realizować w całości lub w częściach. Projekty zaczynają się od małych i stają się coraz bardziej złożone w ciągu 12-tygodniowego cyklu.
Dodatkowo quiz niskiego ryzyka przed zajęciami nastawia ucznia na naukę tematu, a drugi quiz po zajęciach zapewnia dalsze utrwalenie materiału. Ten program został zaprojektowany jako elastyczny i przyjemny, można go realizować w całości lub częściowo. Projekty zaczynają się od prostych i stają się coraz bardziej złożone pod koniec 12-tygodniowego cyklu.
Choć celowo zrezygnowaliśmy z wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych jako web developer zanim przystąpi się do pracy z frameworkiem, kolejnym dobrym krokiem po ukończeniu tego kursu byłoby poznanie Node.js za pomocą innej kolekcji filmów: "[Seria dla początkujących: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Chociaż świadomie unikaliśmy wprowadzania frameworków JavaScript, aby skupić się na podstawowych umiejętnościach potrzebnych web developerowi przed użyciem frameworka, dobrym następnym krokiem po ukończeniu tego kursu będzie nauka Node.js za pomocą innej serii wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Odwiedź nasze wytyczne dotyczące [Kodeksu postępowania](CODE_OF_CONDUCT.md) i [Współpracy](CONTRIBUTING.md). Czekamy na Twoją konstruktywną opinię!
## 🧭 Dostęp offline
Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Zforkuj to repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swojej lokalnej maszynie, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona będzie dostępna na porcie 3000 na twoim localhost: `localhost:3000`.
Możesz uruchomić tę dokumentację offline, korzystając z [Docsify](https://docsify.js.org/#/). Zrób fork tego repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim komputerze, a następnie w głównym folderze tego repozytorium wpisz `docsify serve`. Strona zostanie uruchomiona na porcie 3000 na twoim lokalnym hoście: `localhost:3000`.
## 📘 PDF
Plik PDF ze wszystkimi lekcjami dostępny jest [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Plik PDF ze wszystkimi lekcjami można znaleźć [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Inne kursy
@ -197,7 +213,7 @@ Nasz zespół tworzy także inne kursy! Sprawdź:
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agenci
@ -207,7 +223,7 @@ Nasz zespół tworzy także inne kursy! Sprawdź:
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Seria Generative AI
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
@ -215,8 +231,8 @@ Nasz zespół tworzy także inne kursy! Sprawdź:
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
---
### Podstawowa Nauka
### Core Learning
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -226,30 +242,30 @@ Nasz zespół tworzy także inne kursy! Sprawdź:
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Seria Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](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)
Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI, dołącz do innych uczących się i doświadczonych programistów w dyskusjach o MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest swobodnie dzielona.
Jeśli utkniesz lub masz pytania dotyczące tworzenia aplikacji AI. Dołącz do innych uczących się i doświadczonych programistów w dyskusjach na temat MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest dzielona swobodnie.
To repozytorium jest licencjonowane na podstawie licencji MIT. Zobacz plik [LICENSE](../../LICENSE) po więcej informacji.
To repozytorium jest licencjonowane na podstawie licencji MIT. Aby uzyskać więcej informacji, zobacz plik [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Ten dokument został przetłumaczony za pomocą automatycznej usługi tłumaczeniowej AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że staramy się zapewnić dokładność, prosimy pamiętać, że tłumaczenia automatyczne mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być uważany za autorytatywne źródło. W przypadku informacji o kluczowym znaczeniu zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
**Zrzeczenie się odpowiedzialności**:
Niniejszy dokument został przetłumaczony za pomocą automatycznej usługi tłumaczeniowej AI [Co-op Translator](https://github.com/Azure/co-op-translator). Pomimo naszych starań o dokładność, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być traktowany jako źródło ostateczne. W przypadku informacji krytycznych zalecamy skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
Bu, web geliştirme temellerini yeni başlayanlara öğretmek için hazırlanmış bir eğitim müfredatı deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilen ve JavaScript, CSS ve HTML konularını kapsayan 24 uygulamalı ders içeren kapsamlı bir 12 haftalık kurstur.
Bu, yeni başlayanlara web geliştirme temellerini öğretmek için hazırlanmış eğitim müfredatı deposudur. Müfredat, Microsoft Cloud Advocates tarafından geliştirilmiş kapsamlı 12 haftalık bir kurstur ve JavaScript, CSS ve HTML'i kapsayan 24 uygulamalı ders içerir.
### Ana Bileşenler
- **Eğitim İçeriği**: Proje tabanlı modüller halinde düzenlenmiş 24 yapılandırılmış ders
- **Uygulamalı Projeler**: Terrarium, Yazı Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Bankacılık Uygulaması, Kod Editörü ve Yapay Zeka Sohbet Asistanı
- **Etkileşimli Testler**: Her biri 3 sorudan oluşan 48 test (ders öncesi/sonrası değerlendirmeler)
- **Çok Dilli Destek**: GitHub Actions aracılığıyla 50+ dilde otomatik çeviriler
- **Eğitim İçeriği**: Proje tabanlı modüllerde düzenlenmiş 24 yapılandırılmış ders
- **Pratik Projeler**: Terrarium, Yazma Oyunu, Tarayıcı Uzantısı, Uzay Oyunu, Bankacılık Uygulaması, Kod Editörü ve AI Sohbet Asistanı
- **Etkileşimli Quizler**: Her biri 3 sorudan oluşan 48 quiz (ders öncesi/sonrası değerlendirmeler)
- **Çok Dilli Destek**: GitHub Actions ile 50+ dilde otomatik çeviriler
@ -394,13 +394,15 @@ Bireysel projelerle ilgili ayrıntılı talimatlar için şu README dosyalarına
### Monorepo Yapısı
Geleneksel bir monorepo olmasa da, bu depo birden fazla bağımsız proje içerir:
Geleneksel bir monorepo olmasa da, bu depo birden çok bağımsız proje içerir:
- Her ders kendi içinde bağımsızdır
- Projeler bağımlılıkları paylaşmaz
- Bireysel projeler üzerinde çalışırken diğerlerini etkilemez
- Tam müfredat deneyimi için tüm depoyu klonlayın
- Projeler bağımlılık paylaşmaz
- Projelerde çalışırken diğer projeleri etkilemezsiniz
- Tüm müfredat deneyimi için depo tamamen klonlanabilir
---
**Feragatname**:
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**:
Bu belge, AI çeviri servisi [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık içerebileceğini lütfen unutmayın. Orijinal belgenin kendi dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı nedeniyle ortaya çıkabilecek yanlış anlamalar veya yorum hatalarından sorumlu tutulamayız.
# Yeni Başlayanlar için Web Geliştirme - Bir Müfredat
Microsoft Cloud Advocates tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, teraryumlar, tarayıcıuzantıları ve uzay oyunları gibi uygulamalı projelerle JavaScript, CSS ve HTML’i derinlemesine inceliyor. Sınavlar, tartışmalar ve uygulamalı ödevlerle etkileşimde bulunun. Etkili proje tabanlı pedagojimizle becerilerinizi geliştirin ve bilgi tutumunuzu optimize edin. Kodlama yolculuğunuza bugün başlayın!
Microsoft Cloud Advocates tarafından hazırlanan 12 haftalık kapsamlı kursumuzla web geliştirme temellerini öğrenin. 24 dersin her biri, teraryumlar, tarayıcıeklentileri ve uzay oyunları gibi uygulamalı projeler aracılığıyla JavaScript, CSS ve HTML'yi derinlemesine ele alır. Quizler, tartışmalar ve pratik ödevlerle etkileşime geçin. Becerilerinizi geliştirin ve bilgilerinizi etkili proje tabanlı öğretim metodumuzla optimize edin. Kodlama yolculuğunuza bugün başlayın!
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Bu, kursu tamamlamak için ihtiyacınız olan her şeyi çok daha hızlı bir indirme ile sağlar.
> Bu şekilde dersi tamamlamak için gereken her şeye çok daha hızlı bir şekilde sahip olursunuz.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Ek çeviri dillerinin desteklenmesini istiyorsanız, bunlar [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir**
**Ek çeviri dillerinin desteklenmesini istiyorsanız, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmektedir**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Öğrenci misiniz?_
Başlangıç kaynakları, Öğrenci paketleri ve hatta ücretsiz sertifika kuponu alma yollarını bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. İçeriği her ay değiştirdiğimiz için yer işareti olarak ekleyip zaman zaman kontrol etmek isteyeceğiniz sayfa burasıdır.
Başlangıç kaynakları, öğrenci paketleri ve ücretsiz sertifika kuponu alma yollarını bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. Bu sayfa, içeriği aylık olarak değiştirdiğimiz için düzenli olarak yer imlerinize ekleyip kontrol etmeniz gereken sayfadır.
### 📣 Duyuru - Tamamlanması Gereken Yeni GitHub Copilot Agent modu meydan okumaları!
### 📣 Duyuru - Tamamlanacak Yeni GitHub Copilot Agent mod zorlukları!
Yeni Meydan Okuma eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modu kullanarak tamamlamanız gereken yeni bir meydan okumadır. Agent modunu daha önce kullanmadıysanız, yalnızca metin üretmekle kalmaz, aynı zamanda dosya oluşturup düzenleyebilir, komut çalıştırabilir ve daha fazlasını yapabilir.
Yeni Zorluk eklendi, çoğu bölümde "GitHub Copilot Agent Challenge 🚀" arayın. Bu, GitHub Copilot ve Agent modunu kullanarak tamamlayabileceğiniz yeni bir meydan okuma. Agent modunu daha önce kullanmadıysanız, sadece metin üretmekle kalmaz, aynı zamanda dosyaları oluşturabilir ve düzenleyebilir, komutlar çalıştırabilir ve daha fazlasını yapabilir.
### 📣 Duyuru - _Generatif AI kullanarak yeni bir proje_
### 📣 Duyuru - _Generatif AI kullanılarak inşa edilecek Yeni Proje_
Yeni AI Asistan projesi eklendi, inceleyin [proje](./9-chat-project/README.md)
### 📣 Duyuru - _Generatif AI için JavaScript’te Yeni Müfredat_ yayımlandı
### 📣 Duyuru - _Generatif AI için JavaScript Müfredatı_ yeni yayınlandı
Yeni Generatif AI müfredatımızı kaçırmayın!
Başlamak için [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
Her ders; tamamlanacak bir ödev, bilgi kontrolü ve aşağıdaki gibi konularda sizi yönlendirecek bir meydan okumayı içerir:
- Prompt verme ve prompt mühendisliği
- Metin ve resim uygulama üretimi
Her derste tamamlanacak bir ödev, bilgi kontrolü ve şu konuları öğrenmenize rehberlik eden bir meydan okuma bulunur:
- İstem oluşturma ve istem mühendisliği
- Metin ve görsel uygulama oluşturma
- Arama uygulamaları
Başlamak için [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) adresini ziyaret edin!
Başlamak için ziyaret edin [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course)
## 🌱 Başlarken
> **Öğretmenler**, bu müfredatı nasıl kullanabileceğinize dair [birkaç öneri ekledik](for-teachers.md). Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) duymak isteriz!
> **Öğretmenler**, bu müfredatı nasıl kullanacağınıza dair [bazı öneriler](for-teachers.md) ekledik. Geri bildirimlerinizi [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) bekliyoruz!
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için ders öncesi bir sınavla başlayın ve ardından ders materyalini okuyun, çeşitli aktiviteleri tamamlayın ve ders sonrası sınavla anlayışınızı kontrol edin.
**[Öğrenenler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her derse başlamadan önce bir ön ders sınavı yapın, sonra ders materyalini okuyun, çeşitli aktiviteleri tamamlayın ve ders sonrası sınav ile anlayışınızı kontrol edin.
Öğrenme deneyiminizi geliştirmek için, projeler üzerinde birlikte çalışmak üzere akranlarınızla bağlanın! Tartışmalar [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir; moderatörlerden oluşan ekibimiz sorularınızı yanıtlamak için hazırdır.
Öğrenme deneyiminizi artırmak için, projelerde birlikte çalışmak üzere akranlarınızla iletişim kurun! Tartışmalar, moderatörlerimizin sorularınızı yanıtlayacağı [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilmektedir.
Eğitiminizi ilerletmek için ek çalışma materyalleri için [Microsoft Learn’i](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) keşfetmenizi şiddetle tavsiye ederiz.
Eğitiminizi daha da ilerletmek için, ek çalışma materyalleri için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) platformunu güçlü bir şekilde tavsiye ediyoruz.
### 📋 Ortamınızı Kurma
Bu müfredat geliştirme ortamı hazırdır! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) içinde (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) veya bilgisayarınızda bir metin düzenleyici kullanarak (örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)) çalıştırmayı seçebilirsiniz.
Bu müfredat bir geliştirme ortamı hazır halde sunar! Başlarken, müfredatı [Codespace](https://github.com/features/codespaces/) içinde çalıştırabilir (_tarayıcı tabanlı, yükleme gerektirmeyen ortam_), veya bilgisayarınızda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) gibi bir metin düzenleyici kullanarak yerel olarak çalıştırabilirsiniz.
#### Depo Oluşturun
Çalışmanızı kolay kaydetmeniz için bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu sayfanın üst kısmındaki **Use this template** butonuna tıklayarak yapabilirsiniz. Bu, GitHub hesabınızda müfredat kopyası olan yeni bir depo oluşturur.
#### Depo oluşturun
Çalışmalarınızı kolayca kaydedebilmeniz için kendi kopyanızı oluşturmanız önerilir. Bunu sayfanın üstündeki **Şablon olarak kullan** düğmesine tıklayarak yapabilirsiniz. Bu, müfredatın bir kopyasıyla sizin GitHub hesabınızda yeni bir depo oluşturacaktır.
Aşağıdaki adımları izleyin:
1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
Şu adımları izleyin:
1. **Depoyu Dallandırın**: Bu sayfanın sağ üst köşesindeki "Fork" düğmesine tıklayın.
Oluşturduğunuz bu deponuzda, **Code** butonuna tıklayın ve **Open with Codespaces** seçeneğini seçin. Bu, sizin için üzerinde çalışabileceğiniz yeni bir Codespace oluşturacaktır.
Oluşturduğunuz bu deponuzda, **Code** butonuna tıklayın ve **Open with Codespaces** seçeneğini seçin. Bu size yeni bir Codespace oluşturacaktır.
#### Müfredatıyerel olarak bilgisayarınızda çalıştırmak
Bu müfredatı bilgisayarınızda yerel olarak çalıştırmak için bir metin editörüne, bir tarayıcıya ve bir komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dillerine ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), her bir araç için çeşitli seçenekleri size tanıtacaktır, böylece size en uygun olanı seçebilirsiniz.
Bu müfredatı bilgisayarınızda çalıştırmak için bir metin editörüne, bir tarayıcıya ve komut satırı aracına ihtiyacınız olacak. İlk dersimiz, [Programlama Dilleri ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçların her biri için farklı seçenekleri size tanıtacak ve sizin için en uygun olanı seçmenizi sağlayacak.
Tavsiyemiz, editör olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır; içinde yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) vardır. Visual Studio Code’u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
Önerimiz, editör olarak [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) kullanmanızdır; içinde ayrıca yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) bulunmaktadır. Visual Studio Code'u [buradan](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) indirebilirsiniz.
1. Depoyu bilgisayarınıza klonlayın. Bunu yapmak için **Code** düğmesine tıklayın ve URL’yi kopyalayın:
Ardından, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) açın ve az önce kopyaladığınız URL ile `<your-repository-url>`değiştirerek aşağıdaki komutu çalıştırın:
Sonra, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) içinde [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) açın ve az önce kopyaladığınız URL ile `<your-repository-url>`yerine aşağıdaki komutu çalıştırın:
```bash
git clone <your-repository-url>
@ -127,83 +127,83 @@ Tavsiyemiz, editör olarak [Visual Studio Code](https://code.visualstudio.com/?W
2. Klasörü Visual Studio Code'da açın. Bunu **Dosya** > **Klasör Aç** seçeneğine tıklayarak ve az önce klonladığınız klasörü seçerek yapabilirsiniz.
> Önerilen Visual Studio Code eklentileri:
> Önerilen Visual Studio Code uzantıları:
>
> * [Canlı Sunucu (Live Server)](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarını önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - kod yazmanızı hızlandırmak için
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code içinde HTML sayfalarını önizlemek için
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - daha hızlı kod yazmanıza yardımcı olmak için
## 📂 Her ders şunları içerir:
- isteğe bağlıtaslak notu
- isteğe bağlısketchnote
- isteğe bağlı destekleyici video
- dersten önce yapılan ısınma sınavı
- dersten önce hazırlık sınavı
- yazılı ders
- proje tabanlı derslerde, projeyi adım adım nasıl inşa edeceğinizin rehberi
- proje bazlı derslerde, projeyi adım adım nasıl inşa edeceğinize dair rehberler
- bilgi kontrolü
- bir meydan okuma
- destekleyici okumalar
- destekleyici okuma materyali
- ödev
- [dersten sonra yapılan sınav](https://ff-quizzes.netlify.app/web/)
- [dersten sonra sınav](https://ff-quizzes.netlify.app/web/)
> **Sınavlar hakkında not**: Tüm sınavlar Quiz-app klasöründe yer almakta olup, her biri üç sorudan oluşan toplam 48 sınav bulunmaktadır. Bu sınavlar [burada](https://ff-quizzes.netlify.app/web/) mevcuttur, sınav uygulaması yerel olarak çalıştırılabilir veya Azure’a dağıtılabilir; talimatlar `quiz-app` klasöründe bulunmaktadır.
> **Sınavlar hakkında bir not**: Tüm sınavlar Quiz-app klasöründe yer almakta olup, toplamda 48 adet üç soruluk sınav bulunmaktadır. Sınavlar [burada](https://ff-quizzes.netlify.app/web/) mevcuttur; sınav uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; talimatlar `quiz-app` klasöründe verilmiştir.
## 🗃️ Dersler
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
| 01 | Başlarken | Programlamaya Giriş ve Araçlar | Çoğu programlama dilinin temelini öğrenmek ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımlar hakkında bilgi edinmek | [Programlama Dilleri ve Araçlara Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip ile çalışma | Projenizde GitHub’ı nasıl kullanacağınızı, kod tabanı üzerinde başkalarıyla nasıl iş birliği yapacağınızı öğrenmek | [GitHub’a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenmek | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Türleri | JavaScript veri türlerinin temellerini öğrenmek | [Veri Türleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metodları öğrenmek | [Fonksiyonlar ve Metodlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Karar verme yöntemlerini kullanarak kodunuzda koşullar oluşturmayı öğrenmek | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript’te diziler ve döngüler kullanarak veri ile çalışma | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML Uygulaması | Çevrimiçi bir terraryum oluşturmak için HTML yapısını oluşturmak, düzen oluşturulmasına odaklanmak | [HTML’e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS Uygulaması | Çevrimiçi terraryumu stilize etmek için CSS oluşturmak, sayfayı duyarlı hale getirme dahil olmak üzere CSS temelleri | [CSS’e Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışları, DOM işlemleri | Terraryumun sürükle/bırak arayüzü olarak işlev görmesi için JavaScript oluşturmak, kapanışlar ve DOM işlemlerine odaklanmak | [JavaScript Kapanışları, DOM işlemleri](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Bir Yazma Oyunu Oluşturma | Klavye olaylarını kullanarak JavaScript uygulamanızın mantığını yönetmeyi öğrenmek | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Yeşil Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihçesini öğrenmek ve ilk tarayıcı uzantısı elemanlarını tasarlamak | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Yeşil Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Bir form oluşturmak, API çağrısı ve yerel depolamada değişkenleri saklamak | Yerel depolamada saklanan değişkenleri kullanarak API çağıran tarayıcı uzantınızın JavaScript öğelerini oluşturun | [API’lar, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Yeşil Tarayıcı Uzantısı](./5-browser-extension/solution/README.md) | Tarayıcıda arka plan süreçleri, web performansı | Uzantının simgesini yönetmek için tarayıcının arka plan süreçlerini kullanmak; web performansı ve bazı optimizasyonları öğrenmek | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha İleri Oyun Geliştirme | Kalıtım (Inheritance) kavramını hem Sınıflar hem de Kompozisyon ve Yayınla/Abone (Pub/Sub) desenleriyle öğrenmek, oyun geliştirmeye hazırlanmak | [İleri Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas üzerine çizim | Ekrana elemanlar çizmek için kullanılan Canvas API’yi öğrenmek | [Canvas’e Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Ekrandaki elemanları hareket ettirme | Elemanların Kartezyen koordinatları ve Canvas API’si kullanılarak nasıl hareket kazandığını keşfetmek | [Elemanları Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Uzay Oyunu](./6-space-game/solution/README.md) | Çarpışma algılama | Tuş basımlarını kullanarak elemanları çarpıştırmak ve birbirlerine tepki vermelerini sağlamak; oyunun performansı için bekleme fonksiyonu oluşturmak | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Uzay Oyunu](./6-space-game/solution/README.md) | Skor Tutma | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapmak | [Skor Tutma](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Uzay Oyunu](./6-space-game/solution/README.md) | Oyunu bitirme ve yeniden başlatma | Oyunu bitirme ve yeniden başlatma işlemleri, varlıkları temizleme ve değişken değerlerini sıfırlama hakkında bilgi almak | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Bir Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenmek | [HTML Şablonları ve Yönler](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama rutinlerini nasıl yöneteceğinizi öğrenmek | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanıza veri akışı, veriyi alma, saklama ve atma yöntemlerini öğrenmek | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banka Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl tuttuğunu ve programatik olarak nasıl yöneteceğinizi öğrenmek | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı/VScode Kodu](../../8-code-editor) | VScode ile Çalışmak | Bir kod editörü nasıl kullanılır öğrenin | [VScode Kod Editörü Kullanımı](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Yapay Zeka Asistanları](./9-chat-project/README.md) | Yapay Zeka ile Çalışmak | Kendi yapay zeka asistanınızı nasıl oluşturacağınızı öğrenin | [Yapay Zeka Asistanı Projesi](./9-chat-project/README.md) | Chris |
## 🏫 Eğitim Öğretim Yöntemi
Müfredatımız iki temel pedagojik ilke göz önünde bulundurularak tasarlandı:
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | Bağlı Ders | Yazar |
| 01 | Başlarken | Programlamaya Giriş ve Ticaret Araçları | Çoğu programlama dilinin temelini ve profesyonel geliştiricilerin işlerini kolaylaştıran yazılımları öğrenin | [Programlama Dillerine ve Ticaret Araçlarına Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, Takımla Çalışmayı İçerir | Projenizde GitHub nasıl kullanılır, başkalarıyla bir kod tabanı üzerinde nasıl işbirliği yapılır öğrenin | [GitHub'a Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Başlarken | Erişilebilirlik | Web erişilebilirliğinin temellerini öğrenin | [Erişilebilirlik Temelleri](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | Uygulama mantık akışını yönetmek için fonksiyonlar ve metodları öğrenin | [Fonksiyonlar ve Metodlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 06 | JS Temelleri | JS ile Karar Verme | Kodunuzda koşullar yaratmayı ve karar verme yöntemlerini kullanmayı öğrenin | [Karar Verme](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Temelleri | Diziler ve Döngüler | JavaScript'te diziler ve döngüler kullanarak veri ile çalışın | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | Pratikte HTML | Çevrimiçi bir terraryum oluşturmak için HTML yazın, düzen oluşturma odaklı | [HTML'e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Pratikte CSS | Çevrimiçi terraryuma stil vermek için CSS oluşturun, sayfanın duyarlı olmasını sağlama dahil CSS'nin temellerine odaklanın | [CSS'e Giriş](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Kapanışları, DOM manipülasyonu | Terraryumu sürükle/bırak arayüzü olarak işlevsel hale getirmek için JavaScript yazın, kapanışlar ve DOM manipülasyonuna odaklanın | [JavaScript Kapanışları, DOM manipülasyonu](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Yazma Oyunu Yapımı | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını kullanmayı öğrenin | [Olay Tabanlı Programlama](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tarayıcılarla Çalışmak | Tarayıcıların nasıl çalıştığını, tarihçesini öğrenin ve bir tarayıcı uzantısının ilk öğelerini oluşturmanın temelini öğrenin | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Form oluşturma, API çağırma ve local storage'da değişken saklama | API çağırmak ve local storage'da saklanan değişkenleri kullanmak için tarayıcı uzantınızın JavaScript öğelerini oluşturun | [API'ler, Formlar ve Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Tarayıcıdaki arka plan süreçleri, web performansı | Uzantının simgesini yönetmek için tarayıcının arka plan süreçlerini kullanın; web performansı ve bazı optimizasyonlar hakkında bilgi edinin | [Arka Plan Görevleri ve Performans](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | JavaScript ile Daha İleri Oyun Geliştirme | Sınıflar ve Kompozisyon kullanarak Kalıtım ve Yayınlama/Abone olma (Pub/Sub) tasarım desenlerini öğrenin, oyun geliştirmeye hazırlık | [İleri Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Canvas'a Çizim | Ekrana öğeler çizmek için kullanılan Canvas API'sini öğrenin | [Canvas'a Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Ekrandaki Öğeleri Hareket Ettirme | Öğelerin Kartezyen koordinatları ve Canvas API'si kullanılarak nasıl hareket kazandığını keşfedin | [Öğeleri Hareket Ettirme](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Çarpışma Algılama | Öğeleri birbirine çarpıştırın ve tuş basımlarını kullanarak tepki vermelerini sağlayın, ayrıca oyunun performansını sağlamak için bekleme fonksiyonu ekleyin | [Çarpışma Algılama](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Skor Takibi | Oyunun durumu ve performansına dayalı matematiksel hesaplamalar yapın | [Skor Takibi](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Oyunu Bitirme ve Yeniden Başlatma | Oyunu bitirme ve yeniden başlatma hakkında, varlıkları temizleme ve değişken değerleri sıfırlama dahil olmak üzere bilgi edinin | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Bir Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı bir web sitesinin mimarisini yönlendirme ve HTML şablonları kullanarak nasıl oluşturacağınızı öğrenin | [HTML Şablonları ve Yönlendirme](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama rutinlerini öğrenin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanıza veri akışı, veriyi alma, saklama ve bertaraf etme yöntemlerini öğrenin | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl tuttuğunu ve bunu programatik olarak nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | VScode ile Çalışmak | Bir kod editörü kullanmayı öğrenin | [VScode Kod Editörü Kullanımı](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Yapay Zeka ile Çalışmak | Kendi yapay zeka asistanınızı nasıl oluşturacağınızı öğrenin | [Yapay Zeka Asistan Projesi](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoji
Müfredatımız iki temel pedagojik ilke gözetilerek tasarlanmıştır:
* proje tabanlı öğrenme
* sık sık sınavlar
* sık sınavlar
Program, JavaScript, HTML ve CSS’nin temelini ve günümüz web geliştiricileri tarafından kullanılan en son araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terraryum, çevre dostu tarayıcı uzantısı, uzay istilacısı tarzı oyun ve işletmeler için bir banka uygulaması inşa ederek uygulamalı deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda öğrenciler web geliştirme konusunda sağlam bir anlayışa sahip olacaklar.
Program JavaScript, HTML ve CSS'nin temelini ve günümüzün web geliştiricileri tarafından kullanılan en son araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terraryum, çevre dostu tarayıcı uzantısı, uzay istilacısı tarzı oyun ve işletmeler için bir bankacılık uygulaması oluşturarak pratik deneyim kazanma fırsatına sahip olacaklar. Serinin sonunda öğrenciler web geliştirme hakkında sağlam bir anlayışa sahip olurlar.
> 🎓 Bu müfredattaki ilk birkaç dersi Microsoft Learn’de bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
> 🎓 Bu müfredatın ilk birkaç dersini Microsoft Learn'de bir [Öğrenme Yolu](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) olarak alabilirsiniz!
İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca konseptleri tanıtmak amacıyla çeşitli JavaScript temel dersleri yazdık ve bunlara eşlik eden, bazı yazarlarının bu müfredatta katkısı bulunan "[JavaScript’e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" video eğitim koleksiyonundan bir video eşlik eder.
İçeriğin projelerle uyumlu olmasını sağlayarak süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, bazı kavramları tanıtmak için JavaScript temelleri üzerine birkaç başlangıç dersi yazdık; bunlar, bazı yazarlarının katkıda bulunduğu "[JavaScript'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" adlı video eğitim koleksiyonundan bir video ile eşleştirilmiştir.
Buna ek olarak, bir ders öncesi düşük riskli bir sınav, öğrencinin öğrenme niyetini belirlerken, dersten sonra ikinci bir sınav kalıcılığı garanti eder. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlandı ve tamamı ya da bir kısmı alınabilir. Projeler küçük başlar ve 12 haftalık döngü sonunda giderek daha karmaşık hale gelir.
Bunun yanında, ders öncesi düşük riskli bir sınav öğrencinin öğrenme niyetini belirlerken, ders sonrası bir başka sınav daha derin kalıcılığı sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmıştır ve tamamı veya bir kısmı alınabilir. Projeler küçük başlayıp 12 haftalık döngü sonunda giderek daha karmaşık hale gelir.
JavaScript çerçevelerini kasıtlı olarak tanıtmaktan kaçınarak, bir çerçeve benimsemeden önce web geliştiricisi olarak ihtiyaç duyulan temel becerilere odaklandık; bu müfredatı tamamlamak için iyi bir sonraki adım, başka bir video koleksiyonu olan “[Node.js’e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)” aracılığıyla Node.js öğrenmek olacaktır.
Bir JavaScript çatısı (framework) tanıtmayarak web geliştiricisi olarak ihtiyaç duyulan temel beceriler üzerinde yoğunlaşılması amaçlanmıştır; bu müfredatı tamamlamak için iyi bir sonraki adım başka bir video koleksiyonuyla Node.js hakkında öğrenmek olacaktır: "[Node.js'e Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> [Davranış Kuralları](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) rehberlerimizi ziyaret edin. Yapıcı geri bildirimlerinizi bekliyoruz!
> [Davranış Kurallarımız](CODE_OF_CONDUCT.md) ve [Katkıda Bulunma](CONTRIBUTING.md) rehberlerimize göz atın. Yapıcı geri bildirimlerinizi memnuniyetle karşılıyoruz!
## 🧭 ÇevrimdışıErişim
## 🧭 Çevrimdışıerişim
Bu dokümantasyonu çevrimdışı olarak [Docsify](https://docsify.js.org/#/) kullanarak çalıştırabilirsiniz. Bu depoyu çatallayın, yerel makinenize [Docsify kurun](https://docsify.js.org/#/quickstart) ve ardından bu deponun kök klasöründe `docsify serve` yazın. Web sitesi localhost:3000 portunda (localhost:3000) yayınlanacaktır.
Bu dokümantasyonu çevrimdışı olarak [Docsify](https://docsify.js.org/#/) kullanarak çalıştırabilirsiniz. Bu depoyu çatallayın, yerel makinenize [Docsify'i kurun](https://docsify.js.org/#/quickstart) ve sonra bu depo kök klasöründe `docsify serve` yazın. Web sitesi localhost'unuzda 3000 portunda sunulacaktır: `localhost:3000`.
## 📘 PDF
Tüm derslerin PDF’sine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulaşabilirsiniz.
Tüm derslerin PDF'si [burada](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulunabilir.
## 🎒 Diğer Kurslar
@ -213,7 +213,7 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -236,36 +236,36 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
[](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)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Copilot Serisi
[](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)
[](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)
AI uygulamaları geliştirme sürecinde takılırsanız veya herhangi bir sorunuz olursa, MCP hakkında tartışmalara katılmak için diğer öğrenenler ve deneyimli geliştiricilerle bir araya gelin. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
Yapay zeka uygulamaları geliştirme konusunda takılırsanız veya herhangi bir sorunuz olursa, MCP hakkında tartışmalara katılmak için diğer öğrenenler ve deneyimli geliştiricilerle buluşun. Soruların memnuniyetle karşılandığı ve bilginin serbestçe paylaşıldığı destekleyici bir topluluktur.
Bu depo MIT lisansıaltında lisanslanmıştır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
Bu depo MIT lisansıkapsamındadır. Daha fazla bilgi için [LICENSE](../../LICENSE) dosyasına bakınız.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**:
Bu belge, AI çeviri servisi [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstermemize rağmen, otomatik çeviri hatalar veya yanlışlıklar içerebilir. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanılması nedeniyle doğabilecek yanlış anlamalar veya yorumlamalardan sorumlu değiliz.
Bu belge, AI çeviri hizmeti [Co-op Translator](https://github.com/Azure/co-op-translator) kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayın. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımı sonucunda oluşabilecek yanlış anlamalar veya yorum hatalarından sorumlu değiliz.
localizeflow[bot]
3 weeks ago