Αυτό είναι ένα αποθετήριο εκπαιδευτικού προγράμματος για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα είναι ένα ολοκληρωμένο 12-εβδομαδιαίο μάθημα που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Βασικά Στοιχεία
### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε έργα
- **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα ταξινομημένα σε ενότητες έργων
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (πριν/μετά το μάθημα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις για 50+ γλώσσες μέσω GitHub Actions
- **Διαδραστικά Quiz**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις σε 50+ γλώσσες μέσω GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) συνιστάται για μαθητές
- Επιπλέον μαθήματα: Generative AI, Data Science, ML, IoT διαθέσιμα
### Εργασία με Συγκεκριμένα Έργα
Για λεπτομερείς οδηγίες για τα επιμέρους έργα, ανατρέξτε στα αρχεία README σε:
- `quiz-app/README.md` - Εφαρμογή κουίζ Vue 3
- `7-bank-project/README.md` - Εφαρμογή τραπεζικού με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Παιχνίδι βασισμένο σε canvas
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI
### Δομή Monorepo
Παρόλο που δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε επιμέρους έργα χωρίς να επηρεάζετε άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
---
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση Ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρανοήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης.
# Ανάπτυξη Ιστού για Αρχάριους - Μια Διδακτική Ενότητα
# Ανάπτυξη Ιστού για Αρχάριους - Ένα Πρόγραμμα Σπουδών
Μάθετε τα θεμέλια της ανάπτυξης ιστού με το ολοκληρωμένο μάθημα 12 εβδομάδων από τους Υποστηρικτές Microsoft Cloud. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραρίουμ, επεκτάσεις περιηγητή και διαστημικά παιχνίδια. Εμπλακείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Ενισχύστε τις δεξιότητές σας και βελτιστοποιήστε την απομνημόνευση γνώσεων με την αποτελεσματική παιδαγωγική μας βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον προγραμματισμό σήμερα!
Μάθετε τα βασικά της ανάπτυξης ιστού με το ολοκληρωμένο μας μάθημα 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεραρίουμ, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Αναβαθμίστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με την αποτελεσματική παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!
Ενταχθείτε στην κοινότητα Azure AI Foundry στο Discord
Εγγραφείτε στην Κοινότητα Discord Azure AI Foundry
Ακολουθήστε αυτά τα βήματα γιανααρχίσετε να χρησιμοποιείτε αυτούς τους πόρους:
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. [**Εγγραφείτε στο Discord του Azure AI Foundry και γνωρίστε ειδικούς και άλλους προγραμματιστές**](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 mode. Αν δεν έχετε χρησιμοποιήσει το Agent mode πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
### 📣 Ανακοίνωση - _Νέο έργο που κατασκευάζεται με τη χρήση Γενετικής Τεχνητής Νοημοσύνης_
### 📣 Ανακοίνωση - _Νέο έργο για κατασκευή με χρήση Γενετικής Τεχνητής Νοημοσύνης_
Πρόσφατα προστέθηκε νέο έργο AI Assistant, δείτε το [έργο](./9-chat-project/README.md)
Πρόσθετο νέο έργο Βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
### 📣 Ανακοίνωση - _Νέο Πρόγραμμα Σπουδών_για Γενετική Τεχνητή Νοημοσύνη στην JavaScript μόλις κυκλοφόρησε
### 📣 Ανακοίνωση - _Νέο Πρόγραμμα Σπουδών_για Γενετική Τεχνητή Νοημοσύνη σε JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα σπουδών για Γενετική Τεχνητή Νοημοσύνη!
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε τα σχόλιά σας [στο φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Καθηγητές**, έχουμε [περιλάβει μερικές προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε το feedback σας [στο φόρουμ συζητήσεών μας](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" στην πάνω δεξιά γωνία αυτής της σελίδας.
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 που μόλις αντιγράψατε:
@ -124,86 +124,86 @@
git clone <your-repository-url>
```
2. Ανοίξτε τον φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **Αρχείο** > **Άνοιγμα Φακέλου** και επιλέγοντας τον φάκελο που μόλις αντιγράψατε.
2. Ανοίξτε τον φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **File** > **Open Folder** και επιλέγοντας τον φάκελο που μόλις κλωνοποιήσατε.
> Συνιστώμενες επεκτάσεις Visual Studio Code:
> Συνιστώμενες επεκτάσεις για το Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - γιανα προβάλετε σελίδες HTML μέσα στο Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - γιαναβοηθήσει στη γρηγορότερη συγγραφή κώδικα
> * [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)
- προαιρετική σχεδίαση ιδεών (sketchnote)
- προαιρετικό συμπληρωματικό βίντεο
- προθέρμανση με κουίζ πριν το μάθημα
- προθέρμανση quiz πριν το μάθημα
- γραπτό μάθημα
- για μαθήματα με έργα, βήμα-βήμα οδηγίες για την κατασκευή του έργου
- για μαθήματα βασισμένα σε project, οδηγίες βήμα προς βήμα για το πώς να χτίσετε το έργο
- ελέγχους γνώσης
- μια πρόκληση
- συμπληρωματική ανάγνωση
- ανάθεση
- [κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/)
- εργασίες
- [τεστ μετά το μάθημα](https://ff-quizzes.netlify.app/web/)
> **Σημείωση σχετικά με τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το κάθε ένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/), η εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στο φάκελο `quiz-app`.
> **Μια σημείωση για τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) και η εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο 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 |
| 26 | [AI Assistants](./9-chat-project/README.md) | Εργασία με AI | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό AI | [Έργο Βοηθού AI](./9-chat-project/README.md) | Chris |
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία του Επαγγέλματος | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει τη συνεργασία με ομάδα | Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργάζεστε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Βασικά της Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε γιατις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στην JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην πράξη | Δημιουργήστε το HTML γιανα φτιάξετε ένα online terrarium, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην πράξη | Δημιουργήστε το CSS για το στυλιζάρισμα του online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένου και του responsive design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα γιανα κάνει το terrarium λειτουργικό ως interface με σύρσιμο και απόθεση, εστιάζοντας σε κλεισίματα και χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε τα γεγονότα πληκτρολογίου γιαναοδηγήσετε τη λογική της εφαρμογής JavaScript | [Προγραμματισμός με Γεγονότα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθετήριο | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες στο τοπικό αποθετήριο | [APIs, Φόρμες και Τοπικό Αποθετήριο](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Διαδικασίες υπόβαθρου στον περιηγητή, απόδοση στον ιστό | Χρησιμοποιήστε τις διαδικασίες υπόβαθρου για τη διαχείριση του εικονιδίου της επέκτασης· μάθετε για την απόδοση του ιστού και κάποιες βελτιστοποιήσεις για βελτίωση | [Εργασίες Υπόβαθρου και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας τόσο Κλάσεις όσο και Σύνθεση και το μοτίβο Pub/Sub, σε προετοιμασίαγια την κατασκευή ενός παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται γιαζωγραφική στοιχείων στην οθόνη | [Σχεδίαση σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Κίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν να κινηθούν χρησιμοποιώντας καρτεσιανές συντεταγμένες και το Canvas API | [Κίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και διαθέτοντας λειτουργία ανάρρωσης για ομαλή απόδοση στο παιχνίδι | [Ανίχνευση Σύγκρουσης](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Διατήρηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς βάσει της κατάστασης και απόδοσης του παιχνιδιού | [Διατήρηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας routing και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Σύνδεσης και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση των διαδικασιών επικύρωσης | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτάτε, να τα αποθηκεύετε και να τα απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Κώδικας Περιηγητή/VSCode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση επεξεργαστή κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με AI | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό τεχνητής νοημοσύνης | [Έργο Βοηθού AI](./9-chat-project/README.md) | Chris |
## 🏫 Παιδαγωγική
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές:
* μάθηση με βάση έργα
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές στο μυαλό:
* μάθηση βασισμένη σε έργα
* συχνά κουίζ
Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστού. Οιφοιτητές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία κατασκευάζοντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια περιβαλλοντικά φιλική επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια εφαρμογή τραπεζικής για επιχειρήσεις. Στο τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια σταθερή κατανόηση της ανάπτυξης ιστοσελίδων.
Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα πιο σύγχρονα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστού. Οιμαθητές θα έχουν την ευκαιρία να αναπτύξουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια οικολογική επέκταση περιηγητή, ένα παιχνίδι τύπου εισβολέα στο διάστημα και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια στέρεη κατανόηση της ανάπτυξης στον ιστό.
> 🎓 Μπορείτε νακάνετε τα πρώτα μαθήματα αυτού του προγράμματος ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
> 🎓 Μπορείτε ναπαρακολουθήσετε τα πρώτα μαθήματα αυτού του προγράμματος ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
Εξασφαλίζοντας ότι το περιεχόμενο ευθυγραμμίζεται με τα έργα, η διαδικασία γίνεται πιο ενδιαφέρουσα για τους μαθητές και ενισχύεται η διατήρηση των εννοιών. Γράψαμε επίσης αρκετά αρχικά μαθήματα στα βασικά της JavaScript γιανα εισαγάγουμε έννοιες, σε συνδυασμό με ένα βίντεο από τη συλλογή "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" που δημιούργησαν μερικοί από τους συγγραφείς αυτού του προγράμματος.
Διασφαλίζοντας ότι το περιεχόμενο εναρμονίζεται με τα έργα, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Επίσης, γράψαμε αρκετά εισαγωγικά μαθήματα στα βασικά της JavaScript για την εισαγωγή εννοιών, συνοδευόμενα από ένα βίντεο από τη συλλογή βίντεο "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", αρκετοί από τους συγγραφείς του οποίου συνέβαλαν σε αυτό το πρόγραμμα σπουδών.
Επιπλέον, ένα χαμηλού ρίσκου κουίζ πριν το μάθημα θέτει την πρόθεση του μαθητή να μάθει ένα θέμα, ενώ ένα δεύτερο κουίζ μετά το μάθημα διασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα έχει σχεδιαστεί να είναι ευέλικτο και διασκεδαστικό και μπορεί να το πάρει κάποιος ολόκληρο ή τμηματικά. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα μέχρι το τέλος του δωδεκαβδομαδιαίου κύκλου.
Επιπλέον, ένα χαμηλού ρίσκου κουίζ πριν το μάθημα θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή κατά τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα προς το τέλος του κύκλου των 12 εβδομάδων.
Παρόλο που έχουμε αποφύγει σκόπιμα την εισαγωγή πλαισίων 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/#/). Κάντε fork αυτό το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στη τοπική σας μηχανή και μετά στο ριζικό φάκελο αυτού του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην πόρτα 3000 στον τοπικό σας υπολογιστή: `localhost:3000`.
## 📘 PDF
Ένα PDF όλων των μαθημάτων μπορείτε να το βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Ένα PDF με όλα τα μαθήματα μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Άλλα Μαθήματα
@ -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)
### Σειρά γιαΔημιουργική Τεχνητή Νοημοσύνη
[](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)
### Κεντρική Μάθηση
[](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). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλείστε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορείνα περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για τυχόν παρερμηνείες ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
# Οδικός Χάρτης για το Αποθετήριο Web-Dev-For-Beginners της Microsoft
**Αυτό το αποθετήριο παρέχει έναν οδικό χάρτη για την εκμάθηση των βασικών στοιχείων ανάπτυξης ιστοσελίδων με έμφαση στη JavaScript, το HTML και το CSS. Το πρόγραμμα σπουδών είναι ευέλικτο και μπορεί να γίνει ολόκληρο ή μερικώς, με 24 μαθήματα διανεμημένα σε 12 εβδομάδες.**
## Κύρια Ορόσημα
* **Εβδομάδες 1-3:**
* Εισαγωγή στις γλώσσες προγραμματισμού και τα εργαλεία του αντικειμένου
* Βασικά του GitHub
* Προσβασιμότητα
* Βασικά της JS: τύποι δεδομένων, συναρτήσεις και μέθοδοι
* Λήψη αποφάσεων με JS
* **Εβδομάδες 4-6:**
* Πίνακες και βρόχοι
* Terrarium: HTML στην πράξη
* CSS στην πράξη
* Κλεισίματα στην JavaScript
* Διαχείριση DOM
* **Εβδομάδες 7-9:**
* Παιχνίδι Πληκτρολόγησης: Προγραμματισμός με βάση τα συμβάντα
* Πράσινη Επέκταση Περιηγητή: Εργασία με περιηγητές
* Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθηκευτικό χώρο
* Παρασκήνια λειτουργίας στον περιηγητή
* Απόδοση ιστοσελίδας
* **Εβδομάδες 10-12:**
* Παιχνίδι Διαστήματος: Πιο προχωρημένη ανάπτυξη παιχνιδιού με JavaScript
* Σχεδίαση σε καμβά
* Μετακίνηση στοιχείων στην οθόνη
* Ανίχνευση συγκρούσεων
* Διατήρηση βαθμολογίας, λήξη και επανεκκίνηση του παιχνιδιού
* Εφαρμογή Τράπεζας: Πρότυπα HTML και Διαδρομές σε μια Ιστοσελίδα
* Δημιουργία Φόρμας Εισόδου και Εγγραφής
* Μέθοδοι Λήψης και Χρήσης Δεδομένων
* Έννοιες Διαχείρισης Κατάστασης
## Αποτελέσματα Μάθησης
**Ολοκληρώνοντας αυτόν τον οδικό χάρτη, οι μαθητές θα αποκτήσουν πρακτική εμπειρία στην κατασκευή ενός παιχνιδιού πληκτρολόγησης, ενός εικονικού terrarium, μιας φιλικής προς το περιβάλλον επέκτασης περιηγητή, ενός παιχνιδιού τύπου space-invader, και μιας τραπεζικής εφαρμογής για επιχειρήσεις. Επίσης, θα αναπτύξουν μια σταθερή κατανόηση των βασικών αρχών ανάπτυξης ιστοσελίδων.**
## Πρόσθετοι Πόροι
* Αυτό το αποθετήριο παρέχει πλούσιους πόρους για περαιτέρω μάθηση, συμπεριλαμβανομένων σεμιναρίων, παραδειγμάτων κώδικα και προκλήσεων.
* Η πλατφόρμα Microsoft Learn προσφέρει διάφορα μαθήματα και μονοπάτια μάθησης στον τομέα της ανάπτυξης ιστοσελίδων.
* Οι διαδικτυακές κοινότητες όπως το Stack Overflow και τα MDN Web Docs παρέχουν πολύτιμη υποστήριξη και πόρους για προγραμματιστές ιστοσελίδων.
**Ελπίζω αυτός ο οδικός χάρτης να σας βοηθήσει στο ταξίδι σας στην ανάπτυξη ιστοσελίδων!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας υπηρεσία αυτόματης μετάφρασης AI [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.
Jest to repozytorium programu nauczania służące do nauczania podstaw web developmentu dla początkujących. Program to kompleksowy, 12-tygodniowy kurs opracowany przez Microsoft Cloud Advocates, zawierający 24 praktyczne lekcje obejmujące JavaScript, CSS i HTML.
### Kluczowe elementy
- **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
- [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
### Praca z konkretnymi projektami
Szczegółowe instrukcje dotyczące poszczególnych projektów znajdziesz w plikach README w:
- `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
- `9-chat-project/README.md` - projekt asystenta czatu AI
Szczegółowe instrukcje dotyczące pojedynczych projektów dostępne w plikach README w:
- `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` - tworzenie gry na Canvas
- `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:
- 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
Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest samodzielna
- Projekty nie współdzielą zależności
- Pracuj nad pojedynczymi projektami bez wpływu na inne
- Sklonuj całe repo dla pełnego doświadczenia programu nauczania
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dążymy do dokładności, prosimy mieć na uwadze, że tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za źródło wiarygodne. 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 zanurza 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 zadania praktyczne. Rozwijaj swoje umiejętności i optymalizuj utrwalanie wiedzy dzięki naszej efektywnej pedagogice opartej na projektach. Rozpocznij 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.
> To da Ci wszystko, czego potrzebujesz do ukończenia kursu z dużo szybszym pobieraniem.
<!-- 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 obsługiwane były dodatkowe języki tłumaczeń, są one wymienione [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ź [**Stronę Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), gdzie znajdziesz zasoby dla początkujących, pakiety dla studentów, a nawet sposoby na uzyskanie darmowego vouchera na certyfikat. To jest strona, którą warto dodać do zakładek i od czasu do czasu sprawdzać, ponieważ co miesiąc zmieniamy zawartość.
### 📣 Ogłoszenie - nowe wyzwania trybu GitHub Copilot Agent do wykonania!
### 📣 Ogłoszenie - Nowe wyzwania trybu GitHub Copilot Agent 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 przy użyciu GitHub Copilot i trybu Agenta. Jeśli nie korzystałeś wcześniej z trybu Agenta, potrafi on nie tylko generować tekst, ale także tworzyć i edytować pliki, uruchamiać polecenia i więcej.
### 📣 Ogłoszenie - _Nowy projekt do zbudowania z użyciem generatywnej AI_
### 📣 Ogłoszenie - _Nowy projekt do realizacji z wykorzystaniem Generatywnej AI_
Dodano nowy projekt Asystenta AI, zobacz [projekt](./9-chat-project/README.md)
Dodano nowy projekt AI Assistant, sprawdź [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_o Generatywnej AI dla JavaScript właśnie został wydany
Nie przegap naszego nowego kursu o generatywnej AI!
Nie przegap naszego nowego programu nauczania Generatywnej 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
Każda lekcja zawiera zadanie do wykonania, test wiedzy i wyzwanie, które pokierują Cię w nauce tematów takich jak:
- Promptowanie i inżynieria promptów
- Generowanie aplikacji tekstowych i obrazkowych
- Aplikacje wyszukujące
Odwiedź [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), aby zacząć!
Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
## 🌱 Zacznijmy
## 🌱 Rozpoczęcie
> **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)!
> **Nauczyciele**, przygotowaliśmy [kilka sugestii](for-teachers.md) dotyczących korzystania z tego programu nauczania. Liczymy na Wasze opinie [na naszym forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[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.
**[Uczniowie](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, do każdej lekcji zacznij od quizu wstępnego, a następnie przeczytaj materiał wykładu, wykonaj różne aktywności i sprawdź swoje rozumienie w quizie podsumowującym.
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.
Aby wzmocnić swoją naukę, łącz się z kolegami i koleżankami, aby pracować nad projektami razem! Zachęcamy do dyskusji na naszym [forum dyskusyjnym](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), gdzie nasz zespół moderatorów jest dostępny, aby odpowiadać na Wasze pytania.
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 pogłębić edukację, zdecydowanie polecamy zapoznanie się z [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) po dodatkowe materiały 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 środowisko do programowania! Na start możesz wybrać uruchomienie go w [Codespace](https://github.com/features/codespaces/) (_środowisku przeglądarkowym, bez konieczności instalacji_), lub lokalnie na swoim komputerze z użyciem 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 własne 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. Spowoduje to utworzenie nowego repozytorium na Twoim koncie GitHub z kopią 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 tego repozytorium, które utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. Spowoduje to utworzenie nowego Codespace do pracy.
#### Uruchamianie programu nauczania lokalnie na komputerze
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ć ten program nauczania lokalnie na swoim komputerze, potrzebujesz edytora tekstu, przeglądarki oraz narzędzia wiersza polecenia. Nasza pierwsza lekcja, [Wprowadzenie do języków programowania i narzędzi](../../1-getting-started-lessons/1-intro-to-programming-languages), poprowadzi Cię przez różne opcje tych narzędzi, abyś mógł wybrać najlepsze dla siebie.
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żywać [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 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ś:
@ -109,147 +124,148 @@ Rekomendujemy użycie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_
git clone <your-repository-url>
```
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ś.
2. Otwórz folder w Visual Studio Code. Możesz to zrobić, klikając **Plik** > **Otwórz folder** i wybierając właśnie sklonowany folder.
> 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
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - aby pomóc Ci szybciej pisać kod
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pomaga pisać kod szybciej
## 📂 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
- sprawdziany wiedzy
- opcjonalną sketchnotkę
- opcjonalne uzupełniające wideo
- quiz rozgrzewkowy przed lekcją
- lekcję tekstową
- w lekcjach opartych na projekcie, szczegółowe przewodniki krok po kroku jak zbudować projekt
- testy wiedzy
- wyzwanie
- lekturę uzupełniającą
- zadanie
- uzupełniającą 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`.
> **Uwagi o quizach**: 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 wdrożyć do 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 nauki | Powiązana lekcja | Autor |
| 01 | Zacznijmy | Wprowadzenie do programowania i narzędzi używanych w branży | Poznaj podstawy programowania oraz oprogramowanie pomagające profesjonalnym programistom w pracy | [Wprowadzenie do języków programowania i narzędzi](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Zacznijmy | Podstawy GitHuba, praca zespołowa | Jak używać GitHuba w projekcie, jak współpracować z innymi nad kodem | [Wprowadzenie do GitHuba](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Zacznijmy | Dostępność | Naucz się podstaw 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 | Poznaj funkcje i metody służące do zarządzania logiką aplikacji | [Funkcje i metody](./2-js-basics/2-functions-methods/README.md) | Jasmine i Christopher |
| 06 | Podstawy JS | Podejmowanie decyzji z JS | Naucz się tworzyć warunki w swoim kodzie przy użyciu 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 potrzebny do stworzenia online terrarium, skupiając się na układzie strony | [Wprowadzenie do HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS w praktyce | Zbuduj CSS, by wystylizować online terrarium, skupiając się na podstawach CSS i responsywności | [Wprowadzenie do CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, manipulacja DOM | Zbuduj JavaScript, który pozwoli terrarium działać z funkcją przeciągnij upuść, skupiając się na closures i manipulacji DOM | [JavaScript closures, manipulacja DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Zbuduj grę w pisanie na klawiaturze | 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 | Naucz się, jak działają przeglądarki, ich historię oraz 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 formularzy, wywoływanie API i przechowywanie zmiennych w local storage | Stwórz elementy JavaScript rozszerzenia przeglądarki do wywoływania API, korzystając ze zmiennych przechowywanych lokalnie | [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 tła w przeglądarce, wydajność www | Użyj procesów tła przeglądarki do zarządzania ikoną rozszerzenia; poznaj optymalizacje poprawiające wydajność | [Procesy tła i wydajność](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Zaawansowane tworzenie gier w JavaScript | Poznaj dziedziczenie wykorzystujące klasy i kompozycję oraz wzorzec Pub/Sub, w przygotowaniu do budowy 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 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) | Poruszanie elementów na ekranie | Dowiedz się, jak elementy mogą się poruszać, używając współrzędnych kartezjańskich i API Canvas | [Poruszanie elementami](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Wykrywanie kolizji | Spraw, aby elementy zderzały się i reagowały na siebie, używając naciśnięć klawiszy oraz funkcji cooldown 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 na podstawie stanu i wyniku 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 | 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 multipage site za pomocą routingu 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) | Tworzenie formularzy logowania i rejestracji | Dowiedz się, jak budować formularze i obsługiwać walidację | [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 wyglądają przepływy danych w 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 programowo zarządzać | [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 | [Używaj edytora kodu VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Praca z AI | Naucz się tworzyć własnego asystenta AI | [Projekt AI Assistant](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogika
Nasz program nauczania oparty jest na dwóch kluczowych zasadach pedagogicznych:
* nauka projektowa
Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
* nauka oparta 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 oraz najnowszych narzędzi i technik stosowanych przez dzisiejszych programistów webowych. Studenci będą mieli okazję zdobyć praktyczne doświadczenie, tworząc grę do nauki pisania na klawiaturze, wirtualne terrarium, ekologiczne rozszerzenie przeglądarki, grę w stylu Space Invaders oraz aplikację bankową dla firm. Do końca serii uczniowie zdobędą solidną wiedzę z zakresu tworzenia stron internetowych.
> 🎓 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!
> 🎓 Możesz zacząć od pierwszych kilku 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!
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.
Zapewnienie zgodności treści z projektami sprawia, że proces nauki jest dla uczniów bardziej angażujący, a utrwalenie koncepcji zostanie wzmocnione. Napisaliśmy też kilka lekcji wprowadzających do podstaw JavaScript, które prezentują koncepcje, a także dołączyliśmy wideo z kolekcji "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", których autorzy przyczynili się do tego programu nauczania.
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.
Ponadto quiz niskiego ryzyka przed lekcją ustawia intencję ucznia w kierunku nauki tematu, a drugi quiz po zajęciach zapewnia dalsze utrwalenie. Program ma charakter elastyczny i zabawowy i można z niego korzystać 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.
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)".
Ponieważ świadomie unikamy wprowadzania frameworków JavaScript, koncentrując się na podstawowych umiejętnościach potrzebnych jako programista webowy przed przyjęciem frameworka, dobrym następnym krokiem po ukończeniu tego programu będzie nauka Node.js za pomocą innej kolekcji wideo: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Odwiedź nasze wytyczne [Kodeks Postępowania](CODE_OF_CONDUCT.md) oraz [Wkład](CONTRIBUTING.md). Zachęcamy do konstruktywnej opinii!
> 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, używając [Docsify](https://docsify.js.org/#/). Rozgałęź ten repozytorium, [zainstaluj Docsify](https://docsify.js.org/#/quickstart) na swoim lokalnym komputerze, a następnie w katalogu głównym repozytorium wpisz `docsify serve`. Strona będzie dostępna na porcie 3000 na localhost: `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 jest dostępny [tutaj](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Inne kursy
Nasz zespół tworzy także inne kursy! Sprawdź:
Nasz zespół tworzy inne kursy! Sprawdź:
<!-- 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 / Agenci
[](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)
### 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)
---
### Seria 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)
---
### Podstawowa Nauka
[](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)
---
### Seria 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)
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 o MCP. To wspierająca społeczność, gdzie pytania są mile widziane, a wiedza jest swobodnie dzielona.
To repozytorium jest licencjonowane na podstawie licencji MIT. Zobacz plik [LICENSE](../../LICENSE) po więcej informacji.
To repozytorium jest licencjonowane na warunkach licencji MIT. Szczegóły znajdziesz w pliku [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.
Dokument ten 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 tłumaczenia automatyczne mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być uznawany za źródło wiarygodne. W przypadku informacji krytycznych zaleca się 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.
# Plan nauki repozytorium Web-Dev-For-Beginners firmy Microsoft
**To repozytorium zapewnia plan nauki podstaw programowania webowego z naciskiem na JavaScript, HTML i CSS. Program nauczania jest elastyczny i może być realizowany w całości lub częściowo, zawiera 24 lekcje rozłożone na 12 tygodni.**
## Kluczowe kamienie milowe
* **Tygodnie 1-3:**
* Wprowadzenie do języków programowania i narzędzi pracy
* Podstawy GitHub
* Dostępność (Accessibility)
* Podstawy JS: typy danych, funkcje i metody
* Podejmowanie decyzji w JS
* **Tygodnie 4-6:**
* Tablice i pętle
* Terrarium: HTML w praktyce
* CSS w praktyce
* Zamknięcia w JavaScript
* Manipulacja DOM
* **Tygodnie 7-9:**
* Gra typowania: programowanie zdarzeniowe
* Zielone rozszerzenie przeglądarki: praca z przeglądarkami
* Tworzenie formularza, wywoływanie API i przechowywanie zmiennych w local storage
* Procesy w tle w przeglądarce
* Wydajność sieci
* **Tygodnie 10-12:**
* Gra kosmiczna: bardziej zaawansowany rozwój gier z JavaScriptem
* Rysowanie na canvas
* Przemieszczanie elementów po ekranie
* Wykrywanie kolizji
* Liczenie punktów, zakończenie i restart gry
* Aplikacja bankowa: szablony HTML i trasy w aplikacji webowej
* Tworzenie formularza logowania i rejestracji
* Metody pobierania i używania danych
* Koncepcje zarządzania stanem
## Efekty nauki
**Realizując ten plan nauki, uczniowie zdobędą praktyczne doświadczenie w tworzeniu gry do nauki pisania, wirtualnego terrarium, ekologicznego rozszerzenia przeglądarki, gry w stylu Space Invaders oraz aplikacji bankowej dla firm. Rozwiną także solidne podstawy programowania webowego.**
## Dodatkowe zasoby
* To repozytorium zawiera bogactwo zasobów do dalszej nauki, w tym samouczki, przykłady kodu i wyzwania.
* Platforma Microsoft Learn oferuje różnorodne kursy i ścieżki nauki z zakresu programowania webowego.
* Społeczności online, takie jak Stack Overflow i MDN Web Docs, zapewniają cenne wsparcie i zasoby dla programistów webowych.
**Mam nadzieję, że ten plan nauki pomoże Ci na Twojej drodze do programowania webowego!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**:
Niniejszy dokument został przetłumaczony przy użyciu usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Chociaż dokładamy starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym należy traktować jako autorytatywne źródło. W przypadku informacji krytycznych zaleca się skorzystanie z profesjonalnego, ludzkiego tłumaczenia. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z wykorzystania 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şimini temel prensipleri öğretmek için hazırlanmış eğitim müfredatı deposudur. Müfredat, Microsoft Bulut Savunucuları tarafından geliştirilen kapsamlı bir 12 haftalık kurstur ve JavaScript, CSS ve HTML içeren 24 uygulamalı ders içermektedir.
### 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
@ -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:
- 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
Geleneksel bir monorepo olmasa da, bu depo birçok bağımsız proje içerir:
- Her ders kendi başına bağımsızdır
- Projeler bağımlılık paylaşmaz
- Bir projede çalışmak diğerlerini etkilemez
- Tüm müfredatı deneyimlemek için tüm depo klonlanabilir
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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.
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österilse de, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayınız. Orijinal belge, kendi ana dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi tavsiye edilir. Bu çevirinin kullanımı sonucu oluşabilecek herhangi bir yanlış anlama veya yorumlama nedeniyle sorumluluk kabul edilmemektedir.
Microsoft Bulut Savunucuları 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'e derinlemesine dalar. Sınavlar, tartışmalar ve pratik ödevlerle etkileşimde bulunun. Yeteneklerinizi geliştirin ve bilgilerinizi optimize edin; etkili proje tabanlı pedagojimizle öğreniminizi güçlendirin. Kodlama yolculuğunuza bugün başlayın!
# 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!
> **Yerel olarak Klonlamayı mı Tercih Edersiniz?**
> Bu depo 50+ dil çevirisi içerir, bu da indirme boyutunu önemli ölçüde artırır. Çeviriler olmadan klonlamak için sparse checkout kullanın:
> Bu depo 50+ dil çevirisi içerir ve bu da indirilen dosyanın boyutunu önemli ölçüde artırır. Çeviriler olmadan klonlamak için seyrek kontrol kullanabilirsiniz:
> 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 size kursu tamamlamak için gereken her şeyi çok daha hızlı indirebilme imkânı sağlar.
<!-- 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 dil desteği istiyorsanız, desteklenen diller [burada](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) listelenmiştir**
[](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 yöntemleri bulabileceğiniz [**Öğrenci Merkezi sayfasını**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ziyaret edin. İçeriğin aylık olarak değiştiği bu sayfayı sık sık yer imlerinize ekleyip kontrol etmek isteyeceksiniz.
### 📣 Duyuru - Tamamlanması Gereken Yeni GitHub Copilot Agent modu meydan okumaları!
### 📣 Duyuru – Tamamlanacak Yeni GitHub Copilot Agent modu 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 modu kullanarak tamamlamanız için yeni bir zorluk. Daha önce Agent modunu kullanmadıysanız, sadece metin üretmekle kalmayıp dosya oluşturabilir, düzenleyebilir, komut çalıştırabilir ve daha fazlasını yapabilir.
### 📣 Duyuru - _Generatif AI kullanarak yeni bir proje_
### 📣 Duyuru – _Generative AI kullanarak oluşturulacak 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 –_Generative AI için Yeni Müfredat_ JavaScript’e geldi
Yeni Generatif AI müfredatımızı kaçırmayın!
Yeni Generative 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 ders; tamamlanacak bir ödev, bir bilgi kontrolü ve şu gibi konularda öğrenmenize rehberlik eden bir zorluk içerir:
- Yönlendirme ve prompt mühendisliği
- Metin ve resim uygulaması 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ız hakkında [bazı öneriler](for-teachers.md) ekledik. Geri bildiriminizi [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.
**[Öğrenciler](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, her ders için ders öncesi quiz ile başlayın, ardından ders materyalini okuyun, çeşitli aktiviteleri tamamlayın ve ders sonrası quiz ile anlama seviyenizi 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 güçlendirmek için projeler üzerinde arkadaşlarınızla birlikte çalışın! Tartışmalar, [tartışma forumumuzda](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) teşvik edilir; moderatör ekibimiz sorularınıza cevap vermek için hazır olacaktır.
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 ilerletmek için [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)’i ek çalışma materyalleri için keşfetmenizi şiddetle tavsiye ederiz.
### 📋 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 hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı bir [Codespace](https://github.com/features/codespaces/) içinde (_tarayıcı tabanlı, kurulum gerektirmeyen bir ortam_) veya bilgisayarınızda bir metin editörü (örneğin [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)) kullanarak çalıştırmayı seçebilirsiniz.
#### 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şturma
Çalışmalarınızı kolayca kaydedebilmeniz için, bu deponun kendi kopyanızı oluşturmanız önerilir. Bunu sayfa üstündeki **Use this template** butonuna tıklayarak yapabilirsiniz. Bu, müfredatın bir kopyasıyla 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.
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 depo kopyasında, **Code** butonuna tıklayın ve **Open with Codespaces** seçeneğini seçin. Bu size çalışmanız için yeni bir Codespace oluşturacaktır.
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ü, bir tarayıcı ve bir komut satırı aracı gerekir. İlk dersimiz [Programlama Dillerine ve Ticaret Araçlarına Giriş](../../1-getting-started-lessons/1-intro-to-programming-languages), bu araçlardan her biri için çeşitli seçenekleri sizin için gösterir, böylece size en uygun olanı seçebilirsiniz.
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; VS Code’da yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) da vardır. Visual Studio Code’u buradan indirebilirsiniz: [burada](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Depoyu bilgisayarınıza klonlayın. Bunu yapmak için **Code** düğmesine tıklayın ve URL’yi kopyalayın:
1. Depo kopyanızı bilgisayarınıza klonlayın. Bunu yapmak için **Code** butonuna tıklayın ve URL'yi kopyalayın:
[CodeSpace](./images/createcodespace.png)
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>` yerini değiştirerek aşağıdaki komutu çalıştırın:
```bash
git clone <your-repository-url>
```
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.
2. Visual Studio Code'da klasörü açın. Bunu **File** > **Open Folder** 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) - kod yazmanızı hızlandırmaya yardımcı olmak için
## 📂 Her ders şunları içerir:
- isteğe bağlıtaslak notu
- isteğe bağlıdestekleyici video
- dersten önce yapılanısınma sınavı
- isteğe bağlısketchnote
- isteğe bağlı ek video
- ders öncesiısınma sınavı
- yazılı ders
- proje tabanlı derslerde, projeyi adım adım nasıl inşa edeceğinizin rehberi
- proje tabanlı derslerde, projeyi oluşturmak için adım adım rehberler
- bilgi kontrolü
- bir meydan okuma
- destekleyici okumalar
- ödev
- [dersten sonra yapılan sınav](https://ff-quizzes.netlify.app/web/)
- ek okuma materyali
- görev
- [ders sonrası quiz](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.
> **Quizler hakkında not**: Tüm quizler Quiz-app klasöründe bulunur, toplam 48 quiz ve her biri üç sorudan oluşur. Bunlar [burada](https://ff-quizzes.netlify.app/web/) mevcuttur. Quiz uygulaması yerel olarak çalıştırılabilir veya Azure'a dağıtılabilir; `quiz-app` klasöründeki talimatları izleyin.
## 🗃️ 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 Konseptler | Öğrenme Hedefleri | Bağlantılı Ders | Yazar |
| 01 | Başlarken | Programlamaya Giriş ve Mesleki Araçlar | Çoğu programlama dilinin temel prensiplerini öğrenmek ve profesyonel geliştiricilerin işlerini yapmalarına yardımcı olan yazılımlar hakkında bilgi sahibi olmak | [Programlama Dillerine ve Mesleki Araçlara Giriş](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Başlarken | GitHub Temelleri, ekip ile çalışma dahil | Projenizde GitHub kullanmayı öğrenmek, bir kod tabanı üzerinde başkalarıyla işbirliği yapmayı öğ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 Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metotlar | Uygulamanın mantık akışını yönetmek için fonksiyonlar ve metotlar hakkında bilgi edinmek | [Fonksiyonlar ve Metotlar](./2-js-basics/2-functions-methods/README.md) | Jasmine ve Christopher |
| 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) | Pratikte HTML | Çevrimiçi bir terraryum oluşturmak için HTML inşa edin, yerleşim oluşturmaya odaklanın | [HTML'e Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | Pratikte CSS | Çevrimiçi terraryumu stillendirmek için CSS oluşturun, sayfanın duyarlı yapılması dahil CSS 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 | Terraryumun sürükle/bırak arayüzü olarak çalışmasını sağlamak 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 | [Yazma Oyunu](./4-typing-game/solution/README.md) | Yazma Oyunu İnşası | JavaScript uygulamanızın mantığını yönlendirmek için klavye olaylarını nasıl kullanacağınızı öğrenin | [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 ve bir tarayıcı uzantısının ilk öğelerini nasıl oluşturacağınızı öğrenin | [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) | Form oluşturma, API çağırma ve yerel depolamada değişken kullanımı | Yerel depolamada saklanan değişkenleri kullanarak bir API çağırmak için tarayıcı uzantınızın JavaScript öğelerini oluşturun | [API'ler, 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ıdaki arka plan süreçleri, web performansı | Uzantının simgesini yönetmek için tarayıcı arka plan işlemlerini 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 | [Uzay Oyunu](./6-space-game/solution/README.md) | JavaScript ile Daha Gelişmiş Oyun Geliştirme | Kalıtım kavramını Sınıflar ve Kompozisyon ile Pub/Sub deseni kullanarak öğrenin, oyun geliştirmeye hazırlık yapın | [Gelişmiş Oyun Geliştirmeye Giriş](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Uzay Oyunu](./6-space-game/solution/README.md) | Canvas'a Çizim | Ekrana öğeler çizmek için kullanılan Canvas API hakkında bilgi edin | [Canvas'a Çizim](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Uzay Oyunu](./6-space-game/solution/README.md) | Elemanları Ekranda Hareket Ettirme | Elemanlara Kartezyen koordinatlar ve Canvas API kullanarak hareket kazandırmayı keşfedin | [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 | Elemanların birbirine çarpmasını ve tepki vermesini sağlayın, performans için bir soğuma işlevi sağlayın | [Ç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 göre matematiksel hesaplamalar yapın | [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, varlıkları temizleme ve değişken değerlerini sıfırlama hakkında bilgi edinin | [Bitiş Koşulu](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Web Uygulamasında HTML Şablonları ve Yönlendirme | Çok sayfalı 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 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Giriş ve Kayıt Formu Oluşturma | Form oluşturma ve doğrulama işlemlerini öğrenin | [Formlar](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Veri Alma ve Kullanma Yöntemleri | Uygulamanıza veri akışı, veriyi alma, depolama ve atma yöntemleri | [Veri](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Bankacılık Uygulaması](./7-bank-project/solution/README.md) | Durum Yönetimi Kavramları | Uygulamanızın durumu nasıl koruduğunu ve bunu programatik olarak nasıl yöneteceğinizi öğrenin | [Durum Yönetimi](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Tarayıcı/VScode Kodu](../../8-code-editor) | VScode ile Çalışma | 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 Asistanlar](./9-chat-project/README.md) | Yapay Zeka ile Çalışma | Kendi AI asistanınızı nasıl oluşturacağınızı öğrenin | [AI Asistan projesi](./9-chat-project/README.md) | Chris |
## 🏫 Pedagoji
Müfredatımız, iki temel eğitim ilkesi göz önünde bulundurularak tasarlanmıştır:
* proje tabanlı öğrenme
* sık sık sınavlar
* sık quizler
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 temellerini ve günümüz web geliştiricilerinin kullandığı en son araçlar ve teknikleri öğretir. Öğrenciler, yazma oyunu, sanal terraryum, çevre dostu tarayıcı uzantısı, uzay istilacı tarzı oyun ve işletmeler için bir bankacılık uygulaması inşa ederek uygulamalı deneyim kazanma fırsatı bulacaklar. Serinin sonunda öğrenciler, web geliştirme konusunda sağlam bir anlayışa sahip olacaklar.
> 🎓 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üfredattaki ilk birkaç dersi Microsoft Learn üzerinde 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 olduğundan emin olarak, süreç öğrenciler için daha ilgi çekici hale getirilir ve kavramların kalıcılığı artırılır. Ayrıca, kavramları tanıtmak için birkaç başlangıç dersi JavaScript temellerinde yazılmıştır ve bu dersler, bazı yazarları bu müfredata katkıda bulunan “[JavaScript Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)” video 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.
Ek olarak, sınıf öncesinde düşük riskli bir quiz öğrencinin konuya yönelik niyetini belirlerken, sınıf sonrası ikinci bir quiz daha fazla kalıcılık sağlar. Bu müfredat esnek ve eğlenceli olacak şekilde tasarlanmış olup tamamı veya parça parça alınabilir. Projeler küçük başlayıp 12 haftalık döngünün sonunda giderek karmaşıklaşır.
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.
JavaScript çerçevelerini kasıtlı olarak tanıtmaktan kaçındık çünkü bir çerçeve benimsemeden önce bir web geliştiricisi olarak gereken temel becerilere odaklanmak istedik; bu müfredatı tamamlamak için iyi bir sonraki adım başka bir video koleksiyonu olan “[Node.js Başlangıç Serisi](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)” üzerinden Node.js öğrenmek olacaktır.
> [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) yönergelerimizi ziyaret edin. Yapıcı geri bildirimlerinizi bekliyoruz!
## 🧭 Ç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 yükleyin](https://docsify.js.org/#/quickstart) ve sonra bu deponun kök klasöründe `docsify serve` yazın. Site localhost'ta, port 3000 üzerinde 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'sini [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulabilirsiniz.
## 🎒 Diğer Kurslar
Ekibimiz başka kurslar da üretiyor! Göz atın:
Ekibimiz diğer kurslar da üretiyor! Göz atın:
<!-- 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://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -224,7 +210,7 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
---
### Üretken AI Serisi
### 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)
@ -232,30 +218,30 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
---
### Temel Öğrenme
### 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)
[](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 ya da herhangi bir sorunuz olursa, MCP hakkında tartışmalara katılmak için diğer öğrenciler ve deneyimli geliştiricilerle buluşun. Soruların hoş karşılandığı ve bilginin özgürce paylaşıldığı destekleyici bir topluluktur.
@ -267,5 +253,5 @@ Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LICENS
<!-- 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 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 hatalar veya yanlışlıklar içerebileceğini lütfen unutmayınız. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan herhangi bir yanlış anlama veya yanlış yorumlama nedeniyle sorumluluk kabul edilmemektedir.
# Microsoft Web-Dev-For-Beginners Deposu Yol Haritası
**Bu depo, JavaScript, HTML ve CSS odaklı web geliştirme temellerini öğrenmek için bir yol haritası sunar. Müfredat esnektir ve tamamı veya bir kısmı alınabilir; 12 hafta boyunca 24 derse yayılmıştır.**
## Önemli Dönüm Noktaları
* **1-3. Haftalar:**
* Programlama dillerine ve kullanılan araçlara giriş
* GitHub temelleri
* Erişilebilirlik
* JS temelleri: veri türleri, fonksiyonlar ve yöntemler
* JS ile karar verme
* **4-6. Haftalar:**
* Diziler ve döngüler
* Terrarium: HTML pratiği
* CSS pratiği
* JavaScript kapanışları
* DOM manipülasyonu
* **7-9. Haftalar:**
* Yazma Oyunu: Olay odaklı programlama
* Yeşil Tarayıcı Eklentisi: Tarayıcılarla çalışma
* Form oluşturma, API çağırma ve yerel depolamada değişkenleri saklama
* Tarayıcıda arka plan süreçleri
* Web performansı
* **10-12. Haftalar:**
* Uzay Oyunu: JavaScript ile daha gelişmiş oyun geliştirme
* Canvas üzerine çizim yapma
* Ekrandaki öğeleri hareket ettirme
* Çarpışma algılama
* Skor tutma, oyunu bitirme ve yeniden başlatma
* Banka Uygulaması: Web Uygulamasında HTML Şablonları ve Yönlendirmeler
* Giriş ve Kayıt Formu oluşturma
* Veri Getirme ve Kullanma Yöntemleri
* Durum Yönetimi Kavramları
## Öğrenme Kazanımları
**Bu yol haritasını tamamlayarak, öğrenciler bir yazma oyunu, sanal terrarium, çevre dostu tarayıcı eklentisi, uzay istilacısı tarzı oyun ve işletmeler için bir banka uygulaması oluşturma konusunda uygulamalı deneyim kazanacaklar. Ayrıca web geliştirme temellerini sağlam bir şekilde anlayacaklar.**
## Ek Kaynaklar
* Bu depo, eğitici materyaller, kod örnekleri ve zorluklar dahil olmak üzere daha fazla öğrenme için zengin kaynaklar sağlar.
* Microsoft Learn platformu, çeşitli web geliştirme kursları ve öğrenme yolları sunar.
* Stack Overflow ve MDN Web Docs gibi çevrimiçi topluluklar, web geliştiricileri için değerli destek ve kaynaklar sunar.
**Umarım bu yol haritası web geliştirme yolculuğunuzda size yardımcı olur!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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östermemize rağmen, otomatik çevirilerin hatalar veya yanlışlıklar içerebileceğini lütfen unutmayınız. Orijinal belge, kendi dilinde yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilmektedir. Bu çevirinin kullanımı nedeniyle oluşabilecek yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz.
localizeflow[bot]
2 days ago