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

pull/1774/head
localizeflow[bot] 6 months ago
parent f2f478e5c6
commit 47fcbd9829

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8", "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-06T12:05:54+00:00", "translation_date": "2026-03-27T18:22:35+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "el" "language_code": "el"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T12:18:30+00:00", "translation_date": "2026-03-27T18:35:16+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "el" "language_code": "el"
}, },

@ -2,35 +2,35 @@
## Επισκόπηση Έργου ## Επισκόπηση Έργου
Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών της ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML. Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο 12-εβδομάδων μάθημα που αναπτύχθηκε από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Κύρια Στοιχεία ### Βασικά Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε ενότητες με βάση έργα - **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα σε μονάδες βάση έργων
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Browser, Παιχνίδι στο Διάστημα, Τραπεζική Εφαρμογή, Επεξεργαστής Κώδικα και Βοηθός Chat με AI - **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Τραπεζική Εφαρμογή, Επεξεργαστής Κώδικα και Βοηθός AI Chat
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά τα μαθήματα) - **Διαδραστικά Κουίζ**: 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
## Εντολές Ρυθμίσεων ## Εντολές Εγκατάστασης
Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα: Αυτό το αποθετήριο έχει κυρίως σκοπό την κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα:
### Κύρια Ρύθμιση Αποθετηρίου ### Ρύθμιση Κύριου Αποθετηρίου
```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
``` ```
### Ρύθμιση Quiz App (Vue 3 + Vite) ### Ρύθμιση Quiz App (Vue 3 + Vite)
```bash ```bash
@ -40,8 +40,8 @@ npm run dev # Εκκίνηση διακομιστή ανάπτυξης
npm run build # Δημιουργία για παραγωγή npm run build # Δημιουργία για παραγωγή
npm run lint # Εκτέλεση ESLint npm run lint # Εκτέλεση ESLint
``` ```
### API Τραπεζικού Έργου (Node.js + Express) ### Bank Project API (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
@ -50,59 +50,59 @@ npm start # Εκκίνηση διακομιστή API
npm run lint # Εκτέλεση ESLint npm run lint # Εκτέλεση ESLint
npm run format # Μορφοποίηση με Prettier npm run format # Μορφοποίηση με Prettier
``` ```
### Έργα Επέκτασης Browser ### Έργα Επέκτασης Περιηγητή
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων ειδικές για τον περιηγητή # Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων συγκεκριμένες για τον περιηγητή
``` ```
### Έργα Παιχνιδιού στο Διάστημα ### Έργα Παιχνιδιού Διαστήματος
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# Ανοίξτε το index.html σε πρόγραμμα περιήγησης ή χρησιμοποιήστε Live Server # Ανοίξτε το index.html σε πρόγραμμα περιήγησης ή χρησιμοποιήστε Live Server
``` ```
### Έργο Chat (Backend Python) ### Έργο Chat (Python Backend)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# Ορίστε τη μεταβλητή περιβάλλοντος GITHUB_TOKEN # Ορισμός μεταβλητής περιβάλλοντος GITHUB_TOKEN
python api.py python api.py
``` ```
## Ροή Ανάπτυξης ## Ροή Ανάπτυξης
### Για Συνεργάτες Περιεχομένου ### Για Συμβολή στο Περιεχόμενο
1. **Κάντε fork το αποθετήριο** στον λογαριασμό σας στο GitHub 1. **Κάντε fork το αποθετήριο** στο λογαριασμό σας στο GitHub
2. **Κλωνοποιήστε το fork τοπικά** 2. **Κατεβάστε το 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` στον ριζικό φάκελο (θύρα 3000) - **Τεκμηρίωση**: Εκτελέστε `docsify serve` στην ρίζα (πορτ 3000)
- **Quiz App**: Εκτελέστε `npm run dev` στον φάκελο quiz-app - **Quiz App**: Εκτελέστε `npm run dev` στον κατάλογο quiz-app
- **Έργα**: Χρησιμοποιήστε το VS Code Live Server extension για HTML έργα - **Έργα**: Χρησιμοποιήστε την επέκταση VS Code Live Server για έργα HTML
- **API Έργα**: Εκτελέστε `npm start` στους αντίστοιχους φακέλους API - **API Έργα**: Εκτελέστε `npm start` στους αντίστοιχους καταλόγους API
## Οδηγίες Δοκιμών ## Οδηγίες Δοκιμών
@ -110,173 +110,173 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Ελέγξτε για προβλήματα στο στυλ κώδικα npm run lint # Έλεγχος για προβλήματα στυλ κώδικα
npm run build # Επιβεβαιώστε ότι η κατασκευή είναι επιτυχής npm run build # Επαλήθευση επιτυχίας κατασκευής
``` ```
### Δοκιμές Bank API ### Δοκιμές Bank API
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Ελέγξτε για προβλήματα στο στυλ κώδικα npm run lint # Έλεγχος για προβλήματα στο στυλ κώδικα
node server.js # Επαληθεύστε ότι ο διακομιστής ξεκινά χωρίς σφάλματα node server.js # Επαλήθευση ότι ο διακομιστής ξεκινά χωρίς σφάλματα
``` ```
### Γενική Προσέγγιση Δοκιμών ### Γενική Προσέγγιση Δοκιμών
- Αυτό είναι ένα εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές - Αυτό είναι εκπαιδευτικό αποθετήριο χωρίς ολοκληρωμένες αυτοματοποιημένες δοκιμές
- Οι χειροκίνητες δοκιμές εστιάζουν σε: - Οι χειροκίνητες δοκιμές επικεντρώνονται σε:
- Τα παραδείγματα κώδικα να τρέχουν χωρίς σφάλματα - Εκτέλεση παραδειγμάτων κώδικα χωρίς σφάλματα
- Οι σύνδεσμοι στην τεκμηρίωση να λειτουργούν σωστά - Επαλήθευση συνδέσμων στην τεκμηρίωση
- Οι κατασκευές έργων να ολοκληρώνονται επιτυχώς - Επιτυχής ολοκλήρωση κατασκευών έργων
- Τα παραδείγματα να ακολουθούν βέλτιστες πρακτικές - Παραδείγματα που ακολουθούν βέλτιστες πρακτικές
### Έλεγχοι Πριν Υποβολή ### Έλεγχοι Πριν την Υποβολή
- Εκτελέστε `npm run lint` σε φακέλους με package.json - Εκτέλεση `npm run lint` σε καταλόγους με package.json
- Επαληθεύστε ότι οι σύνδεσμοι markdown είναι έγκυροι - Επαλήθευση εγκυρότητας συνδέσμων markdown
- Δοκιμάστε παραδείγματα κώδικα στο πρόγραμμα περιήγησης ή Node.js - Δοκιμή παραδειγμάτων κώδικα σε περιηγητή ή Node.js
- Ελέγξτε ότι οι μεταφράσεις διατηρούν τη σωστή δομή - Έλεγχος ότι οι μεταφράσεις διατηρούν τη σωστή δομή
## Οδηγίες Στυλ Κώδικα ## Οδηγίες Στυλ Κώδικα
### JavaScript ### JavaScript
- Χρησιμοποιήστε σύγχρονη σύνταξη ES6+ - Χρήση σύγχρονης σύνταξης ES6+
- Ακολουθήστε τις τυποποιημένες ρυθμίσεις ESLint που παρέχονται στα έργα - Τήρηση των τυπικών ρυθμίσεων ESLint που παρέχονται στα έργα
- Χρησιμοποιήστε κατανοητά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια - Χρήση νοήμονων ονομάτων μεταβλητών και συναρτήσεων για παιδαγωγική σαφήνεια
- Προσθέστε σχόλια που εξηγούν έννοιες για τους μαθητές - Προσθήκη σχολίων που εξηγούν τις έννοιες στους μαθητές
- Διαμορφώστε με Prettier όπου έχει ρυθμιστεί - Μορφοποίηση με Prettier όπου έχει ρυθμιστεί
### HTML/CSS ### HTML/CSS
- Σημαντικά στοιχεία HTML5 - Σημασιολογικά στοιχεία HTML5
- Αρχές responsive design - Αρχές σχεδιασμού για ανταποκρισιμότητα (responsive design)
- Καθαρή ονοματοδοσία κλάσεων - Καθαρή ονοματολογία κλάσεων
- Σχόλια που εξηγούν τεχνικές CSS για μαθητές - Σχόλια που εξηγούν τεχνικές CSS για τους μαθητές
### Python ### Python
- Οδηγίες στυλ PEP 8 - Κατευθυντήριες γραμμές στυλ PEP 8
- Καθαρά, εκπαιδευτικά παραδείγματα κώδικα - Καθαρά, εκπαιδευτικά παραδείγματα κώδικα
- Υποδείξεις τύπων όπου βοηθούν στη μάθηση - Χρήση τύπων όπου βοηθά στη μάθηση
### Τεκμηρίωση Markdown ### Τεκμηρίωση Markdown
- Ξεκάθαρη ιεραρχία τίτλων - Σαφής ιεραρχία επικεφαλίδων
- Μπλοκ κώδικα με καθορισμένη γλώσσα - Μπλοκ κώδικα με καθορισμό γλώσσας
- Σύνδεσμοι σε πρόσθετους πόρους - Σύνδεσμοι προς επιπλέον πηγές
- Στιγμιότυπα και εικόνες στους καταλόγους `images/` - Στιγμιότυπα οθόνης και εικόνες στους καταλόγους `images/`
- Περιγραφικό κείμενο (alt) για εικόνες για προσβασιμότητα - Alt κείμενο για εικόνες για πρόσβαση
### Οργάνωση Αρχείων ### Οργάνωση Αρχείων
- Μαθήματα αριθμημένα διαδοχικά (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}/`
## Κατασκευή και Ανάπτυξη ## Κατασκευή και Ανάπτυξη
### Ανάπτυξη Quiz App (Azure Static Web Apps) ### Ανάπτυξη Quiz App (Azure Static Web Apps)
Το quiz-app είναι διαμορφωμένο για ανάπτυξη σε Azure Static Web Apps: Το quiz-app είναι ρυθμισμένο για ανάπτυξη σε Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Δημιουργεί το φάκελο dist/ npm run build # Δημιουργεί τον φάκελο dist/
# Αναπτύσσει μέσω της ροής εργασίας GitHub Actions κατά την προώθηση στο 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`
### Δημιουργία PDF Τεκμηρίωσης ### Δημιουργία PDF Τεκμηρίωσης
```bash ```bash
npm install # Εγκατάσταση του docsify-to-pdf npm install # Εγκαταστήστε το docsify-to-pdf
npm run convert # Δημιουργία PDF από docs npm run convert # Δημιουργήστε PDF από docs
``` ```
### Τεκμηρίωση Docsify ### Τεκμηρίωση Docsify
```bash ```bash
npm install -g docsify-cli # Εγκαταστήστε το Docsify παγκοσμίως npm install -g docsify-cli # Εγκαταστήστε το Docsify παγκοσμίως
docsify serve # Σερβίρετε στο 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` στους αντίστοιχους καταλόγους έργων
- Διορθώστε όλα τα σφάλματα και προειδοποιήσεις lint - Διόρθωση όλων των σφαλμάτων και προειδοποιήσεων 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 Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες - Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες
- Αναφορά αριθμού θεμάτων στην περιγραφή PR όταν ισχύει - Αναφορά αριθμών θεμάτων (issues) στην περιγραφή PR αν ισχύει
### Διαδικασία Αναθεώρησης ### Διαδικασία Ανασκόπησης
- Τα PR ελέγχονται από διαχειριστές και την κοινότητα - Τα PR εξετάζονται από διαχειριστές και κοινότητα
- Δίνεται προτεραιότητα στην εκπαιδευτική σαφήνεια - Η παιδαγωγική σαφήνεια έχει προτεραιότητα
- Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές - Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές
- Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτισμική καταλληλότητα - Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτισμική καταλληλότητα
## Σύστημα Μετάφρασης ## Σύστημα Μετάφρασης
### Αυτόματες Μεταφράσεις ### Αυτόματη Μετάφραση
- Χρησιμοποιεί 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. Δοκιμάστε τυχόν τοπικοποιημένο περιεχόμενο κουίζ
### Μεταδεδομένα Μετάφρασης ### Μεταδεδομένα Μετάφρασης
Τα μεταφρασμένα αρχεία περιλαμβάνουν επικεφαλίδα μεταδεδομένων: Τα μεταφρασμένα αρχεία περιλαμβάνουν επικεφαλίδα μεταδεδομένων:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
} }
--> -->
``` ```
## Αντιμετώπιση Σφαλμάτων και Επίλυση Προβλημάτων ## Αποσφαλμάτωση και Επίλυση Προβλημάτων
### Συνηθισμένα Προβλήματα ### Συνηθισμένα Προβλήματα
**Αποτυχία εκκίνησης της εφαρμογής κουίζ**: **Αποτυχία εκκίνησης quiz app**:
- Ελέγξτε την έκδοση 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 δεν ξεκινά**: **Ο διακομιστής API δεν ξεκινά**:
- Επαληθεύστε ότι η έκδοση Node.js είναι επαρκής (node >=10) - Επιβεβαιώστε ότι η έκδοση Node.js είναι >=10
- Ελέγξτε αν η θύρα χρησιμοποιείται ήδη - Ελέγξτε αν η θύρα είναι ήδη σε χρήση
- Βεβαιωθείτε ότι όλες οι εξαρτήσεις έχουν εγκατασταθεί με `npm install` - Βεβαιωθείτε ότι έχουν εγκατασταθεί όλες οι εξαρτήσεις με `npm install`
**Η επέκταση browser δεν φορτώνει**: **Η επέκταση περιηγητή δεν φορτώνει**:
- Επαληθεύστε ότι το manifest.json είναι σωστά μορφοποιημένο - Επιβεβαιώστε ότι το manifest.json είναι σωστά διαμορφωμένο
- Ελέγξτε την κονσόλα του browser για σφάλματα - Ελέγξτε το κονσόλα περιηγητή για σφάλματα
- Ακολουθήστε οδηγίες εγκατάστασης επεκτάσεων ειδικές για τον browser - Ακολουθήστε τις οδηγίες εγκατάστασης ειδικά για τον περιηγητή
**Προβλήματα με το έργο Python chat**: **Προβλήματα έργου chat 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 με το extension Live Server για έργα HTML
- Εγκαταστήστε ESLint και Prettier για συνεπή μορφοποίηση - Εγκαταστήστε τα extensions ESLint και Prettier για συνεπή μορφοποίηση
- Χρησιμοποιήστε DevTools του browser για debugging JavaScript - Χρησιμοποιήστε τα DevTools του περιηγητή για αποσφαλμάτωση JavaScript
- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον browser - Για έργα Vue, εγκαταστήστε το Vue DevTools extension για περιηγητή
### Θέματα Απόδοσης ### Θέματα Απόδοσης
- Ο μεγάλος αριθμός μεταφρασμένων αρχείων (πάνω από 50 γλώσσες) σημαίνει ότι οι πλήρεις κλωνοποιήσεις είναι μεγάλες - Μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) σημαίνει μεγάλα πλήρη αντίγραφα
- Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο με περιεχόμενο: `git clone --depth 1` - Χρησιμοποιήστε shallow clone αν δουλεύετε μόνο με περιεχόμενο: `git clone --depth 1`
- Αποφύγετε τις μεταφράσεις στις αναζητήσεις όταν εργάζεστε με αγγλικό περιεχόμενο - Αποκλείστε τις μεταφράσεις από τις αναζητήσεις όταν εργάζεστε μόνο με αγγλικό περιεχόμενο
- Οι διαδικασίες κατασκευής μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, κατασκευή Vite) - Οι διαδικασίες κατασκευής μπορεί να είναι αργές σε πρώτη εκτέλεση (npm install, Vite build)
## Θέματα Ασφαλείας ## Θέματα Ασφαλείας
### Περιβαλλοντικές Μεταβλητές ### Μεταβλητές Περιβάλλοντος
- Τα κλειδιά API δεν πρέπει ποτέ να δεσμεύονται στο αποθετήριο - Τα κλειδιά API δεν πρέπει ποτέ να δεσμεύονται στο αποθετήριο
- Χρησιμοποιήστε αρχεία `.env` (ήδη στο `.gitignore`) - Χρησιμοποιήστε αρχεία `.env` (ήδη στο `.gitignore`)
- Τεκμηριώστε τις απαιτούμενες περιβαλλοντικές μεταβλητές στα README των έργων - Τεκμηριώστε τις απαιτούμενες μεταβλητές περιβάλλοντος στα README των έργων
### 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 resources](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) συνιστάται για μαθητές - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) συνιστάται για μαθητές
- Επιπλέον μαθήματα: Generative AI, Data Science, ML, IoT curricula διαθέσιμα - Επιπλέον μαθήματα: Γενετική AI, Επιστήμη Δεδομένων, Μηχανική Μάθηση, IoT διαθέσιμα
### Εργασία με Συγκεκριμένα Έργα ### Εργασία με Συγκεκριμένα Έργα
Για λεπτομερείς οδηγίες σε μεμονωμένα έργα, ανατρέξτε στα αρχεία README σε: Για λεπτομερείς οδηγίες στα μεμονωμένα έργα, ανατρέξτε στα αρχεία README:
- `quiz-app/README.md` - Εφαρμογή quiz με Vue 3 - `quiz-app/README.md` - Εφαρμογή κουίζ Vue 3
- `7-bank-project/README.md` - Τραπεζική εφαρμογή με αυθεντικοποίηση - `7-bank-project/README.md` - Τραπεζική εφαρμογή με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης browser - `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού βασισμένου σε Canvas - `6-space-game/README.md` - Ανάπτυξη παιχνιδιού με καμβά
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI - `9-chat-project/README.md` - Έργο βοηθού AI chat
### Δομή Monorepo ### Δομή Monorepo
Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα: Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι ανεξάρτητο - Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις - Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε τα άλλα - Μπορείτε να δουλεύετε σε μεμονωμένα έργα χωρίς να επηρεάζετε άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για την πλήρη εμπειρία προγράμματος σπουδών - Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθυνών**: **Αποποίηση Ευθύνης**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα προέλευσής του πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρανοήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8", "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-06T12:17:15+00:00", "translation_date": "2026-03-27T18:33:18+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "sv" "language_code": "sv"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T12:20:45+00:00", "translation_date": "2026-03-27T18:37:55+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "sv" "language_code": "sv"
}, },

@ -1,12 +1,12 @@
# Introduktion till programmeringsspråk och moderna utvecklarverktyg # Introduktion till programmeringsspråk och moderna utvecklarverktyg
Hej där, blivande utvecklare! 👋 Kan jag berätta något som fortfarande ger mig rysningar varje dag? Du är på väg att upptäcka att programmering inte bara handlar om datorer det handlar om att ha verkliga superkrafter för att förverkliga dina vildaste idéer! Hej där, framtida utvecklare! 👋 Får jag berätta något som fortfarande ger mig rysningar varje dag? Du är på väg att upptäcka att programmering inte bara handlar om datorer det handlar om att ha faktiska superkrafter för att förverkliga dina vildaste idéer!
Du vet det ögonblick när du använder din favoritapp och allt klickar perfekt? När du trycker på en knapp och något helt magiskt händer som får dig att tänka "wow, hur GJORDE de det?" Någon precis som du förmodligen sittande på sitt favoritkafé klockan 2 på morgonen med sin tredje espresso skrev koden som skapade den magin. Och här är något som kommer att blåsa dig av stolen: i slutet av denna lektion kommer du inte bara förstå hur de gjorde det, utan du kommer att vara ivrig att prova själv! Du vet det där ögonblicket när du använder din favoritapp och allt klickar perfekt? När du trycker på en knapp och något helt magiskt händer som får dig att tänka "wow, hur gjorde de DET där?" Någon precis som du antagligen sittandes på sitt favoritkafé kl 2 på natten med sin tredje espresso skrev koden som skapade den magin. Och här kommer något som kommer att blåsa dig av stolen: i slutet av den här lektionen kommer du inte bara förstå hur de gjorde, utan du kommer att längta efter att prova själv!
Lyssna, jag förstår helt om programmering känns skrämmande just nu. När jag började trodde jag faktiskt att man var tvungen att vara något slags mattegeni eller ha kodat sedan man var fem år gammal. Men här är vad som helt förändrade mitt perspektiv: programmering är precis som att lära sig att föra samtal på ett nytt språk. Du börjar med "hej" och "tack," sedan går du vidare till att beställa kaffe, och innan du vet ordet av håller du djupa filosofiska diskussioner! Fast i det här fallet pratar du med datorer, och ärligt talat? De är de tålamodigaste samtalspartnerna du någonsin kommer att hitta de dömer aldrig dina misstag och är alltid lika glada att försöka igen! Lyssna, jag förstår helt om programmering känns skrämmande just nu. När jag började trodde jag faktiskt att man måste vara något slags mattegeni eller ha programmerat sedan man var fem år. Men här är vad som förändrade min syn helt: programmering är precis som att lära sig konversera på ett nytt språk. Man börjar med "hej" och "tack", sen jobbar man sig upp till att beställa kaffe, och innan man vet ordet av har man djupa filosofiska samtal! Fast i det här fallet pratar du med datorer, och ärligt talat? De är de mest tålmodiga samtalspartner du någonsin kommer träffa de dömer aldrig dina misstag och är alltid glada att försöka igen!
Idag ska vi utforska de otroliga verktyg som gör modern webbutveckling inte bara möjlig, utan seriöst beroendeframkallande. Jag pratar om exakt samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indie-appstudio använder varje dag. Och här är delen som kommer få dig att göra en glad dans: de flesta av dessa professionella, industristandard verktyg är helt gratis! Idag ska vi utforska de otroliga verktyg som gör modern webbutveckling inte bara möjlig, utan riktigt beroendeframkallande. Jag pratar om exakt de samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indie-appstudio använder varje dag. Och här är delen som får dig att göra en glad minidans: de flesta av dessa professionella, industristandardverktyg är helt gratis!
![Intro Programming](../../../../translated_images/sv/webdev101-programming.d6e3f98e61ac4bff.webp) ![Intro Programming](../../../../translated_images/sv/webdev101-programming.d6e3f98e61ac4bff.webp)
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
@ -20,65 +20,65 @@ journey
Verktygsöversikt: 5: You Verktygsöversikt: 5: You
section Utforska section Utforska
Kodredigerare: 4: You Kodredigerare: 4: You
Webbläsare & Utvecklarverktyg: 5: You Webbläsare & DevTools: 5: You
Kommandorad: 3: You Kommandorad: 3: You
section Öva section Öva
Språkdetsektiv: 4: You Språkdetektiv: 4: You
Verktygsutforskning: 5: You Verktygsutforskning: 5: You
Gemenskapskontakt: 5: You Gemenskapskontakt: 5: You
``` ```
## Låt oss se vad du redan kan! ## Låt oss se vad du redan kan!
Innan vi hoppar in i det roliga är jag nyfiken vad vet du redan om den här programmeringsvärlden? Och hör här, om du ser på dessa frågor och tänker "jag har bokstavligen noll koll på det här," så är det inte bara okej, det är perfekt! Det betyder att du är på exakt rätt plats. Tänk på detta quiz som stretching före ett träningspass vi värmer bara upp hjärnmusklerna! Innan vi hoppar in i det roliga är jag nyfiken vad vet du redan om den här programmeringsvärlden? Och om du tittar på de här frågorna och tänker "Jag har bokstavligen noll koll på något av detta," så är det inte bara okej, det är perfekt! Det betyder att du är på precis rätt plats. Tänk på den här quizzen som uppvärmning innan träningen vi värmer bara upp hjärnmusklerna!
[Ta för-lektionsquizet](https://ff-quizzes.netlify.app/web/) [Ta förberedande quiz](https://ff-quizzes.netlify.app/web/)
## Äventyret vi snart ska ge oss ut på tillsammans ## Äventyret vi ska gå på tillsammans
Okej, jag bubblar verkligen av spänning över vad vi ska utforska idag! Seriöst, jag önskar att jag kunde se ditt ansikte när några av dessa koncept klickar. Här är den otroliga resan vi gör tillsammans: Okej, jag studsar verkligen av spänning över vad vi ska utforska idag! Allvarligt talat, jag önskar att jag kunde se ditt ansikte när några av dessa koncept faller på plats. Här är den otroliga resan vi tar tillsammans:
- **Vad programmering egentligen är (och varför det är det coolaste någonsin!)** Vi ska upptäcka hur kod bokstavligen är den osynliga magin som driver allt runt omkring dig, från alarmet som på något sätt vet att det är måndag morgon till algoritmen som perfekt kuraterar dina rekommendationer på Netflix - **Vad programmering faktiskt är (och varför det är det coolaste någonsin!)** Vi ska upptäcka hur kod bokstavligen är den osynliga magin som driver allt omkring dig, från det där alarmet som på något sätt vet att det är måndag morgon till algoritmen som perfekt kuraterar dina Netflix-rekommendationer
- **Programmeringsspråk och deras fantastiska personligheter** Föreställ dig att gå in på en fest där varje person har helt olika superkrafter och sätt att lösa problem på. Så är programmeringsspråkens värld, och du kommer att älska att träffa dem! - **Programmeringsspråk och deras fantastiska personligheter** Tänk dig att gå in på en fest där varje person har helt olika superkrafter och sätt att lösa problem. Så är det i programmeringsspråkets värld, och du kommer älska att träffa dem!
- **De grundläggande byggstenarna som får digital magi att hända** Tänk på detta som det ultimata kreativa LEGO-setet. När du förstår hur dessa delar passar ihop kommer du inse att du bokstavligen kan bygga vad som helst din fantasi drömmer om - **De grundläggande byggstenarna som gör digital magi möjlig** Tänk på dem som det ultimata kreativa LEGO-setet. När du förstår hur dessa bitar passar ihop inser du att du bokstavligen kan bygga vad som helst som din fantasi drömmer om
- **Professionella verktyg som får dig att känna att du just fått en trollspö** Jag överdriver inte här de här verktygen kommer verkligen få dig att känna att du har superkrafter, och det bästa? Det är samma verktyg som proffsen använder! - **Professionella verktyg som får dig att känna att du precis fått en trollstav** Jag överdriver inte här de här verktygen får dig verkligen att känna att du har superkrafter, och det bästa? Det är samma verktyg som proffsen använder!
> 💡 **Här är saken**: Försök inte ens memorera allt idag! Just nu vill jag bara att du ska känna det där pirret av spänning över vad som är möjligt. Detaljerna fastnar naturligt när vi övar tillsammans så funkar riktig inlärning! > 💡 **Här är grejen**: Försök inte ens att memorera allt idag! Just nu vill jag bara att du ska känna den där gnistan av spänning inför vad som är möjligt. Detaljerna kommer naturligt när vi övar tillsammans så lär man sig på riktigt!
> Du kan ta denna lektion på [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! > Du kan göra den här lektionen på [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## Så vad exakt *är* programmering? ## Så vad är egentligen *programmering*?
Okej, låt oss ta itu med den miljonfrågan: vad är programmering, egentligen? Okej, låt oss ta itu med miljonfrågan: vad är programmering egentligen?
Jag ska ge dig en historia som helt förändrade hur jag tänker om detta. Förra veckan försökte jag förklara för min mamma hur man använder vår nya smarta TV-fjärrkontroll. Jag fångade mig själv när jag sa saker som "Tryck på den röda knappen, men inte den stora röda knappen, den lilla röda knappen till vänster… nej, din andra vänster… okej, håll den i två sekunder, inte en, inte tre..." Känner du igen dig? 😅 Jag ska berätta en historia som helt förändrade mitt sätt att se det här. I förra veckan försökte jag förklara för min mamma hur man använder vår nya smarta TV-fjärrkontroll. Jag hittade mig själv säga saker som "Tryck på den röda knappen, men inte den stora röda knappen, den lilla röda knappen till vänster... nej, din andra vänster... okej, håll nu knappen i två sekunder, inte en, inte tre..." Låter det bekant? 😅
Det är programmering! Det är konsten att ge otroligt detaljerade, steg-för-steg instruktioner till något som är väldigt kraftfullt men behöver allt stavat helt perfekt. Fast istället för att förklara för din mamma (som kan fråga "vilken röd knapp?!"), förklarar du för en dator (som bara gör exakt vad du säger, även om det du sa inte riktigt är vad du menade). Det är programmering! Det är konsten att ge otroligt detaljerade, steg-för-steg-instruktioner till något som är väldigt kraftfullt men behöver allt uttalat perfekt. Fast i det här fallet förklarar du inte för din mamma (som kan fråga "vilken röd knapp?!"), utan du förklarar för en dator (som bara gör precis vad du säger, även om det du sa inte riktigt är vad du menade).
Här är vad som blåste mitt sinne när jag först lärde mig detta: datorer är faktiskt ganska enkla i grunden. De förstår bokstavligen bara två saker 1 och 0, vilket i princip bara är "ja" och "nej" eller "på" och "av." Det är allt! Men här blir det magiskt vi behöver inte tala i 1 och 0 som i The Matrix. Det är där **programmeringsspråken** räddar oss. De är som att ha världens bästa översättare som tar dina helt normala mänskliga tankar och konverterar dem till datorns språk. Här är vad som blåste mina tankar när jag först lärde mig det här: datorer är faktiskt ganska enkla i sin kärna. De förstår bokstavligen bara två saker 1 och 0, vilket i princip är "ja" och "nej" eller "på" och "av." Det är allt! Men här blir det magiskt vi behöver inte prata i 1:or och 0:or som om vi var i The Matrix. Det är där **programmeringsspråken** kommer in i bilden. De är som världens bästa översättare som tar dina helt normala mänskliga tankar och konverterar dem till datorspråk.
Och här är något som fortfarande ger mig kalla kårar varje morgon när jag vaknar: bokstavligen *allt* digitalt i ditt liv började med någon precis som du, antagligen sittande i sina pyjamas med en kopp kaffe, skrivande kod på sin laptop. Det Instagramfilter som får dig att se felfri ut? Någon kodade det. Rekommendationen som ledde dig till din nya favoritlåt? En utvecklare byggde den algoritmen. Appen som hjälper dig att dela notan med vänner? Japp, någon tänkte "det här är irriterande, jag tror jag kan fixa det" och sedan... gjorde de det! Och här är vad som fortfarande ger mig riktiga rysningar varje morgon när jag vaknar: bokstavligen *allt* digitalt i ditt liv började med någon precis som du, antagligen sittandes i pyjamas med en kopp kaffe, som skriver kod på sin laptop. Det Instagram-filter som får dig att se felfri ut? Någon kodade det. Rekommendationen som ledde dig till din nya favoritlåt? En utvecklare byggde den algoritmen. Appen som hjälper dig att dela middagsnotan med vänner? Japp, någon tänkte "det här är irriterande, jag kan nog fixa det" och sen... gjorde de det!
När du lär dig programmera plockar du inte bara upp en ny färdighet du blir en del av denna otroliga gemenskap av problemlösare som tillbringar sina dagar med att tänka, "Tänk om jag kunde bygga något som gör någons dag lite bättre?" Ärligt talat, finns det något coolare än det? När du lär dig programmera, lär du dig inte bara en ny färdighet du blir en del av en otrolig gemenskap av problemlösare som spenderar sina dagar med att tänka, "Tänk om jag kunde bygga något som gör någons dag lite bättre?" Ärligt talat, finns det något coolare än det?
**Rolig fakta-jakt**: Här är något supercoolt att kolla upp när du har en stund över vem tror du var världens första programmerare? Jag ger dig en ledtråd: det är kanske inte den du förväntar dig! Historien bakom denna person är helt fascinerande och visar att programmering alltid har handlat om kreativ problemlösning och att tänka utanför boxen. **Rolig fakta-jakt**: Här är något supercoolt att kolla upp när du har en stund över vem tror du var världens första programmerare? Jag ger dig en ledtråd: det är nog inte vem du förväntar dig! Historien bakom denna person är helt fascinerande och visar att programmering alltid handlat om kreativ problemlösning och att tänka utanför ramarna.
### 🧠 **Dags för en check-in: Hur känner du dig?** ### 🧠 **Check-in: Hur känner du dig?**
**Ta en stund att reflektera:** **Ta en stund och fundera:**
- Känns idén att "ge instruktioner till datorer" som något du förstår nu? - Känns idén att "ge instruktioner till datorer" vettig nu?
- Kan du tänka dig en daglig uppgift du skulle vilja automatisera med programmering? - Kan du tänka dig en vardagssyssla du skulle vilja automatisera med programmering?
- Vilka frågor bubblar upp i ditt sinne om hela detta programmeringsgrej? - Vilka frågor kurrar i ditt huvud om hela det här programmeringsgrejen?
> **Kom ihåg**: Det är helt normalt om vissa koncept känns oklara just nu. Att lära sig programmering är som att lära sig ett nytt språk det tar tid för hjärnan att bygga de där nervbanorna. Du gör det jättebra! > **Kom ihåg**: Det är helt normalt om några koncept känns luddiga just nu. Att lära sig programmera är som att lära sig ett nytt språk det tar tid för hjärnan att bygga de neurala banorna. Du gör det jättebra!
## Programmeringsspråk är som olika smaker av magi ## Programmeringsspråk är som olika smaker av magi
Okej, det här kommer låta konstigt, men häng kvar programmeringsspråk är mycket som olika typer av musik. Tänk efter: du har jazz, som är mjuk och improviserad, rock som är kraftfull och rak på sak, klassisk som är elegant och strukturerad, och hip-hop som är kreativ och uttrycksfull. Varje stil har sin egen stämning, sin egen community av passionerade fans, och varje passar för olika humör och tillfällen. Okej, det här kommer låta konstigt, men häng med programmeringsspråk är väldigt lika olika musikstilar. Tänk på det: du har jazz som är mjuk och improviserad, rock som är kraftfull och rakt på sak, klassisk som är elegant och strukturerad, och hip-hop som är kreativ och uttrycksfull. Varje stil har sin egen känsla, sin egen gemenskap av passionerade fans, och varje är perfekt för olika tillfällen och sinnesstämningar.
Programmeringsspråken fungerar exakt likadant! Du skulle inte använda samma språk för att bygga ett roligt mobilspel som du använder för att bearbeta massiva mängder klimatdata, precis som du inte spelar death metal på yogaklassen (tja, de flesta yogaklasserna i alla fall! 😄). Programmeringsspråk fungerar precis likadant! Du skulle inte använda samma språk för att bygga ett kul mobilspel som du använder för att knäcka enorma mängder klimatdata, precis som du inte skulle spela death metal på en yogaklass (ja, de flesta yogaklasser i alla fall! 😄).
Men här är något som alltid förbluffar mig varje gång jag tänker på det: dessa språk är som att ha världens mest tålmodiga, briljanta tolk sittandes bredvid dig. Du kan uttrycka dina idéer på ett sätt som känns naturligt för din mänskliga hjärna, och de sköter allt det otroligt komplexa arbetet med att översätta det till 1:or och 0:or som datorer faktiskt talar. Det är som att ha en vän som är perfekt flytande i både "mänsklig kreativitet" och "datorlogik" och de blir aldrig trötta, behöver aldrig kaffepauser och dömer dig aldrig för att du frågar samma fråga två gånger! Men här är något som alltid förvånar mig när jag tänker på det: de här språken är som att ha världens mest tålmodiga, briljanta tolk som sitter precis bredvid dig. Du kan uttrycka dina idéer på ett sätt som känns naturligt för din mänskliga hjärna, och de tar hand om allt otroligt komplicerat arbete att översätta det till 1:or och 0:or som datorerna faktiskt pratar. Det är som att ha en vän som är fullständigt flytande i både "mänsklig kreativitet" och "datormagi" och som aldrig blir trött, aldrig behöver kaffepauser och aldrig dömer dig för att du frågar samma sak två gånger!
### Populära programmeringsspråk och deras användningsområden ### Populära programmeringsspråk och deras användningsområden
@ -91,10 +91,10 @@ mindmap
Interaktiva Webbplatser Interaktiva Webbplatser
TypeScript TypeScript
JavaScript + Typer JavaScript + Typer
Företagsapplikationer Företagsappar
Data & AI Data & AI
Python Python
Dataanalys Data Vetenskap
Maskininlärning Maskininlärning
Automatisering Automatisering
R R
@ -123,34 +123,34 @@ mindmap
``` ```
| Språk | Bäst för | Varför det är populärt | | Språk | Bäst för | Varför det är populärt |
|----------|----------|------------------| |----------|----------|------------------|
| **JavaScript** | Webb utveckling, användargränssnitt | Körs i webbläsare och driver interaktiva webbplatser | | **JavaScript** | Webb­utveckling, användar­gränssnitt | Körs i webbläsare och driver interaktiva webbplatser |
| **Python** | Data science, automatisering, AI | Lätt att läsa och lära, kraftfulla bibliotek | | **Python** | Data­vetenskap, automation, AI | Lätt att läsa och lära, kraftfulla bibliotek |
| **Java** | Företagsapplikationer, Android-appar | Plattformoberoende, robust för stora system | | **Java** | Företags­applikationer, Android-appar | Plattformoberoende, robust för stora system |
| **C#** | Windows-appar, spelutveckling | Stark Microsoft-ekosystemsupport | | **C#** | Windows-appar, spelutveckling | Stark Microsoft-ekosystemstöd |
| **Go** | Molntjänster, backend-system | Snabbt, enkelt, designat för modern databehandling | | **Go** | Molntjänster, backend­system | Snabbt, enkelt, designat för modern datoranvändning |
### Högnivå- vs. lågnivåspråk ### Högnivå- vs. lågnivåspråk
Okej, detta var ärligt talat konceptet som knäckte min hjärna när jag först började lära mig, så jag ska dela med mig av analogin som äntligen fick det att klicka för mig och jag hoppas verkligen att det hjälper dig också! Okej, det här var ärligt talat konceptet som spräckte min hjärna när jag först började lära mig, så jag delar med mig av analogin som äntligen fick det att klicka för mig och jag hoppas verkligen att den hjälper dig också!
Föreställ dig att du besöker ett land där du inte talar språket, och du desperat behöver hitta närmaste toalett (vi har alla varit där, eller hur? 😅): Föreställ dig att du besöker ett land där du inte pratar språket, och du måste desperat hitta närmaste toalett (vi har alla varit där, eller hur? 😅):
- **Lågnivåprogrammering** är som att lära sig den lokala dialekten så väl att du kan prata med farmodern som säljer frukt på hörnet med hjälp av kulturella referenser, lokala slanguttryck och interna skämt som bara någon som växte upp där skulle förstå. Superimponerande och otroligt effektivt... om du råkar vara flytande! Men ganska överväldigande när du bara försöker hitta en toalett. - **Lågnivåprogrammering** är som att lära sig den lokala dialekten så väl att du kan prata med farmodern som säljer frukt vid hörnet och använda kulturella referenser, lokal slang och insiderskämt som bara någon som vuxit upp där förstår. Superimponerande och otroligt effektivt... om du råkar vara flytande! Men ganska överväldigande när du bara försöker hitta en toalett.
- **Högnivåprogrammering** är som att ha den där fantastiska lokala vännen som bara förstår dig. Du kan säga "Jag behöver verkligen hitta en toalett" på enkel engelska, och de sköter all kulturell översättning och ger dig vägbeskrivningar på ett sätt som gör perfekt mening för din icke-lokala hjärna. - **Högnivåprogrammering** är som att ha den där fantastiska lokala vännen som bara fattar. Du kan säga "Jag måste verkligen hitta en toalett" på enkel engelska, och de fixar all kulturell översättning och ger dig vägbeskrivningen på ett sätt som din non-lokala hjärna förstår perfekt.
I programmeringstermer: I programmeringstermer:
- **Lågnivåspråk** (som Assembly eller C) låter dig ha otroligt detaljerade samtal med datorns faktiska hårdvara, men du måste tänka som en maskin, vilket är... tja, låt oss säga att det är en stor mental omställning! - **Lågnivåspråk** (som Assembly eller C) låter dig ha otroligt detaljerade samtal med datorns faktiska hårdvara, men du behöver tänka som en maskin, vilket är... ja, låt oss säga att det är ett ganska stort mentalt skifte!
- **Högnivåspråk** (som JavaScript, Python eller C#) låter dig tänka som en människa medan de sköter all maskinspråk bakom kulisserna. Dessutom har de dessa otroligt välkomnande communityn fulla av människor som minns hur det var att vara ny och verkligen vill hjälpa! - **Högnivåspråk** (som JavaScript, Python eller C#) låter dig tänka som en människa medan de fixar allt maskinspråk bakom kulisserna. Plus, de har otroligt välkomnande gemenskaper fulla av folk som minns hur det var att vara ny och verkligen vill hjälpa till!
Gissa vilka jag kommer att föreslå att du börjar med? 😉 Högnivåspråk är som att ha stödhjul som du aldrig egentligen vill ta bort för de gör hela upplevelsen mycket roligare! Gissa vilka jag kommer föreslå att du börjar med? 😉 Högnivåspråk är som stödhjul du aldrig egentligen vill ta av för att de gör hela upplevelsen så mycket roligare!
```mermaid ```mermaid
flowchart TB flowchart TB
A["👤 Mänskligt Tanke:<br/>'Jag vill beräkna Fibonacci-tal'"] --> B{Välj Språknivå} A["👤 Mänskligt Tanke:<br/>'Jag vill beräkna Fibonacci-siffror'"] --> B{Välj Språknivå}
B -->|Hög-Nivå| C["🌟 JavaScript/Python<br/>Lätt att läsa och skriva"] B -->|Hög Nivå| C["🌟 JavaScript/Python<br/>Lätt att läsa och skriva"]
B -->|Låg-Nivå| D["⚙️ Assembly/C<br/>Direkt hårdvarukontroll"] B -->|Låg Nivå| D["⚙️ Assembly/C<br/>Direkt hårdvarukontroll"]
C --> E["📝 Skriv: fibonacci(10)"] C --> E["📝 Skriv: fibonacci(10)"]
D --> F["📝 Skriv: mov r0,#00<br/>sub r0,r0,#01"] D --> F["📝 Skriv: mov r0,#00<br/>sub r0,r0,#01"]
@ -164,15 +164,15 @@ flowchart TB
style D fill:#fff3e0 style D fill:#fff3e0
style H fill:#e8f5e8 style H fill:#e8f5e8
``` ```
### Låt mig visa varför högnivåspråk är mycket vänligare ### Låt mig visa varför högnivåspråk är mycket vänligare
Okej, jag ska visa dig något som perfekt visar varför jag blev kär i högnivåspråk, men först jag behöver att du lovar mig en sak. När du ser det första kodexemplet, panika inte! Det är meningen att det ska se skrämmande ut. Det är precis poängen jag vill göra! Okej, jag är på väg att visa dig något som perfekt demonstrerar varför jag blev kär i högnivåspråk, men först lova mig en sak. När du ser det första kodexemplet, bli inte panikslagen! Det ska se skrämmande ut. Det är precis poängen!
Vi ska titta på exakt samma uppgift skriven i två helt olika stilar. Båda skapar det som kallas Fibonacci-sekvensen det är ett vackert matematiskt mönster där varje nummer är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8, 13... (Rolig fakta: du hittar detta mönster bokstavligen överallt i naturen solrosfröst spiraler, kottemönster, till och med hur galaxer bildas!) Vi ska titta på exakt samma uppgift skriven i två helt olika stilar. Båda skapar det som kallas Fibonacci-sekvensen det är ett vackert matematiskt mönster där varje tal är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8, 13... (Rolig fakta: du hittar detta mönster bokstavligen överallt i naturen solrosfrömönster, kotteformar, till och med hur galaxer formas!)
Redo att se skillnaden? Nu kör vi! Redo att se skillnaden? Kör vi!
**Högnivåspråk (JavaScript) Människovänligt:** **Högnivåspråk (JavaScript) Mänskligt vänligt:**
```javascript ```javascript
// Steg 1: Grundläggande Fibonacci-inställning // Steg 1: Grundläggande Fibonacci-inställning
@ -184,31 +184,31 @@ console.log('Fibonacci sequence:');
``` ```
**Det här gör koden:** **Det här gör koden:**
- **Deklarera** en konstant för att ange hur många Fibonacci-tal vi vill generera - **Deklarerar** en konstant för att specificera hur många Fibonacci-tal vi vill generera
- **Initiera** två variabler för att hålla koll på det aktuella och nästa tal i sekvensen - **Initierar** två variabler för att hålla reda på aktuellt och nästa tal i sekvensen
- **Sätta upp** startvärdena (0 och 1) som definierar Fibonacci-mönstret - **Ställer in** startvärdena (0 och 1) som definierar Fibonacci-mönstret
- **Visa** en rubrikmeddelande för att identifiera vår output - **Visar** ett rubrikmeddelande för att identifiera vår utdata
```javascript ```javascript
// Steg 2: Generera sekvensen med en loop // Steg 2: Generera sekvensen med en loop
for (let i = 0; i < fibonacciCount; i++) { for (let i = 0; i < fibonacciCount; i++) {
console.log(`Position ${i + 1}: ${current}`); console.log(`Position ${i + 1}: ${current}`);
// Beräkna nästa tal i sekvensen // Beräkna nästa nummer i sekvensen
const sum = current + next; const sum = current + next;
current = next; current = next;
next = sum; next = sum;
} }
``` ```
**Bryt ner vad som händer här:** **Så här fungerar det:**
- **Loopar** igenom varje position i sekvensen med en `for`-loop - **Loopar** genom varje position i vår sekvens med en `for`-loop
- **Visar** varje tal med dess position med hjälp av template literals - **Visar** varje tal med dess position med hjälp av mallsträngar
- **Beräkna** nästa Fibonacci-tal genom att lägga ihop nuvarande och nästa värde - **Beräknar** nästa Fibonacci-tal genom att lägga ihop aktuellt och nästa värde
- **Uppdatera** våra spårningsvariabler för att gå vidare till nästa iteration - **Uppdaterar** våra spårningsvariabler för att gå till nästa steg
```javascript ```javascript
// Steg 3: Modernt funktionellt tillvägagångssätt // Steg 3: Modern funktionell metod
const generateFibonacci = (count) => { const generateFibonacci = (count) => {
const sequence = [0, 1]; const sequence = [0, 1];
@ -224,10 +224,10 @@ const fibSequence = generateFibonacci(10);
console.log(fibSequence); console.log(fibSequence);
``` ```
**I koden ovan har vi:** **I ovanstående har vi:**
- **Skapat** en återanvändbar funktion med modern arrow function-syntax - **Skapat** en återanvändbar funktion med modern pilar-funktionssyntax
- **Byggt** en array för att lagra hela sekvensen istället för att visa ett och ett tal - **Byggt** en array för att lagra hela sekvensen istället för att visa ett tal i taget
- **Använt** arrayindexering för att räkna ut varje nytt tal från tidigare värden - **Använt** arrayindexering för att beräkna varje nytt tal utifrån tidigare värden
- **Returnerat** hela sekvensen för flexibel användning i andra delar av programmet - **Returnerat** hela sekvensen för flexibel användning i andra delar av programmet
**Lågnivåspråk (ARM Assembly) Datorvänligt:** **Lågnivåspråk (ARM Assembly) Datorvänligt:**
@ -257,28 +257,28 @@ back add r0,r1
end end
``` ```
Notera hur JavaScript-versionen läses nästan som engelska instruktioner, medan Assembly-versionen använder kryptiska kommandon som direkt styr datorns processor. Båda utför samma uppgift, men högnivåspråket är mycket lättare för människor att förstå, skriva och underhålla. Lägg märke till hur JavaScript-versionen nästan läses som engelska instruktioner, medan Assembly-versionen använder kryptiska kommandon som direkt styr datorns processor. Båda utför exakt samma uppgift, men högnivåspråket är mycket enklare för människor att förstå, skriva och underhålla.
**Viktiga skillnader du kommer märka:** **Viktiga skillnader du kommer märka:**
- **Läsbarhet**: JavaScript använder beskrivande namn som `fibonacciCount` medan Assembly använder kryptiska etiketter som `r0`, `r1` - **Läsbarhet**: JavaScript använder beskrivande namn som `fibonacciCount` medan Assembly använder kryptiska etiketter som `r0`, `r1`
- **Kommentarer**: Hög nivå-språk uppmuntrar förklarande kommentarer som gör koden självdokumenterande - **Kommentarer**: Hög-nivå språk uppmuntrar förklarande kommentarer som gör koden självförklarande
- **Struktur**: JavaScripts logiska flöde matchar hur människor tänker steg för steg kring problem - **Struktur**: JavaScripts logiska flöde matchar hur människor tänker på problem steg för steg
- **Underhåll**: Att uppdatera JavaScript-versionen för olika krav är enkelt och tydligt - **Underhåll**: Att uppdatera JavaScript-versionen för olika krav är enkelt och tydligt
**Om Fibonacci-sekvensen**: Detta helt makalöst vackra mönster av siffror (där varje tal är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8...) dyker upp bokstavligen *överallt* i naturen! Du hittar det i solrosspiraler, kottmönster, hur nautilusskal kröker sig, och till och med i hur trädgrenar växer. Det är ganska häpnadsväckande hur matematik och kod kan hjälpa oss att förstå och återskapa de mönster som naturen använder för att skapa skönhet! **Om Fibonacci-sekvensen**: Detta helt fantastiska talmönster (där varje tal är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8...) dyker bokstavligen upp *överallt* i naturen! Du hittar det i solrosspiraler, kottmönster, hur nautilusskal kröker sig och till och med i hur trädgrenar växer. Det är ganska häpnadsväckande hur matematik och kod kan hjälpa oss att förstå och återskapa de mönster som naturen använder för att skapa skönhet!
## Byggstenarna som gör magin möjlig ## Byggstenarna Som Gör Magin Möjlig
Okej, nu när du har sett hur programmeringsspråk ser ut i praktiken, låt oss bryta ner de grundläggande delarna som utgör bokstavligen varje program som någonsin har skrivits. Tänk på dessa som de väsentliga ingredienserna i ditt favoritrecept när du förstår vad varje del gör, kommer du att kunna läsa och skriva kod i nästan vilket språk som helst! Okej, nu när du har sett hur programmeringsspråk ser ut i praktiken, låt oss bryta ner de grundläggande delarna som utgör bokstavligen varje program som någonsin har skrivits. Tänk på dessa som de essentiella ingredienserna i ditt favoritrecept när du väl förstår vad varje del gör kommer du kunna läsa och skriva kod i nästan vilket språk som helst!
Det här är lite som att lära sig programmeringens grammatik. Kommer du ihåg när du i skolan lärde dig om substantiv, verb och hur man sätter ihop meningar? Programmering har sin egen version av grammatik, och ärligt talat är den mycket mer logisk och förlåtande än engelska grammatiken någonsin var! 😄 Det här är lite som att lära sig grammatiken för programmering. Kommer du ihåg när du lärde dig om substantiv, verb och hur man sätter ihop meningar i skolan? Programmering har sin egen version av grammatik, och ärligt talat är den mycket mer logisk och förlåtande än engelsk grammatik någonsin var! 😄
### Satser: steg-för-steg-instruktioner ### Satser: Steg-för-steg-instruktioner
Låt oss börja med **satser** dessa är som individuella meningar i en konversation med din dator. Varje sats säger till datorn att göra en specifik sak, lite som att ge vägbeskrivningar: "Sväng vänster här," "Stanna vid rödljuset," "Parka på den platsen." Låt oss börja med **satser** de är som individuella meningar i en konversation med din dator. Varje sats säger åt datorn att göra en specifik sak, ungefär som att ge vägbeskrivningar: "Sväng vänster här," "Stanna vid rött ljus," "Parkera på den platsen."
Det jag älskar med satser är hur läsbara de oftast är. Kolla på detta: Det jag gillar med satser är hur läsbara de vanligtvis är. Kolla in detta:
```javascript ```javascript
// Grundläggande satser som utför enstaka åtgärder // Grundläggande satser som utför enstaka åtgärder
@ -287,30 +287,30 @@ console.log("Hello, world!");
const sum = 5 + 3; const sum = 5 + 3;
``` ```
**Här är vad den här koden gör:** **Det här gör koden:**
- **Deklarerar** en konstant variabel för att lagra en användares namn - **Deklarerar** en konstant variabel för att lagra en användares namn
- **Visar** ett hälsningsmeddelande i konsolens utdata - **Visar** ett hälsningsmeddelande i konsolutmatningen
- **Beräknar** och lagrar resultatet av en matematisk operation - **Beräknar** och sparar resultatet av en matematisk operation
```javascript ```javascript
// Utsagor som interagerar med webbsidor // Uttalanden som interagerar med webbsidor
document.title = "My Awesome Website"; document.title = "My Awesome Website";
document.body.style.backgroundColor = "lightblue"; document.body.style.backgroundColor = "lightblue";
``` ```
**Steg för steg, så här händer det:** **Steg för steg händer detta:**
- **Modifierar** webbsidans titel som visas i webbläsarfliken - **Modifierar** webbsidans titel som visas i webbläsarfliken
- **Ändrar** bakgrundsfärgen för hela sidans kropp - **Byter** bakgrundsfärg på hela sidans kropp
### Variabler: ditt programs minnessystem ### Variabler: Programmets minnessystem
Okej, **variabler** är ärligt talat ett av mina absoluta favoritbegrepp att lära ut eftersom de är så likt sådant du redan använder varje dag! Okej, **variabler** är ärligt talat ett av mina absoluta favoritkoncept att lära ut eftersom de är så lika saker du redan använder varje dag!
Tänk på din telefons kontaktlista en sekund. Du kan inte memorera allas telefonnummer istället sparar du ”Mamma”, ”Bästis” eller ”Pizzastället som levererar till 2 på morgonen” och låter telefonen komma ihåg de faktiska numren. Variabler fungerar exakt på samma sätt! De är som märkta behållare där ditt program kan lagra information och hämta den senare med ett namn som faktiskt är begripligt. Tänk på telefonens kontaktlista ett ögonblick. Du memorerar inte allas telefonnummer istället sparar du "Mamma," "Bästa Vän," eller "Pizzastället Som Levererar Till 2 På Morgonen" och låter telefonen komma ihåg de faktiska numren. Variabler fungerar precis på samma sätt! De är som märkta behållare där ditt program kan lagra information och sedan hämta den med ett namn som faktiskt är begripligt.
Det som verkligen är coolt: variabler kan ändras medan ditt program körs (därav namnet ”variabel” ser du vad de gjorde där?). Precis som du kanske uppdaterar pizzaställets kontakt när du hittar någon ännu bättre, kan variabler uppdateras när ditt program lär sig ny information eller när situationer ändras! Det här är verkligen coolt: variabler kan ändras medan ditt program körs (därav namnet "variabel" fattar du vad de gjorde där?). Precis som du kanske uppdaterar pizzaställeskontakten när du hittar ett ännu bättre ställe, kan variabler uppdateras när ditt program lär sig ny information eller när situationer förändras!
Låt mig visa hur vackert enkelt detta kan vara: Låt mig visa hur vackert enkelt det kan vara:
```javascript ```javascript
// Steg 1: Skapa grundläggande variabler // Steg 1: Skapa grundläggande variabler
@ -321,9 +321,9 @@ let isRaining = false;
``` ```
**Förstå dessa koncept:** **Förstå dessa koncept:**
- **Lagra** oföränderliga värden i `const`-variabler (som sajtens namn) - **Lagra** oföränderliga värden i `const` variabler (som webbplatsens namn)
- **Använda** `let` för värden som kan ändras under programmets gång - **Använda** `let` för värden som kan ändras under programmets gång
- **Tilldela** olika datatyper: strängar (text), nummer och booleaner (sant/falskt) - **Tilldela** olika datatyper: strängar (text), siffror och booleaner (true/false)
- **Välja** beskrivande namn som förklarar vad varje variabel innehåller - **Välja** beskrivande namn som förklarar vad varje variabel innehåller
```javascript ```javascript
@ -335,25 +335,25 @@ const weatherData = {
}; };
``` ```
**I det ovanstående har vi:** **I exemplet ovan har vi:**
- **Skapat** ett objekt för att gruppera relaterad väderinformation - **Skapat** ett objekt för att gruppera relaterad väderinformation
- **Organiserat** flera data under ett variabelnamn - **Organiserat** flera datapunkter under ett variabelnamn
- **Använt** nyckel-värdepar för att tydligt märka varje data - **Använt** nyckel-värde-par för att tydligt märka varje informationsdel
```javascript ```javascript
// Steg 3: Använda och uppdatera variabler // Steg 3: Använda och uppdatera variabler
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`); console.log(`Wind speed: ${weatherData.windSpeed} mph`);
// Uppdatera variabla variabler // Uppdatera föränderliga variabler
currentWeather = "cloudy"; currentWeather = "cloudy";
temperature = 68; temperature = 68;
``` ```
**Låt oss förstå varje del:** **Låt oss förstå varje del:**
- **Visa** information med mall-strängar med `${}` syntax - **Visa** informationen med mallsträngar med `${}` syntax
- **Åtkomst** till objektets egenskaper via punktnotation (`weatherData.windSpeed`) - **Hämta** objektsegenskaper med punktnotation (`weatherData.windSpeed`)
- **Uppdatera** variabler deklarerade med `let` för att spegla förändrade förhållanden - **Uppdatera** variabler deklarerade med `let` för att reflektera förändrade förhållanden
- **Kombinera** flera variabler för att skapa meningsfulla meddelanden - **Kombinera** flera variabler för att skapa meningsfulla meddelanden
```javascript ```javascript
@ -362,20 +362,20 @@ const { location, humidity } = weatherData;
console.log(`${location} humidity: ${humidity}%`); console.log(`${location} humidity: ${humidity}%`);
``` ```
**Det du behöver veta:** **Det här behöver du veta:**
- **Extrahera** specifika egenskaper från objekt med destrukturering - **Extrahera** specifika egenskaper från objekt med destruktureringstilldelning
- **Skapa** nya variabler automatiskt med samma namn som objektets nycklar - **Skapa** nya variabler automatiskt med samma namn som objektets nycklar
- **Förenkla** koden genom att undvika upprepning av punktnotation - **Förenkla** kod genom att undvika repetitiv punktnotation
### Kontrollflöde: lära ditt program att tänka ### Kontrollflöde: Lära ditt program att tänka
Okej, här börjar programmering bli helt häpnadsväckande! **Kontrollflöde** är i princip att lära ditt program att fatta smarta beslut, precis som du gör varje dag utan att ens tänka på det. Okej, här blir programmering riktigt häpnadsväckande! **Kontrollflöde** handlar i princip om att lära ditt program att fatta smarta beslut, precis som du gör varje dag utan att ens tänka på det.
Föreställ dig detta: i morse gick du säkert igenom något som ”Om det regnar, tar jag med mig ett paraply. Om det är kallt, tar jag på mig en jacka. Om jag är sen, skippar jag frukosten och tar kaffe på vägen.” Din hjärna följer naturligt den här typen av om-så-logik dussintals gånger varje dag! Föreställ dig detta: i morse gick du nog igenom något som "Om det regnar, tar jag med ett paraply. Om det är kallt, tar jag på mig en jacka. Om jag är sen, hoppar jag över frukosten och köper kaffe på vägen." Din hjärna följer automatiskt detta if-then-tänk dussintals gånger varje dag!
Det här är vad som får program att kännas intelligenta och levande istället för bara att följa ett tråkigt, förutsägbart manus. De kan faktiskt titta på en situation, utvärdera vad som händer och svara på rätt sätt. Det är som att ge ditt program en hjärna som kan anpassa sig och göra val! Det här är vad som gör att program känns intelligenta och levande istället för att bara följa ett tråkigt, förutsägbart manus. De kan faktiskt titta på en situation, värdera vad som händer och reagera lämpligt. Det är som att ge ditt program en hjärna som kan anpassa sig och göra val!
Vill du se hur vackert detta fungerar? Låt mig visa dig: Vill du se hur vackert det fungerar? Låt mig visa:
```javascript ```javascript
// Steg 1: Grundläggande villkorslogik // Steg 1: Grundläggande villkorslogik
@ -390,9 +390,9 @@ if (userAge >= 18) {
``` ```
**Det här gör koden:** **Det här gör koden:**
- **Kontrollerar** om användarens ålder uppfyller röstningskravet - **Kontrollerar** om användarens ålder uppfyller röstkravet
- **Utför** olika kodblock baserat på villkorets resultat - **Kör** olika kodblock baserat på villkorets resultat
- **Beräknar** och visar hur länge det är kvar till rösträtt om under 18 - **Beräknar** och visar hur länge till röstbehörighet om under 18
- **Ger** specifik, hjälpsam feedback för varje scenario - **Ger** specifik, hjälpsam feedback för varje scenario
```javascript ```javascript
@ -409,25 +409,25 @@ if (userAge >= 18 && hasPermission) {
} }
``` ```
**Så här delas det upp:** **Så här bryts det ned:**
- **Kombinerar** flera villkor med `&&` (och) operatorn - **Kombinerar** flera villkor med `&&` (och) operatorn
- **Skapar** en hierarki av villkor med `else if` för flera scenarier - **Skapar** en hierarki av villkor med `else if` för flera scenarier
- **Hanterar** alla möjliga fall med en slutlig `else` sats - **Hantera** alla möjliga fall med ett slutligt `else`-påstående
- **Ger** tydlig och användbar feedback för varje unik situation - **Ger** tydlig, användbar feedback för varje situation
```javascript ```javascript
// Steg 3: Kortfattad villkor med ternär operator // Steg 3: Kortfattat villkor med ternär operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`); console.log(`Status: ${votingStatus}`);
``` ```
**Det här bör du komma ihåg:** **Det här behöver du komma ihåg:**
- **Använda** ternära operatorn (`? :`) för enkla två-alternativ villkor - **Använda** ternära operatorn (`? :`) för enkla två-alternativs villkor
- **Skriv** villkoret först, följt av `?`, sedan sant resultat, `:`, och falskt resultat - **Skriv** villkoret först, följt av `?`, sedan sant resultat, sedan `:`, sedan falskt resultat
- **Använd** detta mönster när du behöver tilldela värden baserat på villkor - **Applicera** detta mönster när du behöver tilldela värden baserat på villkor
```javascript ```javascript
// Steg 4: Hantering av flera specifika fall // Steg 4: Hantera flera specifika fall
const dayOfWeek = "Tuesday"; const dayOfWeek = "Tuesday";
switch (dayOfWeek) { switch (dayOfWeek) {
@ -449,46 +449,46 @@ switch (dayOfWeek) {
**Den här koden gör följande:** **Den här koden gör följande:**
- **Matchar** variabelvärdet mot flera specifika fall - **Matchar** variabelvärdet mot flera specifika fall
- **Grupperar** liknande fall (vardagar vs helger) - **Grupperar** liknande fall (vardagar vs. helger)
- **Utför** rätt kodblock när en träff hittas - **Kör** rätt kodblock när en match hittas
- **Inkluderar** ett `default` fall för oförväntade värden - **Inkluderar** ett `default`-fall för att hantera oväntade värden
- **Använder** `break` satser för att förhindra att koden fortsätter till nästa fall - **Använder** `break`-satser för att förhindra att koden fortsätter till nästa fall
> 💡 **Verklighetsanalogin**: Tänk på kontrollflöde som världens mest tålmodiga GPS som ger dig vägbeskrivningar. Den kan säga ”Om det är trafik på Main Street, ta istället motorvägen. Om vägarbete blockerar motorvägen, prova den natursköna vägen.” Program använder exakt samma typ av villkorslogik för att svara intelligent på olika situationer och alltid ge användarna bästa möjliga upplevelse. > 💡 **Verklighetsanalogi**: Tänk på kontrollflöde som att ha världens mest tålmodiga GPS som ger dig vägbeskrivningar. Den kan säga "Om det är trafik på Main Street, ta motorvägen istället. Om vägarbete blockerar motorvägen, prova den natursköna vägen." Program använder precis samma typ av villkorlig logik för att reagera intelligent på olika situationer och alltid ge användarna bästa möjliga upplevelse.
### 🎯 **Konceptkontroll: Mästare på byggstenarna** ### 🎯 **Begreppskontroll: Mästerskap i byggstenar**
**Låt oss se hur du ligger till med grunderna:** **Hur ligger du till med grunderna:**
- Kan du förklara skillnaden mellan en variabel och en sats med egna ord? - Kan du förklara skillnaden mellan en variabel och en sats med egna ord?
- Tänk på ett verkligt scenario där du skulle använda en om-så-beslut (som vårt röstningsexempel) - Tänk på ett verkligt scenario där du skulle använda ett if-then-beslut (som i vårt röstexempel)
- Vad är en sak med programmeringslogik som överraskade dig? - Vad är en sak med programmeringslogik som överraskade dig?
**Snabb självsäkerhetsboost:** **Snabbt självförtroendeboost:**
```mermaid ```mermaid
flowchart LR flowchart LR
A["📝 Utsagor<br/>(Instruktioner)"] --> B["📦 Variabler<br/>(Lagring)"] --> C["🔀 Kontrollflöde<br/>(Beslut)"] --> D["🎉 Fungerande Program!"] A["📝 Satser<br/>(Instruktioner)"] --> B["📦 Variabler<br/>(Lagring)"] --> C["🔀 Kontrollflöde<br/>(Beslut)"] --> D["🎉 Fungerande Program!"]
style A fill:#ffeb3b style A fill:#ffeb3b
style B fill:#4caf50 style B fill:#4caf50
style C fill:#2196f3 style C fill:#2196f3
style D fill:#ff4081 style D fill:#ff4081
``` ```
**Vad som kommer härnäst**: Vi kommer ha en fantastisk tid när vi dyker djupare in i dessa koncept på vår otroliga resa tillsammans! Just nu, fokusera bara på att känna den spänning som finns inför alla otroliga möjligheter som väntar dig. De specifika färdigheterna och teknikerna kommer naturligt när vi övar tillsammans jag lovar att detta kommer bli mycket roligare än du kanske förväntar dig! **Vad som kommer härnäst**: Vi kommer ha en otrolig resa när vi går djupare in i dessa koncept tillsammans! Just nu, fokusera bara på att känna den där spänningen över alla fantastiska möjligheter som väntar. De specifika färdigheter och metoder kommer naturligtvis att fastna när vi övar tillsammans jag lovar att detta kommer bli mycket roligare än du kanske tror!
## Verktyg för arbetet ## Verktygen i Verktygslådan
Okej, här blir jag ärligt talat så uppspelt att jag knappt kan hålla mig! 🚀 Vi ska prata om de otroliga verktyg som kommer få dig att känna att du precis fått nycklarna till ett digitalt rymdskepp. Okej, här blir jag ärligt talat så uppspelt att jag knappt kan hålla mig! 🚀 Vi ska prata om de otroliga verktygen som kommer få dig att känna att du precis fått nycklarna till ett digitalt rymdskepp.
Vet du hur en kock har de där perfekt balanserade knivarna som känns som en förlängning av deras händer? Eller hur en musiker har den där gitarren som låter sjunga det ögonblick hen rör vid den? Jo, utvecklare har sin egen version av dessa magiska verktyg, och här är något som kommer att blåsa dig av stolen de flesta av dem är helt gratis! Du vet hur en kock har de perfekt balanserade knivarna som känns som en förlängning av handen? Eller hur en musiker har den där gitarren som verkar sjunga i samma ögonblick som den rörs? Jo, utvecklare har vår egen version av dessa magiska verktyg, och här är det som kommer att slå dig helt de flesta av dem är helt gratis!
Jag sitter nästan och hoppar i stolen av tanken på att få dela detta med dig för de har helt revolutionerat hur vi bygger mjukvara. Vi pratar om AI-drivna kodassistenter som kan hjälpa dig skriva din kod (jag skojar inte!), molnmiljöer där du kan bygga hela applikationer bokstavligen var som helst med Wi-Fi, och felsökningsverktyg som är så avancerade att det är som att ha röntgensyn för dina program. Jag studsar nästan på stolen när jag tänker på att dela dessa med dig för de har helt förändrat hur vi bygger mjukvara. Vi pratar om AI-driven kodassistent som kan hjälpa dig skriva kod (jag skojar inte!), molnmiljöer där du kan skapa hela applikationer bokstavligen var som helst med Wi-Fi, och felsökningsverktyg så avancerade att det är som att ha röntgensyn för dina program.
Och här kommer delen som fortfarande ger mig rysningar: det här är inte ”nybörjarverktyg” som du växer ifrån. Det är exakt samma professionella verktyg som utvecklare på Google, Netflix och den där indieapp-studion du älskar använder just nu. Du kommer att känna dig som en riktig proffs när du använder dem! Och här är delen som fortfarande ger mig rysningar: det här är inga "nybörjarverktyg" som du kommer växa ifrån. Det är exakt samma professionella verktyg som utvecklare på Google, Netflix och det där indieapp-studion du älskar använder just nu. Du kommer känna dig som ett proffs när du använder dem!
```mermaid ```mermaid
graph TD graph TD
A["💡 Din idé"] --> B["⌨️ Kodredigerare<br/>(VS Code)"] A["💡 Din Idé"] --> B["⌨️ Kodeditor<br/>(VS Code)"]
B --> C["🌐 Webbläsarverktyg<br/>(Testning & Felsökning)"] B --> C["🌐 Webbläsarens DevTools<br/>(Testning & Felsökning)"]
C --> D["⚡ Kommandorad<br/>(Automatisering & Verktyg)"] C --> D["⚡ Kommandorad<br/>(Automatisering & Verktyg)"]
D --> E["📚 Dokumentation<br/>(Lärande & Referens)"] D --> E["📚 Dokumentation<br/>(Lärande & Referens)"]
E --> F["🚀 Fantastisk Webbapp!"] E --> F["🚀 Fantastisk Webbapp!"]
@ -496,7 +496,7 @@ graph TD
B -.-> G["🤖 AI-assistent<br/>(GitHub Copilot)"] B -.-> G["🤖 AI-assistent<br/>(GitHub Copilot)"]
C -.-> H["📱 Enhetstestning<br/>(Responsiv design)"] C -.-> H["📱 Enhetstestning<br/>(Responsiv design)"]
D -.-> I["📦 Paketchefer<br/>(npm, yarn)"] D -.-> I["📦 Paketchefer<br/>(npm, yarn)"]
E -.-> J["👥 Gemenskap<br/>(Stack Overflow)"] E -.-> J["👥 Community<br/>(Stack Overflow)"]
style A fill:#fff59d style A fill:#fff59d
style F fill:#c8e6c9 style F fill:#c8e6c9
@ -505,106 +505,106 @@ graph TD
style I fill:#ffccbc style I fill:#ffccbc
style J fill:#e8eaf6 style J fill:#e8eaf6
``` ```
### Kodredigerare och IDE: Dina nya digitala bästa vänner ### Kodredigerare och IDEs: Dina nya digitala bästa vänner
Låt oss prata om kodredigerare de kommer verkligen att bli dina nya favoritställen att hänga på! Tänk på dem som din personliga kodningsfristad där du kommer spendera mestadelen av tiden med att skulptera och förfina dina digitala skapelser. Låt oss prata kodredigerare de här kommer seriöst bli dina nya favoritställen att hänga på! Tänk på dem som din personliga kodningsfrizon där du kommer spendera mest tid på att skapa och finslipa dina digitala alster.
Men det som är helt magiskt med moderna redigerare är att de inte bara är fancy textredigerare. De är som att ha den mest briljanta, stöttande kodningsmentorn sittande precis bredvid dig 24/7. De fångar dina felstavningar innan du ens märker dem, föreslår förbättringar som får dig att se ut som ett geni, hjälper dig att förstå vad varje kodbit gör, och vissa av dem kan till och med förutspå vad du är på väg att skriva och erbjuda sig att slutföra dina tankar! Men här är det magiska med moderna redigerare: de är inte bara fina textredigerare. Det är som att ha den mest briljanta och stödjande kodningsmentorn sittandes precis bredvid dig dygnet runt. De fångar dina stavfel innan du ens märker dem, föreslår förbättringar som får dig att se smart ut, hjälper dig förstå vad varje kodbit gör, och några av dem kan till och med förutse vad du är på väg att skriva och erbjuda sig att avsluta dina tankar!
Jag minns när jag först upptäckte autokomplettering det kändes som att jag levde i framtiden. Du börjar skriva något, och din redigerare säger, ”Hej, tänkte du på den här funktionen som gör precis det du behöver?” Det är som att ha en tankeläsare som din kodningskompis! Jag minns när jag först upptäckte automatisk komplettering jag kände verkligen att jag levde i framtiden. Du börjar skriva något och din redigerare säger, ”Hej, tänkte du på den här funktionen som gör precis vad du behöver?” Det är som att ha en tankeläsare som kodkompis!
**Vad gör dessa redigerare så otroliga?** **Vad gör dessa redigerare så otroliga?**
Moderna kodredigerare erbjuder en imponerande uppsättning funktioner som är utformade för att öka din produktivitet: Moderna kodredigerare erbjuder en imponerande mängd funktioner designade för att öka din produktivitet:
| Funktion | Vad den gör | Varför det hjälper | | Funktion | Vad den gör | Varför det hjälper |
|---------|--------------|--------------| |---------|--------------|--------------|
| **Syntaxmarkering** | Färglägger olika delar av din kod | Gör kod lättare att läsa och upptäcka fel | | **Syntaxmarkering** | Färglägger olika delar av din kod | Gör koden enklare att läsa och hitta fel |
| **Autokomplettering** | Föreslår kod medan du skriver | Snabbar upp kodning och minskar stavfel | | **Automatisk komplettering** | Foreslår kod när du skriver | Snabbar upp kodandet och minskar stavfel |
| **Felsökningsverktyg** | Hjälper dig hitta och fixa fel | Sparar timmar av felsökningstid | | **Felsökningsverktyg** | Hjälper dig hitta och fixa fel | Sparar timmar av felsökning |
| **Tillägg** | Lägger till specialfunktioner | Anpassa din editor för vilken teknik som helst | | **Tillägg** | Lägger till specialfunktioner | Anpassa din redigerare för vilken teknik som helst |
| **AI-assistenter** | Föreslår kod och förklaringar | Påskyndar lärande och produktivitet | | **AI-assistenter** | Föreslår kod och förklaringar | Accelererar lärande och produktivitet |
> 🎥 **Videoresurs**: Vill du se dessa verktyg i aktion? Kolla in den här [Tools of the Trade-videon](https://youtube.com/watch?v=69WJeXGBdxg) för en omfattande översikt. > 🎥 **Videoresurs**: Vill du se dessa verktyg i aktion? Kolla in denna [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) för en heltäckande översikt.
#### Rekommenderade redigerare för webbutveckling #### Rekommenderade redigerare för webbprogrammering
**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis)
- Mest populär bland webbutvecklare - Mest populär bland webbutvecklare
- Utmärkt ekosystem av tillägg - Utmärkt tilläggsekosystem
- Inbyggd terminal och Git-integration - Inbyggd terminal och Git-integration
- **Måste-ha-tillägg**: - **Måste-ha-tillägg**:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-drivna kodförslag - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-drivna kodförslag
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbete i realtid - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbete i realtid
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodformatering - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodformatering
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fångar stavfel i koden - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fångar stavfel i din kod
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betald, gratis för studenter) **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betald, gratis för studenter)
- Avancerade felsöknings- och testverktyg - Avancerade verktyg för felsökning och testning
- Intelligent kodkomplettering - Intelligent kodkomplettering
- Inbyggd versionskontroll - Inbyggd versionskontroll
**Molnbaserade IDEer** (Olika priser) **Molnbaserade IDEs** (Olika prissättning)
- [GitHub Codespaces](https://github.com/features/codespaces) - Fullt VS Code i din webbläsare - [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code i din webbläsare
- [Replit](https://replit.com/) - Perfekt för att lära sig och dela kod - [Replit](https://replit.com/) - Perfekt för att lära sig och dela kod
- [StackBlitz](https://stackblitz.com/) - Omedelbar fullstack webbutveckling - [StackBlitz](https://stackblitz.com/) - Direkt, fullstack webbprogrammering
> 💡 **Tips för att komma igång**: Börja med Visual Studio Code det är gratis, mycket använt i branschen och har en enorm community som skapar hjälptutorials och tillägg. > 💡 **Tips för att komma igång**: Börja med Visual Studio Code det är gratis, används mycket i branschen och har en enorm community som skapar hjälpsamma tutorials och tillägg.
### Webbläsare: Ditt hemliga utvecklingslaboratorium ### Webbläsare: Ditt hemliga utvecklingslaboratorium
Okej, gör dig redo att få ditt sinne fullständigt blåst! Du vet hur du har använt webbläsare för att scrolla sociala medier och titta på videor? Ja, det visar sig att de har gömt det här otroliga hemliga utvecklingslaboratoriet hela tiden, bara väntande på att du ska upptäcka det! Okej, gör dig redo att få din hjärna helt bortblåst! Du vet hur du har använt webbläsare för att scrolla genom sociala medier och titta på videor? Jo, det visar sig att de har gömt ett otroligt hemligt utvecklingslaboratorium hela tiden, bara väntat på att du ska upptäcka det!
Varje gång du högerklickar på en webbsida och väljer "Inspektera element" öppnar du en dold värld av utvecklarverktyg som är ärligt talat mäktigare än några dyra program jag brukade betala hundratals dollar för. Det är som att upptäcka att ditt vanliga kök har dolt ett professionellt kocklaboratorium bakom en hemlig panel! Varje gång du högerklickar på en webbsida och väljer "Inspektera" öppnar du en dold värld av utvecklarverktyg som är ärligt talat kraftfullare än många dyra programvaror jag brukade betala hundratals kronor för. Det är som att upptäcka att ditt vanliga gamla kök har dolts ett professionellt kocklaboratorium bakom en hemlig panel!
Första gången någon visade mig webbläsarens DevTools, spenderade jag typ tre timmar bara på att klicka runt och tänka "VÄNTA, KAN DEN GÖRA DET DÄR OCKSÅ?!" Du kan bokstavligen redigera vilken webbplats som helst i realtid, se exakt hur snabbt allt laddas, testa hur din sida ser ut på olika enheter och till och med felsöka JavaScript som en riktig expert. Det är helt otroligt! Första gången någon visade mig webbläsarens DevTools, spenderade jag typ tre timmar bara på att klicka runt och säga "VÄNTA, KAN DEN GÖRA DET OCKSÅ?!" Du kan bokstavligen redigera vilken webbplats som helst i realtid, se exakt hur snabbt allt laddas, testa hur din webbplats ser ut på olika enheter och till och med felsöka JavaScript som en riktig proffs. Det är helt otroligt!
**Här är varför webbläsare är ditt hemliga vapen:** **Här är varför webbläsare är ditt hemliga vapen:**
När du skapar en webbplats eller webbapplikation behöver du se hur den ser ut och beter sig i verkligheten. Webbläsare visar inte bara ditt arbete utan ger också detaljerad feedback om prestanda, tillgänglighet och potentiella problem. När du skapar en webbplats eller webbsida behöver du se hur den ser ut och fungerar i verkligheten. Webbläsare visar inte bara ditt arbete utan ger också detaljerad feedback om prestanda, tillgänglighet och potentiella problem.
#### Webbläsarens utvecklarverktyg (DevTools) #### Webbläsarens utvecklarverktyg (DevTools)
Moderna webbläsare inkluderar omfattande utvecklingspaket: Moderna webbläsare inkluderar omfattande utvecklingspaket:
| Verktygskategori | Vad det gör | Exempel på användningsområde | | Verktygskategori | Vad det gör | Exempel på användning |
|------------------|-------------|------------------------------| |------------------|-------------|----------------------|
| **Elementinspektör** | Visa och redigera HTML/CSS i realtid | Justera stil för att se omedelbara resultat | | **Elementinspektör** | Visa och redigera HTML/CSS i realtid | Justera styling för att se omedelbara resultat |
| **Konsol** | Visa felmeddelanden och testa JavaScript | Felsöka problem och experimentera med kod | | **Konsol** | Visa felmeddelanden och testa JavaScript | Felsök problem och experimentera med kod |
| **Nätverksövervakare** | Spåra hur resurser laddas | Optimera prestanda och laddningstider | | **Nätverksövervakare** | Spåra hur resurser laddas | Optimera prestanda och laddningstider |
| **Tillgänglighetskontroll** | Testa inkluderande design | Säkerställ att din sida fungerar för alla användare | | **Tillgänglighetskontroll** | Testa inkluderande design | Säkerställ att din webbplats fungerar för alla användare |
| **Enhetssimulator** | Förhandsgranska på olika skärmstorlekar | Testa responsiv design utan flera enheter | | **Enhetssimulator** | Förhandsgranska på olika skärmstorlekar | Testa responsiv design utan flera enheter |
#### Rekommenderade webbläsare för utveckling #### Rekommenderade webbläsare för utveckling
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industriell standard för DevTools med omfattande dokumentation - **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industri-standard DevTools med omfattande dokumentation
- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Utmärkta verktyg för CSS Grid och tillgänglighet - **[Firefox](https://developer.mozilla.org/docs/Tools)** - Utmärkta CSS Grid- och tillgänglighetsverktyg
- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Byggd på Chromium med Microsofts utvecklarresurser - **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Byggd på Chromium med Microsofts utvecklarresurser
> ⚠️ **Viktigt testtips**: Testa alltid dina webbplatser i flera webbläsare! Det som fungerar perfekt i Chrome kan se annorlunda ut i Safari eller Firefox. Professionella utvecklare testar i alla större webbläsare för att säkerställa en konsekvent användarupplevelse. > ⚠️ **Viktig testningstips**: Testa alltid dina webbplatser i flera webbläsare! Vad som fungerar perfekt i Chrome kan se annorlunda ut i Safari eller Firefox. Professionella utvecklare testar över alla större webbläsare för att säkerställa en konsekvent användarupplevelse.
### Kommandoradsverktyg: Din väg till utvecklarmagi ### Kommandoradsverktyg: Din port till utvecklarsuperkrafter
Okej, låt oss ha ett helt ärligt ögonblick här om kommandoraden, för jag vill att du ska höra detta från någon som verkligen förstår. När jag såg den första gången bara den där läskiga svarta skärmen med blinkande text tänkte jag bokstavligen, "Nej, absolut inte! Det här ser ut som något från en hackarfilm på 1980-talet, och jag är definitivt inte tillräckligt smart för det här!" 😅 Okej, låt oss vara helt ärliga om kommandoraden, för jag vill att du ska höra detta från någon som verkligen förstår. När jag först såg den bara den här läskiga svarta skärmen med blinkande text tänkte jag bokstavligen, "Nej, absolut inte! Det ser ut som något från en hackerfilm på 1980-talet, och jag är definitivt inte tillräckligt smart för det här!" 😅
Men här är vad jag önskar att någon hade sagt till mig då, och som jag säger till dig just nu: kommandoraden är inte läskig det är faktiskt som att ha en direkt konversation med din dator. Tänk på det som skillnaden mellan att beställa mat via en snygg app med bilder och menyer (vilket är trevligt och enkelt) jämfört med att gå in på din favoritlokala restaurang där kocken exakt vet vad du gillar och kan fixa något perfekt bara för att du säger "överraska mig med något fantastiskt." Men här är vad jag önskar att någon hade berättat för mig då, och vad jag säger till dig just nu: kommandoraden är inte skrämmande det är faktiskt som att ha en direkt konversation med din dator. Tänk på det som skillnaden mellan att beställa mat genom en snygg app med bilder och menyer (vilket är trevligt och enkelt) jämfört med att gå in på din favoritlokala restaurang där kocken vet exakt vad du gillar och kan slänga ihop något perfekt bara för att du säger "överraska mig med något fantastiskt."
Kommandoraden är platsen där utvecklare känner sig som riktiga trollkarlar. Du skriver några till synes magiska ord (okej, det är bara kommandon, men de känns magiska!), trycker på enter och BOOM du har skapat hela projektstrukturer, installerat kraftfulla verktyg från hela världen eller distribuerat din app på internet för miljoner att se. När du får din första smak av den makten är det ärligt talat ganska beroendeframkallande! Kommandoraden är där utvecklare känner sig som riktiga trollkarlar. Du skriver några till synes magiska ord (okej, det är bara kommandon, men de känns magiska!), trycker på enter, och POFF du har skapat hela projektstrukturer, installerat kraftfulla verktyg från hela världen, eller driftsatt din app till internet för miljontals människor att se. När du får din första smak av den kraften är det ärligt talat ganska beroendeframkallande!
**Varför kommandoraden kommer bli ditt favoritverktyg:** **Varför kommandoraden kommer att bli ditt favoritverktyg:**
Medan grafiska gränssnitt är bra för många uppgifter, utmärker sig kommandoraden på automatisering, precision och hastighet. Många utvecklingsverktyg fungerar huvudsakligen via kommandoradsgränssnitt, och att lära sig använda dem effektivt kan dramatiskt förbättra din produktivitet. Medan grafiska gränssnitt är utmärkta för många uppgifter, är kommandoraden bäst på automatisering, precision och hastighet. Många utvecklingsverktyg fungerar främst genom kommandoradsgränssnitt, och att lära sig använda dem effektivt kan dramatiskt förbättra din produktivitet.
```bash ```bash
# Steg 1: Skapa och navigera till projektmappen # Steg 1: Skapa och navigera till projektkatalogen
mkdir my-awesome-website mkdir my-awesome-website
cd my-awesome-website cd my-awesome-website
``` ```
**Det här gör koden:** **Det här gör koden:**
- **Skapar** en ny mapp som heter "my-awesome-website" för ditt projekt - **Skapa** en ny katalog kallad "my-awesome-website" för ditt projekt
- **Navigerar** in i den nyss skapade mappen för att börja arbeta - **Navigera** in i den nyss skapade katalogen för att börja arbeta
```bash ```bash
# Steg 2: Initiera projekt med package.json # Steg 2: Initiera projekt med package.json
@ -615,11 +615,11 @@ npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js npm install --save-dev @eslint/js
``` ```
**Steg för steg, så här går det till:** **Steg för steg, detta händer:**
- **Initierar** ett nytt Node.js-projekt med standardinställningar med `npm init -y` - **Initiera** ett nytt Node.js-projekt med standardinställningar med `npm init -y`
- **Installerar** Vite som ett modernt byggverktyg för snabb utveckling och produktion - **Installera** Vite som ett modernt byggverktyg för snabb utveckling och produktion
- **Lägger till** Prettier för automatisk kodformatering och ESLint för kvalitetskontroller - **Lägg till** Prettier för automatisk kodformatering och ESLint för kodkvalitetskontroller
- **Använder** flaggan `--save-dev` för att markera dessa som utvecklingsberoenden - **Använd** flaggan `--save-dev` för att markera dessa som utvecklarexklusiva beroenden
```bash ```bash
# Steg 3: Skapa projektstruktur och filer # Steg 3: Skapa projektstruktur och filer
@ -631,26 +631,26 @@ npx vite
``` ```
**I ovanstående har vi:** **I ovanstående har vi:**
- **Organiserat** vårt projekt genom att skapa separata mappar för källkod och resurser - **Organiserat** vårt projekt genom att skapa separata mappar för källkod och tillgångar
- **Skapat** en enkel HTML-fil med korrekt dokumentstruktur - **Genererat** en grundläggande HTML-fil med korrekt dokumentstruktur
- **Startat** Vite utvecklingsserver för live-uppdatering och varm modulbyte - **Startat** Vite-utvecklingsservern för live-uppdateringar och hot module replacement
#### Viktiga kommandoradsverktyg för webbutveckling #### Viktiga kommandoradsverktyg för webbutveckling
| Verktyg | Syfte | Varför du behöver det | | Verktyg | Syfte | Varför du behöver det |
|---------|-------|----------------------| |---------|-------|----------------------|
| **[Git](https://git-scm.com/)** | Versionshantering | Spåra förändringar, samarbeta med andra, säkerhetskopiera ditt arbete | | **[Git](https://git-scm.com/)** | Versionshantering | Spåra förändringar, samarbeta med andra, säkerhetskopiera ditt arbete |
| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & paket-hantering | Kör JavaScript utanför webbläsare, installera moderna utvecklingsverktyg | | **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & pakethantering | Kör JavaScript utanför webbläsare, installera moderna utvecklingsverktyg |
| **[Vite](https://vitejs.dev/)** | Byggverktyg & utvecklingsserver | Lynsnabb utveckling med varm modulbyte | | **[Vite](https://vitejs.dev/)** | Byggverktyg & utvecklingsserver | Blixtsnabb utveckling med hot module replacement |
| **[ESLint](https://eslint.org/)** | Kodkvalitet | Hitta och fixa automatiskt problem i din JavaScript-kod | | **[ESLint](https://eslint.org/)** | Kodkvalitet | Hitta och fixa automatiskt problem i din JavaScript |
| **[Prettier](https://prettier.io/)** | Kodformatering | Håll din kod konsekvent formaterad och läsbar | | **[Prettier](https://prettier.io/)** | Kodformatering | Håll din kod konsekvent formaterad och läsbar |
#### Plattformsspecifika alternativ #### Plattformsspecifika alternativ
**Windows:** **Windows:**
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern och funktionsrik terminal - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern terminal med många funktioner
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftfull skriptmiljö - **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftfullt skriptmiljö
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditionell Windows-kommandorad - **[Kommandoprompt](https://learn.microsoft.com/windows-server/administration/windows-commands/windows-commands)** 💻 - Traditionell Windows-kommandorad
**macOS:** **macOS:**
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Inbyggd terminalapplikation - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Inbyggd terminalapplikation
@ -660,67 +660,67 @@ npx vite
- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux-skal - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux-skal
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Avancerad terminalemulator - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Avancerad terminalemulator
> 💻 = Förinstallerad i operativsystemet > 💻 = Förinstallerat i operativsystemet
> 🎯 **Inlärningsväg:** Börja med grundläggande kommandon som `cd` (byt mapp), `ls` eller `dir` (lista filer) och `mkdir` (skapa mapp). Öva sedan på moderna arbetsflödeskommandon som `npm install`, `git status` och `code .` (öppnar aktuell mapp i VS Code). När du blir mer bekväm plockar du naturligt upp mer avancerade kommandon och automatiseringstekniker. > 🎯 **Inlärningsväg**: Börja med grundläggande kommandon som `cd` (byta katalog), `ls` eller `dir` (lista filer) och `mkdir` (skapa mapp). Öva med moderna arbetsflödeskommandon som `npm install`, `git status` och `code .` (öppnar aktuell katalog i VS Code). När du blir mer bekväm plockar du upp mer avancerade kommandon och automatiseringstekniker naturligt.
### Dokumentation: Din alltid tillgängliga lärarmästare ### Dokumentation: Din alltid tillgängliga lärarmästare
Okej, låt mig dela med mig av en liten hemlighet som kommer få dig att känna dig mycket bättre över att vara nybörjare: även de mest erfarna utvecklarna spenderar en stor del av sin tid på att läsa dokumentation. Och det är inte för att de inte vet vad de gör det är faktiskt ett tecken på visdom! Okej, jag ska dela en liten hemlighet som kommer få dig att känna dig mycket bättre som nybörjare: även de mest erfarna utvecklarna spenderar en stor del av sin tid på att läsa dokumentation. Och det är inte för att de inte vet vad de gör det är faktiskt ett tecken på visdom!
Tänk på dokumentation som att ha tillgång till världens mest tålmodiga och kunniga lärare som är tillgängliga dygnet runt. Fastnar du i ett problem klockan 2 på natten? Dokumentationen finns där med en varm virtuell kram och exakt det svar du behöver. Vill du lära dig om en cool ny funktion som alla pratar om? Dokumentationen hjälper dig med steg-för-steg-exempel. Försöker du förstå varför något fungerar som det gör? Du gissade rätt dokumentationen är redo att förklara så att det äntligen klickar! Tänk på dokumentation som att ha tillgång till världens mest tålmodiga, kunniga lärare som finns tillgängliga dygnet runt. Fastnar du på ett problem klockan 2 på natten? Dokumentationen finns där med en varm virtuell kram och precis det svar du behöver. Vill du lära dig om någon spännande ny funktion som alla pratar om? Dokumentationen stöttar dig med steg-för-steg exempel. Försöker du förstå varför något fungerar som det gör? Gissade du rätt dokumentationen är redo att förklara det på ett sätt som äntligen får allt att klicka!
Här är något som helt förändrade mitt perspektiv: webbutvecklingsvärlden rör sig oerhört snabbt och ingen (jag menar verkligen ingen!) håller allt i huvudet. Jag har sett seniora utvecklare med 15+ års erfarenhet slå upp grundläggande syntax, och vet du vad? Det är inte pinsamt det är smart! Det handlar inte om att ha ett perfekt minne; det handlar om att veta var man snabbt hittar pålitliga svar och förstå hur man tillämpar dem. Här är något som helt förändrade mitt perspektiv: webbutvecklingsvärlden rör sig otroligt snabbt, och ingen (jag menar verkligen ingen!) kommer ihåg allt utantill. Jag har sett seniora utvecklare med 15+ års erfarenhet slå upp grundläggande syntax, och vet du vad? Det är inte pinsamt det är smart! Det handlar inte om att ha perfekt minne; det handlar om att veta var man snabbt hittar pålitliga svar och hur man applicerar dem.
**Här händer den verkliga magin:** **Här händer den verkliga magin:**
Professionella utvecklare spenderar en betydande del av sin tid på att läsa dokumentation inte för att de inte vet vad de gör, utan för att webbutvecklingslandskapet förändras så snabbt att det krävs ständig inlärning för att hålla sig uppdaterad. Bra dokumentation hjälper dig att förstå inte bara *hur* man använder något, utan även *varför* och *när* man ska använda det. Professionella utvecklare spenderar en betydande del av sin tid på att läsa dokumentation inte för att de inte vet vad de gör utan för att webbutvecklingslandskapet utvecklas så snabbt att det krävs kontinuerligt lärande för att hålla sig aktuell. Bra dokumentation hjälper dig att förstå inte bara *hur* man använder något, utan *varför* och *när* man ska använda det.
#### Viktiga dokumentationsresurser #### Viktiga dokumentationsresurser
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
- Guldkällan för dokumentation om webteknologier - Guldkällan för webteknologidokumentation
- Omfattande guider för HTML, CSS och JavaScript - Omfattande guider för HTML, CSS och JavaScript
- Inkluderar webbläsarkompatibilitetsinformation - Inkluderar webbläsarkompatibilitetsinformation
- Praktiska exempel och interaktiva demos - Har praktiska exempel och interaktiva demos
**[Web.dev](https://web.dev)** (av Google) **[Web.dev](https://web.dev)** (av Google)
- Moderna bästa metoder för webbutveckling - Moderna bästa praxis för webbutveckling
- Guider för prestandaoptimering - Guider för prestandaoptimering
- Tillgänglighet och inkluderande designprinciper - Tillgänglighet och inkluderande designprinciper
- Fallstudier från verkliga projekt - Fallstudier från verkliga projekt
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
- Utvecklarresurser för Edge-webbläsaren - Utvecklarresurser för Edge-webbläsaren
- Guider för Progressive Web Apps - Guider för Progressiva webbappar
- Insikter i plattformsoberoende utveckling - Insikter om plattformsövergripande utveckling
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
- Strukturerade inlärningsplaner - Strukturerade utbildningsprogram
- Videokurser från branschexperter - Videokurser från branschexperter
- Praktiska kodövningar - Praktiska kodningsövningar
> 📚 **Studietips:** Försök inte att memorera dokumentation lär dig istället att navigera den effektivt. Bokmärk ofta använda referenser och öva på att använda sökfunktioner för att snabbt hitta specifik information. > 📚 **Studieteknik**: Försök inte memorera dokumentationen lär dig istället navigera i den effektivt. Bokmärken för ofta använda referenser och öva på att använda sökfunktioner för att snabbt hitta specifik information.
### 🔧 **Verktygsmästerskap: Vad tilltalar dig?** ### 🔧 **Verktygsmästarskapskontroll: Vad tilltalar dig?**
**Ta en stund och fundera:** **Ta en stund och fundera:**
- Vilket verktyg är du mest sugen på att prova först? (Det finns inget fel svar!) - Vilket verktyg är du mest taggad på att prova först? (Det finns inget fel svar!)
- Känner du fortfarande att kommandoraden är skrämmande, eller är du nyfiken på den? - Känns kommandoraden fortfarande skrämmande, eller är du nyfiken på den?
- Kan du föreställa dig att använda webbläsarens DevTools för att kika bakom kulisserna på dina favoritwebbplatser? - Kan du föreställa dig att använda webbläsarens DevTools för att kika bakom kulisserna på dina favoritwebbplatser?
```mermaid ```mermaid
pie title "Utvecklartid som spenderas med verktyg" pie title "Utvecklartid Använd Med Verktyg"
"Kodredigerare" : 40 "Kodredigerare" : 40
"Webbläsartestning" : 25 "Webbläsartestning" : 25
"Kommandorad" : 15 "Kommandorad" : 15
"Läsa dokumentation" : 15 "Läsa Dokumentation" : 15
"Felsökning" : 5 "Felsökning" : 5
``` ```
> **Rolig insikt**: De flesta utvecklare spenderar ungefär 40% av sin tid i sin kodredigerare, men lägg märke till hur mycket tid som går åt till testning, lärande och problemlösning. Programmering handlar inte bara om att skriva kod det handlar om att skapa upplevelser! > **Rolig insikt**: De flesta utvecklare spenderar ungefär 40% av sin tid i sin kodredigerare, men lägg märke till hur mycket tid som går åt till testning, lärande och problemlösning. Programmering handlar inte bara om att skriva kod det handlar om att skapa upplevelser!
**Tankeväckande**: Här är något intressant att fundera på hur tror du verktygen för att bygga webbplatser (utveckling) skiljer sig från verktyg för att designa hur de ser ut (design)? Det är som skillnaden mellan en arkitekt som designar ett vackert hus och en entreprenör som faktiskt bygger det. Båda är avgörande, men behöver olika verktygslådor! Den typen av tänkande hjälper dig verkligen att se den större bilden av hur webbplatser blir till. **Goda tankar**: Här är en intressant fråga hur tror du att verktygen för att bygga webbplatser (utveckling) skiljer sig från verktygen för att designa hur de ser ut (design)? Det är som skillnaden mellan en arkitekt som designar ett vackert hus och entreprenören som faktiskt bygger det. Båda är avgörande, men de behöver olika verktygslådor! Den här typen av tänkande hjälper dig verkligen att se den större bilden av hur webbplatser kommer till liv.
## GitHub Copilot Agent-utmaning 🚀 ## GitHub Copilot Agent-utmaning 🚀
@ -728,7 +728,7 @@ Använd Agent-läget för att slutföra följande utmaning:
**Beskrivning:** Utforska funktionerna i en modern kodredigerare eller IDE och visa hur den kan förbättra ditt arbetsflöde som webbutvecklare. **Beskrivning:** Utforska funktionerna i en modern kodredigerare eller IDE och visa hur den kan förbättra ditt arbetsflöde som webbutvecklare.
**Uppmaning:** Välj en kodredigerare eller IDE (som Visual Studio Code, WebStorm eller en molnbaserad IDE). Lista tre funktioner eller tillägg som hjälper dig att skriva, felsöka eller underhålla kod mer effektivt. Ge till varje en kort förklaring av hur det gynnar ditt arbetsflöde. **Uppmaning:** Välj en kodredigerare eller IDE (t.ex. Visual Studio Code, WebStorm eller en molnbaserad IDE). Lista tre funktioner eller tillägg som hjälper dig att skriva, felsöka eller underhålla kod mer effektivt. Ge för varje en kort förklaring av hur det förbättrar ditt arbetsflöde.
--- ---
@ -736,50 +736,50 @@ Använd Agent-läget för att slutföra följande utmaning:
**Okej, detektiv, redo för ditt första fall?** **Okej, detektiv, redo för ditt första fall?**
Nu när du har denna fantastiska grund, har jag ett äventyr som ska hjälpa dig att se hur otroligt mångsidig och fascinerande programmeringsvärlden verkligen är. Och lyssna det här handlar inte om att skriva kod än, så det är ingen press! Tänk dig själv som en detektiv av programmeringsspråk på ditt allra första spännande fall! Nu när du har den här fantastiska grunden har jag ett äventyr som kommer hjälpa dig att se hur otroligt mångsidig och fascinerande programmeringsvärlden verkligen är. Och lyssna det handlar inte om att skriva kod än, så ingen press där! Tänk dig själv som en programmeringsspråkdetektiv på ditt allra första spännande fall!
**Ditt uppdrag, om du väljer att acceptera det:** **Din mission, om du väljer att acceptera den:**
1. **Bli en språkupptäckare**: Välj tre programmeringsspråk från helt olika universum kanske ett som bygger webbplatser, ett som skapar mobilappar och ett som analyserar data för forskare. Hitta exempel på samma enkla uppgift skrivna i varje språk. Jag lovar, du kommer bli helt amazed över hur olika de kan se ut fast de gör exakt samma sak! 1. **Bli en språkupptäckare**: Välj tre programmeringsspråk från helt olika världar kanske ett som bygger webbplatser, ett som skapar mobilappar och ett som bearbetar data för forskare. Hitta exempel på samma enkla uppgift skrivna i varje språk. Jag lovar att du kommer bli helt förbluffad över hur olika de kan se ut fast de gör exakt samma sak!
2. **Upptäck deras ursprungshistorier**: Vad gör varje språk speciellt? Här är en cool fakta varje programmeringsspråk skapades för att någon tänkte "Vet du vad? Det måste finnas ett bättre sätt att lösa just det här problemet." Kan du lista ut vilka problem det var? Vissa av historierna är verkligen fascinerande! 2. **Avslöja deras ursprungshistorier**: Vad gör varje språk speciellt? Här är ett häftigt faktum varje programmeringsspråk skapades för att någon tänkte, "Vet du vad? Det måste finnas ett bättre sätt att lösa just det här problemet." Kan du lista ut vilka problem det var? Några av dessa historier är riktigt fascinerande!
3. **Möt gemenskaperna**: Kolla hur välkomnande och passionerade varje språks community är. Vissa har miljontals utvecklare som delar kunskap och hjälper varandra, andra är mindre men otroligt sammansvetsade och stöttande. Du kommer älska att se de olika personligheterna i dessa gemenskaper! 3. **Träffa gemenskaperna**: Ta en titt på hur välkomnande och passionerade varje språks community är. Vissa har miljontals utvecklare som delar kunskap och hjälper varandra, andra är mindre men otroligt sammansvetsade och stödjande. Du kommer älska att se de olika personligheterna dessa communities har!
4. **Följ magkänslan**: Vilket språk känns mest tillgängligt för dig just nu? Stressa inte över att göra det "perfekta" valet lita på din instinkt! Det finns ärligt talat inget fel svar här, och du kan alltid utforska andra senare. 4. **Följ din magkänsla**: Vilket språk känns mest tillgängligt för dig just nu? Stressa inte över att göra det "perfekta" valet lyssna bara på din magkänsla! Det finns ärligt talat inget fel svar här, och du kan alltid utforska andra senare.
**Bonusdetektivarbete**: Försök ta reda på vilka stora webbplatser eller appar som är byggda med varje språk. Jag garanterar att du kommer bli förvånad över att lära dig vad som driver Instagram, Netflix eller det där mobil spelet du inte kan sluta spela! **Bonusdetektivarbete**: Se om du kan ta reda på vilka stora webbplatser eller appar som byggts med varje språk. Jag garanterar att du kommer bli chockad att få veta vad som driver Instagram, Netflix eller det där mobilspel du inte kan sluta spela!
> 💡 **Kom ihåg**: Du försöker inte bli expert på något av dessa språk idag. Du lär bara känna området innan du bestämmer var du vill slå dig ner. Ta din tid, ha kul och låt nyfikenheten leda dig! > 💡 **Kom ihåg**: Du försöker inte bli expert på något av dessa språk idag. Du lär bara känna området innan du bestämmer var du vill slå dig ner. Ta din tid, ha kul och låt din nyfikenhet vägleda dig!
## Låt oss fira det du har upptäckt! ## Låt oss fira vad du upptäckt!
Herregud, du har fått in så mycket otrolig information idag! Jag är uppriktigt glad att se hur mycket av den här fantastiska resan som fastnat hos dig. Och kom ihåg det här är inget prov där du måste få allt perfekt. Det är snarare en fest för allt häftigt du har lärt dig om den här fascinerande världen du snart ska dyka ner i! Holy moly, du har tagit till dig så mycket otrolig information idag! Jag är verkligen exalterad över att se hur mycket av denna fantastiska resa som fastnat hos dig. Och kom ihåg det här är inget test där du måste ha allt perfekt. Det är mer som en fest för alla de coola saker du lärt dig om den här fascinerande världen du är på väg att dyka in i!
[Ta quizet efter lektionen](https://ff-quizzes.netlify.app/web/) [Ta efter-lektionsquizet](https://ff-quizzes.netlify.app/web/)
## Repetition & Självstudier ## Granska & självlärande
**Ta din tid att utforska och ha roligt med det!** **Ta din tid att utforska och ha roligt med det!**
Du har täckt mycket idag, och det är något att vara stolt över! Nu kommer den roliga delen att utforska de ämnen som väckte din nyfikenhet. Kom ihåg, det här är inte läxor det är ett äventyr! Du har täckt mycket idag, och det är något att vara stolt över! Nu kommer den roliga delen att utforska de ämnen som väckte din nyfikenhet. Kom ihåg, det här är inget läxor det är ett äventyr!
** djupare in i det som fascinerar dig:** **Dyk djupare in i det som fascinerar dig:**
**Prova på programmeringsspråk:** **Testa programmeringsspråk praktiskt:**
- Besök de officiella webbplatserna för 2-3 språk som fångade din uppmärksamhet. Varje språk har sin egen personlighet och historia! - Besök de officiella webbplatserna för 2-3 språk som fångade ditt intresse. Var och ett har sin egen personlighet och historia!
- Testa några online kod-lekplatser som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Var inte rädd för att experimentera du kan inte förstöra något! - Prova några online-kodningsmiljöer som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Var inte rädd för att experimentera det går inte att förstöra något!
- Läs om hur ditt favoritspråk kom till. Allvarligt talat, vissa av de här ursprungshistorierna är fascinerande och hjälper dig att förstå varför språken fungerar som de gör. - Läs om hur ditt favoritprogrammeringsspråk kom till. Seriöst, några av dessa ursprungshistorier är fascinerande och hjälper dig att förstå varför språken fungerar som de gör.
**Bli bekväm med dina nya verktyg:** **Bli bekväm med dina nya verktyg:**
- Ladda ner Visual Studio Code om du inte redan gjort det det är gratis och du kommer att älska det! - Ladda ner Visual Studio Code om du inte redan gjort det det är gratis och du kommer att älska det!
- Spendera några minuter med att bläddra i Extensions-marknaden. Det är som en appbutik för din kodredigerare! - Spendera några minuter att bläddra i Extensions-marknaden. Det är som en appbutik för din kodredigerare!
- Öppna din webbläsares Developer Tools och klicka runt lite. Oroa dig inte för att förstå allt lär bara känna vad som finns där. - Öppna webbläsarens Developer Tools och klicka runt lite. Oroa dig inte för att förstå allt bli bara bekant med vad som finns där.
**Gå med i gemenskapen:** **Gå med i gemenskapen:**
- Följ några utvecklargemenskaper på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsgemenskapen är otroligt mottaglig för nykomlingar! - Följ några utvecklargemenskaper på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmerargemenskapen är otroligt välkomnande mot nybörjare!
- Titta på några nybörjarvänliga kodningsvideor på YouTube. Det finns så många fantastiska skapare där ute som minns hur det var att börja. - Titta på några beginner-vänliga kodningsvideor på YouTube. Det finns så många bra skapare där ute som minns hur det var att börja.
- Överväg att gå med i lokala meetups eller online-gemenskaper. Tro mig, utvecklare älskar att hjälpa nybörjare! - Överväg att gå med i lokala meetups eller online-gemenskaper. Tro mig, utvecklare älskar att hjälpa nykomlingar!
> 🎯 **Lyssna, här är vad jag vill att du ska komma ihåg**: Du förväntas inte bli en kodningsmagiker över en natt! Just nu håller du bara på att lära känna den här fantastiska nya världen som du snart ska vara en del av. Ta din tid, njut av resan, och kom ihåg varje utvecklare du beundrar satt en gång precis där du är nu, kände sig exalterad och kanske lite överväldigad. Det är helt normalt, och det betyder att du gör rätt! > 🎯 **Lyssna, det här vill jag att du ska komma ihåg**: Du förväntas inte bli en kodningsmagiker över en natt! Just nu lär du dig bara känna till denna fantastiska nya värld som du snart ska vara en del av. Ta din tid, njut av resan, och kom ihåg varje utvecklare du beundrar satt en gång precis där du sitter nu, kände sig exalterad och kanske lite överväldigad. Det är helt normalt och betyder att du gör rätt!
@ -787,70 +787,70 @@ Du har täckt mycket idag, och det är något att vara stolt över! Nu kommer de
[Reading the Docs](assignment.md) [Reading the Docs](assignment.md)
> 💡 **Lite push för din uppgift**: Jag skulle verkligen vilja se dig utforska verktyg vi ännu inte täckt! Hoppa över redigerare, webbläsare och kommandoradsverktyg som vi redan pratat om det finns en hel fantastisk värld av utvecklingsverktyg där ute som bara väntar på att bli upptäckta. Leta efter sådana som aktivt underhålls och har livliga, hjälpsamma gemenskaper (de brukar ha de bästa guiderna och de mest stöttande människorna när du oundvikligen fastnar och behöver en vänlig hand). > 💡 **En liten knuff för din uppgift**: Jag skulle verkligen älska att se dig utforska några verktyg vi inte har gått igenom än! Hoppa över redigerare, webbläsare och kommandoradsverktyg vi redan pratat om det finns en hel otrolig värld av fantastiska utvecklingsverktyg där ute som bara väntar på att upptäckas. Leta efter sådana som är aktivt underhållna och har livfulla, hjälpsamma gemenskaper (de har ofta de bästa guiderna och de mest stödjande människorna när du oundvikligen fastnar och behöver en vänlig hjälpande hand).
--- ---
## 🚀 Din programmeringsresa tidslinje ## 🚀 Din programmeringsresa tidslinje
### ⚡ **Vad du kan göra de närmaste 5 minuterna** ### ⚡ **Vad du kan göra de närmsta 5 minuterna**
- [ ] Bokmärk 2-3 webbplatser för programmeringsspråk som fångade din uppmärksamhet - [ ] Bokmärk 2-3 webbplatser för programmeringsspråk som fångade ditt intresse
- [ ] Ladda ner Visual Studio Code om du inte redan gjort det - [ ] Ladda ner Visual Studio Code om du inte redan gjort det
- [ ] Öppna din webbläsares DevTools (F12) och klicka runt på en webbplats - [ ] Öppna webbläsarens DevTools (F12) och klicka runt på valfri webbplats
- [ ] Gå med i en programmeringsgemenskap (Dev.to, Reddit r/webdev eller Stack Overflow) - [ ] Gå med i en programmerargemenskap (Dev.to, Reddit r/webdev, eller Stack Overflow)
### ⏰ **Vad du kan åstadkomma den här timmen** ### ⏰ **Vad du kan åstadkomma denna timme**
- [ ] Gör quizzen efter lektionen och reflektera över dina svar - [ ] Gör quizet efter lektionen och reflektera över dina svar
- [ ] Ställ in VS Code med GitHub Copilot-tillägget - [ ] Ställ in VS Code med GitHub Copilot-tillägget
- [ ] Prova ett "Hello World"-exempel i 2 olika programmeringsspråk online - [ ] Prova ett "Hello World"-exempel i 2 olika programmeringsspråk online
- [ ] Titta på en "En dag i en utvecklares liv" video på YouTube - [ ] Titta på en "En dag i en utvecklares liv"-video på YouTube
- [ ] Börja din programmeringsspråksdetektivarbete (från utmaningen) - [ ] Börja ditt detektivjobb kring programmeringsspråk (från utmaningen)
### 📅 **Ditt veckolånga äventyr** ### 📅 **Ditt veckolånga äventyr**
- [ ] Gör klart uppgiften och utforska 3 nya utvecklingsverktyg - [ ] Slutför uppgiften och utforska 3 nya utvecklingsverktyg
- [ ] Följ 5 utvecklare eller programmeringskonton på sociala medier - [ ] Följ 5 utvecklare eller programmeringskonton på sociala medier
- [ ] Försök bygga något litet i CodePen eller Replit (även bara "Hello, [Ditt namn]!") - [ ] Försök bygga något litet i CodePen eller Replit (även bara "Hello, [Ditt namn]!")
- [ ] Läs ett utvecklarblogginlägg om någons kodningsresa - [ ] Läs ett utvecklarblogginlägg om någons kodningsresa
- [ ] Gå med i ett virtuellt meetup eller titta på ett programmeringsföredrag - [ ] Gå med i en virtuell meetup eller titta på ett programmeringstal
- [ ] Börja lära dig ditt valda språk med online-tutorials - [ ] Börja lära dig ditt valda språk med online-tutorials
### 🗓️ **Din månadslånga förvandling** ### 🗓️ **Din månadslånga förvandling**
- [ ] Bygg ditt första lilla projekt (ännu en enkel webbsida räknas!) - [ ] Bygg ditt första lilla projekt (även en enkel webbsida räknas!)
- [ ] Bidra till ett open-source-projekt (börja med dokumentationsfixar) - [ ] Bidra till ett open-source-projekt (börja med dokumentationsfixar)
- [ ] Mentorskap någon som precis börjat sin programmeringsresa - [ ] Mentora någon som precis börjat sin programmeringsresa
- [ ] Skapa din utvecklarportfolio-webbplats - [ ] Skapa din utvecklarportfolio-webbplats
- [ ] Koppla ihop med lokala utvecklargemenskaper eller studiegrupper - [ ] Anslut med lokala utvecklargemenskaper eller studiegrupper
- [ ] Börja planera din nästa lärandemilstolpe - [ ] Börja planera din nästa lärandemilstolpe
### 🎯 **Slutlig reflektion** ### 🎯 **Slutgiltig reflektion**
**Innan du går vidare, ta en stund för att fira:** **Innan du går vidare, ta en stund att fira:**
- Vad är en sak med programmering som gjorde dig exalterad idag? - Vad är en sak med programmering som gjorde dig exalterad idag?
- Vilket verktyg eller koncept vill du utforska först? - Vilket verktyg eller koncept vill du utforska först?
- Hur känns det att starta denna programmeringsresa? - Hur känner du inför att börja denna programmeringsresa?
- Vilken fråga skulle du vilja ställa en utvecklare just nu? - Vilken fråga skulle du vilja ställa en utvecklare just nu?
```mermaid ```mermaid
journey journey
title Din Resa för att Bygga Självförtroende title Din Resa mot Ökat Självförtroende
section Idag section Idag
Nyfiken: 3: You Nyfiken: 3: You
Överväldigad: 4: You Överväldigad: 4: You
Uppspelt: 5: You Upphetsad: 5: You
section Denna Vecka section Denna Vecka
Utforskar: 4: You Utforskar: 4: You
Lär: 5: You Lärande: 5: You
Kopplar ihop: 4: You Ansluter: 4: You
section Nästa Månad section Nästa Månad
Bygger: 5: You Bygger: 5: You
Självsäker: 5: You Självsäker: 5: You
Hjälper Andra: 5: You Hjälper Andra: 5: You
``` ```
> 🌟 **Kom ihåg**: Varje expert var en gång en nybörjare. Varje senior utvecklare har känt precis som du gör nu exalterad, kanske lite överväldigad, och definitivt nyfiken på vad som är möjligt. Du är i fantastiskt sällskap, och den här resan kommer att bli otrolig. Välkommen till den underbara världen av programmering! 🎉 > 🌟 **Kom ihåg**: Varje expert var en gång en nybörjare. Varje senior utvecklare har känt precis som du gör just nu exalterad, kanske lite överväldigad, och definitivt nyfiken på vad som är möjligt. Du är i fantastiskt sällskap, och den här resan kommer att bli otrolig. Välkommen till den underbara världen av programmering! 🎉
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**: **Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungsspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller felaktiga tolkningar som uppstår från användningen av denna översättning. Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var vänlig observera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -2,36 +2,36 @@
## Projektöversikt ## Projektöversikt
Detta är ett utbildningsprogramsförråd för att lära ut grunderna i webbdesign till nybörjare. Kursplanen är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML. Detta är ett utbildningsmaterial för att lära ut grundläggande webbutveckling för nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Viktiga komponenter ### Nyckelkomponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler - **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska projekt**: Terrarium, Typningsspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent - **Praktiska projekt**: Terrarium, Typningsspel, Webbläsartillägg, Rymdspel, Bankapp, Kodeditor och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (för- och efter lektion) - **Interaktiva quiz**: 48 quiz med 3 frågor vardera (för- och efter-lektionsbedömningar)
- **Flerspråkigt stöd**: Automatiska översättningar för 50+ språk via GitHub Actions - **Flerspråkigt stöd**: Automatiska översättningar till 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt) - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt)
### Arkitektur ### Arkitektur
- Utbildningsförråd med lektionbaserad struktur - Utbildningsarkiv med lektioner organiserade per ämne
- Varje lektionsmapp innehåller README, kodexempel och lösningar - Varje lektionsmapp innehåller README, kodexempel och lösningar
- Fristående projekt i separata kataloger (quiz-app, olika lektionsprojekt) - Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator) - Översättningssystem via GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns tillgänglig som PDF - Dokumentation serveras via Docsify och finns tillgänglig som PDF
## Installationskommandon ## Setup-kommandon
Detta förråd är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt: Det här arkivet är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt:
### Huvudförrådets installation ### Huvudarkivets setup
```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
``` ```
### Quiz App installation (Vue 3 + Vite) ### Quiz App Setup (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
@ -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
# Sätt miljövariabeln GITHUB_TOKEN # Sätt GITHUB_TOKEN-miljövariabeln
python api.py python api.py
``` ```
## Utvecklingsflöde ## Utvecklingsarbetsflöde
### För innehållsbidragare ### För innehållsbidragare
1. **Fork:a förrådet** till ditt GitHub-konto 1. **Fork:a arkivet** till ditt GitHub-konto
2. **Klona din fork** lokalt 2. **Klona din fork** lokalt
3. **Skapa en ny gren** för dina ändringar 3. **Skapa en ny branch** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel 4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa eventuella kodändringar i relevanta projektkataloger 5. Testa eventuella kodändringar i relevanta projektkataloger
6. Skicka in pull requests enligt bidragsriktlinjerna 6. Skicka pull requests enligt riktlinjer för bidrag
### För elever ### För elever
1. Fork:a eller klona förrådet 1. Fork:a eller klona arkivet
2. Navigera till lektionskataloger i tur och ordning 2. Navigera genom lektionskatalogerna i ordning
3. Läs README-filer för varje lektion 3. Läs README-filer för varje lektion
4. Gör för-quiz på https://ff-quizzes.netlify.app/web/ 4. Gör för-lektion quiz på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexempel i lektionsmapparna 5. Arbeta igenom kodexempel i lektionsmappar
6. Genomför uppgifter och utmaningar 6. Slutför uppgifter och utmaningar
7. Avsluta med efter-quiz 7. Gör efter-lektion quiz
### Live-utveckling ### Live-utveckling
- **Dokumentation**: Kör `docsify serve` i rotkatalogen (port 3000) - **Dokumentation**: Kör `docsify serve` i roten (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-katalogen - **Quiz-app**: Kör `npm run dev` i quiz-app katalogen
- **Projekt**: Använd VS Codes Live Server-förlängning för HTML-projekt - **Projekt**: Använd VS Code Live Server-extension för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-katalog - **API-projekt**: Kör `npm start` i respektive API-katalog
## Testinstruktioner ## Testinstruktioner
@ -111,172 +111,172 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Kontrollera kodstilproblem npm run lint # Kontrollera kodstilproblem
npm run build # Verifiera att byggandet lyckas npm run build # Verifiera att bygget lyckas
``` ```
### Testning av Bank API ### Bank API-testning
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Kontrollera kodstilproblem npm run lint # Kontrollera efter kodstilproblem
node server.js # Verifiera att servern startar utan fel node server.js # Verifiera att servern startar utan fel
``` ```
### Allmän testmetod ### Allmän testmetod
- Detta är ett utbildningsförråd utan omfattande automatiska tester - Detta är ett utbildningsarkiv utan omfattande automatiserade tester
- Manuella tester fokuserar på: - Manuell testning fokuserar på:
- Kodexempel som körs utan fel - Att kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt - Att länkar i dokumentationen fungerar korrekt
- Projekten byggs färdigt utan fel - Att projekt byggs utan problem
- Exemplen följer bästa praxis - Att exempel följer bästa praxis
### Kontroll före inskickning ### Kontroll före inskickning
- Kör `npm run lint` i kataloger med package.json - Kör `npm run lint` i kataloger med package.json
- Verifiera att markdown-länkar är giltiga - Verifiera att markdown-länkar är giltiga
- Testa kodexempel i webbläsare eller Node.js - Testa kodexempel i webbläsare eller Node.js
- Kontrollera att översättningar behåller korrekt struktur - Kontrollera att översättningar behåller korrekt struktur
## Kodstilriktlinjer ## Kodstilriktlinjer
### JavaScript ### JavaScript
- Använd modern ES6+ syntax - Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer i projekten - Följ standard ESLint-konfigurationer som finns i projekten
- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet - Använd meningsfulla variabel- och funktionsnamn för tydlighet i utbildningen
- Lägg till kommentarer som förklarar koncept för elever - Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat - Formatera med Prettier där det är konfigurerat
### HTML/CSS ### HTML/CSS
- Semantiska HTML5-element - Semantiska HTML5-element
- Responsiv designprinciper - Responsiv designprinciper
- Klara klassnamnskonventioner - Tydlig namngivning av klasser
- Kommentarer som förklarar CSS-tekniker för elever - Kommentarer som förklarar CSS-tekniker för elever
### Python ### Python
- PEP 8 stilriktlinjer - PEP 8 stilriktlinjer
- Klara, pedagogiska kodexempel - Tydliga, pedagogiska kodexempel
- Typangivelser där det är hjälpsamt för inlärning - Typangivelser där det är hjälpsamt för inlärningen
### Markdown-dokumentation ### Markdown-dokumentation
- Klar rubrikhierarki - Klar rubrikhierarki
- Kodblock med språkangivelse - Kodblock med språkspecifikation
- Länkar till ytterligare resurser - Länkar till ytterligare resurser
- Skärmdumpar och bilder i `images/`-kataloger - Skärmbilder och bilder i `images/`-kataloger
- Alternativtext för bilder för tillgänglighet - Alt-text för bilder för tillgänglighet
### Filorganisation ### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, osv) - Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/` kataloger - Varje projekt har `solution/` och ofta `start/` eller `your-work/`-kataloger
- Bilder lagras i lektionsspecifika `images/` mappar - Bilder lagras i lektonspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/` struktur - Översättningar i `translations/{language-code}/`-struktur
## Build och Utplacering ## Bygg och distribution
### Quiz App-utplacering (Azure Static Web Apps) ### Quiz App distribution (Azure Static Web Apps)
Quiz-appen är konfigurerad för utplacering på Azure Static Web Apps: Quiz-appen är konfigurerad för distribution via Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Skapar dist/ mappen npm run build # Skapar mappen dist/
# Distribuerar via GitHub Actions arbetsflöde vid push till main # Distribuerar via GitHub Actions-arbetsflöde vid push till main
``` ```
Azure Static Web Apps-konfiguration: Azure Static Web Apps-konfiguration:
- **Appplats**: `/quiz-app` - **Appplats**: `/quiz-app`
- **Utmatningsplats**: `dist` - **Utmatningsplats**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av dokumentations-PDF ### Dokumentations-PDF-generering
```bash ```bash
npm install # Installera docsify-to-pdf npm install # Installera docsify-to-pdf
npm run convert # Generera PDF från docs npm run convert # Generera PDF från docs
``` ```
### Docsify-dokumentation ### Docsify dokumentation
```bash ```bash
npm install -g docsify-cli # Installera Docsify globalt npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Servera på localhost:3000 docsify serve # Servera på localhost:3000
``` ```
### Projekt-specifika byggsteg ### Projekt-specifika byggen
Varje projektkatalog kan ha egen byggprocess: Varje projektkatalog kan ha sin egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket - Vue-projekt: `npm run build` skapar produktionspaket
- Statiska projekt: Inget byggsteg, servera filer direkt - Statiska projekt: Ingen byggfas, serva filer direkt
## Riktlinjer för Pull Requests ## Pull Request-riktlinjer
### Titelformat ### Titelformat
Använd klara, beskrivande titlar som anger ändringsområde: Använd klara, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X` - `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lesson-3] Rätta stavfel i terrarium-projekt` - `[Lesson-3] Rättelse av stavfel i terrarium-projektet`
- `[Translation] Lägg till spansk översättning för lektion 5` - `[Translation] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera installationsinstruktioner` - `[Docs] Uppdatera setup-instruktioner`
### Obligatoriska kontroller ### Obligatoriska kontroller
Innan PR skickas: Innan du skickar en PR:
1. **Kodkvalitet**: 1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektkataloger - Kör `npm run lint` i berörda projektkataloger
- Åtgärda alla lint-varningar och fel - Åtgärda alla lintvarningar och -fel
2. **Byggverifiering**: 2. **Byggverifiering**:
- Kör `npm run build` där applicerbart - Kör `npm run build` om tillämpligt
- Säkerställ inga byggfel - Se till att inga byggfel uppstår
3. **Länkverifiering**: 3. **Länkvalidering**:
- Testa alla markdown-länkar - Testa alla markdown-länkar
- Verifiera att bildreferenser fungerar - Verifiera att bildreferenser fungerar
4. **Innehållsgranskning**: 4. **Innehållsgranskning**:
- Korrekturläs stavning och grammatik - Korrekturläs rättstavning och grammatik
- Säkerställ att kodexempel är korrekta och pedagogiska - Kontrollera att kodexempel är korrekta och pedagogiska
- Verifiera att översättningar bevarar ursprunglig betydelse - Verifiera att översättningar behåller ursprungligt innehåll
### Bidragskrav ### Bidragskrav
- Godkänn Microsoft CLA (automatisk kontroll vid första PR) - Acceptera Microsoft CLA (automatisk kontroll vid första PR)
- Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer - Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer
- Referera ärendenummer i PR-beskrivning vid tillämplighet - Referera till ärendenummer i PR-beskrivning vid behov
### Granskningsprocess ### Granskningsprocess
- PR granskas av underhållare och community - PR granskas av underhållare och community
- Pedagogisk tydlighet prioriteras - Pedagogisk tydlighet prioriteras
- Kodexempel ska följa aktuella bästa praxis - Kodexempel ska följa aktuell bästa praxis
- Översättningar granskas för noggrannhet och kulturrelevans - Översättningar granskas för noggrannhet och kulturell anpassning
## Översättningssystem ## Översättningssystem
### Automatisk översättning ### Automatisk översättning
- Använder GitHub Actions med co-op-translator workflow - Använder GitHub Actions med co-op-translator arbetsflöde
- Översätter automatiskt till 50+ språk - Översätter till 50+ språk automatiskt
- Källfiler i huvudkataloger - Källfiler i huvuddirektiv
- Översatta filer i `translations/{language-code}/` kataloger - Översatta filer i `translations/{language-code}/` kataloger
### Lägga till manuell översättningsförbättring ### Lägg till manuella översättningsförbättringar
1. Hitta fil i `translations/{language-code}/` 1. Lokalisera fil i `translations/{language-code}/`
2. Gör förbättringar utan att ändra struktur 2. Gör förbättringar med bevarad struktur
3. Säkerställ att kodexempel förblir fungerande 3. Säkerställ att kodexempel förblir funktionella
4. Testa eventuellt lokaliserat quizinnehåll 4. Testa eventuellt lokaliserat quizinnehåll
### Översättningsmetadata ### Översättningsmetadata
Översatta filer innehåller metadatahuvud: Översatta filer inkluderar metadata-header:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
--> -->
``` ```
## Felsökning och Problemlösning ## Felsökning och problemlösning
### Vanliga problem ### Vanliga problem
**Quiz-appen startar inte**: **Quiz-appen startar inte**:
- Kontrollera Node.js version (v14+ rekommenderas) - Kontrollera Node.js version (v14+ rekommenderas)
- Radera `node_modules` och `package-lock.json`, kör `npm install` igen - Radera `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera portkonflikter (standard: Vite använder port 5173) - Kontrollera portkonflikter (standard: Vite använder port 5173)
**API-servern startar inte**: **API-server startar inte**:
- Kontrollera att Node.js version är tillräcklig (node >=10) - Säkerställ att Node.js version är tillräcklig (node >=10)
- Kontrollera att porten inte redan används - Kontrollera om port redan används
- Säkerställ alla beroenden installerade med `npm install` - Kontrollera att alla beroenden installerats med `npm install`
**Webbläsartillägg laddas inte**: **Webbläsartillägg laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad - Kontrollera att manifest.json är korrekt formaterad
- Granska webbläsarkonsol för fel - Kontrollera webbläsarkonsolen för fel
- Följ webbläsarspecifika installationsanvisningar - Följ webbläsarspecifika installationsanvisningar för tillägg
**Problem med Python-chattprojekt**: **Problem med Python chattprojekt**:
- Säkerställ att OpenAI-paket är installerat: `pip install openai` - Säkerställ att OpenAI-paket installerats: `pip install openai`
- Kontrollera att GITHUB_TOKEN miljövariabel är satt - Kontrollera att miljövariabel GITHUB_TOKEN är satt
- Granska GitHub Models åtkomstbehörigheter - Kontrollera behörigheter för GitHub Models
**Docsify serverar inte dokumentation**: **Docsify serverar inte dokumentation**:
- Installera docsify-cli globalt: `npm install -g docsify-cli` - Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från förrådets rotkatalog - Kör från arkivets rotkatalog
- Kontrollera att `docs/_sidebar.md` finns - Kontrollera att `docs/_sidebar.md` finns
### Tips för utvecklingsmiljö ### Tips för utvecklingsmiljö
- Använd VS Code med Live Server-förlängning för HTML-projekt - Använd VS Code med Live Server-extension för HTML-projekt
- Installera ESLint och Prettier-förlängningar för konsekvent formatering - Installera ESLint och Prettier extensions för konsekvent formatering
- Använd webbläsarens DevTools för JavaScript-felsökning - Använd browser DevTools för felsökning av JavaScript
- För Vue-projekt, installera Vue DevTools webbläsartillägg - För Vue-projekt, installera Vue DevTools browser extension
### Prestandahänsyn ### Prestandahänsyn
- Stort antal översatta filer (50+ språk) gör fulla kloner stora - Stort antal översatta filer (50+ språk) gör fulla kloner stora
- Använd grundklon om du bara arbetar med innehåll: `git clone --depth 1` - Använd shallow clone om du bara arbetar med innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar när du jobbar på engelskt innehåll - Exkludera översättningar från sökningar vid arbete med engelskt innehåll
- Byggprocesser kan vara långsamma vid första körning (npm install, Vite build) - Byggprocesser kan vara långsamma vid första körning (npm install, Vite build)
## Säkerhetshänsyn ## Säkerhetshänsyn
### Miljövariabler ### Miljövariabler
- API-nycklar ska aldrig checkas in i förrådet - API-nycklar ska aldrig committas till arkivet
- Använd `.env`-filer (redan i `.gitignore`) - Använd `.env`-filer (som redan finns i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektens README-filer - Dokumentera nödvändiga miljövariabler i projektens README-filer
### Python-projekt ### Python-projekt
- Använd virtuella miljöer: `python -m venv venv` - Använd virtuella miljöer: `python -m venv venv`
- Håll beroenden uppdaterade - Håll beroenden uppdaterade
- GitHub-tokens bör ha minimala nödvändiga behörigheter - GitHub-token ska ha minimala nödvändiga behörigheter
### GitHub Models åtkomst ### GitHub Models åtkomst
- Personliga åtkomsttokens (PAT) krävs för GitHub Models - Personliga access tokens (PAT) krävs för GitHub Models
- Tokens ska sparas som miljövariabler - Tokens ska lagras som miljövariabler
- Aldrig checka in tokens eller inloggningsuppgifter - Committa aldrig tokens eller inloggningsuppgifter
## Ytterligare anteckningar ## Ytterligare anteckningar
### Målgrupp ### Målgrupp
- Kompletta nybörjare inom webbdesign - Totala nybörjare i webbutveckling
- Studenter och självstudier - Studenter och självstudier
- Lärare som använder kursplanen i klassrum - Lärare som använder kursplanen i klassrum
- Innehållet är utformat för tillgänglighet och gradvis färdighetsutveckling - Innehåll är designat för tillgänglighet och gradvis färdighetsuppbyggnad
### Pedagogisk filosofi ### Pedagogisk filosofi
- Projektbaserat lärande - Projektbaserat lärande
- Frekventa kunskapskontroller (quiz) - Frekventa kunskapskontroller (quiz)
- Praktiska kodningsövningar - Praktiska kodningsövningar
- Exempel på verkliga tillämpningar - Exempel från verkliga tillämpningar
- Fokus på grunder innan ramverk - Fokus på grundläggande principer innan ramverk
### Förrådets underhåll ### Underhåll av arkivet
- Aktiv community av elever och bidragsgivare - Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll - Regelbundna uppdateringar av beroenden och innehåll
- Ärenden och diskussioner övervakas av underhållare - Ärenden och diskussioner bevakas av underhållare
- Översättningsuppdateringar automatiseras via GitHub Actions - Översättningsuppdateringar automatiseras via GitHub Actions
### Relaterade resurser ### Relaterade resurser
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/) - [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/) - [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner tillgängliga - Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner finns
### Arbeta med specifika projekt ### Arbeta med specifika projekt
För detaljerade instruktioner om enskilda projekt, se README-filer i: För detaljerade instruktioner om enskilda projekt, se README-filerna i:
- `quiz-app/README.md` - Vue 3 quiz-applikation - `quiz-app/README.md` - Vue 3 quizapplikation
- `7-bank-project/README.md` - Bankapplikation med autentisering - `7-bank-project/README.md` - Bankapplikation med autentisering
- `5-browser-extension/README.md` - Webbläsartilläggsutveckling - `5-browser-extension/README.md` - Utveckling av webbläsartillägg
- `6-space-game/README.md` - Canvas-baserat spelutveckling - `6-space-game/README.md` - Canvas-baserat spel
- `9-chat-project/README.md` - AI chattassistentprojekt - `9-chat-project/README.md` - AI-chattassistentprojekt
### Monorepo-struktur ### Monorepo-struktur
Även om det inte är ett traditionellt monorepo innehåller detta förråd flera oberoende projekt: Även om detta inte är ett traditionellt monorepo, innehåller arkivet flera oberoende projekt:
- Varje lektion är självständig - Varje lektion är fristående
- Projekten delar inte beroenden - Projekten delar inga beroenden
- Arbeta på individuella projekt utan att påverka andra - Arbeta på individuella projekt utan att påverka andra
- Klona hela förrådet för hela kursplanens upplevelse - Klona hela arkivet för full kursplanserfarenhet
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**: **Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var vänlig observera att automatiska översättningar kan innehålla fel eller brister. Originaldokumentet på dess ursprungliga språk ska betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning. Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess modersmål bör anses vara den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{ {
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8", "original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-06T12:11:30+00:00", "translation_date": "2026-03-27T18:28:03+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "th" "language_code": "th"
}, },
@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T12:19:35+00:00", "translation_date": "2026-03-27T18:36:47+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "th" "language_code": "th"
}, },

@ -2,107 +2,107 @@
## ภาพรวมโครงการ ## ภาพรวมโครงการ
นี่คือที่เก็บหลักสูตรการศึกษาสำหรับการสอนพื้นฐานการพัฒนาเว็บสำหรับผู้เริ่มต้น หลักสูตรนี้เป็นหลักสูตรครบวงจร 12 สัปดาห์ที่พัฒนาโดย Microsoft Cloud Advocates โดยมีบทเรียนเชิงปฏิบัติทั้งหมด 24 บทเรียน ครอบคลุม JavaScript, CSS และ HTML นี่คือรีโพซิอรีหลักสูตรการศึกษาสำหรับการสอนพื้นฐานการพัฒนาเว็บให้กับผู้เริ่มต้น หลักสูตรนี้เป็นคอร์สแบบครบถ้วนใช้เวลาศึกษา 12 สัปดาห์ ซึ่งพัฒนาโดย Microsoft Cloud Advocates โดยมีบทเรียนปฏิบัติ 24 บทที่ครอบคลุม JavaScript, CSS, และ HTML
### ส่วนประกอบหลัก ### องค์ประกอบหลัก
- **เนื้อหาการศึกษา**: บทเรียนที่จัดเป็นโครงสร้างจำนวน 24 บทเรียนแบ่งเป็นโมดูลตามโปรเจกต์ - **เนื้อหาการศึกษา**: บทเรียนที่จัดโครงสร้าง 24 บท แบ่งออกเป็นโมดูลตามโครงการ
- **ปรเจกต์เชิงปฏิบัติ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor และ AI Chat Assistant - **ครงการเชิงปฏิบัติ**: Terrarium, เกมพิมพ์ดีด, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอปธนาคาร, ตัวแก้ไขโค้ด และผู้ช่วยแชท AI
- **แบบทดสอบแบบโต้ตอบ**: แบบทดสอบ 48 ชุด แต่ละชุดมี 3 คำถาม (ก่อน/หลังบทเรียน) - **แบบทดสอบเชิงโต้ตอบ**: แบบทดสอบ 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
## คำสั่งการตั้งค่า ## คำสั่งตั้งค่า
ที่เก็บนี้เน้นสำหรับการบริโภคเนื้อหาการศึกษาเป็นหลัก สำหรับการทำงานกับโปรเจกต์เฉพาะ: รีโพซิอรีนี้เน้นสำหรับการบริโภคเนื้อหาการศึกษาเป็นหลัก สำหรับการทำงานกับโครงการเฉพาะ:
### การตั้งค่าหลักของที่เก็บ ### การตั้งค่าหลักของรีโพซิอร
```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
``` ```
### การตั้งค่า Quiz App (Vue 3 + Vite) ### ตั้งค่า Quiz App (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # เริ่มเซิร์ฟเวอร์พัฒนา npm run dev # เริ่มเซิร์ฟเวอร์พัฒนา
npm run build # สร้างสำหรับการผลิต npm run build # สร้างสำหรับโปรดักชัน
npm run lint # รัน ESLint npm run lint # รัน ESLint
``` ```
### Bank Project 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 # เริ่มเซิร์ฟเวอร์ API npm start # เริ่มเซิร์ฟเวอร์ API
npm run lint # รัน ESLint npm run lint # รัน ESLint
npm run format # ฟอร์แมตด้วย Prettier npm run format # จัดรูปแบบด้วย Prettier
``` ```
### โปรเจกต์ Browser Extension ### โครงการส่วนขยายเบราว์เซอร์
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# ปฏิบัติตามคำแนะนำการโหลดส่วนขยายเฉพาะของเบราว์เซอร์ # ทำตามคำแนะนำการโหลดส่วนขยายเฉพาะเบราว์เซอร์
``` ```
### โปรเจกต์ Space Game ### โครงการเกมอวกาศ
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# เปิดไฟล์ index.html ในเบราว์เซอร์หรืใช้ Live Server # เปิดไฟล์ index.html ในเบราว์เซอร์หรืใช้ Live Server
``` ```
### โปรเจกต์ Chat (Python Backend) ### โครงการแชท (Backend ด้วย Python)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
pip install openai pip install openai
# ตั้งค่าตัวแปรแวดล้อม GITHUB_TOKEN # ตั้งค่าตัวแปรสภาพแวดล้อม GITHUB_TOKEN
python api.py python api.py
``` ```
## กระบวนการพัฒนา ## เวิร์กโฟลว์การพัฒนา
### สำหรับผู้ที่มีส่วนร่วมเนื้อหา ### สำหรับผู้ร่วมสร้างเนื้อหา
1. **Fork ที่เก็บนี้** ไปยังบัญชี GitHub ของคุณ 1. **โคลนรีโพซิทอรี** ไปยังบัญชี GitHub ของคุณ
2. **Clone fork ของคุณ** มาที่เครื่องของคุณ 2. **โคลนโฟลว์กของคุณ** ลงในเครื่อง
3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลงของคุณ 3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลงของคุณ
4. แก้ไขเนื้อหาบทเรียนหรือโค้ดตัวอย่าง 4. แก้ไขเนื้อหาบทเรียนหรือตัวอย่างโค้ด
5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโปรเจกต์ที่เกี่ยวข้อง 5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโครงการที่เกี่ยวข้อง
6. ส่ง pull request ตามแนวทางการมีส่วนร่วม 6. ส่งคำขอดึง (pull request) ตามแนวทางการมีส่วนร่วม
### สำหรับผู้เรียน ### สำหรับผู้เรียน
1. Fork หรือ clone ที่เก็บนี้ 1. โคลนหรือ Fork รีโพซิทอรี
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. ทำแบบทดสอบหลังบทเรียน
### การพัฒนาแบบสด ### การพัฒนาแบบสด (Live Development)
- **เอกสาร**: รัน `docsify serve` ในโฟลเดอร์ราก (พอร์ต 3000) - **เอกสาร**: รัน `docsify serve` ใน root (พอร์ต 3000)
- **Quiz App**: รัน `npm run dev` ในไดเรกทอรี quiz-app - **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,8 +110,8 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # ตรวจสอบปัญหาเกี่ยวกับรูปแบบโค้ด npm run lint # ตรวจสอบปัญหาสไตล์โค้ด
npm run build # ยืนยันการสร้างที่สำเร็จ npm run build # ยืนยันการสร้างสำเร็จ
``` ```
### การทดสอบ Bank API ### การทดสอบ Bank API
@ -119,64 +119,64 @@ npm run build # ยืนยันการสร้างที่สำ
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # ตรวจสอบปัญหาสไตล์โค้ด npm run lint # ตรวจสอบปัญหาสไตล์โค้ด
node server.js # ตรวจสอบว่าเซิร์ฟเวอร์เริ่มต้นโดยไม่มีข้อผิดพลาดไหม node server.js # ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์เริ่มทำงานโดยไม่มีข้อผิดพลาด
``` ```
### แนวทางการทดสอบทั่วไป ### วิธีการทดสอบทั่วไป
- นี่คือที่เก็บเอกสารการศึกษาที่ไม่มีการทดสอบอัตโนมัติครอบคลุม - นี่คือรีโพซิทอรีเพื่อการศึกษา ไม่มีการทดสอบอัตโนมัติครบถ้วน
- การทดสอบด้วยตนเองเน้นที่: - การทดสอบด้วยตนเองมุ่งเน้นที่:
- ตัวอย่างโค้ดรันได้โดยไม่มีข้อผิดพลาด - ตัวอย่างโค้ดทำงานไม่มีข้อผิดพลาด
- ลิงก์ในเอกสารทำงานได้ถูกต้อง - ลิงก์ในเอกสารทำงานได้ถูกต้อง
- การสร้างโปรเจกต์สำเร็จ - การสร้างโปรเจกต์สำเร็จ
- ตัวอย่างเป็นไปตามแนวทางปฏิบัติที่ดีที่สุด - ตัวอย่างตามแนวทางปฏิบัติที่ดีที่สุด
### การตรวจสอบก่อนส่ง ### การตรวจสอบก่อนส่ง
- รัน `npm run lint` ในไดเรกทอรีที่มี package.json - รัน `npm run lint` ในไดเรกทอรีที่มี package.json
- ตรวจสอบลิงก์ markdown ให้ถูกต้อง - ตรวจสอบลิงก์มาร์กดาวน์ว่าใช้งานได้
- ทดสอบตัวอย่างโค้ดในเบราว์เซอร์หรือ Node.js - ทดสอบตัวอย่างโค้ดในเบราว์เซอร์หรือ Node.js
- ตรวจสอบว่าแปลภาษายังคงโครงสร้างถูกต้อง - ตรวจสอบการแปลว่ารักษาโครงสร้างถูกต้อง
## แนวทางการเขียนโค้ด ## แนวทางการเขียนโค้ด
### JavaScript ### JavaScript
- ใช้ไวยากรณ์ ES6+ สมัยใหม่ - ใช้ไวยากรณ์ ES6+ ที่ทันสมัย
- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่ให้ไว้ในโปรเจกต์ - ปฏิบัติตามการตั้งค่า ESLint มาตรฐานในโปรเจกต์
- ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความชัดเจนในการศึกษา - ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความชัดเจนทางการศึกษา
- เพิ่มคอมเมนต์อธิบายแนวคิดสำหรับผู้เรียน - ใส่คอมเมนต์อธิบายแนวคิดสำหรับผู้เรียน
- จัดรูปแบบด้วย Prettier เมื่อกำหนดไว้ - จัดรูปแบบด้วย Prettier เมื่อถูกตั้งค่า
### HTML/CSS ### HTML/CSS
- ใช้ HTML5 อย่างมีความหมาย - ใช้ส่วนประกอบ semantic HTML5
- หลักการออกแบบตอบสนอง - หลักการออกแบบตอบสนอง (Responsive)
- การตั้งชื่อคลาสที่ชัดเจน - การตั้งชื่อคลาสที่ชัดเจน
- คอมเมนต์อธิบายเทคนิค CSS สำหรับผู้เรียน - คอมเมนต์อธิบายเทคนิค CSS สำหรับผู้เรียน
### Python ### Python
- ปฏิบัติตามแนวทางสไตล์ PEP 8 - ปฏิบัติตามแนวทางสไตล์ PEP 8
- ตัวอย่างโค้ดที่ชัดเจนและเน้นการศึกษา - ตัวอย่างโค้ดที่ชัดเจนและใช้เพื่อการศึกษา
- ใช้ type hints เมื่อช่วยให้เรียนรู้ได้ดีขึ้น - ใช้การบอกประเภทข้อมูล (type hints) เมื่อเป็นประโยชน์
### เอกสาร Markdown ### เอกสารมาร์กดาวน์
- โครงสร้างหัวข้อที่ชัดเจน - โครงสร้างหัวข้อที่ชัดเจน
- บล็อกโค้ดระบุภาษา - บล็อกโค้ดที่ระบุภาษาชัดเจน
- ลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม - ลิงก์ไปยังทรัพยากรเพิ่มเติม
- รูปภาพและสกรีนช็อตในไดเรกทอรี `images/` - ภาพหน้าจอและรูปภาพในไดเรกทอรี `images/`
- ข้อความ alt สำหรับภาพเพื่อการเข้าถึง - ข้อความ alt สำหรับภาพเพื่อการเข้าถึง
### การจัดระเบียบไฟล์ ### การจัดระเบียบไฟล์
- บทเรียนเรียงลำดับหมายเลขต่อเนื่อง (เช่น 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}/`
## การสร้างและปรับใช้ ## การสร้างและการปรับใช้
### การปรับใช้ Quiz App (Azure Static Web Apps) ### การปรับใช้ Quiz App (Azure Static Web Apps)
@ -185,19 +185,19 @@ quiz-app ถูกตั้งค่าสำหรับการปรับ
```bash ```bash
cd quiz-app cd quiz-app
npm run build # สร้างโฟลเดอร์ dist/ npm run build # สร้างโฟลเดอร์ dist/
# นำส่งผ่านเวิร์กโฟลว์ GitHub Actions เมื่อมีการ push ไปที่ main # ปล่อยใช้งานผ่าน workflow ของ GitHub Actions เมื่อมีการ push ไปยัง 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`
### การสร้าง PDF เอกสาร ### การสร้างเอกสาร PDF
```bash ```bash
npm install # ติดตั้ง docsify-to-pdf npm install # ติดตั้ง docsify-to-pdf
npm run convert # สร้าง PDF จากเอกสาร npm run convert # สร้าง PDF จาก docs
``` ```
### เอกสาร Docsify ### เอกสาร Docsify
@ -207,74 +207,76 @@ npm install -g docsify-cli # ติดตั้ง Docsify ทั่วระ
docsify serve # ให้บริการที่ localhost:3000 docsify serve # ให้บริการที่ localhost:3000
``` ```
### การสร้างโปรเจกต์เฉพาะ ### การสร้างโครงการเฉพาะ
แต่ละโปรเจกต์อาจมีขั้นตอนการสร้างของตัวเอง: แต่ละโฟลเดอร์โครงการอาจมีขั้นตอนการสร้างของตนเอง:
- โปรเจกต์ Vue: `npm run build` สร้าง bundle สำหรับโปรดักชัน - โปรเจกต์ 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:
1. **คุณภาพโค้ด**: 1. **คุณภาพของโค้ด**:
- รัน `npm run lint` ในไดเรกทอรีโปรเจกต์ที่ได้รับผลกระทบ - รัน `npm run lint` ในไดเรกทอรีโครงการที่เกี่ยวข้อง
- แก้ไขข้อผิดพลาดและคำเตือนทั้งหมด - แก้ไขข้อผิดพลาดและคำเตือนทั้งหมด
2. **การตรวจสอบการสร้าง**: 2. **การตรวจสอบการสร้าง**:
- รัน `npm run build` หากมี - รัน `npm run build` หากมี
- แน่ใจว่าไม่มีข้อผิดพลาดการสร้าง - ตรวจสอบว่าไม่มีข้อผิดพลาดการสร้าง
3. **การตรวจสอบลิงก์**: 3. **การตรวจสอบลิงก์**:
- ทดสอบลิงก์ markdown ทั้งหมด - ทดสอบลิงก์มาร์กดาวน์ทั้งหมด
- ตรวจสอบการอ้างอิงรูปภาพให้ถูกต้อง - ตรวจสอบการอ้างอิงภาพว่าทำงาน
4. **การตรวจสอบเนื้อหา**: 4. **การตรวจสอบเนื้อหา**:
- ตรวจทานคำสะกดและไวยากรณ์ - ตรวจทานคำผิดและไวยากรณ์
- ตรวจสอบว่าโค้ดตัวอย่างถูกต้องและเน้นการศึกษา - ตรวจสอบความถูกต้องและคุณภาพการศึกษาของตัวอย่างโค้ด
- ตรวจสอบการแปลว่ายังคงความหมายเดิม - ตรวจสอบการแปลให้คงความหมายเดิม
### ข้อกำหนดการมีส่วนร่วม ### ข้อกำหนดการมีส่วนร่วม
- ยอมรับข้อตกลง Microsoft CLA (ตรวจสอบอัตโนมัติใน PR แรก) - ยอมรับ Microsoft CLA (ตรวจอัตโนมัติครั้งแรกที่ส่ง PR)
- ปฏิบัติตาม [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - ปฏิบัติตาม [หลักจรรยาบรรณโอเพนซอร์สของ Microsoft](https://opensource.microsoft.com/codeofconduct/)
- ดูรายละเอียดใน [CONTRIBUTING.md](./CONTRIBUTING.md) - ดูรายละเอียดใน [CONTRIBUTING.md](./CONTRIBUTING.md)
- อ้างเลขที่ issue ในคำอธิบาย PR ถ้ามี - อ้างอิงหมายเลข issue ในคำอธิบาย PR หากมี
### กระบวนการตรวจสอบ ### กระบวนการรีวิว
- PR จะถูกตรวจสอบโดยผู้ดูแลและชุมชน - PR ถูกตรวจสอบโดยผู้ดูแลและชุมชน
- ให้ความสำคัญกับความชัดเจนทางการศึกษา - ให้ความสำคัญกับความชัดเจนทางการศึกษา
- ตัวอย่างโค้ดควรปฏิบัติตามแนวทางปัจจุบัน - ตัวอย่างโค้ดต้องเป็นไปตามแนวปฏิบัติที่ดีที่สุดปัจจุบัน
- ตรวจสอบการแปลในแง่ความถูกต้องและเหมาะสมทางวัฒนธรรม - การแปลได้รับการตรวจสอบความถูกต้องและเหมาะสมทางวัฒนธรรม
## ระบบแปลภาษา ## ระบบแปลภาษา
### การแปลอัตโนมัติ ### การแปลอัตโนมัติ
- ใช้ GitHub Actions พร้อม workflow 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. ทดสอบเนื้อหาแบบทดสอบที่แปลแล้ว
### เมตาดาต้าการแปล ### เมตาดาต้าการแปล
ไฟล์ที่แปลมีเมตาดาต้าหัวข้อ: ไฟล์แปลมีส่วนหัวของ metadata:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -291,115 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### ปัญหาทั่วไป ### ปัญหาทั่วไป
**แอป quiz เริ่มทำงานไม่ได้**: **Quiz app เริ่มต้นไม่สำเร็จ**:
- ตรวจสอบเวอร์ชัน 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 ไม่เริ่มทำงาน**: **API server เริ่มต้นไม่ขึ้น**:
- ตรวจสอบเวอร์ชัน Node.js ให้ตรงตามขั้นต่ำ (node >=10) - ตรวจสอบเวอร์ชัน Node.js ให้ตรงขั้นต่ำ (node >=10)
- ตรวจสอบว่าพอร์ตถูกใช้งานแล้วหรือไม่ - ตรวจสอบว่าพอร์ตถูกใช้งานแล้วหรือไม่
- ตรวจสอบว่าติดตั้ง dependencies ด้วย `npm install` ครบ - ตรวจสอบว่าติดตั้ง dependencies ด้วย `npm install` ครบถ้วน
**ส่วนขยายเบราว์เซอร์โหลดไม่ขึ้น**: **ส่วนขยายเบราว์เซอร์โหลดไม่ขึ้น**:
- ตรวจสอบว่า manifest.json ฟอร์แมตถูกต้อง - ตรวจสอบว่า manifest.json ถูกฟอร์แมตถูกต้อง
- ดูคอนโซลเบราว์เซอร์หาข้อผิดพลาด - ตรวจสอบคอนโซลเบราว์เซอร์เพื่อหาข้อผิดพลาด
- ปฏิบัติตามคำแนะนำการติดตั้งสำหรับเบราว์เซอร์แต่ละตัว - ปฏิบัติตามคำแนะนำติดตั้งส่วนขยายเฉพาะเบราว์เซอร์
**ปัญหาโปรเจกต์แชท Python**: **ปัญหาโครงการแชท Python**:
- ตรวจสอบว่าแพ็คเกจ OpenAI ติดตั้งแล้ว: `pip install openai` - ตรวจสอบว่าติดตั้งแพ็กเกจ OpenAI: `pip install openai`
- ตรวจสอบว่า setting ตัวแปรสภาพแวดล้อม GITHUB_TOKEN ถูกต้ - ตรวจสอบว่าตัวแปรสภาพแวดล้อม GITHUB_TOKEN ต้งค่าแล้ว
- ตรวจสอบสิทธิ์การเข้าถึง GitHub Models - ตรวจสอบสิทธิ์เข้าถึง GitHub Models
**Docsify ไม่ให้บริการเอกสาร**: **Docsify ไม่แสดงเอกสาร**:
- ติดตั้ง docsify-cli ทั่วโลก: `npm install -g docsify-cli` - ติดตั้ง docsify-cli ทั่วโลก: `npm install -g docsify-cli`
- รันจากไดเรกทอรีรากของที่เก็บ - รันจาก root ของรีโพซิทอรี
- ตรวจสอบว่าไฟล์ `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` - ใช้โคลนแบบตื้นถ้าทำงานกับเนื้อหาเท่านั้น: `git clone --depth 1`
- ยกเว้นการค้นหาในส่วนแปลเมื่อทำงานกับเนื้อหาอังกฤษ - ไม่รวมโฟลเดอร์แปลในการค้นหาเมื่อทำงานกับเนื้อหาภาษาอังกฤษ
- ขั้นตอนการสร้างอาจช้าในรันแรก (npm install, สร้าง Vite) - กระบวนการสร้างอาจช้าในรันแรก (npm install, สร้าง Vite)
## การพิจารณาด้านความปลอดภัย ## การพิจารณาด้านความปลอดภัย
### ตัวแปรสภาพแวดล้อม ### ตัวแปรสภาพแวดล้อม
- ห้าม commit คีย์ API ลงที่เก็บ - ห้ามเก็บคีย์ API ในรีโพซิทอรี
- ใช้ไฟล์ `.env` (ซึ่งมีใน `.gitignore` แล้ว) - ใช้ไฟล์ `.env` (ไฟล์นี้ถูกละเว้นใน `.gitignore`)
- อธิบายตัวแปรที่ต้องมีใน README ของโปรเจกต์ - ระบุตัวแปรสภาพแวดล้อมที่จำเป็นใน README ของโปรเจกต์
### โปรเจกต์ Python ### โครงการ Python
- ใช้ virtual environments: `python -m venv venv` - ใช้สภาพแวดล้อมเสมือน: `python -m venv venv`
- อัปเดต dependencies อย่างสม่ำเสมอ - รักษา dependencies ให้ทันสมัย
- โทเค็น GitHub ควรมีสิทธิ์ขั้นต่ำที่จำเป็น - โทเค็น GitHub ควรมีสิทธิ์ขั้นต่ำที่จำเป็น
### การเข้าถึง GitHub Models ### การเข้าถึง GitHub Models
- ต้องใช้ Personal Access Tokens (PAT) - ต้องใช้ Personal Access Token (PAT)
- ควรเก็บโทเค็นเป็นตัวแปรสภาพแวดล้อม - ควรจัดเก็บโทเค็นเป็นตัวแปรสภาพแวดล้อม
- ห้าม commit โทเค็นหรือข้อมูลรับรอง - ห้ามเก็บโทเค็นหรือข้อมูลรับรองในรีโพซิทอรี
## หมายเหตุเพิ่มเติม ## หมายเหตุเพิ่มเติม
### กลุ่มเป้าหมาย ### กลุ่มเป้าหมาย
- ผู้เริ่มต้นเรียนรู้การพัฒนาเว็บโดยสมบูรณ์ - ผู้เริ่มต้นใหม่ในด้านพัฒนาเว็บ
- นักเรียนและผู้เรียนด้วยตนเอง - นักศึกษาหรือผู้เรียนด้วยตนเอง
- ครูผู้ใช้หลักสูตรในชั้นเรียน - ครูผู้ใช้หลักสูตรในห้องเรียน
- เนื้อหาออกแบบเพื่อความเข้าถึงง่ายและการพัฒนาทักษะอย่างเป็นขั้นตอน - เนื้อหาออกแบบเพื่อการเข้าถึงและการสร้างทักษะอย่างค่อยเป็นค่อยไป
### ปรัชญาการศึกษา ### ปรัชญาการศึกษา
- การเรียนรู้ผ่านโปรเจกต์ - ใช้วิธีการเรียนรู้โดยโครงการ (Project-based learning)
- การตรวจสอบความรู้บ่อยๆ (แบบทดสอบ) - มีการตรวจสอบความรู้เป็นประจำ (แบบทดสอบ)
- การฝึกเขียนโค้ดเชิงปฏิบัติ - แบบฝึกหัดโค้ดเชิงปฏิบัติ
- ตัวอย่างการใช้งานจริง - ตัวอย่างการใช้งานจริงในโลกความเป็นจริง
- เน้นพื้นฐานก่อนใช้เฟรมเวิร์ก - เน้นพื้นฐานก่อนเรียนรู้เฟรมเวิร์ก
### การดูแลรักษาที่เก็บ ### การดูแลรักษารีโพซิอร
- ชุมชนผู้เรียนและผู้มีส่วนร่วมที่แอคทีฟ - ชุมชนผู้เรียนและผู้ร่วมสร้างเนื้อหาแอคทีฟ
- อัปเดต dependencies และเนื้อหาเป็นระยะ - อัปเดต dependencies และเนื้อหาเป็นประจำ
- ติดตาม issues และการสนทนาโดยผู้ดูแล - เจ้าหน้าที่ดูแลติดตามปัญหาและการอภิปราย
- อัปเดตการแปลอัตโนมัติผ่าน GitHub Actions - อัปเดตการแปลอัตโนมัติผ่าน GitHub Actions
### แหล่งข้อมูลที่เกี่ยวข้อง ### แหล่งข้อมูลที่เกี่ยวข้อง
- [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](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) สำหรับผู้เรียน - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) แนะนำสำหรับผู้เรียน
- หลักสูตรเพิ่มเติม: AI สร้างสรรค์, Data Science, ML, IoT - คอร์สเพิ่มเติม: Generative AI, Data Science, ML, IoT หลักสูตรพร้อมใช้งาน
### การทำงานกับโปรเจกต์เฉพาะ ### การทำงานกับโครงการเฉพาะ
สำหรับคำแนะนำโดยละเอียดของแต่ละโปรเจกต์ ให้ดูไฟล์ README ใน: สำหรับคำแนะนำโดยละเอียดเกี่ยวกับโครงการต่าง ๆ โปรดดูที่ไฟล์ README ใน:
- `quiz-app/README.md` - แอป quiz Vue 3 - `quiz-app/README.md` - แอปแบบสอบถาม Vue 3
- `7-bank-project/README.md` - แอปธนาคารพร้อมระบบยืนยันตัวตน - `7-bank-project/README.md` - แอปธนาคารที่มีการตรวจสอบสิทธิ์
- `5-browser-extension/README.md` - การพัฒนาส่วนขยายเบราว์เซอร์ - `5-browser-extension/README.md` - การพัฒนาส่วนขยายเบราว์เซอร์
- `6-space-game/README.md` - การพัฒนาเกมแบบใช้ Canvas - `6-space-game/README.md` - การพัฒนาเกม Canvas
- `9-chat-project/README.md` - โปรเจกต์ผู้ช่วยแชท AI - `9-chat-project/README.md` - โครงการผู้ช่วยแชท AI
### โครงสร้าง Monorepo ### โครงสร้าง Monorepo
แม้จะไม่ใช่ monorepo แบบดั้งเดิม แต่ที่เก็บนี้มีโปรเจกต์อิสระหลายตัว: แม้ว่ารีโพซิทอรีนี้จะไม่ใช่ monorepo แบบดั้งเดิม แต่มีหลายโปรเจกต์อิสระ:
- บทเรียนแต่ละบทเป็นอิสระ - แต่ละบทเรียนแยกจากกันอย่างครบถ้วน
- โปรเจกต์ไม่แชร์ dependencies กัน - โปรเจกต์แต่ละอันไม่แชร์ dependencies
- ทำงานกับโปรเจกต์ใดโปรเจกต์หนึ่งไม่กระทบกั - สามารถทำงานบนโปรเจกต์เดียวโดยไม่กระทบกับอื่
- โคลนที่เก็บทั้งหมดเพื่อประสบการณ์หลักสูตรครบถ้วน - โคลนรีโพซิอรีทั้งหมดเพื่อประสบการณ์หลักสูตรเต็มรูปแบบ
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [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 -->
Loading…
Cancel
Save