chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes)

pull/1694/head
localizeflow[bot] 7 months ago
parent 646851dbb5
commit 8cecbe456c

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:27:37+00:00", "translation_date": "2026-02-06T17:12:15+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "el" "language_code": "el"
}, },
@ -516,11 +516,17 @@
"language_code": "el" "language_code": "el"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T18:23:48+00:00", "translation_date": "2026-02-06T17:07:46+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "el" "language_code": "el"
}, },
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:08:33+00:00",
"source_file": "Roadmap.md",
"language_code": "el"
},
"SECURITY.md": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-26T21:26:10+00:00", "translation_date": "2025-08-26T21:26:10+00:00",

@ -2,27 +2,27 @@
## Επισκόπηση Έργου ## Επισκόπηση Έργου
Αυτό είναι ένα αποθετήριο εκπαιδευτικού προγράμματος για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα είναι ένα ολοκληρωμένο 12-εβδομαδιαίο μάθημα που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML. Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Βασικά Στοιχεία ### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε έργα - **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα ταξινομημένα σε ενότητες έργων
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI - **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (πριν/μετά το μάθημα) - **Διαδραστικά Quiz**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις για 50+ γλώσσες μέσω GitHub Actions - **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις σε 50+ γλώσσες μέσω GitHub Actions
- **Τεχνολογίες**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (για έργα AI) - **Τεχνολογίες**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (για έργα AI)
### Αρχιτεκτονική ### Αρχιτεκτονική
- Εκπαιδευτικό αποθετήριο με δομή βασισμένη σε μαθήματα - Εκπαιδευτικό αποθετήριο με δομή βασισμένη σε μαθήματα
- Κάθε φάκελος μαθήματος περιέχει README, παραδείγματα κώδικα και λύσεις - Κάθε φάκελος μαθήματος περιέχει README, παραδείγματα κώδικα και λύσεις
- Αυτόνομα έργα σε ξεχωριστούς φακέλους (quiz-app, διάφορα έργα μαθημάτων) - Αυτόνομα έργα σε ξεχωριστούς καταλόγους (quiz-app, διάφορα έργα μαθημάτων)
- Σύστημα μετάφρασης μέσω GitHub Actions (co-op-translator) - Σύστημα μετάφρασης με χρήση GitHub Actions (co-op-translator)
- Τεκμηρίωση που εξυπηρετείται μέσω Docsify και διαθέσιμη ως PDF - Τεκμηρίωση που σερβίρεται μέσω Docsify και διατίθεται σε μορφή PDF
## Εντολές Ρύθμισης ## Εντολές Ρύθμισης
Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα: Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία σε συγκεκριμένα έργα:
### Ρύθμιση Κύριου Αποθετηρίου ### Ρύθμιση Κύριου Αποθετηρίου
@ -36,19 +36,19 @@ cd Web-Dev-For-Beginners
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Start development server npm run dev # Εκκίνηση διακομιστή ανάπτυξης
npm run build # Build for production npm run build # Δημιουργία για παραγωγή
npm run lint # Run ESLint npm run lint # Εκτέλεση ESLint
``` ```
### API Τραπεζικού Έργου (Node.js + Express) ### API Έργο Τράπεζας (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Start API server npm start # Εκκίνηση διακομιστή API
npm run lint # Run ESLint npm run lint # Εκτέλεση ESLint
npm run format # Format with Prettier npm run format # Μορφοποίηση με Prettier
``` ```
### Έργα Επέκτασης Περιηγητή ### Έργα Επέκτασης Περιηγητή
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Follow browser-specific extension loading instructions # Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων ειδικές για τον περιηγητή
``` ```
### Έργα Παιχνιδιού Διαστήματος ### Έργα Παιχνιδιού Διαστήματος
@ -64,7 +64,7 @@ npm install
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# Open index.html in browser or use Live Server # Ανοίξτε το index.html στον περιηγητή ή χρησιμοποιήστε το Live Server
``` ```
### Έργο Συνομιλίας (Python Backend) ### Έργο Συνομιλίας (Python Backend)
@ -72,37 +72,37 @@ npm install
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Set GITHUB_TOKEN environment variable # Ορίστε τη μεταβλητή περιβάλλοντος GITHUB_TOKEN
python api.py python api.py
``` ```
## Ροή Εργασίας Ανάπτυξης ## Ροή Εργασίας Ανάπτυξης
### Για Συνεισφέροντες Περιεχομένου ### Για Συνεργάτες Περιεχομένου
1. **Κάντε fork το αποθετήριο** στον λογαριασμό σας στο GitHub 1. **Διακλάδωση (Fork)** του αποθετηρίου στο λογαριασμό σας στο GitHub
2. **Κλωνοποιήστε το fork σας** τοπικά 2. **Κλωνοποίηση (Clone)** του fork τοπικά
3. **Δημιουργήστε ένα νέο branch** για τις αλλαγές σας 3. **Δημιουργία νέου κλάδου** για τις αλλαγές σας
4. Κάντε αλλαγές στο περιεχόμενο των μαθημάτων ή στα παραδείγματα κώδικα 4. Κάντε αλλαγές στο περιεχόμενο των μαθημάτων ή στα παραδείγματα κώδικα
5. Δοκιμάστε τις αλλαγές κώδικα στους αντίστοιχους φακέλους έργων 5. Δοκιμάστε τις αλλαγές κώδικα στους αντίστοιχους φακέλους έργων
6. Υποβάλετε pull requests ακολουθώντας τις οδηγίες συνεισφοράς 6. Υποβάλετε pull requests ακολουθώντας τις οδηγίες συμβολής
### Για Μαθητές ### Για Μαθητές
1. Κάντε fork ή κλωνοποιήστε το αποθετήριο 1. Κάντε fork ή clone το αποθετήριο
2. Πλοηγηθείτε στους φακέλους μαθημάτων με τη σειρά 2. Πλοηγηθείτε στους φακέλους μαθημάτων κατά σειρά
3. Διαβάστε τα αρχεία README για κάθε μάθημα 3. Διαβάστε τα αρχεία README για κάθε μάθημα
4. Ολοκληρώστε τα κουίζ πριν το μάθημα στο https://ff-quizzes.netlify.app/web/ 4. Ολοκληρώστε τα κουίζ πριν το μάθημα στη διεύθυνση https://ff-quizzes.netlify.app/web/
5. Εργαστείτε στα παραδείγματα κώδικα στους φακέλους μαθημάτων 5. Μελετήστε τα παραδείγματα κώδικα στους φακέλους μαθημάτων
6. Ολοκληρώστε τις εργασίες και τις προκλήσεις 6. Ολοκληρώστε εργασίες και προκλήσεις
7. Κάντε τα κουίζ μετά το μάθημα 7. Κάντε τα κουίζ μετά το μάθημα
### Ζωντανή Ανάπτυξη ### Ζωντανή Ανάπτυξη
- **Τεκμηρίωση**: Εκτελέστε `docsify serve` στη ρίζα (port 3000) - **Τεκμηρίωση**: Τρέξτε `docsify serve` στην ρίζα (θύρα 3000)
- **Εφαρμογή Κουίζ**: Εκτελέστε `npm run dev` στον φάκελο quiz-app - **Εφαρμογή Κουίζ**: Τρέξτε `npm run dev` στον φάκελο quiz-app
- **Έργα**: Χρησιμοποιήστε την επέκταση Live Server του VS Code για έργα HTML - **Έργα**: Χρησιμοποιήστε την επέκταση VS Code Live Server για έργα HTML
- **API Έργα**: Εκτελέστε `npm start` στους αντίστοιχους φακέλους API - **API Έργα**: Τρέξτε `npm start` στους αντίστοιχους φακέλους API
## Οδηγίες Δοκιμών ## Οδηγίες Δοκιμών
@ -110,33 +110,33 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Check for code style issues npm run lint # Έλεγχος για προβλήματα μορφοποίησης κώδικα
npm run build # Verify build succeeds npm run build # Επαλήθευση επιτυχίας της κατασκευής
``` ```
### Δοκιμή API Τραπεζικού Έργου ### Δοκιμή API Τράπεζας
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Check for code style issues npm run lint # Έλεγχος για ζητήματα στυλ κώδικα
node server.js # Verify server starts without errors node server.js # Επαλήθευση εκκίνησης διακομιστή χωρίς σφάλματα
``` ```
### Γενική Προσέγγιση Δοκιμών ### Γενική Προσέγγιση Δοκιμών
- Αυτό είναι ένα εκπαιδευτικό αποθετήριο χωρίς ολοκληρωμένες αυτοματοποιημένες δοκιμές - Πρόκειται για εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές
- Η χειροκίνητη δοκιμή επικεντρώνεται σε: - Οι χειροκίνητες δοκιμές εστιάζουν σε:
- Εκτέλεση παραδειγμάτων κώδικα χωρίς σφάλματα - Εκτέλεση παραδειγμάτων κώδικα χωρίς σφάλματα
- Σωστή λειτουργία συνδέσμων στην τεκμηρίωση - Σωστή λειτουργία συνδέσμων στην τεκμηρίωση
- Επιτυχής ολοκλήρωση κατασκευών έργων - Επιτυχής ολοκλήρωση δημιουργίας έργων
- Συμμόρφωση παραδειγμάτων με βέλτιστες πρακτικές - Τα παραδείγματα ακολουθούν βέλτιστες πρακτικές
### Έλεγχοι Πριν την Υποβολή ### Έλεγχοι Πριν την Υποβολή
- Εκτελέστε `npm run lint` στους φακέλους με package.json - Τρέξτε `npm run lint` σε φακέλους με package.json
- Επαληθεύστε ότι οι σύνδεσμοι markdown είναι έγκυροι - Επαληθεύστε ότι οι σύνδεσμοι markdown είναι έγκυροι
- Δοκιμάστε παραδείγματα κώδικα σε περιηγητή ή Node.js - Δοκιμάστε παραδείγματα κώδικα στον περιηγητή ή Node.js
- Ελέγξτε ότι οι μεταφράσεις διατηρούν τη σωστή δομή - Επιβεβαιώστε ότι οι μεταφράσεις διατηρούν σωστή δομή
## Οδηγίες Στυλ Κώδικα ## Οδηγίες Στυλ Κώδικα
@ -146,49 +146,49 @@ node server.js # Verify server starts without errors
- Ακολουθήστε τις τυπικές ρυθμίσεις ESLint που παρέχονται στα έργα - Ακολουθήστε τις τυπικές ρυθμίσεις ESLint που παρέχονται στα έργα
- Χρησιμοποιήστε κατανοητά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια - Χρησιμοποιήστε κατανοητά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια
- Προσθέστε σχόλια που εξηγούν έννοιες για τους μαθητές - Προσθέστε σχόλια που εξηγούν έννοιες για τους μαθητές
- Μορφοποιήστε χρησιμοποιώντας Prettier όπου έχει ρυθμιστεί - Μορφοποιήστε με Prettier όπου έχει ρυθμιστεί
### HTML/CSS ### HTML/CSS
- Χρησιμοποιήστε σημασιολογικά στοιχεία HTML5 - Σημαντικά στοιχεία HTML5
- Εφαρμόστε αρχές σχεδιασμού για ανταπόκριση - Αρχές responsive σχεδίασης
- Χρησιμοποιήστε σαφείς συμβάσεις ονοματοδοσίας κλάσεων - Καθαρή ονοματοθεσία κλάσεων
- Προσθέστε σχόλια που εξηγούν τεχνικές CSS για τους μαθητές - Σχόλια που εξηγούν τεχνικές CSS για μαθητές
### Python ### Python
- Ακολουθήστε τις οδηγίες στυλ PEP 8 - Οδηγίες στυλ PEP 8
- Παρέχετε σαφή, εκπαιδευτικά παραδείγματα κώδικα - Καθαρά, εκπαιδευτικά παραδείγματα κώδικα
- Χρησιμοποιήστε τύπους όπου είναι χρήσιμοι για μάθηση - Σημειώσεις τύπων όπου βοηθούν στη μάθηση
### Τεκμηρίωση Markdown ### Τεκμηρίωση Markdown
- Σαφής ιεραρχία επικεφαλίδων - Καθαρή ιεραρχία κεφαλίδων
- Μπλοκ κώδικα με καθορισμό γλώσσας - Μπλοκ κώδικα με δήλωση γλώσσας
- Σύνδεσμοι σε πρόσθετους πόρους - Σύνδεσμοι για επιπλέον πόρους
- Στιγμιότυπα οθόνης και εικόνες στους φακέλους `images/` - Στιγμιότυπα και εικόνες στους φακέλους `images/`
- Εναλλακτικό κείμενο για εικόνες για προσβασιμότητα - Εναλλακτικό κείμενο για εικόνες για προσβασιμότητα
### Οργάνωση Αρχείων ### Οργάνωση Αρχείων
- Μαθήματα αριθμημένα διαδοχικά (1-getting-started-lessons, 2-js-basics, κ.λπ.) - Μαθήματα αριθμημένα διαδοχικά (1-getting-started-lessons, 2-js-basics κτλ.)
- Κάθε έργο έχει φακέλους `solution/` και συχνά `start/` ή `your-work/` - Κάθε έργο έχει φακέλους `solution/` και συχνά `start/` ή `your-work/`
- Εικόνες αποθηκευμένες σε φακέλους `images/` συγκεκριμένων μαθημάτων - Αποθηκεύονται εικόνες σε φακέλους `images/` κάθε μαθήματος
- Μεταφράσεις στη δομή `translations/{language-code}/` - Μεταφράσεις στη δομή `translations/{language-code}/`
## Κατασκευή και Ανάπτυξη ## Δημιουργία και Ανάπτυξη
### Ανάπτυξη Εφαρμογής Κουίζ (Azure Static Web Apps) ### Ανάπτυξη Εφαρμογής Κουίζ (Azure Static Web Apps)
Η εφαρμογή quiz-app είναι ρυθμισμένη για ανάπτυξη σε Azure Static Web Apps: Η εφαρμογή κουίζ έχει ρυθμιστεί για ανάπτυξη σε Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Creates dist/ folder npm run build # Δημιουργεί τον φάκελο dist/
# Deploys via GitHub Actions workflow on push to main # Αναπτύσσει μέσω ροής εργασίας GitHub Actions κατά την ώθηση στο main
``` ```
Ρύθμιση Azure Static Web Apps: Ρυθμίσεις Azure Static Web Apps:
- **Τοποθεσία εφαρμογής**: `/quiz-app` - **Τοποθεσία εφαρμογής**: `/quiz-app`
- **Τοποθεσία εξόδου**: `dist` - **Τοποθεσία εξόδου**: `dist`
- **Ροή εργασίας**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Ροή εργασίας**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -196,67 +196,67 @@ npm run build # Creates dist/ folder
### Δημιουργία PDF Τεκμηρίωσης ### Δημιουργία PDF Τεκμηρίωσης
```bash ```bash
npm install # Install docsify-to-pdf npm install # Εγκαταστήστε το docsify-to-pdf
npm run convert # Generate PDF from docs npm run convert # Δημιουργήστε PDF από το docs
``` ```
### Τεκμηρίωση Docsify ### Τεκμηρίωση Docsify
```bash ```bash
npm install -g docsify-cli # Install Docsify globally npm install -g docsify-cli # Εγκαταστήστε το Docsify παγκοσμίως
docsify serve # Serve on localhost:3000 docsify serve # Εξυπηρετήστε στο localhost:3000
``` ```
### Κατασκευές Ειδικών Έργων ### Δημιουργίες ανά Έργο
Κάθε φάκελος έργου μπορεί να έχει τη δική του διαδικασία κατασκευής: Κάθε φάκελος έργου μπορεί να έχει τη δική του διαδικασία δημιουργίας:
- Έργα Vue: `npm run build` δημιουργεί παραγωγικά πακέτα - Vue έργα: `npm run build` δημιουργεί πακέτα παραγωγής
- Στατικά έργα: Χωρίς βήμα κατασκευής, εξυπηρετήστε αρχεία απευθείας - Στατικά έργα: Δεν απαιτείται βήμα δημιουργίας, τα αρχεία σερβίρονται απευθείας
## Οδηγίες Pull Request ## Οδηγίες Pull Request
### Μορφή Τίτλου ### Μορφοποίηση Τίτλου
Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που υποδεικνύουν την περιοχή αλλαγής: Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που δείχνουν το πεδίο αλλαγής:
- `[Quiz-app] Προσθήκη νέου κουίζ για το μάθημα X` - `[Quiz-app] Προσθήκη νέου κουίζ για μάθημα X`
- `[Lesson-3] Διόρθωση τυπογραφικού στο έργο terrarium` - `[Lesson-3] Διόρθωση ορθογραφικού λάθους στο έργο terrarium`
- `[Translation] Προσθήκη ισπανικής μετάφρασης για το μάθημα 5` - `[Translation] Προσθήκη ισπανικής μετάφρασης για το μάθημα 5`
- `[Docs] Ενημέρωση οδηγιών ρύθμισης` - `[Docs] Ενημέρωση οδηγών ρύθμισης`
### Απαιτούμενοι Έλεγχοι ### Απαραίτητοι Έλεγχοι
Πριν την υποβολή PR: Πριν υποβάλετε PR:
1. **Ποιότητα Κώδικα**: 1. **Ποιότητα Κώδικα**:
- Εκτελέστε `npm run lint` στους επηρεαζόμενους φακέλους έργων - Τρέξτε `npm run lint` στους σχετικούς φακέλους έργων
- Διορθώστε όλα τα σφάλματα και τις προειδοποιήσεις linting - Διορθώστε όλα τα σφάλματα και προειδοποιήσεις lint
2. **Επαλήθευση Κατασκευής**: 2. **Επαλήθευση Δημιουργίας**:
- Εκτελέστε `npm run build` αν είναι απαραίτητο - Τρέξτε `npm run build` εφόσον ισχύει
- Βεβαιωθείτε ότι δεν υπάρχουν σφάλματα κατασκευής - Επιβεβαιώστε απουσία σφαλμάτων δημιουργίας
3. **Επαλήθευση Συνδέσμων**: 3. **Έλεγχος Συνδέσμων**:
- Δοκιμάστε όλους τους συνδέσμους markdown - Δοκιμάστε όλους τους συνδέσμους markdown
- Επαληθεύστε ότι οι αναφορές εικόνων λειτουργούν - Επαληθεύστε την απόδοση εικόνων
4. **Ανασκόπηση Περιεχομένου**: 4. **Έλεγχος Περιεχομένου**:
- Ελέγξτε για ορθογραφικά και γραμματικά λάθη - Επιμεληθείτε για ορθογραφικά και γραμματικά λάθη
- Βεβαιωθείτε ότι τα παραδείγματα κώδικα είναι σωστά και εκπαιδευτικά - Επιβεβαιώστε ότι τα παραδείγματα κώδικα είναι σωστά και εκπαιδευτικά
- Επαληθεύστε ότι οι μεταφράσεις διατηρούν το αρχικό νόημα - Διασφαλίστε ότι οι μεταφράσεις διατηρούν το αρχικό νόημα
### Απαιτήσεις Συνεισφοράς ### Απαιτήσεις Συμβολής
- Συμφωνήστε με το Microsoft CLA (αυτοματοποιημένος έλεγχος στο πρώτο PR) - Συμφωνήστε με το Microsoft CLA (αυτόματος έλεγχος στην πρώτη PR)
- Ακολουθήστε τον [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Ακολουθήστε τον [Κώδικα Συμπεριφοράς της Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/)
- Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες - Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες
- Αναφέρετε αριθμούς ζητημάτων στην περιγραφή PR αν είναι απαραίτητο - Αναφέρετε αριθμούς θεμάτων στην περιγραφή PR όπου ισχύει
### Διαδικασία Ανασκόπησης ### Διαδικασία Αναθεώρησης
- Τα PR ανασκοπούνται από συντηρητές και την κοινότητα - Τα PR ελέγχονται από συντηρητές και την κοινότητα
- Δίνεται προτεραιότητα στη εκπαιδευτική σαφήνεια - Δίνεται προτεραιότητα στην εκπαιδευτική σαφήνεια
- Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές - Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές
- Οι μεταφράσεις ανασκοπούνται για ακρίβεια και πολιτισμική καταλληλότητα - Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτισμική καταλληλότητα
## Σύστημα Μετάφρασης ## Σύστημα Μετάφρασης
@ -265,14 +265,14 @@ docsify serve # Serve on localhost:3000
- Χρησιμοποιεί GitHub Actions με ροή εργασίας co-op-translator - Χρησιμοποιεί GitHub Actions με ροή εργασίας co-op-translator
- Μεταφράζει αυτόματα σε 50+ γλώσσες - Μεταφράζει αυτόματα σε 50+ γλώσσες
- Αρχεία πηγής στους κύριους φακέλους - Αρχεία πηγής στους κύριους φακέλους
- Μεταφρασμένα αρχεία στη δομή `translations/{language-code}/` - Μεταφρασμένα αρχεία στους φακέλους `translations/{language-code}/`
### Προσθήκη Βελτιώσεων Χειροκίνητης Μετάφρασης ### Προσθήκη Χειροκίνητων Βελτιώσεων Μετάφρασης
1. Εντοπίστε το αρχείο στο `translations/{language-code}/` 1. Εντοπίστε το αρχείο στο `translations/{language-code}/`
2. Κάντε βελτιώσεις διατηρώντας τη δομή 2. Κάντε βελτιώσεις διατηρώντας τη δομή
3. Βεβαιωθείτε ότι τα παραδείγματα κώδικα παραμένουν λειτουργικά 3. Επιβεβαιώστε ότι τα παραδείγματα κώδικα είναι λειτουργικά
4. Δοκιμάστε οποιοδήποτε τοπικό περιεχόμενο κουίζ 4. Δοκιμάστε τυχόν τοπικοποιημένο περιεχόμενο κουίζ
### Μεταδεδομένα Μετάφρασης ### Μεταδεδομένα Μετάφρασης
@ -289,48 +289,48 @@ CO_OP_TRANSLATOR_METADATA:
--> -->
``` ```
## Εντοπισμός Σφαλμάτων και Αντιμετώπιση Προβλημάτων ## Αποσφαλμάτωση και Επίλυση Προβλημάτων
### Συνηθισμένα Προβλήματα ### Συνήθη Προβλήματα
**Η εφαρμογή κουίζ δεν ξεκινά**: **Η εφαρμογή κουίζ δεν ξεκινά**:
- Ελέγξτε την έκδοση Node.js (συνιστάται v14+) - Ελέγξτε την έκδοση Node.js (προτείνεται v14+)
- Διαγράψτε `node_modules` και `package-lock.json`, εκτελέστε ξανά `npm install` - Διαγράψτε τους φακέλους `node_modules` και το αρχείο `package-lock.json`, τρέξτε ξανά `npm install`
- Ελέγξτε για συγκρούσεις θύρας (προεπιλογή: Vite χρησιμοποιεί θύρα 5173) - Ελέγξτε για συγκρούσεις θυρών (προεπιλογή: Vite χρησιμοποιεί θύρα 5173)
**Ο διακομιστής API δεν ξεκινά**: **Ο server API δεν ξεκινά**:
- Βεβαιωθείτε ότι η έκδοση Node.js πληροί το ελάχιστο (node >=10) - Βεβαιωθείτε ότι η έκδοση Node.js είναι >=10
- Ελέγξτε αν η θύρα είναι ήδη σε χρήση - Ελέγξτε αν η θύρα είναι ελεύθερη
- Βεβαιωθείτε ότι όλες οι εξαρτήσεις έχουν εγκατασταθεί με `npm install` - Εξασφαλίστε ότι έχουν εγκατασταθεί όλες οι εξαρτήσεις με `npm install`
**Η επέκταση περιηγητή δεν φορτώνει**: **Η επέκταση περιηγητή δεν φορτώνει**:
- Επαληθεύστε ότι το manifest.json είναι σωστά μορφοποιημένο - Βεβαιωθείτε ότι το manifest.json είναι σωστά μορφοποιημένο
- Ελέγξτε την κονσόλα του περιηγητή για σφάλματα - Ελέγξτε για σφάλματα στην κονσόλα του περιηγητή
- Ακολουθήστε τις οδηγίες εγκατάστασης επέκτασης για συγκεκριμένο περιηγητή - Ακολουθήστε τις οδηγίες εγκατάστασης της επέκτασης που είναι ειδικές για τον περιηγητή
**Προβλήματα έργου συνομιλίας Python**: **Προβλήματα με το έργο συνομιλίας Python**:
- Βεβαιωθείτε ότι το πακέτο OpenAI είναι εγκατεστημένο: `pip install openai` - Βεβαιωθείτε ότι έχει εγκατασταθεί το πακέτο OpenAI: `pip install openai`
- Επαληθεύστε ότι η μεταβλητή περιβάλλοντος GITHUB_TOKEN έχει οριστεί - Βεβαιωθείτε ότι η μεταβλητή περιβάλλοντος GITHUB_TOKEN υπάρχει
- Ελέγξτε τα δικαιώματα πρόσβασης στα GitHub Models - Ελέγξτε τα δικαιώματα πρόσβασης στα GitHub Models
**Το Docsify δεν εξυπηρετεί την τεκμηρίωση**: **Τα Docsify δεν σερβίρουν τεκμηρίωση**:
- Εγκαταστήστε το docsify-cli παγκοσμίως: `npm install -g docsify-cli` - Εγκαταστήστε το docsify-cli παγκοσμίως: `npm install -g docsify-cli`
- Εκτελέστε από τον ριζικό φάκελο του αποθετηρίου - Εκτελέστε από τη ρίζα του αποθετηρίου
- Ελέγξτε ότι υπάρχει το `docs/_sidebar.md` - Ελέγξτε ότι υπάρχει το αρχείο `docs/_sidebar.md`
### Συμβουλές Περιβάλλοντος Ανάπτυξης ### Συμβουλές Ανάπτυξης Περιβάλλοντος
- Χρησιμοποιήστε το VS Code με την επέκταση Live Server για έργα HTML - Χρησιμοποιήστε VS Code με την επέκταση Live Server για έργα HTML
- Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για συνεπή μορφοποίηση - Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για συνεπή μορφοποίηση
- Χρησιμοποιήστε τα DevTools του περιηγητή για αποσφαλμάτωση JavaScript - Χρησιμοποιήστε τα DevTools του περιηγητή για αποσφαλμάτωση JavaScript
- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον περιηγητή - Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον περιηγητή
### Σκέψεις Απόδοσης ### Σκέψεις για την Απόδοση
- Ο μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) σημαίνει ότι οι πλήρεις κλωνοποιήσεις είναι μεγάλες - Μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) σημαίνει μεγάλο μέγεθος κλώνου
- Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο στο περιεχόμενο: `git clone --depth 1` - Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο στο περιεχόμενο: `git clone --depth 1`
- Εξαιρέστε τις μεταφράσεις από τις αναζητήσεις όταν εργάζεστε στο αγγλικό περιεχόμενο - Αποκλείστε τις μεταφράσεις από τις αναζητήσεις όταν δουλεύετε στα Αγγλικά
- Οι διαδικασίες κατασκευής μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, Vite build) - Οι διαδικασίες δημιουργίας μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, Vite build)
## Σκέψεις Ασφαλείας ## Σκέψεις Ασφαλείας
@ -343,46 +343,66 @@ CO_OP_TRANSLATOR_METADATA:
### Έργα Python ### Έργα Python
- Χρησιμοποιήστε εικονικά περιβάλλοντα: `python -m venv venv` - Χρησιμοποιήστε εικονικά περιβάλλοντα: `python -m venv venv`
- Διατηρήστε τις εξαρτήσεις ενημερωμένες - Κρατάτε τις εξαρτήσεις ενημερωμένες
- Τα GitHub tokens πρέπει να έχουν τα ελάχιστα απαιτούμενα δικαιώματα - Τα tokens GitHub πρέπει να έχουν τα ελάχιστα απαραίτητα δικαιώματα
### Πρόσβαση στα GitHub Models ### Πρόσβαση σε GitHub Models
- Απαιτούνται Personal Access Tokens (PAT) για τα GitHub Models - Απαιτούνται Personal Access Tokens (PAT) για GitHub Models
- Τα tokens πρέπει να αποθηκεύονται ως μεταβλητές περιβάλλοντος - Τα tokens πρέπει να φυλάσσονται ως μεταβλητές περιβάλλοντος
- Ποτέ μην δεσμεύετε tokens ή διαπιστευτήρια - Ποτέ μην δεσμεύετε tokens ή διαπιστευτήρια
## Πρόσθετες Σημειώσεις ## Επιπλέον Σημειώσεις
### Στόχος Κοινού ### Στοχευόμενο Κοινό
- Απόλυτοι αρχάριοι στην ανάπτυξη ιστοσελίδων - Απόλυτοι αρχάριοι στην ανάπτυξη ιστού
- Μαθητές και αυτοδίδακτοι - Φοιτητές και αυτοδίδακτοι
- Εκπαιδευτικοί που χρησιμοποιούν το πρόγραμμα σε τάξεις - Καθηγητές που χρησιμοποιούν το πρόγραμμα σπουδών στις τάξεις
- Το περιεχόμενο είναι σχεδιασμένο για προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων - Το περιεχόμενο έχει σχεδιαστεί για προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων
### Εκπαιδευτική Φιλοσοφία ### Εκπαιδευτική Φιλοσοφία
- Προσέγγιση μάθησης βασισμένη σε έργα - Προσέγγιση μάθησης βασισμένη σε έργα
- Συχνές αξιολογήσεις γνώσεων (κουίζ) - Συχνές επαναλήψεις γνώσης (κουίζ)
- Πρακτικές ασκήσεις κώδικα - Πρακτικές ασκήσεις κώδικα
- Παραδείγματα εφαρμογών πραγματικού κόσμου - Παραδείγματα εφαρμογών πραγματικού κόσμου
- Εστίαση στα θεμελιώδη πριν από τα frameworks - Εστίαση στις βασικές αρχές πριν τα frameworks
### Συντήρηση Αποθετηρίου ### Συντήρηση Αποθετηρίου
- Ενεργή κοινότητα μαθητών και συνεισφερόντων - Δραστήρια κοινότητα μαθητών και συνεργατών
- Τακτικές ενημερώσεις εξαρτήσεων και περιεχομένου - Τακτικές ενημερώσεις εξαρτήσεων και περιεχομένου
- Ζητήματα και συζητήσεις παρακολουθούνται από συντηρητές - Παρακολούθηση θεμάτων και συζητήσεων από τους συντηρητές
- Ενημερώσεις μεταφράσεων αυτοματοποιημένες μέσω GitHub Actions - Αυτόματες ενημερώσεις μεταφράσεων μέσω GitHub Actions
### Σχετικοί Πόροι ### Σχετικοί Πόροι
- [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Πόροι Student Hub](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub - [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 DISCLAIMER START -->
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. **Αποποίηση Ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρανοήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -2,7 +2,7 @@
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) [![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
@ -10,112 +10,112 @@
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# Ανάπτυξη Ιστού για Αρχάριους - Μια Διδακτική Ενότητα # Ανάπτυξη Ιστού για Αρχάριους - Ένα Πρόγραμμα Σπουδών
Μάθετε τα θεμέλια της ανάπτυξης ιστού με το ολοκληρωμένο μάθημα 12 εβδομάδων από τους Υποστηρικτές Microsoft Cloud. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραρίουμ, επεκτάσεις περιηγητή και διαστημικά παιχνίδια. Εμπλακείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Ενισχύστε τις δεξιότητές σας και βελτιστοποιήστε την απομνημόνευση γνώσεων με την αποτελεσματική παιδαγωγική μας βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον προγραμματισμό σήμερα! Μάθετε τα βασικά της ανάπτυξης ιστού με το ολοκληρωμένο μας μάθημα 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεραρίουμ, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Αναβαθμίστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με την αποτελεσματική παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!
Ενταχθείτε στην κοινότητα Azure AI Foundry στο Discord Εγγραφείτε στην Κοινότητα Discord Azure AI Foundry
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ακολουθήστε αυτά τα βήματα για να αρχίσετε να χρησιμοποιείτε αυτούς τους πόρους: Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε να χρησιμοποιείτε αυτούς τους πόρους:
1. **Κάντε Fork το Αποθετήριο**: Κάντε κλικ στο [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 1. **Αντιγράψτε το Αποθετήριο**: Κάντε κλικ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 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 (Αυτόματη & Πάντα Ενημερωμένη)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Αραβικά](../ar/README.md) | [Μπενγκάλι](../bn/README.md) | [Βουλγαρικά](../bg/README.md) | [Βιρμανικά (Μιανμάρ)](../my/README.md) | [Κινέζικα (Απλοποιημένα)](../zh-CN/README.md) | [Κινέζικα (Παραδοσιακά, Χονγκ Κονγκ)](../zh-HK/README.md) | [Κινέζικα (Παραδοσιακά, Μακάο)](../zh-MO/README.md) | [Κινέζικα (Παραδοσιακά, Ταϊβάν)](../zh-TW/README.md) | [Κροατικά](../hr/README.md) | [Τσέχικα](../cs/README.md) | [Δανικά](../da/README.md) | [Ολλανδικά](../nl/README.md) | [Εσθονικά](../et/README.md) | [Φινλανδικά](../fi/README.md) | [Γαλλικά](../fr/README.md) | [Γερμανικά](../de/README.md) | [Ελληνικά](./README.md) | [Εβραϊκά](../he/README.md) | [Χίντι](../hi/README.md) | [Ουγγρικά](../hu/README.md) | [Ινδονησιακά](../id/README.md) | [Ιταλικά](../it/README.md) | [Ιαπωνικά](../ja/README.md) | [Κανάντα](../kn/README.md) | [Κορεατικά](../ko/README.md) | [Λιθουανικά](../lt/README.md) | [Μαλαϊκά](../ms/README.md) | [Μαλαγιαλάμ](../ml/README.md) | [Μαραθικά](../mr/README.md) | [Νεπάλι](../ne/README.md) | [Νιγηριανά Πίνγκιν](../pcm/README.md) | [Νορβηγικά](../no/README.md) | [Περσικά (Φαρσί)](../fa/README.md) | [Πολωνικά](../pl/README.md) | [Πορτογαλικά (Βραζιλία)](../pt-BR/README.md) | [Πορτογαλικά (Πορτογαλία)](../pt-PT/README.md) | [Πουντζάμπι (Γκουρμούκι)](../pa/README.md) | [Ρουμανικά](../ro/README.md) | [Ρωσικά](../ru/README.md) | [Σερβικά (Κυριλλικά)](../sr/README.md) | [Σλοβακικά](../sk/README.md) | [Σλοβενικά](../sl/README.md) | [Ισπανικά](../es/README.md) | [Σουαχίλι](../sw/README.md) | [Σουηδικά](../sv/README.md) | [Ταγκάλογκ (Φιλιππινέζικα)](../tl/README.md) | [Ταμίλ](../ta/README.md) | [Τελούγκου](../te/README.md) | [Ταιλανδικά](../th/README.md) | [Τουρκικά](../tr/README.md) | [Ουκρανικά](../uk/README.md) | [Ουντζτού](../ur/README.md) | [Βιετναμέζικα](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](./README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Προτιμάτε να κλωνοποιήσετε τοπικά;** > **Προτιμάτε να Κλωνοποιήσετε τοπικά;**
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 γλωσσικές μεταφράσεις που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς τις μεταφράσεις, χρησιμοποιήστε sparse checkout: > Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς τις μεταφράσεις, χρησιμοποιήστε sparse checkout:
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ``` > ```
> Αυτό σας δίνει όλα όσα χρειάζεστε για να ολοκληρώσετε το μάθημα με πολύ ταχύτερη λήψη. > Αυτό σας δίνει όλα όσα χρειάζεστε για να ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END --> <!-- 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)**
[![Άνοιγμα στο Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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 για ολοκλήρωση!
Προστέθηκε νέα πρόκληση, βρείτε την "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 μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα σπουδών για Γενετική Τεχνητή Νοημοσύνη! Μην χάσετε το νέο μας πρόγραμμα σπουδών για Γενετική Τεχνητή Νοημοσύνη!
Επισκεφθείτε [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) για να ξεκινήσετε! Επισκεφθείτε [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) για να ξεκινήσετε!
![Υπόβαθρο](../../translated_images/el/background.148a8d43afde5730.webp) ![Background](../../translated_images/el/background.148a8d43afde5730.webp)
- Μαθήματα που καλύπτουν τα πάντα από τα βασικά έως το RAG. - Μαθήματα που καλύπτουν από τα βασικά ως το RAG.
- Αλληλεπιδράστε με ιστορικούς χαρακτήρες χρησιμοποιώντας το GenAI και την εφαρμογή συνοδείας μας. - Αλληλεπιδράστε με ιστορικούς χαρακτήρες μέσω GenAI και της εφαρμογής συνοδού μας.
- Διασκεδαστική και συναρπαστική αφήγηση, θα ταξιδεύετε στο χρόνο! - Διασκεδαστική και καλογραμμένη αφήγηση, θα ταξιδεύετε στο χρόνο!
![χαρακτήρας](../../translated_images/el/character.5c0dd8e067ffd693.webp) ![character](../../translated_images/el/character.5c0dd8e067ffd693.webp)
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσεων και μια πρόκληση για να σας καθοδηγήσει σε θέματα όπως: Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσης και μια πρόκληση για να σας καθοδηγήσει στη μάθηση θεμάτων όπως:
- Προτροπή και σχεδιασμός προτροπής - Εντολές και μηχανική εντολών
- Δημιουργία εφαρμογών κειμένου και εικόνας - Δημιουργία εφαρμογών κειμένου και εικόνας
- Εφαρμογές αναζήτησης - Εφαρμογές αναζήτησης
Επισκεφθείτε [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) για να ξεκινήσετε! Επισκεφθείτε [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) για να ξεκινήσετε!
## 🌱 Ξεκινώντας ## 🌱 Ξεκινώντας
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε τα σχόλιά σας [στο φόρουμ συζητήσεων](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! > **Καθηγητές**, έχουμε [περιλάβει μερικές προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε το 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` 2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Εκτέλεση του προγράμματος σε Codespace #### Εκτέλεση του προγράμματος σε Codespace
Στο αντίγραφό σας αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace για να εργαστείτε μέσα. Στο αντίγραφο αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace για να δουλέψετε.
![Codespace](../../translated_images/el/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/el/createcodespace.0238bbf4d7a8d955.webp)
#### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας #### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας
Για να εκτελέσετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν περιηγητή και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις γλώσσες προγραμματισμού και στα εργαλεία του επαγγέλματος](../../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) [CodeSpace](./images/createcodespace.png)
Στη συνέχεια, ανοίξτε το [Τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το `<your-repository-url>` με το URL που μόλις αντιγράψατε: Στη συνέχεια, ανοίξτε το [Τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το `<your-repository-url>` με το URL που μόλις αντιγράψατε:
@ -124,86 +124,86 @@
git clone <your-repository-url> 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 > * [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) - για να βοηθήσει στη γρηγορότερη συγγραφή κώδικα > * [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 | | 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 | | 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει τη συνεργασία με ομάδα | Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργάζεστε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στο διαδίκτυο | [Βασικά Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Βασικά της Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων στη JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine | | 04 | Βασικά JS | Τύποι Δεδομένων 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 | | 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine | | 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine | | 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στην JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην Πράξη | Δημιουργήστε το HTML για να φτιάξετε ένα διαδικτυακό terrarium, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | | 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 για το στυλ του διαδικτυακού terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένου του responsive design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/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 ως διεπαφή drag/drop, εστιάζοντας σε κλεισίματα και στον χειρισμό του DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/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 | [Typing Game](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε γεγονότα πληκτρολογίου για να διαχειριστείτε τη λογική της εφαρμογής σας στη JavaScript | [Προγραμματισμός Βασισμένος σε Γεγονότα](./4-typing-game/typing-game/README.md) | Christopher | | 11 | [Παιχνίδι Πληκτρολόγησης](./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 | | 12 | [Πράσινη Επέκταση Περιηγητή](./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 | | 13 | [Πράσινη Επέκταση Περιηγητή](./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 | | 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Διαδικασίες υπόβαθρου στον περιηγητή, απόδοση στον ιστό | Χρησιμοποιήστε τις διαδικασίες υπόβαθρου για τη διαχείριση του εικονιδίου της επέκτασης· μάθετε για την απόδοση του ιστού και κάποιες βελτιστοποιήσεις για βελτίωση | [Εργασίες Υπόβαθρου και Απόδοση](./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 | | 15 | [Παιχνίδι Διαστήματος](./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 | | 16 | [Παιχνίδι Διαστήματος](./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 | | 17 | [Παιχνίδι Διαστήματος](./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 | | 18 | [Παιχνίδι Διαστήματος](./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 | | 19 | [Παιχνίδι Διαστήματος](./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 | | 20 | [Παιχνίδι Διαστήματος](./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 | | 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας routing και πρότυπα 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 | | 22 | [Εφαρμογή Τραπεζικής](./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 | | 23 | [Εφαρμογή Τραπεζικής](./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 | | 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Εργασία με VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα| [Χρήση Επεξεργαστή Κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 25 | [Κώδικας Περιηγητή/VSCode](../../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 | | 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
Ένα 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
[![LangChain4j για Αρχάριους](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js για Αρχάριους](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agents ### Azure / Edge / MCP / Agents
[![AZD για Αρχάριους](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI για Αρχάριους](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP για Αρχάριους](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents για Αρχάριους](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) [![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Σειρά για Generative AI ### Σειρά για Δημιουργική Τεχνητή Νοημοσύνη
[![Generative AI για Αρχάριους](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) [![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
--- ---
### Βασική Μάθηση ### Κεντρική Μάθηση
[![ML για Αρχάριους](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Επιστήμη Δεδομένων για Αρχάριους](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI για Αρχάριους](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Κυβερνοασφάλεια για Αρχάριους](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev για Αρχάριους](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT για Αρχάριους](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development για Αρχάριους](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) [![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Σειρά Copilot ### Σειρά Copilot
[![Copilot για Προγραμματισμό AI σε Ζεύγος](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot για C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Περιπέτεια Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Λήψη Βοήθειας ## Λήψη Βοήθειας
Αν κολλήσετε ή έχετε οποιεσδήποτε ερωτήσεις σχετικά με την κατασκευή εφαρμογών AI. Ελάτε να συμμετάσχετε με άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα. Αν κολλήσετε ή έχετε ερωτήσεις σχετικά με τη δημιουργία εφαρμογών AI, συμμετάσχετε με άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις σχετικά με το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Αν έχετε σχόλια για προϊόντα ή λάθη κατά την κατασκευή, επισκεφθείτε: Αν έχετε ανατροφοδότηση για το προϊόν ή λάθη κατά την ανάπτυξη, επισκεφθείτε:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Άδεια ## Άδεια
Αυτό το αποθετήριο έχει άδεια χρήσης MIT. Δείτε το αρχείο [LICENSE](../../LICENSE) για περισσότερες πληροφορίες. Αυτό το αποθετήριο έχει άδεια υπό την άδεια MIT. Δείτε το αρχείο [LICENSE](../../LICENSE) για περισσότερες πληροφορίες.
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- 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). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλείστε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για τυχόν παρερμηνείες ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# Οδικός Χάρτης για το Αποθετήριο 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). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η έγκυρη πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:26:18+00:00", "translation_date": "2026-02-06T17:09:47+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "pl" "language_code": "pl"
}, },
@ -516,11 +516,17 @@
"language_code": "pl" "language_code": "pl"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T18:19:40+00:00", "translation_date": "2026-02-06T17:03:37+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "pl" "language_code": "pl"
}, },
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:08:04+00:00",
"source_file": "Roadmap.md",
"language_code": "pl"
},
"SECURITY.md": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-24T11:57:16+00:00", "translation_date": "2025-08-24T11:57:16+00:00",

@ -2,281 +2,281 @@
## Przegląd projektu ## Przegląd projektu
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 ### Kluczowe elementy
- **Treści edukacyjne**: 24 uporządkowane lekcje zorganizowane w moduły oparte na projektach - **Treści edukacyjne**: 24 ustrukturyzowane lekcje zorganizowane w moduły projektowe
- **Projekty praktyczne**: Terrarium, Gra w pisanie, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu i Asystent czatu AI - **Projekty praktyczne**: Terrarium, Gra w pisanie, Rozszerzenie przeglądarki, Gra kosmiczna, Aplikacja bankowa, Edytor kodu oraz Asystent czatu AI
- **Interaktywne quizy**: 48 quizów po 3 pytania każdy (oceny przed/po lekcji) - **Interaktywne quizy**: 48 quizów z 3 pytaniami każdy (wstępne i końcowe testy)
- **Wsparcie dla wielu języków**: Automatyczne tłumaczenia na ponad 50 języków za pomocą GitHub Actions - **Wsparcie wielojęzyczne**: Automatyczne tłumaczenia na ponad 50 języków dzięki GitHub Actions
- **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (dla projektów AI) - **Technologie**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (do projektów AI)
### Architektura ### Architektura
- Repozytorium edukacyjne z strukturą opartą na lekcjach - Repozytorium edukacyjne o strukturze lekcji
- Każdy folder lekcji zawiera README, przykłady kodu i rozwiązania - Każdy folder lekcji zawiera README, przykłady kodu i rozwiązania
- Samodzielne projekty w oddzielnych katalogach (quiz-app, różne projekty lekcji) - Samodzielne projekty w oddzielnych katalogach (quiz-app, różne projekty lekcyjne)
- System tłumaczeń za pomocą GitHub Actions (co-op-translator) - System tłumaczeń wykorzystujący GitHub Actions (co-op-translator)
- Dokumentacja udostępniana przez Docsify i dostępna jako PDF - Dokumentacja serwowana przez Docsify i dostępna jako PDF
## Polecenia konfiguracji ## Komendy instalacyjne
To repozytorium jest przeznaczone głównie do konsumpcji treści edukacyjnych. Aby pracować z konkretnymi projektami: To repozytorium służy głównie do korzystania z treści edukacyjnych. Aby pracować z konkretnymi projektami:
### Konfiguracja głównego repozytorium ### Instalacja głównego repozytorium
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Konfiguracja aplikacji quizowej (Vue 3 + Vite) ### Instalacja Quiz App (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Start development server npm run dev # Uruchom serwer deweloperski
npm run build # Build for production npm run build # Buduj do produkcji
npm run lint # Run ESLint npm run lint # Uruchom ESLint
``` ```
### API projektu bankowego (Node.js + Express) ### API Bankowego Projektu (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Start API server npm start # Uruchom serwer API
npm run lint # Run ESLint npm run lint # Uruchom ESLint
npm run format # Format with Prettier npm run format # Sformatuj za pomocą Prettier
``` ```
### Projekty rozszerzeń przeglądarki ### Projekty Rozszerzeń Przeglądarki
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Follow browser-specific extension loading instructions # Postępuj zgodnie z instrukcjami ładowania rozszerzeń specyficznymi dla przeglądarki
``` ```
### Projekty gry kosmicznej ### Projekty Gry Kosmicznej
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# Open index.html in browser or use Live Server # Otwórz index.html w przeglądarce lub użyj Live Server
``` ```
### Projekt czatu (backend w Pythonie) ### Projekt Czatowy (Backend Python)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Set GITHUB_TOKEN environment variable # Ustaw zmienną środowiskową GITHUB_TOKEN
python api.py python api.py
``` ```
## Przepływ pracy deweloperskiej ## Przepływ pracy developmentu
### Dla współtwórców treści ### Dla współtwórców treści
1. **Sforkuj repozytorium** na swoje konto GitHub 1. **Sforkuj repozytorium** na swoje konto GitHub
2. **Sklonuj swój fork** lokalnie 2. **Sklonuj swój fork** lokalnie
3. **Utwórz nową gałąź** dla swoich zmian 3. **Utwórz nową gałąź** na zmiany
4. Wprowadź zmiany w treści lekcji lub przykładach kodu 4. Wprowadzaj zmiany w treściach lekcji lub przykładach kodu
5. Przetestuj zmiany kodu w odpowiednich katalogach projektów 5. Testuj zmiany kodu w odpowiednich katalogach projektów
6. Zgłoś pull requesty zgodnie z wytycznymi dotyczącymi wkładu 6. Prześlij pull requesty zgodnie z wytycznymi współpracy
### Dla uczących się ### Dla uczących się
1. Sforkuj lub sklonuj repozytorium 1. Sforkuj lub sklonuj repozytorium
2. Przejdź kolejno do katalogów lekcji 2. Przechodź kolejno do katalogów lekcji
3. Przeczytaj pliki README dla każdej lekcji 3. Czytaj pliki README dla każdej lekcji
4. Wykonaj quizy przed lekcją na https://ff-quizzes.netlify.app/web/ 4. Wykonuj quizy przed lekcją na https://ff-quizzes.netlify.app/web/
5. Pracuj nad przykładami kodu w folderach lekcji 5. Pracuj na przykładach kodu w folderach lekcji
6. Wykonaj zadania i wyzwania 6. Realizuj zadania i wyzwania
7. Zrób quizy po lekcji 7. Wykonuj quizy po zakończeniu lekcji
### Rozwój na żywo ### Środowisko deweloperskie live
- **Dokumentacja**: Uruchom `docsify serve` w katalogu głównym (port 3000) - **Dokumentacja**: Uruchom `docsify serve` w katalogu głównym (port 3000)
- **Aplikacja quizowa**: Uruchom `npm run dev` w katalogu quiz-app - **Quiz App**: Uruchom `npm run dev` w katalogu quiz-app
- **Projekty**: Użyj rozszerzenia Live Server w VS Code dla projektów HTML - **Projekty**: Użyj rozszerzenia VS Code Live Server do projektów HTML
- **Projekty API**: Uruchom `npm start` w odpowiednich katalogach API - **Projekty API**: Uruchom `npm start` w odpowiednich katalogach API
## Instrukcje testowania ## Instrukcje testowania
### Testowanie aplikacji quizowej ### Testowanie Quiz App
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Check for code style issues npm run lint # Sprawdź problemy ze stylem kodu
npm run build # Verify build succeeds npm run build # Zweryfikuj, czy budowanie zakończy się sukcesem
``` ```
### Testowanie API bankowego ### Testowanie API Bankowego
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Check for code style issues npm run lint # Sprawdź problemy ze stylem kodu
node server.js # Verify server starts without errors node server.js # Sprawdź, czy serwer uruchamia się bez błędów
``` ```
### Ogólne podejście do testowania ### Ogólne podejście do testowania
- To repozytorium edukacyjne nie zawiera kompleksowych testów automatycznych - To jest repozytorium edukacyjne bez zaawansowanych automatycznych testów
- Testowanie ręczne koncentruje się na: - Testowanie manualne skupia się na:
- Uruchamianiu przykładów kodu bez błędów - Poprawnym działaniu przykładów kodu
- Poprawności linków w dokumentacji - Prawidłowo działających linkach w dokumentacji
- Sukcesie kompilacji projektów - Udanym budowaniu projektów
- Przestrzeganiu najlepszych praktyk w przykładach - Przykładach zgodnych z dobrymi praktykami
### Kontrole przed zgłoszeniem ### Sprawdzenia przed wysłaniem
- Uruchom `npm run lint` w katalogach z plikiem package.json - Uruchom `npm run lint` w katalogach zawierających package.json
- Zweryfikuj poprawność linków w markdown - Zweryfikuj poprawność linków markdown
- Przetestuj przykłady kodu w przeglądarce lub Node.js - Przetestuj przykłady kodu w przeglądarce lub Node.js
- Sprawdź, czy tłumaczenia zachowują właściwą strukturę - Sprawdź, czy tłumaczenia zachowują odpowiednią strukturę
## Wytyczne dotyczące stylu kodu ## Wytyczne dotyczące stylu kodu
### JavaScript ### JavaScript
- Używaj nowoczesnej składni ES6+ - Stosuj nowoczesną składnię ES6+
- Przestrzegaj standardowych konfiguracji ESLint dostarczonych w projektach - Przestrzegaj standardowych konfiguracji ESLint dostarczonych w projektach
- Używaj znaczących nazw zmiennych i funkcji dla jasności edukacyjnej - Używaj znaczących nazw zmiennych i funkcji dla jasności edukacyjnej
- Dodawaj komentarze wyjaśniające koncepcje dla uczących się - Dodawaj komentarze tłumaczące koncepcje dla uczących się
- Formatowanie za pomocą Prettier, jeśli skonfigurowane - Formatowanie przy użyciu Prettier tam, gdzie to skonfigurowane
### HTML/CSS ### HTML/CSS
- Semantyczne elementy HTML5 - Semantyczne elementy HTML5
- Zasady projektowania responsywnego - Zasady responsywnego designu
- Jasne konwencje nazewnictwa klas - Jasne konwencje nazewnictwa klas
- Komentarze wyjaśniające techniki CSS dla uczących się - Komentarze wyjaśniające techniki CSS dla uczących się
### Python ### Python
- Wytyczne stylu PEP 8 - Wytyczne stylu PEP 8
- Jasne, edukacyjne przykłady kodu - Jasne, edukacyjne przykłady kodu
- Podpowiedzi typów tam, gdzie są pomocne dla nauki - Adnotacje typów tam, gdzie pomagają w nauce
### Dokumentacja Markdown ### Dokumentacja Markdown
- Jasna hierarchia nagłówków - Przejrzysta hierarchia nagłówków
- Bloki kodu ze specyfikacją języka - Bloki kodu z określeniem języka
- Linki do dodatkowych zasobów - Linki do dodatkowych zasobów
- Zrzuty ekranu i obrazy w katalogach `images/` - Zrzuty ekranu i obrazy w katalogach `images/`
- Tekst alternatywny dla obrazów dla dostępności - Tekst alternatywny dla obrazów, dla dostępności
### Organizacja plików ### Organizacja plików
- Lekcje numerowane sekwencyjnie (1-getting-started-lessons, 2-js-basics, itd.) - Lekcje ponumerowane po kolei (1-getting-started-lessons, 2-js-basics, itd.)
- Każdy projekt ma katalogi `solution/` i często `start/` lub `your-work/` - Każdy projekt ma katalog `solution/` i często `start/` lub `your-work/`
- Obrazy przechowywane w specyficznych dla lekcji folderach `images/` - Obrazy w folderach `images/` specyficznych dla lekcji
- Tłumaczenia w strukturze `translations/{language-code}/` - Tłumaczenia w strukturze `translations/{kod-języka}/`
## Budowa i wdrożenie ## Budowa i wdrożenie
### Wdrożenie aplikacji quizowej (Azure Static Web Apps) ### Wdrożenie Quiz App (Azure Static Web Apps)
Aplikacja quizowa jest skonfigurowana do wdrożenia w Azure Static Web Apps: quiz-app jest skonfigurowany do wdrożenia na Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Creates dist/ folder npm run build # Tworzy folder dist/
# Deploys via GitHub Actions workflow on push to main # Wdraża za pomocą workflow GitHub Actions przy pushu do main
``` ```
Konfiguracja Azure Static Web Apps: Konfiguracja Azure Static Web Apps:
- **Lokalizacja aplikacji**: `/quiz-app` - **Lokalizacja aplikacji**: `/quiz-app`
- **Lokalizacja wynikowa**: `dist` - **Lokalizacja wynikowa**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generowanie dokumentacji PDF ### Generowanie PDF dokumentacji
```bash ```bash
npm install # Install docsify-to-pdf npm install # Zainstaluj docsify-to-pdf
npm run convert # Generate PDF from docs npm run convert # Wygeneruj PDF z docs
``` ```
### Dokumentacja Docsify ### Dokumentacja Docsify
```bash ```bash
npm install -g docsify-cli # Install Docsify globally npm install -g docsify-cli # Zainstaluj Docsify globalnie
docsify serve # Serve on localhost:3000 docsify serve # Serwuj na localhost:3000
``` ```
### Budowa specyficzna dla projektów ### Budowa poszczególnych projektów
Każdy katalog projektu może mieć własny proces budowy: Każdy katalog projektu może mieć własny proces budowy:
- Projekty Vue: `npm run build` tworzy pakiety produkcyjne - Projekty Vue: `npm run build` tworzy produkcyjne bundlery
- Projekty statyczne: Brak kroku budowy, pliki serwowane bezpośrednio - Projekty statyczne: brak kroku budowy, pliki podawane bezpośrednio
## Wytyczne dotyczące pull requestów ## Wytyczne dotyczące pull requestów
### Format tytułu ### Format tytułu
Używaj jasnych, opisowych tytułów wskazujących obszar zmiany: Używaj jasnych, opisowych tytułów wskazujących obszar zmian:
- `[Quiz-app] Dodaj nowy quiz dla lekcji X` - `[Quiz-app] Dodaj nowy quiz do lekcji X`
- `[Lesson-3] Popraw literówkę w projekcie terrarium` - `[Lesson-3] Popraw literówkę w projekcie terrarium`
- `[Translation] Dodaj tłumaczenie na hiszpański dla lekcji 5` - `[Translation] Dodaj tłumaczenie na hiszpański dla lekcji 5`
- `[Docs] Zaktualizuj instrukcje konfiguracji` - `[Docs] Aktualizuj instrukcje instalacji`
### Wymagane kontrole ### Wymagane sprawdzenia
Przed zgłoszeniem PR: Przed wysłaniem PR:
1. **Jakość kodu**: 1. **Jakość kodu**:
- Uruchom `npm run lint` w dotkniętych katalogach projektów - Uruchom `npm run lint` w dotkniętych katalogach projektów
- Napraw wszystkie błędy i ostrzeżenia lintingu - Napraw wszystkie błędy i ostrzeżenia lint
2. **Weryfikacja budowy**: 2. **Weryfikacja budowy**:
- Uruchom `npm run build`, jeśli dotyczy - Uruchom `npm run build` jeśli dotyczy
- Upewnij się, że nie ma błędów budowy - Upewnij się, że nie ma błędów podczas kompilacji
3. **Walidacja linków**: 3. **Weryfikacja linków**:
- Przetestuj wszystkie linki w markdown - Przetestuj wszystkie linki markdown
- Zweryfikuj poprawność odniesień do obrazów - Sprawdź odwołania do obrazów
4. **Przegląd treści**: 4. **Przegląd treści**:
- Sprawdź pisownię i gramatykę - Sprawdź pisownię i gramatykę
- Upewnij się, że przykłady kodu są poprawne i edukacyjne - Upewnij się, że przykłady kodu są poprawne i edukacyjne
- Zweryfikuj, czy tłumaczenia zachowują oryginalne znaczenie - Zweryfikuj, czy tłumaczenia zachowują oryginalne znaczenie
### Wymagania dotyczące wkładu ### Wymagania dotyczące współpracy
- Zgoda na Microsoft CLA (automatyczna kontrola przy pierwszym PR) - Zaakceptuj Microsoft CLA (automatyczna weryfikacja podczas pierwszego PR)
- Przestrzeganie [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Przestrzegaj [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Zobacz [CONTRIBUTING.md](./CONTRIBUTING.md) dla szczegółowych wytycznych - Zobacz [CONTRIBUTING.md](./CONTRIBUTING.md) po szczegółowe wytyczne
- Odnoś numery problemów w opisie PR, jeśli dotyczy - Odwołuj się do numerów issue w opisie PR, jeśli dotyczy
### Proces przeglądu ### Proces przeglądu
- PR-y przeglądane przez opiekunów i społeczność - PR-y przeglądane przez opiekunów i społeczność
- Priorytetem jest jasność edukacyjna - Priorytetem jest przejrzystość edukacyjna
- Przykłady kodu powinny przestrzegać aktualnych najlepszych praktyk - Przykłady kodu powinny stosować aktualne najlepsze praktyki
- Tłumaczenia przeglądane pod kątem dokładności i odpowiedniości kulturowej - Tłumaczenia są weryfikowane pod kątem dokładności i kulturowej adekwatności
## System tłumaczeń ## System tłumaczeń
### Automatyczne tłumaczenie ### Automatyczne tłumaczenia
- Używa GitHub Actions z workflow co-op-translator - Używa GitHub Actions z workflow co-op-translator
- Automatycznie tłumaczy na ponad 50 języków - Automatycznie tłumaczy na ponad 50 języków
- Pliki źródłowe w głównych katalogach - Pliki źródłowe w głównych katalogach
- Przetłumaczone pliki w katalogach `translations/{language-code}/` - Pliki tłumaczone w katalogach `translations/{kod-języka}/`
### Dodawanie ręcznych ulepszeń tłumaczeń ### Dodawanie ręcznych poprawek tłumaczeń
1. Znajdź plik w `translations/{language-code}/` 1. Znajdź plik w `translations/{kod-języka}/`
2. Wprowadź ulepszenia, zachowując strukturę 2. Wprowadź poprawki zachowując strukturę
3. Upewnij się, że przykłady kodu pozostają funkcjonalne 3. Upewnij się, że przykłady kodu działają poprawnie
4. Przetestuj wszelkie zlokalizowane treści quizowe 4. Przetestuj lokalizowane treści quizów
### Metadane tłumaczeń ### Metadane tłumaczeń
Przetłumaczone pliki zawierają nagłówek metadanych: Przetłumaczone pliki zawierają nagłówek metadanych:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -293,114 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Typowe problemy ### Typowe problemy
**Aplikacja quizowa nie uruchamia się**: **Quiz app nie startuje**:
- Sprawdź wersję Node.js (zalecana v14+) - Sprawdź wersję Node.js (zalecane v14+)
- Usuń `node_modules` i `package-lock.json`, uruchom ponownie `npm install` - Usuń `node_modules` i `package-lock.json`, uruchom ponownie `npm install`
- Sprawdź konflikty portów (domyślnie: Vite używa portu 5173) - Sprawdź konflikty portów (domyślnie Vite używa portu 5173)
**Serwer API nie uruchamia się**: **Serwer API nie startuje**:
- Zweryfikuj, czy wersja Node.js spełnia minimalne wymagania (node >=10) - Zweryfikuj wersję Node.js (node >=10)
- Sprawdź, czy port jest już używany - Sprawdź, czy port nie jest zajęty
- Upewnij się, że wszystkie zależności są zainstalowane za pomocą `npm install` - Upewnij się, że wszystkie zależności zainstalowane (`npm install`)
**Rozszerzenie przeglądarki nie ładuje się**: **Rozszerzenie przeglądarki się nie ładuje**:
- Zweryfikuj, czy manifest.json jest poprawnie sformatowany - Sprawdź poprawność pliku manifest.json
- Sprawdź konsolę przeglądarki pod kątem błędów - Sprawdź konsolę przeglądarki pod kątem błędów
- Postępuj zgodnie z instrukcjami instalacji rozszerzenia specyficznymi dla przeglądarki - Postępuj zgodnie z instrukcjami instalacji specyficznymi dla przeglądarki
**Problemy z projektem czatu w Pythonie**: **Problemy z projektem czatu w Pythonie**:
- Upewnij się, że pakiet OpenAI jest zainstalowany: `pip install openai` - Upewnij się, że pakiet OpenAI jest zainstalowany: `pip install openai`
- Zweryfikuj, czy zmienna środowiskowa GITHUB_TOKEN jest ustawiona - Sprawdź, czy zmienna środowiskowa GITHUB_TOKEN jest ustawiona
- Sprawdź uprawnienia dostępu do GitHub Models - Zweryfikuj uprawnienia dostępu do GitHub Models
**Docsify nie serwuje dokumentacji**: **Docsify nie serwuje dokumentacji**:
- Zainstaluj docsify-cli globalnie: `npm install -g docsify-cli` - Zainstaluj docsify-cli globalnie: `npm install -g docsify-cli`
- Uruchom z katalogu głównego repozytorium - Uruchom z katalogu głównego repozytorium
- Sprawdź, czy istnieje `docs/_sidebar.md` - Sprawdź, czy istnieje `docs/_sidebar.md`
### Wskazówki dotyczące środowiska deweloperskiego ### Wskazówki dotyczące środowiska developerskiego
- Używaj VS Code z rozszerzeniem Live Server dla projektów HTML - Używaj VS Code z rozszerzeniem Live Server do projektów HTML
- Zainstaluj rozszerzenia ESLint i Prettier dla spójnego formatowania - Zainstaluj rozszerzenia ESLint i Prettier dla spójnego formatowania
- Używaj narzędzi deweloperskich przeglądarki do debugowania JavaScript - Używaj DevTools przeglądarki do debugowania JavaScript
- Dla projektów Vue zainstaluj rozszerzenie Vue DevTools dla przeglądarki - W projektach Vue zainstaluj rozszerzenie Vue DevTools do przeglądarki
### Rozważania dotyczące wydajności ### Aspekty wydajności
- Duża liczba przetłumaczonych plików (ponad 50 języków) oznacza, że pełne klony są duże - Duża liczba przetłumaczonych plików (50+ języków) oznacza duże klony pełne
- Użyj płytkiego klonowania, jeśli pracujesz tylko nad treścią: `git clone --depth 1` - Używaj płytkiego klonu, jeśli pracujesz tylko na treści: `git clone --depth 1`
- Wyklucz tłumaczenia z wyszukiwań podczas pracy nad treścią w języku angielskim - Wyklucz tłumaczenia z wyszukiwań podczas pracy nad angielską zawartością
- Procesy budowy mogą być wolne przy pierwszym uruchomieniu (npm install, Vite build) - Procesy budowy mogą być wolne przy pierwszym uruchomieniu (npm install, budowa Vite)
## Rozważania dotyczące bezpieczeństwa ## Aspekty bezpieczeństwa
### Zmienne środowiskowe ### Zmienne środowiskowe
- Klucze API nigdy nie powinny być dodawane do repozytorium - Klucze API nigdy nie powinny być commitowane do repozytorium
- Używaj plików `.env` (już w `.gitignore`) - Używaj plików `.env` (już w `.gitignore`)
- Dokumentuj wymagane zmienne środowiskowe w README projektów - Udokumentuj wymagane zmienne środowiskowe w README projektów
### Projekty w Pythonie ### Projekty Python
- Używaj wirtualnych środowisk: `python -m venv venv` - Używaj środowisk wirtualnych: `python -m venv venv`
- Aktualizuj zależności - Aktualizuj zależności
- Tokeny GitHub powinny mieć minimalne wymagane uprawnienia - Tokeny GitHub powinny mieć minimalne potrzebne uprawnienia
### Dostęp do GitHub Models ### Dostęp do GitHub Models
- Wymagane są Personal Access Tokens (PAT) dla GitHub Models - Wymagane Personal Access Tokens (PAT) do GitHub Models
- Tokeny powinny być przechowywane jako zmienne środowiskowe - Tokeny przechowuj jako zmienne środowiskowe
- Nigdy nie dodawaj tokenów ani danych uwierzytelniających - Nigdy nie commituj tokenów ani danych uwierzytelniających
## Dodatkowe uwagi ## Dodatkowe uwagi
### Docelowa grupa odbiorców ### Grupa docelowa
- Całkowici początkujący w tworzeniu stron internetowych - Całkowicie początkujący w web development
- Studenci i osoby uczące się samodzielnie - Studenci i samoucy
- Nauczyciele korzystający z programu nauczania w klasach - Nauczyciele korzystający z programu w klasach
- Treści zaprojektowane z myślą o dostępności i stopniowym budowaniu umiejętności - Treści zaprojektowane z myślą o dostępności i stopniowym rozwijaniu umiejętności
### Filozofia edukacyjna ### Filozofia edukacyjna
- Podejście oparte na projektach - Podejście oparte na projektach
- Częste sprawdzanie wiedzy (quizy) - Częste sprawdzanie wiedzy (quizy)
- Praktyczne ćwiczenia kodowania - Ćwiczenia praktyczne z kodowaniem
- Przykłady zastosowań w rzeczywistych sytuacjach - Przykłady zastosowań z rzeczywistego świata
- Skupienie na podstawach przed przejściem do frameworków - Skupienie na podstawach przed frameworkami
### Utrzymanie repozytorium ### Utrzymanie repozytorium
- Aktywna społeczność uczących się i współtwórców - Aktywna społeczność uczących się i współtwórców
- Regularne aktualizacje zależności i treści - Regularne aktualizacje zależności i treści
- Problemy i dyskusje monitorowane przez opiekunów - Monitorowanie zgłoszeń i dyskusji przez opiekunów
- Aktualizacje tłumaczeń automatyzowane za pomocą GitHub Actions - Automatyczne aktualizacje tłumaczeń przez GitHub Actions
### Powiązane zasoby ### Powiązane zasoby
- [Moduły Microsoft Learn](https://docs.microsoft.com/learn/) - [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Zasoby Student Hub](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) polecany dla uczących się - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) polecany dla uczących się
- Dodatkowe kursy: Generative AI, Data Science, ML, IoT dostępne w programie nauczania - Dodatkowe kursy: Generative AI, Data Science, ML, IoT dostępne
### Praca z konkretnymi projektami ### Praca z konkretnymi projektami
Szczegółowe instrukcje dotyczące poszczególnych projektów znajdziesz w plikach README w: Szczegółowe instrukcje dotyczące pojedynczych projektów dostępne w plikach README w:
- `quiz-app/README.md` - aplikacja quizowa Vue 3 - `quiz-app/README.md` - aplikacja quizowa Vue 3
- `7-bank-project/README.md` - aplikacja bankowa z uwierzytelnianiem - `7-bank-project/README.md` - aplikacja bankowa z uwierzytelnianiem
- `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki - `5-browser-extension/README.md` - rozwój rozszerzeń przeglądarki
- `6-space-game/README.md` - rozwój gry opartej na Canvas - `6-space-game/README.md` - tworzenie gry na Canvas
- `9-chat-project/README.md` - projekt asystenta czatu AI - `9-chat-project/README.md` - projekt asystenta czatu AI
### Struktura monorepo ### Struktura monorepo
Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów: Chociaż nie jest to tradycyjne monorepo, to repozytorium zawiera wiele niezależnych projektów:
- Każda lekcja jest samodzielna - Każda lekcja jest samodzielna
- Projekty nie dzielą zależności - Projekty nie współdzielą zależności
- Pracuj nad poszczególnymi projektami bez wpływu na inne - Pracuj nad pojedynczymi projektami bez wpływu na inne
- Sklonuj całe repozytorium, aby uzyskać pełne doświadczenie programu nauczania - Sklonuj całe repo dla pełnego doświadczenia programu nauczania
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**: **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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,106 +1,121 @@
# Tworzenie stron internetowych dla początkujących - Program nauczania [![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
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ś! [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
# 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 Dołącz do społeczności Azure AI Foundry na Discordzie
Postępuj zgodnie z tymi krokami, aby zacząć korzystać z tych zasobów: [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
1. **Zrób forka repozytorium**: Kliknij [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` Wykonaj te kroki, aby zacząć korzystać z tych zasobów:
3. [**Dołącz do Discorda Azure AI Foundry i poznaj ekspertów oraz innych programistów**](https://discord.com/invite/ByRwuEEgH4) 1. **Utwórz forka repozytorium**: Kliknij [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Dołącz do Azure AI Foundry na Discordzie i spotkaj ekspertów oraz innych programistów**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Obsługa wielu języków ### 🌐 Obsługa wielu języków
#### Wspierane za pomocą GitHub Action (Automatyczne i zawsze aktualne) #### Wsparcie poprzez GitHub Action (automatyczne i zawsze aktualne)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](./README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](./README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
> **Wolisz klonować lokalnie?** > **Wolisz klonować lokalnie?**
> To repozytorium zawiera ponad 50 tłumaczeń językowych, co znacznie zwiększa rozmiar pobierania. Aby sklonować bez tłumaczeń, użyj sparse checkout: > To repozytorium zawiera ponad 50 tłumaczeń językowych, co znacznie zwiększa rozmiar pobierania. Aby klonować bez tłumaczeń, użyj sparse checkout:
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > 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 --> <!-- 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)**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Jesteś studentem?_ #### 🧑‍🎓 _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ąć! Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć!
![Tło](../../translated_images/pl/background.148a8d43afde5730.webp) ![Background](../../translated_images/pl/background.148a8d43afde5730.webp)
- Lekcje obejmujące wszystko od podstaw po RAG.
- Interakcja z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej.
- Zabawa i angażująca narracja, będziesz podróżować w czasie!
- Lekcje obejmujące wszystko od podstaw do RAG. ![character](../../translated_images/pl/character.5c0dd8e067ffd693.webp)
- Interakcja z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej.
- Przyjemna i angażująca narracja, będziesz podróżować w czasie!
![postać](../../translated_images/pl/character.5c0dd8e067ffd693.webp)
Każda lekcja zawiera zadanie do wykonania, sprawdzian wiedzy i wyzwanie, które pomogą Ci nauczyć się takich tematów jak: Każda lekcja zawiera zadanie do wykonania, test wiedzy i wyzwanie, które pokierują Cię w nauce tematów takich jak:
- Tworzenie i inżynieria promptów - Promptowanie i inżynieria promptów
- Generowanie aplikacji tekstowych i obrazów - Generowanie aplikacji tekstowych i obrazkowych
- Aplikacje wyszukiwania - 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 ### 📋 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 #### 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. Utworzy to nowe repozytorium na Twoim koncie GitHub z kopią programu nauczania. 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: Wykonaj następujące kroki:
1. **Zrób forka repozytorium**: Kliknij przycisk „Fork” w prawym górnym rogu tej strony. 1. **Utwórz forka repozytorium**: Kliknij przycisk "Fork" w prawym górnym rogu tej strony.
2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Sklonuj repozytorium**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Uruchamianie kursu w Codespace #### Uruchamianie programu nauczania w Codespace
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.
![Codespace](../../translated_images/pl/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/pl/createcodespace.0238bbf4d7a8d955.webp)
#### Uruchamianie kursu lokalnie na komputerze #### 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) [CodeSpace](./images/createcodespace.png)
Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `<your-repository-url>` adresem URL, który właśnie skopiowałeś: Następnie otwórz [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) w [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) i uruchom następujące polecenie, zastępując `<your-repository-url>` 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> 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 > * [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: ## 📂 Każda lekcja zawiera:
- opcjonalną notat graficzną - opcjonalną sketchnotkę
- opcjonalny film uzupełniający - opcjonalne uzupełniające wideo
- quiz rozgrzewający przed lekcją - quiz rozgrzewkowy przed lekcją
- lekcję pisaną - lekcję tekstową
- w projektowo-opartych lekcjach, przewodniki krok po kroku jak zbudować projekt - w lekcjach opartych na projekcie, szczegółowe przewodniki krok po kroku jak zbudować projekt
- sprawdziany wiedzy - testy wiedzy
- wyzwanie - wyzwanie
- lekturę uzupełniającą - uzupełniającą lekturę
- zadanie - zadanie domowe
- [quiz po lekcji](https://ff-quizzes.netlify.app/web/) - [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 ## 🗃️ Lekcje
| | Nazwa projektu | Nauczane koncepcje | Cele nauczania | Powiązana lekcja | Autor | | | Nazwa projektu | Nauczane koncepcje | Cele nauki | 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 | | 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 | 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 | | 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 | Pierwsze kroki | Dostępność | Poznaj podstawy dostępności stron internetowych | [Podstawy dostępności](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | | 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 | | 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 | | 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 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 | | 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 | | 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 | | 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 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 | | 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) | 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 | | 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) | 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 | | 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 | 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 | | 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 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 | | 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 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 | | 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) | 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 | | 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, używane do rysowania elementów na ekranie | [Rysowanie na kanwie](./6-space-game/2-drawing-to-canvas/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) | 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 | | 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, 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 | | 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 bazujące na stanie i wydajności gry | [Liczenie punktów](./6-space-game/5-keeping-score/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 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 | | 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 wielostronicowej strony internetowej z użyciem routingu i szablonów HTML | [Szablony HTML i trasy](./7-bank-project/1-template-route/README.md) | Yohan | | 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 formularza logowania i rejestracji | Poznaj budowanie formularzy i obsługę procedur walidacji | [Formularze](./7-bank-project/2-forms/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 dane przepływają do i z twojej aplikacji, jak je pobierać, przechowywać i usuwać | [Dane](./7-bank-project/3-data/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 zarządzać programowo | [Zarządzanie stanem](./7-bank-project/4-state-management/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 | [Korzystanie z edytora VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 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 ze sztuczną inteligencją | Naucz się tworzyć własnego asystenta AI | [Projekt Asystent AI](./9-chat-project/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 ## 🏫 Pedagogika
Nasz program nauczania oparty jest na dwóch kluczowych zasadach pedagogicznych: Nasz program nauczania opiera się na dwóch kluczowych zasadach pedagogicznych:
* nauka projektowa * nauka oparta na projektach
* częste quizy * 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 ## 🧭 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 ## 📘 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 ## 🎒 Inne kursy
Nasz zespół tworzy także inne kursy! Sprawdź: Nasz zespół tworzy inne kursy! Sprawdź:
<!-- CO-OP TRANSLATOR OTHER COURSES START --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
[![LangChain4j dla początkujących](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js dla początkujących](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agenci ### Azure / Edge / MCP / Agents
[![AZD dla początkujących](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst) [![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI dla początkujących](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP dla początkujących](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst) [![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Agenci AI dla początkujących](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst) [![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Seria Generative AI ### Generative AI Series
[![Generative AI dla początkujących](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst) [![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
--- ---
### Podstawowa Nauka ### Core Learning
[![ML dla początkujących](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science dla początkujących](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI dla początkujących](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cyberbezpieczeństwo dla początkujących](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev dla początkujących](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT dla początkujących](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development dla początkujących](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) [![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Seria Copilot ### Copilot Series
[![Copilot dla współprogramowania z AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot dla C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventures](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Uzyskiwanie pomocy ## Uzyskanie pomocy
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.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Jeśli masz uwagi dotyczące produktu lub napotykasz błędy podczas tworzenia, odwiedź: Jeśli masz uwagi dotyczące produktu lub napotkasz błędy podczas tworzenia, odwiedź:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
## Licencja ## Licencja
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 --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Zastrzeżenie**: **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.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2025-10-03T11:26:58+00:00", "translation_date": "2026-02-06T17:10:57+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "tr" "language_code": "tr"
}, },
@ -516,11 +516,17 @@
"language_code": "tr" "language_code": "tr"
}, },
"README.md": { "README.md": {
"original_hash": "490c83786552d7fab6390991517bef09", "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc",
"translation_date": "2026-01-29T18:21:34+00:00", "translation_date": "2026-02-06T17:05:45+00:00",
"source_file": "README.md", "source_file": "README.md",
"language_code": "tr" "language_code": "tr"
}, },
"Roadmap.md": {
"original_hash": "28bf6185fd7f27b62ddc210514366192",
"translation_date": "2026-02-06T17:08:17+00:00",
"source_file": "Roadmap.md",
"language_code": "tr"
},
"SECURITY.md": { "SECURITY.md": {
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
"translation_date": "2025-08-25T21:02:04+00:00", "translation_date": "2025-08-25T21:02:04+00:00",

@ -1,28 +1,28 @@
# AGENTS.md # AGENTS.md
## Proje Genel Bakış ## Proje Genel Bakışı
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 ### Ana Bileşenler
- **Eğitim İçeriği**: Proje tabanlı modüller halinde düzenlenmiş 24 yapılandırılmış ders - **Eğitim İçeriği**: Proje tabanlı modüllere organize edilmiş 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ı - **Pratik Projeler**: Terrarium, Yazma 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) - **Etkileşimli Quizler**: Her biri 3 sorudan oluşan 48 quiz (ders öncesi/sonrası değerlendirmeleri)
- **Çok Dilli Destek**: GitHub Actions aracılığıyla 50+ dilde otomatik çeviriler - **Çok Dilli Destek**: GitHub Actions ile 50+ dilde otomatik çeviri
- **Teknolojiler**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI projeleri için) - **Teknolojiler**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (Yapay Zeka projeleri için)
### Mimari ### Mimari
- Ders tabanlı yapılandırılmış eğitim deposu - Ders temelli yapıya sahip eğitim deposu
- Her ders klasörü README, kod örnekleri ve çözümler içerir - Her ders klasörü README, kod örnekleri ve çözümler içerir
- Bağımsız projeler ayrı dizinlerde (quiz-app, çeşitli ders projeleri) - Ayrı klasörlerde bağımsız projeler (quiz-app, çeşitli ders projeleri)
- GitHub Actions (co-op-translator) kullanılarak çeviri sistemi - GitHub Actions kullanan çeviri sistemi (co-op-translator)
- Docsify üzerinden sunulan ve PDF olarak erişilebilen belgeler - Docsify ile sağlanan dökümantasyon ve PDF halinde erişilebilirlik
## Kurulum Komutları ## Kurulum Komutları
Bu depo öncelikle eğitim içeriği tüketimi için tasarlanmıştır. Belirli projelerle çalışmak için: Bu depo öncelikle eğitim içeriği tüketimi içindir. Belirli projelerle çalışmak için:
### Ana Depo Kurulumu ### Ana Depo Kurulumu
@ -36,9 +36,9 @@ cd Web-Dev-For-Beginners
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Start development server npm run dev # Geliştirme sunucusunu başlat
npm run build # Build for production npm run build # Üretim için derle
npm run lint # Run ESLint npm run lint # ESLint'i çalıştır
``` ```
### Banka Projesi API (Node.js + Express) ### Banka Projesi API (Node.js + Express)
@ -46,9 +46,9 @@ npm run lint # Run ESLint
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # Start API server npm start # API sunucusunu başlat
npm run lint # Run ESLint npm run lint # ESLint çalıştır
npm run format # Format with Prettier npm run format # Prettier ile biçimlendir
``` ```
### Tarayıcı Uzantısı Projeleri ### Tarayıcı Uzantısı Projeleri
@ -56,7 +56,7 @@ npm run format # Format with Prettier
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Follow browser-specific extension loading instructions # Tarayıcıya özel uzantı yükleme talimatlarını izleyin
``` ```
### Uzay Oyunu Projeleri ### Uzay Oyunu Projeleri
@ -64,7 +64,7 @@ npm install
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# Open index.html in browser or use Live Server # index.html dosyasını tarayıcıda açın veya Live Server kullanın
``` ```
### Sohbet Projesi (Python Backend) ### Sohbet Projesi (Python Backend)
@ -72,7 +72,7 @@ npm install
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Set GITHUB_TOKEN environment variable # GITHUB_TOKEN ortam değişkenini ayarla
python api.py python api.py
``` ```
@ -80,29 +80,29 @@ python api.py
### İçerik Katkıcıları İçin ### İçerik Katkıcıları İçin
1. **Depoyu fork edin** GitHub hesabınıza 1. **Depoyu kendi GitHub hesabınıza fork edin**
2. **Fork'unuzu yerel olarak klonlayın** 2. **Forkunuzu yerel olarak klonlayın**
3. Değişiklikleriniz için **yeni bir dal oluşturun** 3. **Değişiklikleriniz için yeni bir dal oluşturun**
4. Ders içeriği veya kod örneklerinde değişiklik yapın 4. Ders içeriği veya kod örneklerinde değişiklik yapın
5. İlgili proje dizinlerinde kod değişikliklerini test edin 5. İlgili proje klasörlerinde kod değişikliklerini test edin
6. Katkı yönergelerine uygun olarak pull request gönderin 6. Katkı yönergelerine uygun şekilde pull request gönderin
### Öğrenciler İçin ### Öğrenenler İçin
1. Depoyu fork edin veya klonlayın 1. Depoyu fork edin veya klonlayın
2. Ders dizinlerine sırasıyla gidin 2. Ders klasörlerinde sırayla gezin
3. Her ders için README dosyalarını okuyun 3. Her dersin README dosyasını okuyun
4. https://ff-quizzes.netlify.app/web/ adresinde ders öncesi testleri tamamlayın 4. https://ff-quizzes.netlify.app/web/ adresinde ders öncesi quizleri tamamlayın
5. Ders klasörlerindeki kod örneklerini inceleyin 5. Ders klasörlerindeki kod örnekleri üzerinde çalışın
6. Ödevleri ve zorlukları tamamlayın 6. Ödevleri ve zorlukları tamamlayın
7. Ders sonrası testleri yapın 7. Ders sonrası quizleri yapın
### Canlı Geliştirme ### Canlı Geliştirme
- **Belgeler**: Kök dizinde `docsify serve` çalıştırın (port 3000) - **Dökümantasyon**: `docsify serve` komutunu kök dizinde çalıştırın (port 3000)
- **Quiz Uygulaması**: quiz-app dizininde `npm run dev` çalıştırın - **Quiz Uygulaması**: `quiz-app` dizininde `npm run dev` çalıştırın
- **Projeler**: HTML projeleri için VS Code Live Server uzantısını kullanın - **Projeler**: HTML projeleri için VS Code Live Server uzantısını kullanın
- **API Projeleri**: İlgili API dizinlerinde `npm start` çalıştırın - **API Projeleri**: İlgili API dizinlerinde `npm start` komutunu kullanın
## Test Talimatları ## Test Talimatları
@ -110,82 +110,82 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Check for code style issues npm run lint # Kod stili sorunlarını kontrol et
npm run build # Verify build succeeds npm run build # Derlemenin başarılı olduğunu doğrula
``` ```
### Banka API Testi ### Banka API Testi
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Check for code style issues npm run lint # Kod stil sorunlarını kontrol et
node server.js # Verify server starts without errors node server.js # Sunucunun hatasız başladığını doğrula
``` ```
### Genel Test Yaklaşımı ### Genel Test Yaklaşımı
- Bu bir eğitim deposudur, kapsamlı otomatik testler içermez - Bu eğitim deposunda kapsamlı otomatik test bulunmamaktadır
- Manuel testler şunlara odaklanır: - Manuel testler:
- Kod örneklerinin hatasız çalışması - Kod örneklerinin hatasız çalışması
- Belgelerdeki bağlantıların doğru çalışması - Dökümantasyondaki linklerin doğru çalışması
- Proje derlemelerinin başarıyla tamamlanması - Proje derlemelerinin başarılı olması
- Örneklerin en iyi uygulamalara uygun olması - Örneklerin en iyi uygulamalara uygun olması
### Gönderim Öncesi Kontroller ### Gönderim Öncesi Kontroller
- `npm run lint` komutunu package.json bulunan dizinlerde çalıştırın - package.json içeren dizinlerde `npm run lint` komutunu çalıştırın
- Markdown bağlantılarının geçerli olduğunu doğrulayın - Markdown bağlantılarının geçerli olduğundan emin olun
- Kod örneklerini tarayıcıda veya Node.js'de test edin - Kod örneklerini tarayıcı veya Node.js üzerinde test edin
- Çevirilerin doğru yapıyı koruduğundan emin olun - Çevirilerin yapısını koruduğunu kontrol edin
## Kod Stili Yönergeleri ## Kod Stili Yönergeleri
### JavaScript ### JavaScript
- Modern ES6+ sözdizimini kullanın - Modern ES6+ sözdizimi kullanın
- Projelerde sağlanan standart ESLint yapılandırmalarını takip edin - Projelerde sağlanan standart ESLint yapılandırmalarını takip edin
- Eğitim ısından anlamlı değişken ve fonksiyon adları kullanın - Eğitim için anlamlı değişken ve fonksiyon isimleri kullanın
- Öğrenciler için kavramlarııklayan yorumlar ekleyin - Kavramlarııklayan yorumlar ekleyin
- Prettier ile formatlama yapın (varsa) - Prettier kullanılan yerlerde biçimlendirme yapın
### HTML/CSS ### HTML/CSS
- Semantik HTML5 öğeleri - Semantik HTML5 elemanları kullanın
- Duyarlı tasarım prensipleri - Duyarlı tasarım prensiplerine uyun
- Açık sınıf adlandırma kuralları - Açık sınıf isimlendirme konvansiyonları kullanın
- Öğrenciler için CSS tekniklerini açıklayan yorumlar - CSS tekniklerini açıklayan yorumlar ekleyin
### Python ### Python
- PEP 8 stil yönergeleri - PEP 8 stil kurallarına uyun
- Açık ve eğitici kod örnekleri - Açık, eğitim amaçlı kod örnekleri sunun
- Öğrenmeısından faydalı olduğunda tür ipuçları ekleyin - Öğrenmeye yardımcı olan yerlerde tip ipuçları kullanın
### Markdown Belgeleri ### Markdown Dökümantasyonu
- ık başlık hiyerarşisi - Net başlık hiyerarşisi
- Dil belirtimi olan kod blokları - Dil belirtilmiş kod blokları
- Ek kaynaklara bağlantılar - Ek kaynaklara linkler
- `images/` dizinlerinde ekran görüntüleri ve resimler - `images/` dizininde ekran görüntüleri ve görseller
- Erişilebilirlik için resimlere alt metin ekleme - Erişilebilirlik için görsellerde alt metin kullanımı
### Dosya Organizasyonu ### Dosya Organizasyonu
- Dersler sıralı olarak numaralandırılmış (1-getting-started-lessons, 2-js-basics, vb.) - Dersler sırayla numaralandırılmış (1-getting-started-lessons, 2-js-basics, vb.)
- Her proje genellikle `solution/` ve `start/` veya `your-work/` dizinlerine sahiptir - Her projenin `solution/` ve çoğunlukla `start/` veya `your-work/` klasörleri var
- Resimler derslere özel `images/` klasörlerinde saklanır - Görseller derslere özel `images/` klasörlerinde tutulur
- Çeviriler `translations/{language-code}/` yapısında bulunur - Çeviriler `translations/{language-code}/` yapısında
## Derleme ve Dağıtım ## Derleme ve Dağıtım
### Quiz Uygulaması Dağıtımı (Azure Static Web Apps) ### Quiz Uygulaması Dağıtımı (Azure Static Web Apps)
Quiz-app, Azure Static Web Apps dağıtımı için yapılandırılmıştır: quiz-app Azure Static Web Apps dağıtımı için yapılandırılmıştır:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Creates dist/ folder npm run build # dist/ klasörü oluşturur
# Deploys via GitHub Actions workflow on push to main # main'e push yapıldığında GitHub Actions iş akışıyla dağıtır
``` ```
Azure Static Web Apps yapılandırması: Azure Static Web Apps yapılandırması:
@ -193,88 +193,88 @@ Azure Static Web Apps yapılandırması:
- **Çıktı konumu**: `dist` - **Çıktı konumu**: `dist`
- **İş akışı**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **İş akışı**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### PDF Belgeleri Oluşturma ### Dökümantasyon PDF Oluşturma
```bash ```bash
npm install # Install docsify-to-pdf npm install # docsify-to-pdf yükleyin
npm run convert # Generate PDF from docs npm run convert # Docs'dan PDF oluşturun
``` ```
### Docsify Belgeleri ### Docsify Dökümantasyonu
```bash ```bash
npm install -g docsify-cli # Install Docsify globally npm install -g docsify-cli # Docsify'yi global olarak kur
docsify serve # Serve on localhost:3000 docsify serve # localhost:3000 üzerinde sun
``` ```
### Proje Özel Derlemeler ### Proje Bazlı Derlemeler
Her proje dizini kendi derleme sürecine sahip olabilir: Her proje dizininde kendi derleme süreci olabilir:
- Vue projeleri: `npm run build` üretim paketleri oluşturur - Vue projeleri: `npm run build` ile üretim paketleri oluşturulur
- Statik projeler: Derleme adımı yok, dosyaları doğrudan sunun - Statik projeler: Derleme adımı yok, dosyalar doğrudan servis edilir
## Pull Request Yönergeleri ## Pull Request Yönergeleri
### Başlık Formatı ### Başlık Formatı
Değişiklik alanını belirten açık ve açıklayıcı başlıklar kullanın: Değişiklik alanını belirtmek için açık ve açıklayıcı başlıklar kullanın:
- `[Quiz-app] Ders X için yeni test ekle` - `[Quiz-app] Ders X için yeni quiz ekle`
- `[Lesson-3] Terrarium projesinde yazım hatasını düzelt` - `[Lesson-3] Terrarium projesinde yazım hatasını düzelt`
- `[Translation] Ders 5 için İspanyolca çeviri ekle` - `[Translation] Ders 5 için İspanyolca çeviri ekle`
- `[Docs] Kurulum talimatlarını güncelle` - `[Docs] Kurulum talimatlarını güncelle`
### Gerekli Kontroller ### Gereken Kontroller
PR göndermeden önce: PR göndermeden önce:
1. **Kod Kalitesi**: 1. **Kod Kalitesi**:
- İlgili proje dizinlerinde `npm run lint` çalıştırın - Etkilenen proje dizinlerinde `npm run lint` çalıştırın
- Tüm lint hatalarını ve uyarılarını düzeltin - Tüm lint hatalarını ve uyarılarını düzeltin
2. **Derleme Doğrulaması**: 2. **Derleme Doğrulaması**:
- Uygulanabilir ise `npm run build` çalıştırın - Uygunsa, `npm run build` komutunu çalıştırın
- Derleme hatası olmadığından emin olun - Derleme hatası olmadığından emin olun
3. **Bağlantı Doğrulaması**: 3. **Link Doğrulama**:
- Tüm markdown bağlantılarını test edin - Tüm markdown linklerini test edin
- Resim referanslarının çalıştığını doğrulayın - Görsel referansların çalıştığını kontrol edin
4. **İçerik İncelemesi**: 4. **İçerik İncelemesi**:
- Yazım ve dilbilgisi hatalarını kontrol edin - İmla ve gramer kontrolü yapın
- Kod örneklerinin doğru ve eğitici olduğundan emin olun - Kod örneklerinin doğru ve öğretici olduğundan emin olun
- Çevirilerin orijinal anlamı koruduğunu doğrulayın - Çevirilerin orijinal anlamı koruduğunu teyit edin
### Katkı Gereksinimleri ### Katkı Gereksinimleri
- Microsoft CLA'yı kabul edin (ilk PR'de otomatik kontrol) - Microsoft CLAya (otomatik kontrol ilk PRda) onay verin
- [Microsoft Açık Kaynak Davranış Kuralları](https://opensource.microsoft.com/codeofconduct/) yönergelerine uyun - [Microsoft Açık Kaynak Davranış Kuralları](https://opensource.microsoft.com/codeofconduct/)na uyun
- Ayrıntılı yönergeler için [CONTRIBUTING.md](./CONTRIBUTING.md) dosyasına bakın - Detaylı yönergeler için [CONTRIBUTING.md](./CONTRIBUTING.md) dosyasına bakın
- Uygulanabilir ise PR açıklamasında sorun numaralarına referans verin - Uygunsa, PR açıklamasında ilgili issue numaralarını belirtin
### İnceleme Süreci ### İnceleme Süreci
- PR'ler bakımcılar ve topluluk tarafından incelenir - PRlar bakımcılar ve topluluk tarafından incelenir
- Eğitim netliği önceliklidir - Eğitimsel açıklık önceliklidir
- Kod örnekleri güncel en iyi uygulamalara uygun olmalıdır - Kod örnekleri mevcut en iyi uygulamalara uygun olmalıdır
- Çeviriler doğruluk ve kültürel uygunluk açısından incelenir - Çeviriler doğruluk ve kültürel uygunluk açısından gözden geçirilir
## Çeviri Sistemi ## Çeviri Sistemi
### Otomatik Çeviri ### Otomatik Çeviri
- GitHub Actions ile co-op-translator iş akışı kullanır - GitHub Actions ile co-op-translator iş akışını kullanır
- 50+ dile otomatik çeviri yapar - 50+ dile otomatik çeviri yapar
- Ana dizinlerdeki kaynak dosyalar - Kaynak dosyalar ana dizinlerde
- Çevrilmiş dosyalar `translations/{language-code}/` dizinlerinde - Çeviriler `translations/{language-code}/` dizinlerinde
### Manuel Çeviri İyileştirmeleri Eklemek ### Manuel Çeviri İyileştirmeleri Ekleme
1. Dosyayı `translations/{language-code}/` içinde bulun 1. `translations/{language-code}/` dizininde dosyayı bulun
2. Yapıyı koruyarak iyileştirmeler yapın 2. Yapıyı koruyarak iyileştirmeler yapın
3. Kod örneklerinin çalışır durumda kaldığından emin olun 3. Kod örneklerinin çalışır durumda kaldığından emin olun
4. Yerelleştirilmiş test içeriğini test edin 4. Yerelleştirilmiş quiz içeriklerini test edin
### Çeviri Meta Verileri ### Çeviri Meta Verisi
Çevrilmiş dosyalar meta veri başlığı içerir: Çevrilmiş dosyalar meta veri başlığı içerir:
```markdown ```markdown
@ -293,64 +293,64 @@ CO_OP_TRANSLATOR_METADATA:
### Yaygın Sorunlar ### Yaygın Sorunlar
**Quiz uygulaması başlatılamıyor**: **Quiz uygulaması başlamıyor**:
- Node.js sürümünü kontrol edin (v14+ önerilir) - Node.js sürümünü kontrol edin (v14+ önerilir)
- `node_modules` ve `package-lock.json` silin, ardından `npm install` çalıştırın - `node_modules` ve `package-lock.json` silip `npm install` komutunu tekrar çalıştırın
- Port çakışmalarını kontrol edin (varsayılan: Vite port 5173 kullanır) - Port çakışması olup olmadığını kontrol edin (varsayılan: Vite portu 5173)
**API sunucusu başlatılamıyor**: **API sunucusu başlamıyor**:
- Node.js sürümünün minimum gereksinimi karşıladığını doğrulayın (node >=10) - Node.js sürümünün minimum gereksinimi karşılayıp karşılamadığını kontrol edin (node >=10)
- Portun zaten kullanımda olup olmadığını kontrol edin - Portun kullanımda olup olmadığını kontrol edin
- `npm install` ile tüm bağımlılıkların yüklendiğinden emin olun - Tüm bağımlılıkların `npm install` ile yüklendiğinden emin olun
**Tarayıcı uzantısı yüklenmiyor**: **Tarayıcı uzantısı yüklenmiyor**:
- manifest.json dosyasının doğru biçimlendirildiğini doğrulayın - manifest.json dosyasının doğru formatlandığını kontrol edin
- Tarayıcı konsolunda hataları kontrol edin - Tarayıcı konsolunda hata var mı bakın
- Tarayıcıya özel uzantı yükleme talimatlarını takip edin - Tarayıcıya özel uzantı yükleme talimatlarını takip edin
**Python sohbet projesi sorunları**: **Python sohbet projesi sorunları**:
- OpenAI paketinin yüklü olduğundan emin olun: `pip install openai` - OpenAI paketi yüklü mü: `pip install openai`
- GITHUB_TOKEN ortam değişkeninin ayarlandığını doğrulayın - GITHUB_TOKEN çevre değişkeninin ayarlı olduğundan emin olun
- GitHub Modelleri erişim izinlerini kontrol edin - GitHub Modeller erişim izinlerini kontrol edin
**Docsify belgeleri sunmuyor**: **Docsify dökümantasyonu servis etmiyor**:
- docsify-cli'yi global olarak yükleyin: `npm install -g docsify-cli` - docsify-cli global olarak yüklü mü: `npm install -g docsify-cli`
- Depo kök dizininden çalıştırın - Depo kök dizininden çalıştırın
- `docs/_sidebar.md` dosyasının mevcut olduğundan emin olun - `docs/_sidebar.md` dosyasının varlığını kontrol edin
### Geliştirme Ortamı İpuçları ### Geliştirme Ortamı İpuçları
- HTML projeleri için VS Code Live Server uzantısını kullanın - HTML projeleri için VS Code Live Server uzantısını kullanın
- Tutarlı formatlama için ESLint ve Prettier uzantılarını yükleyin - Tutarlı biçimlendirme için ESLint ve Prettier uzantılarını kurun
- JavaScript hata ayıklama için tarayıcı Geliştirici Araçlarını kullanın - JavaScript hata ayıklamak için tarayıcı geliştirici araçlarını kullanın
- Vue projeleri için Vue DevTools tarayıcı uzantısını yükleyin - Vue projeleri için Vue DevTools tarayıcı uzantısını kurun
### Performans Dikkatleri ### Performans Dikkatleri
- Çevrilmiş dosyaların çokluğu (50+ dil) nedeniyle tam klonlar büyük olabilir - Çok sayıda çevrilmiş dosya (50+ dil) tam klonlama boyutunu artırır
- Sadece içerik üzerinde çalışıyorsanız sığ klon kullanın: `git clone --depth 1` - Sadece içerikle çalışıyorsanız sığ klon kullanın: `git clone --depth 1`
- İngilizce içerik üzerinde çalışırken çevirileri aramalardan hariç tutun - İngilizce içerikle çalışırken çevirileri aramalardan hariç tutun
- İlk çalıştırmada derleme süreçleri yavaş olabilir (npm install, Vite build) - Derleme süreçleri ilk seferde yavaş olabilir (npm install, Vite build)
## Güvenlik Dikkatleri ## Güvenlik Dikkatleri
### Ortam Değişkenleri ### Ortam Değişkenleri
- API anahtarları asla depoya eklenmemelidir - API anahtarları asla depoya gönderilmemelidir
- `.env` dosyalarını kullanın (zaten `.gitignore` içinde) - `.env` dosyaları kullanılır (zaten `.gitignore` içinde)
- Gerekli ortam değişkenlerini proje README dosyalarında belgeleyin - Gerekli ortam değişkenleri proje READMElerinde belgelenmelidir
### Python Projeleri ### Python Projeleri
- Sanal ortamlar kullanın: `python -m venv venv` - Sanal ortamlar kullanın: `python -m venv venv`
- Bağımlılıkları güncel tutun - Bağımlılıkları güncel tutun
- GitHub token'ları minimum gerekli izinlere sahip olmalıdır - GitHub tokenleri minimum yetkiyle ayarlayın
### GitHub Modelleri Erişimi ### GitHub Modeller Erişimi
- GitHub Modelleri için Kişisel Erişim Token'ları (PAT) gereklidir - GitHub Modeller için Kişisel Erişim Tokenleri (PAT) gerekir
- Token'lar ortam değişkenleri olarak saklanmalıdır - Tokenlar çevre değişkeni olarak saklanmalıdır
- Token'ları veya kimlik bilgilerini asla depoya eklemeyin - Token veya kimlik bilgileri asla versiyon kontrolüne gönderilmemelidir
## Ek Notlar ## Ek Notlar
@ -358,34 +358,34 @@ CO_OP_TRANSLATOR_METADATA:
- Web geliştirmeye tamamen yeni başlayanlar - Web geliştirmeye tamamen yeni başlayanlar
- Öğrenciler ve kendi kendine öğrenenler - Öğrenciler ve kendi kendine öğrenenler
- Müfredatı sınıflarda kullanan öğretmenler - Müfredatı sınıf ortamında kullanan öğretmenler
- İçerik erişilebilirlik ve kademeli beceri geliştirme için tasarlanmıştır - İçerik erişilebilirlik ve aşamalı beceri geliştirmeye uygun şekilde tasarlanmıştır
### Eğitim Felsefesi ### Eğitim Felsefesi
- Proje tabanlı öğrenme yaklaşımı - Proje tabanlı öğrenme yöntemi
- Sık bilgi kontrolleri (testler) - Sık aralıklarla bilgi ölçümleri (quizler)
- Uygulamalı kodlama alıştırmaları - Uygulamalı kodlama egzersizleri
- Gerçek dünya uygulama örnekleri - Gerçek dünya uygulaması örnekleri
- Çerçevelerden önce temellere odaklanma - Çerçeveler öncesi temel bilgiler üzerine odaklanma
### Depo Bakımı ### Depo Bakımı
- Öğrenciler ve katkıcılar tarafından aktif bir topluluk - Aktif öğrenenler ve katkıcılar topluluğu
- Bağımlılıkların ve içeriğin düzenli güncellenmesi - Bağımlılık ve içerik düzenli güncellenir
- Sorunlar ve tartışmalar bakımcılar tarafından izlenir - Sorunlar ve tartışmalar bakımcılar tarafından izlenir
- Çeviri güncellemeleri GitHub Actions ile otomatikleştirilir - Çeviri güncellemeleri GitHub Actions aracılığıyla otomatik
### İlgili Kaynaklar ### İlgili Kaynaklar
- [Microsoft Learn modülleri](https://docs.microsoft.com/learn/) - [Microsoft Learn modülleri](https://docs.microsoft.com/learn/)
- [Öğrenci Merkezi kaynakları](https://docs.microsoft.com/learn/student-hub/) - [Öğrenci Merkezi kaynakları](https://docs.microsoft.com/learn/student-hub/)
- Öğrenciler için [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) önerilir - Öğrenenler için önerilen [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- Ek kurslar: Üretken AI, Veri Bilimi, ML, IoT müfredatları mevcut - Ek kurslar: Üretken AI, Veri Bilimi, ML, Nesnelerin İnterneti müfredatları
### Belirli Projelerle Çalışma ### Belirli Projelerle Çalışma
Bireysel projelerle ilgili ayrıntılı talimatlar için şu README dosyalarına bakın: Bireysel projeler hakkında detaylı talimatlar için README dosyalarına bakın:
- `quiz-app/README.md` - Vue 3 quiz uygulaması - `quiz-app/README.md` - Vue 3 quiz uygulaması
- `7-bank-project/README.md` - Kimlik doğrulamalı bankacılık uygulaması - `7-bank-project/README.md` - Kimlik doğrulamalı bankacılık uygulaması
- `5-browser-extension/README.md` - Tarayıcı uzantısı geliştirme - `5-browser-extension/README.md` - Tarayıcı uzantısı geliştirme
@ -394,13 +394,15 @@ Bireysel projelerle ilgili ayrıntılı talimatlar için şu README dosyalarına
### Monorepo Yapısı ### Monorepo Yapısı
Geleneksel bir monorepo olmasa da, bu depo birden fazla bağımsız proje içerir: Geleneksel bir monorepo olmasa da, bu depo birçok bağımsız proje içerir:
- Her ders kendi içinde bağımsızdır - Her ders kendi başına bağımsızdır
- Projeler bağımlılıkları paylaşmaz - Projeler bağımlılık paylaşmaz
- Bireysel projeler üzerinde çalışırken diğerlerini etkilemez - Bir projede çalışmak diğerlerini etkilemez
- Tam müfredat deneyimi için tüm depoyu klonlayın - Tüm müfredatı deneyimlemek için tüm depo klonlanabilir
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**: **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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,219 +1,205 @@
[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) # Yeni Başlayanlar İçin Web Geliştirme - Bir Müfredat
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) 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!
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Azure AI Foundry Discord Topluluğu'na Katılı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 HTMLi 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!
Azure AI Foundry Discord Topluluğuna Katılın ---
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Bu kaynakları kullanmaya başlamak için şu adımları izleyin: Bu kaynakları kullanmaya başlamak için şu adımları izleyin:
1. **Depoyu Çatallayın**: Tıklayın [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 1. **Depoyu Forklayın**: Tıklayın [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discorda Katılın ve uzmanlar ile diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4) 3. [**Azure AI Foundry Discorda katılın ve uzmanlar ile diğer geliştiricilerle tanışın**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Çok Dilli Destek ### 🌐 Çok Dilli Destek
#### GitHub Action ile Desteklenir (Otomatik ve Her Zaman Güncel) #### GitHub Action ile desteklenmektedir (Otomatik & Her zaman güncel)
<!-- CO-OP TRANSLATOR LANGUAGES TABLE START --> <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](./README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) [Arapça](../ar/README.md) | [Bengalce](../bn/README.md) | [Bulgarca](../bg/README.md) | [Burma Dili (Myanmar)](../my/README.md) | [Çince (Basitleştirilmiş)](../zh-CN/README.md) | [Çince (Geleneksel, Hong Kong)](../zh-HK/README.md) | [Çince (Geleneksel, Makao)](../zh-MO/README.md) | [Çince (Geleneksel, Tayvan)](../zh-TW/README.md) | [Hırvatça](../hr/README.md) | [Çekçe](../cs/README.md) | [Danca](../da/README.md) | [Felemenkçe](../nl/README.md) | [Estonca](../et/README.md) | [Fince](../fi/README.md) | [Fransızca](../fr/README.md) | [Almanca](../de/README.md) | [Yunanca](../el/README.md) | [İbranice](../he/README.md) | [Hintçe](../hi/README.md) | [Macarca](../hu/README.md) | [Endonezce](../id/README.md) | [İtalyanca](../it/README.md) | [Japonca](../ja/README.md) | [Kannada Dili](../kn/README.md) | [Korece](../ko/README.md) | [Litvanca](../lt/README.md) | [Malayca](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalce](../ne/README.md) | [Nijerya Pidgin](../pcm/README.md) | [Norveççe](../no/README.md) | [Farsça (Persçe)](../fa/README.md) | [Lehçe](../pl/README.md) | [Portekizce (Brezilya)](../pt-BR/README.md) | [Portekizce (Portekiz)](../pt-PT/README.md) | [Pencapça (Gurmukhi)](../pa/README.md) | [Rumence](../ro/README.md) | [Rusça](../ru/README.md) | [Sırpça (Kiril)](../sr/README.md) | [Slovakça](../sk/README.md) | [Slovence](../sl/README.md) | [İspanyolca](../es/README.md) | [Svahili](../sw/README.md) | [İsveççe](../sv/README.md) | [Tagalog (Filipince)](../tl/README.md) | [Tamilce](../ta/README.md) | [Telugu Dili](../te/README.md) | [Tayca](../th/README.md) | [Türkçe](./README.md) | [Ukraynaca](../uk/README.md) | [Urduca](../ur/README.md) | [Vietnamca](../vi/README.md)
> **Yerelde Klonlamayı Tercih Ediyor musunuz?** > **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:
> ```bash > ```bash
> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
> cd Web-Dev-For-Beginners > cd Web-Dev-For-Beginners
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > 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 --> <!-- 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**
[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) [![Visual Studio Codeda Aç](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑‍🎓 _Öğrenci misiniz?_ #### 🧑‍🎓 _Öğ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) Yeni AI Asistan projesi eklendi, inceleyin [proje](./9-chat-project/README.md)
### 📣 Duyuru - _Generatif AI için JavaScriptte Yeni Müfredat_ yayımlandı ### 📣 Duyuru _Generative AI için Yeni Müfredat_ JavaScripte 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)
![Background](../../translated_images/tr/background.148a8d43afde5730.webp) ![Arka plan](../../translated_images/tr/background.148a8d43afde5730.webp)
- Temelden RAGa kadar her şeyi kapsayan dersler. - Temellerden RAGa kadar her şeyi kapsayan dersler
- GenAI ve eşlik eden uygulamamızla tarihî karakterlerle etkileşim. - GenAI ve eşlik eden uygulamamızla tarihi karakterlerle etkileşim
- Eğlenceli ve sürükleyici anlatı, zaman yolculuğu yapacaksınız! - Eğlenceli ve etkileşimli anlatı, zamanda yolculuk yapacaksınız!
![character](../../translated_images/tr/character.5c0dd8e067ffd693.webp) ![karakter](../../translated_images/tr/character.5c0dd8e067ffd693.webp)
Her ders; tamamlanacak bir ödev, bir bilgi kontrolü ve şu gibi konularda öğrenmenize rehberlik eden bir zorluk içerir:
Her ders; tamamlanacak bir ödev, bilgi kontrolü ve aşağıdaki gibi konularda sizi yönlendirecek bir meydan okumayı içerir: - Yönlendirme ve prompt mühendisliği
- Prompt verme ve prompt mühendisliği - Metin ve resim uygulaması oluşturma
- Metin ve resim uygulama üretimi
- Arama uygulamaları - 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 ## 🌱 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 Learni](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 ### 📋 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 #### Depo Oluşturma
Ç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. Ç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: Adımlar:
1. **Depoyu Çatallayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın. 1. **Depoyu Forklayın**: Bu sayfanın sağ üst köşesindeki "Fork" butonuna tıklayın.
2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 2. **Depoyu Klonlayın**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Müfredatı Codespacede Çalıştırma #### Müfredatı Codespace içinde çalıştırma
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.
![Codespace](../../translated_images/tr/createcodespace.0238bbf4d7a8d955.webp) ![Codespace](../../translated_images/tr/createcodespace.0238bbf4d7a8d955.webp)
#### Müfredatı Bilgisayarınızda Yerel Çalıştırma #### Müfredatı bilgisayarınızda yerel çalıştırma
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 Codeu [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 Codeda yerleşik bir [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) da vardır. Visual Studio Codeu buradan indirebilirsiniz: [burada](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Depo kopyanızı bilgisayarınıza klonlayın. Bunu yapmak için **Code** butonuna tıklayın ve URL'yi kopyalayın:
1. Depoyu bilgisayarınıza klonlayın. Bunu yapmak için **Code** düğmesine tıklayın ve URLyi kopyalayın:
[CodeSpace](./images/createcodespace.png) [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 ```bash
git clone <your-repository-url> 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 > * [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 > * [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: ## 📂 Her ders şunları içerir:
- isteğe bağlı taslak notu - isteğe bağlı sketchnote
- isteğe bağlı destekleyici video - isteğe bağlı ek video
- dersten önce yapılan ısınma sınavı - ders öncesi ısınma sınavı
- yazılı ders - 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ü - bilgi kontrolü
- bir meydan okuma - bir meydan okuma
- destekleyici okumalar - ek okuma materyali
- ödev - görev
- [dersten sonra yapılan sınav](https://ff-quizzes.netlify.app/web/) - [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 Azurea 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 ## 🗃️ Dersler
| | Proje Adı | Öğretilen Kavramlar | Öğrenme Hedefleri | Bağlantılı Ders | Yazar | | | Proje Adı | Öğretilen Konseptler | Öğ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 | | 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 | Projenizde GitHubı nasıl kullanacağınızı, kod tabanı üzerinde başkalarıyla nasıl iş birliği yapacağınızı öğrenmek | [GitHuba Giriş](./1-getting-started-lessons/2-github-basics/README.md) | Floor | | 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 | | 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 | | 04 | JS Temelleri | JavaScript Veri Tipleri | JavaScript veri tiplerinin temelleri | [Veri Tipleri](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Temelleri | Fonksiyonlar ve Metodlar | 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 | | 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 |
| 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 | | 06 | JS Temelleri | JavaScript ile Karar Verme | 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 | JavaScriptte diziler ve döngüler kullanarak veri ile çalışma | [Diziler ve Döngüler](./2-js-basics/4-arrays-loops/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 | [HTMLe Giriş](./3-terrarium/1-intro-to-html/README.md) | Jen | | 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) | CSS Uygulaması | Çevrimiçi terraryumu stilize etmek için CSS oluşturmak, sayfayı duyarlı hale getirme dahil olmak üzere CSS temelleri | [CSSe Giriş](./3-terrarium/2-intro-to-css/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 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 | | 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) | 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 | | 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 öğrenmek ve ilk tarayıcı uzantısı elemanlarını tasarlamak | [Tarayıcılar Hakkında](./5-browser-extension/1-about-browsers/README.md) | Jen | | 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) | 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 | [APIlar, Formlar ve Yerel Depolama](./5-browser-extension/2-forms-browsers-local-storage/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ı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 | | 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 İ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 | | 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 üzerine çizim | Ekrana elemanlar çizmek için kullanılan Canvas APIyi öğrenmek | [Canvase Çizim](./6-space-game/2-drawing-to-canvas/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) | Ekrandaki elemanları hareket ettirme | Elemanların Kartezyen koordinatları ve Canvas APIsi kullanılarak nasıl hareket kazandığını keşfetmek | [Elemanları Hareket Ettirme](./6-space-game/3-moving-elements-around/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 | 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 | | 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 dayalı matematiksel hesaplamalar yapmak | [Skor Tutma](./6-space-game/5-keeping-score/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 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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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 | [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 | | 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ış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 | | 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 | [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 | | 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 |
## 🏫 Eğitim Öğretim Yöntemi ## 🏫 Pedagoji
Müfredatımız iki temel pedagojik ilke göz önünde bulundurularak tasarlandı: Müfredatımız, iki temel eğitim ilkesi göz önünde bulundurularak tasarlanmıştır:
* proje tabanlı öğrenme * proje tabanlı öğrenme
* sık sık sınavlar * sık quizler
Program, JavaScript, HTML ve CSSnin 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 Learnde 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 "[JavaScripte 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.jse 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 ## 📘 PDF
Tüm derslerin PDFsine [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ulabilirsiniz. Tüm derslerin PDF'sini [buradan](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) bulabilirsiniz.
## 🎒 Diğer Kurslar ## 🎒 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 --> <!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain ### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
--- ---
### Azure / Edge / MCP / Agents ### Azure / Edge / MCP / Agents
@ -224,7 +210,7 @@ Ekibimiz başka kurslar da üretiyor! Göz atın:
--- ---
### Üretken AI Serisi ### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-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
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Siber Güvenlik için Yeni Başlayanlar](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung) [![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Yeni Başlayanlar için Web Geliştirme](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst) [![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![Nesnelerin İnterneti için Yeni Başlayanlar](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst) [![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Geliştirme için Yeni Başlayanlar](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst) [![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
--- ---
### Copilot Serisi ### Copilot Series
[![Yapay Zeka Eşliğinde Programlama için Copilot](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![C#/.NET için Copilot](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Macerası](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
<!-- CO-OP TRANSLATOR OTHER COURSES END --> <!-- CO-OP TRANSLATOR OTHER COURSES END -->
## Yardım Alma ## Yardım Almak
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.
[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
Ürün geri bildirimi veya geliştirme sırasında hata bildirimi yapmak için ziyaret edin: Ürün geri bildirimi veya geliştirme sırasında hata bildirimi için ziyaret edin:
[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
@ -267,5 +253,5 @@ Bu depo MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için [LICENS
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Feragatname**: **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.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -0,0 +1,53 @@
# 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save