Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών της ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Κύρια Στοιχεία
### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα ταξινομημένα σε ενότητες έργων
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε ενότητες με βάση έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Browser, Παιχνίδι στο Διάστημα, Τραπεζική Εφαρμογή, Επεξεργαστής Κώδικα και Βοηθός Chat με AI
- **Διαδραστικά Quiz**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά τα μαθήματα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις σε 50+ γλώσσες μέσω GitHub Actions
- **Πολυγλωσσική Υποστήριξη**: Αυτόματες μεταφράσεις για πάνω από 50 γλώσσες μέσω GitHub Actions
Για λεπτομερείς οδηγίες για τα επιμέρους έργα, ανατρέξτε στα αρχεία README σε:
Για λεπτομερείς οδηγίες σε μεμονωμένα έργα, ανατρέξτε στα αρχεία README σε:
- `quiz-app/README.md` - Εφαρμογή κουίζ Vue 3
- `quiz-app/README.md` - Εφαρμογή quiz με Vue 3
- `7-bank-project/README.md` - Εφαρμογή τραπεζικού με αυθεντικοποίηση
- `7-bank-project/README.md` - Τραπεζική εφαρμογή με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης browser
- `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, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Κάθε μάθημα είναι ανεξάρτητο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε επιμέρους έργα χωρίς να επηρεάζετε άλλα
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε τα άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
- Κλωνοποιήστε ολόκληρο το αποθετήριο γιατην πλήρη εμπειρία προγράμματος σπουδών
---
---
<!-- 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). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτοματοποιημένες μεταφράσεις μπορείνα περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
# Ανάπτυξη Ιστού για Αρχάριους - Ένα Πρόγραμμα Σπουδών
# Ανάπτυξη Ιστού για Αρχαρίους - Ένα Πρόγραμμα Σπουδών
Μάθετε τα βασικά της ανάπτυξης ιστού με το ολοκληρωμένο μας μάθημα 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεραρίουμ, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Αναβαθμίστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με την αποτελεσματική παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!
Μάθετε τα βασικά της ανάπτυξης ιστοσελίδων με το ολοκληρωμένο 12-εβδομαδιαίο μάθημά μας από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραριαμικά, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Συμμετέχετε σε κουίζ, συζητήσεις και πρακτικές αναθέσεις. Βελτιώστε τις δεξιότητές σας και μεγιστοποιήστε τη διατήρηση γνώσεων με την αποτελεσματική παιδαγωγική μας που βασίζεται σε έργα. Ξεκινήστε το ταξίδι κωδικοποίησής σας σήμερα!
Εγγραφείτε στην Κοινότητα Discord Azure AI Foundry
Γίνετε μέλος της κοινότητας Azure AI Foundry στο Discord
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς τις μεταφράσεις, χρησιμοποιήστε sparse checkout:
> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών, που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς μεταφράσεις, χρησιμοποιήστε τον αραιό έλεγχο:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Αυτό σας δίνει όλα όσα χρειάζεστε γιανα ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.
> Αυτό σας δίνει όλα όσα χρειάζεστε γιανα ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Εάν επιθυμείτε να υποστηριχθούν επιπλέον γλώσσες μετάφρασης, αυτές είναι καταγεγραμμένες [εδώ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Εάν επιθυμείτε να υποστηρίζονται επιπλέον γλώσσες μετάφρασης, αναφέρονται [εδώ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Είσαι φοιτητής/φοιτήτρια;_
#### 🧑🎓 _Είστε φοιτητής;_
Επισκεφθείτε τη [**σελίδα Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα φοιτητών και ακόμα τρόπους να λάβετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στα αγαπημένα σας και να ελέγχετε περιστασιακά καθώς ενημερώνουμε το περιεχόμενο κάθε μήνα.
Επισκεφθείτε τη [**Σελίδα για Φοιτητές**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμα τρόπους να πάρετε δωρεάν κουπόνι πιστοποιητικού. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στα αγαπημένα σας και να ελέγχετε περιοδικά καθώς ανανεώνουμε το περιεχόμενο κάθε μήνα.
Προστέθηκε νέα πρόκληση, αναζητήστε το "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και το Agent mode. Αν δεν έχετε χρησιμοποιήσει το Agent mode πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
Νέα πρόκληση προστέθηκε, ψάξτε για "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση γιανα ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
### 📣 Ανακοίνωση - _Νέο έργο για κατασκευή με χρήση Γενετικής Τεχνητής Νοημοσύνης_
### 📣 Ανακοίνωση - _Νέο Έργο για κατασκευή με τη χρήση Generative AI_
Πρόσθετο νέο έργο Βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
Πρόσφατα προστέθηκε ένα νέο έργο βοηθού AI, δείτε το [έργο](./9-chat-project/README.md)
### 📣 Ανακοίνωση - _ΝέοΠρόγραμμα Σπουδών_ για Γενετική Τεχνητή Νοημοσύνη σε JavaScript μόλις κυκλοφόρησε
### 📣 Ανακοίνωση - _Νέοπρόγραμμα σπουδών_ για Generative AI για JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα σπουδών γιαΓενετική Τεχνητή Νοημοσύνη!
Μην χάσετε το νέο μας πρόγραμμα σπουδών γιαGenerative AI!
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσης και μια πρόκληση γιανα σας καθοδηγήσει στη μάθηση θεμάτων όπως:
Κάθε μάθημα περιλαμβάνει ανάθεση για ολοκλήρωση, έλεγχο γνώσεων και πρόκληση που σας καθοδηγούν στην εκμάθηση θεμάτων όπως:
- Εντολές και μηχανική εντολών
- Πώς να δημιουργείτε prompts και μηχανική prompts
- Δημιουργία εφαρμογών κειμένου και εικόνας
- Δημιουργία εφαρμογών κειμένου και εικόνας
- Εφαρμογές αναζήτησης
- Εφαρμογές αναζήτησης
@ -83,130 +93,129 @@
## 🌱 Ξεκινώντας
## 🌱 Ξεκινώντας
> **Καθηγητές**, έχουμε [περιλάβει μερικές προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε το feedback σας [στο φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Καθηγητές**, έχουμε [συμπεριλάβει ορισμένες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα θέλαμε πολύ τα σχόλιά σας [στο φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-λεκτικό κουίζ και συνεχίστε διαβάζοντας το υλικό του μαθήματος, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγχοντας την κατανόησή σας με το μετα-λεκτικό κουίζ.
**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-μάθημα κουίζ και συνεχίστε διαβάζοντας το υλικό του μαθήματος, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγξτε την κατανόησή σας με το μετα-μάθημα κουίζ.
Για να βελτιώσετε την εκπαιδευτική σας εμπειρία, συνδεθείτε με τους συναδέλφους σας γιανα δουλέψετε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των μεσαζόντων μας θα είναι διαθέσιμη γιανα απαντήσει στις ερωτήσεις σας.
Για να βελτιώσετε την εμπειρία μάθησής σας, συνδεθείτε με τους συμφοιτητές σας γιανα δουλέψετε στα έργα μαζί! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμηνα απαντήσει στις ερωτήσεις σας.
Για περαιτέρω εκπαίδευση, συνιστούμε ανεπιφύλακτα να εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικό μελέτης.
Για περαιτέρω εκπαίδευση, συνιστούμε ανεπιφύλακτα να εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικό μελέτης.
### 📋 Ρύθμιση του περιβάλλοντός σας
### 📋 Ρύθμιση του περιβάλλοντός σας
Αυτό το πρόγραμμα σπουδών έχει ένα περιβάλλον ανάπτυξης έτοιμο για χρήση! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκαταστάσεων_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Αυτό το πρόγραμμα σπουδών έχει έτοιμο περιβάλλον ανάπτυξης! Όταν ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε ένα [Codespace](https://github.com/features/codespaces/) (_περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκατάστασης_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Δημιουργήστε το αποθετήριό σας
#### Δημιουργήστε το αποθετήριό σας
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε πατώντας το κουμπί **Use this template** στο πάνω μέρος της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στο λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Ακολουθήστε αυτά τα βήματα:
Ακολουθήστε αυτά τα βήματα:
1. **Αντιγράψτε το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας.
1. **Δημιουργήστε Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην επάνω δεξιά γωνία αυτής της σελίδας.
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Εκτέλεση του προγράμματος σε Codespace
#### Τρέξιμο του προγράμματος σε Codespace
Στο αντίγραφο αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace γιανα δουλέψετε.
Στο αντίγραφο που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει έναν νέο Codespace γιανα εργαστείτε.
#### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας
#### Τρέξιμο του προγράμματος τοπικά στον υπολογιστή σας
Για να τρέξετε αυτό το πρόγραμμα τοπικά, θα χρειαστείτε έναν επεξεργαστή κειμένου, ένα πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μάθημά μας, [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία του Χειριστή](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία γιανα επιλέξετε εκείνο που σας ταιριάζει καλύτερα.
Η σύστασή μας είναι να χρησιμοποιήσετε [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως επεξεργαστή, που επίσης διαθέτει ενσωματωμένο [Τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Μπορείτε να κατεβάσετε το Visual Studio Code [εδώ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Για να τρέξετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει ανάμεσα στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία, γιανα επιλέξετε ποια δουλεύει καλύτερα για εσάς.
1. Κλωνοποιήστε το αποθετήριό σας στον υπολογιστή σας. Μπορείτε να το κάνετε πατώντας το κουμπί **Code** και αντιγράφοντας το URL:
Η σύστασή μας είναι να χρησιμοποιήσετε το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως επεξεργαστή σας, που έχει επίσης ενσωματωμένο [τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Μπορείτε να κατεβάσετε το Visual Studio Code [εδώ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Κλωνοποιήστε το αποθετήριο στον υπολογιστή σας. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Code** και αντιγράφοντας τη διεύθυνση URL:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Στη συνέχεια, ανοίξτε το [Τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το `<your-repository-url>` με το URL που μόλις αντιγράψατε:
Στη συνέχεια, ανοίξτε το [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το `<your-repository-url>` με τη διεύθυνση URL που μόλις αντιγράψατε:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Ανοίξτε τον φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **File** > **Open Folder** και επιλέγοντας τον φάκελο που μόλις κλωνοποιήσατε.
2. Ανοίξτε το φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **File** > **Open Folder** και επιλέγοντας το φάκελο που μόλις κλωνοποιήσατε.
> Συνιστώμενες επεκτάσεις για το Visual Studio Code:
> Προτεινόμενες επεκτάσεις Visual Studio Code:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - γιανα σας βοηθήσει να γράφετε κώδικα πιο γρήγορα
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - γιανα σας βοηθήσει να γράφετε κώδικα πιο γρήγορα
## 📂 Κάθε μάθημα περιλαμβάνει:
## 📂 Κάθε μάθημα περιλαμβάνει:
- προαιρετική σχεδίαση ιδεών (sketchnote)
- προαιρετικό σκιτσάκι
- προαιρετικό συμπληρωματικό βίντεο
- προαιρετικό συμπληρωματικό βίντεο
- προθέρμανση quiz πριν το μάθημα
- προ-μαθησιακό quiz για προθέρμανση
- γραπτό μάθημα
- γραπτό μάθημα
- για μαθήματα βασισμένα σε project, οδηγίες βήμα προς βήμα για το πώς να χτίσετε το έργο
- για μαθήματα βασισμένα σε έργα, οδηγούς βήμα προς βήμα για την κατασκευή του έργου
- ελέγχους γνώσης
- ελέγχους γνώσης
- μια πρόκληση
- μια πρόκληση
- συμπληρωματική ανάγνωση
- συμπληρωματική ανάγνωση
- εργασίες
- ανάθεση
- [τεστ μετά το μάθημα](https://ff-quizzes.netlify.app/web/)
> **Μια σημείωση για τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) και η εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`.
> **Σημείωση σχετικά με τα quiz**: Όλα τα quiz περιέχονται στο φάκελο Quiz-app, συνολικά 48 quiz με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/), η εφαρμογή quiz μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`.
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία του Επαγγέλματος | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία της Εργασίας | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει τη συνεργασία με ομάδα | Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργάζεστε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει συνεργασία με ομάδα | Πώς να χρησιμοποιείτε το GitHub στο έργο σας, πώς να συνεργάζεστε με άλλους σε βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Βασικά της Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας ιστού | [Βασικά της Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine και Christopher |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στην JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους σε JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην πράξη | Δημιουργήστε το HTML γιανα φτιάξετε ένα online terrarium, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην Πράξη | Δημιουργήστε το HTML για ένα διαδικτυακό terrarium, εστιάζοντας στην κατασκευή μιας διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην πράξη | Δημιουργήστε το CSS για το στυλιζάρισμα του online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένου και του responsive design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην Πράξη | Δημιουργήστε το CSS για το στυλ του διαδικτυακού terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της ανταπόκρισης της σελίδας | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα γιανα κάνει το terrarium λειτουργικό ως interface με σύρσιμο και απόθεση, εστιάζοντας σε κλεισίματα και χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα γιατη λειτουργία του terrarium ως διεπαφή drag/drop, εστιάζοντας στα κλεισίματα και χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε τα γεγονότα πληκτρολογίου γιαναοδηγήσετε τη λογική της εφαρμογής JavaScript | [Προγραμματισμός με Γεγονότα](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε τα γεγονότα πληκτρολογίου γιανακατευθύνετε τη λογική της εφαρμογής JavaScript | [Προγραμματισμός με βάση τα γεγονότα](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθετήριο | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες στο τοπικό αποθετήριο | [APIs, Φόρμες και Τοπικό Αποθετήριο](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθηκευτικό χώρο | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες τοπικά | [APIs, Φόρμες και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Διαδικασίες υπόβαθρου στον περιηγητή, απόδοση στον ιστό | Χρησιμοποιήστε τις διαδικασίες υπόβαθρου για τη διαχείριση του εικονιδίου της επέκτασης· μάθετε για την απόδοση του ιστού και κάποιες βελτιστοποιήσεις για βελτίωση | [Εργασίες Υπόβαθρου και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Φόντινες διεργασίες στον περιηγητή, απόδοση ιστοσελίδας | Χρησιμοποιήστε τις φόντινες διεργασίες του περιηγητή γιανα διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση του ιστού και ορισμένες βελτιστοποιήσεις | [Φόντινες εργασίες και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας τόσο Κλάσεις όσο και Σύνθεση και το μοτίβο Pub/Sub, σε προετοιμασία για την κατασκευή ενός παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας και Κλάσεις και Σύνθεση και το πρότυπο Pub/Sub, ως προετοιμασία για τη δημιουργία παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται γιαζωγραφική στοιχείων στην οθόνη | [Σχεδίαση σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση στον καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται γιανα ζωγραφίζετε στοιχεία σε οθόνη | [Σχεδίαση στον Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Κίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν νακινηθούν χρησιμοποιώντας καρτεσιανές συντεταγμένες και το Canvas API | [Κίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν νααποκτούν κίνηση χρησιμοποιώντας τα καρτεσιανά συντεταγμένα και το Canvas API | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και διαθέτοντας λειτουργία ανάρρωσης για ομαλή απόδοση στο παιχνίδι | [Ανίχνευση Σύγκρουσης](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν το ένα στο άλλο χρησιμοποιώντας πατήματα και παρέχετε λειτουργία ψύξης για τη βελτίωση της απόδοσης του παιχνιδιού | [Ανίχνευση Συγκρούσεων](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Διατήρηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς βάσει της κατάστασης και απόδοσης του παιχνιδιού | [Διατήρηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Διατήρηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και απόδοση του παιχνιδιού | [Διατήρηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς τιμών μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας routing και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Ιστοσελίδα | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας δρομολόγηση και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Σύνδεσης και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση των διαδικασιών επικύρωσης | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση ρουτινών ελέγχου | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτάτε, να τα αποθηκεύετε και να τα απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Λήψης και Χρήσης Δεδομένων | Πώς τα δεδομένα ρέουν μέσα κι έξω από την εφαρμογή σας, πώς να τα λαμβάνετε, να τα αποθηκεύετε και να τα απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Κώδικας Περιηγητή/VSCode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση επεξεργαστή κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Κώδικας Browser/VScode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση του επεξεργαστή κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με AI | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό τεχνητής νοημοσύνης | [Έργο Βοηθού AI](./9-chat-project/README.md) | Chris |
| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με ΤΝ | Μάθετε πώς να φτιάξετε τον δικό σας βοηθό ΤΝ | [Έργο βοηθού ΤΝ](./9-chat-project/README.md) | Chris |
## 🏫 Παιδαγωγική
## 🏫 Παιδαγωγική
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές στο μυαλό:
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές στο μυαλό:
* μάθηση βασισμένη σε έργα
* μάθηση βασισμένη σε έργα
* συχνά κουίζ
* συχνά quiz
Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα πιο σύγχρονα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστού. Οι μαθητές θα έχουν την ευκαιρία να αναπτύξουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια οικολογική επέκταση περιηγητή, ένα παιχνίδι τύπου εισβολέα στο διάστημα και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια στέρεη κατανόηση της ανάπτυξης στον ιστό.
Το πρόγραμμα διδάσκει τα βασικά του JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σημερινοί προγραμματιστές ιστού. Οι σπουδαστές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία χτίζοντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια φιλική προς το περιβάλλον επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει σταθερή κατανόηση της ανάπτυξης ιστού.
> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα μαθήματα αυτού του προγράμματος ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα λίγα μαθήματα αυτού του προγράμματος σπουδών ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
Διασφαλίζοντας ότι το περιεχόμενο εναρμονίζεται με τα έργα, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Επίσης, γράψαμε αρκετά εισαγωγικά μαθήματα στα βασικά της JavaScript για την εισαγωγή εννοιών, συνοδευόμενα από ένα βίντεο από τη συλλογή βίντεο "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", αρκετοί από τους συγγραφείς του οποίου συνέβαλαν σε αυτό το πρόγραμμα σπουδών.
Διασφαλίζοντας ότι το περιεχόμενο ευθυγραμμίζεται με τα έργα, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Επίσης γράψαμε αρκετά αρχικά μαθήματα στα βασικά της JavaScript γιανα παρουσιάσουμε έννοιες, σε συνδυασμό με βίντεο από τη συλλογή "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" με βιντεομαθήματα, με μερικούς από τους συγγραφείς τους να έχουν συμβάλει σε αυτό το πρόγραμμα σπουδών.
Επιπλέον, ένα χαμηλού ρίσκου κουίζ πριν το μάθημα θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή κατά τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα προς το τέλος του κύκλου των 12 εβδομάδων.
Επιπλέον, ένα ανεπίσημο quiz πριν από το μάθημα θέτει τον σκοπό του μαθητή προς την εκμάθηση μιας θεματικής ενότητας, ενώ ένα δεύτερο quiz μετά το μάθημα διασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών έχει σχεδιαστεί ώστε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί στο σύνολό του ή μεμονωμένα τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα μέχρι το τέλος του δωδεκαβδομαδιαίου κύκλου.
Παρόλο που αποφεύγουμε εσκεμμένα την εισαγωγή πλαισίων εργασίας JavaScript γιανα εστιάσουμε στις βασικές δεξιότητες που χρειάζεται ένας προγραμματιστής ιστού πριν από την υιοθέτηση πλαισίου, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Ενώ έχουμε σκοπίμως αποφύγει την εισαγωγή πλαισίων JavaScript γιανα επικεντρωθούμε στις βασικές δεξιότητες που χρειάζεται ένας προγραμματιστής ιστού πριν την υιοθέτηση πλαισίου, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος σπουδών θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Επισκεφτείτε τις οδηγίες μας [Κώδικας Συμπεριφοράς](CODE_OF_CONDUCT.md) και [Συνεισφοράς](CONTRIBUTING.md). Καλωσορίζουμε τα εποικοδομητικά σας σχόλια!
> Επισκεφτείτε τους [Κανόνες Συμπεριφοράς](CODE_OF_CONDUCT.md) και τις οδηγίες [Συμμετοχής](CONTRIBUTING.md). Καλωσορίζουμε τις εποικοδομητικές σας παρατηρήσεις!
## 🧭 Πρόσβαση εκτός σύνδεσης
## 🧭 Πρόσβαση εκτός σύνδεσης
Μπορείτε ναεκτελέσετε αυτή την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κάντε fork αυτό το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στη τοπική σας μηχανή και μετά στο ριζικό φάκελο αυτού του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην πόρτα 3000 στον τοπικό σας υπολογιστή: `localhost:3000`.
Μπορείτε νατρέξετε αυτή την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κλωνοποιήστε το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στον τοπικό σας υπολογιστή και μετά στον ριζικό φάκελο του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην θύρα 3000 στο τοπικό σας μηχάνημα: `localhost:3000`.
## 📘 PDF
## 📘 PDF
Ένα PDF με όλα τα μαθήματα μπορεί να βρεθεί [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Ένα PDF με όλα τα μαθήματα μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Άλλα Μαθήματα
## 🎒 Άλλα Μαθήματα
Η ομάδα μας παράγει και άλλα μαθήματα! Δείτε:
Η ομάδα μας παράγει και άλλα μαθήματα! Δείτε:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -224,7 +233,7 @@
---
---
### Σειρά γιαΔημιουργική Τεχνητή Νοημοσύνη
### Σειρά γιαΤη Γενετική Τεχνητή Νοημοσύνη
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -232,7 +241,7 @@
---
---
### Κεντρική Μάθηση
### Βασική Μάθηση
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -251,11 +260,11 @@
## Λήψη Βοήθειας
## Λήψη Βοήθειας
Αν κολλήσετε ή έχετε ερωτήσεις σχετικά με τη δημιουργία εφαρμογών AI, συμμετάσχετε με άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις σχετικά με το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αν κολλήσετε ή έχετε απορίες σχετικά με την ανάπτυξη εφαρμογών ΤΝ, συμμετάσχετε σε συζητήσεις με άλλους μαθητές και έμπειρους προγραμματιστές για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας υπηρεσία μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλείστε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για τυχόν παρερμηνείες ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρότι προσπαθούμε για ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το αρχικό έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.
# Introduktion till programmeringsspråk och moderna utvecklarverktyg
# Introduktion till programmeringsspråk och moderna utvecklarverktyg
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 riktiga superkrafter för att förverkliga dina vildaste idéer!
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!
Du vet det ögonblick när du använder din favoritapp och allt bara klickar perfekt? När du trycker på en knapp och något helt magiskt händer som får dig att säga "wow, hur gjorde de DET?" Någon precis som du – säkert sittande på sitt favoritkaffe på morgonen klockan 2 med sin tredje espresso – skrev koden som skapade den magin. Och här kommer något som kommer att spränga ditt sinne: i slutet av den här lektionen kommer du inte bara att förstå hur de gjorde det, utan du kommer att vara ivrig att prova själv!
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!
Vi tar det från början: jag förstår helt om programmering känns skrämmande just nu. När jag började trodde jag ärligt talat att man behövde vara något slags mattegeni eller ha kodat sedan man var fem år gammal. Men det här är vad som helt förändrade mitt perspektiv: programmering är precis som att lära sig att prata på ett nytt språk. Du börjar med "hej" och "tack", sen beställer du en kaffe och plötsligt har du djupa filosofiska diskussioner! Fast i det här fallet pratar du med datorer, och ärligt? De är de mest tålmodiga samtalspartner du någonsin kommer att ha – de dömer aldrig dina misstag och de är alltid taggade 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 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!
Idag ska vi utforska de otroliga verktyg som gör modern webbprogrammering inte bara möjlig, utan riktigt beroendeframkallande. Jag menar precis samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indieapp-studio använder varje dag. Och här kommer det som får dig att vilja dansa glädjedans: de flesta av dessa professionella, branschstandardverktyg är helt gratis!
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!
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
> Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
```mermaid
journey
journey
title Din programmeringsresa idag
title Din Programmeringsresa Idag
section Upptäck
section Upptäck
Vad är programmering: 5: You
Vad är Programmering: 5: You
Programmeringsspråk: 4: You
Programmeringsspråk: 4: You
Verktygsöversikt: 5: You
Verktygsöversikt: 5: You
section Utforska
section Utforska
Kodeditorer: 4: You
Kodredigerare: 4: You
Webbläsare &utvecklarverktyg: 5: You
Webbläsare &Utvecklarverktyg: 5: You
Kommandoraden: 3: You
Kommandorad: 3: You
section Öva
section Öva
Språkdetsektiv: 4: You
Språkdetsektiv: 4: You
Verktygsutforskning: 5: You
Verktygsutforskning: 5: You
@ -29,56 +29,56 @@ journey
```
```
## Låt oss se vad du redan kan!
## Låt oss se vad du redan kan!
Innan vi hoppar in i det roliga, jag är nyfiken – vad vet du redan om den här programmeringsvärlden? Och lyssna, om du tänker på de här frågorna och känner "jag har verkligen noll koll på något av det här," så är det inte bara okej, det är perfekt! Det betyder att du är precis på rätt plats. Tänk på det här quizet som att stretcha innan träningen– 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 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!
## Äventyret vi snart ska ge oss ut på tillsammans
Okej, jag är genuint sprudlande av spänning över vad vi ska utforska idag! På riktigt, jag önskar att jag kunde se ditt ansikte när några av dessa koncept klickar. Här är den otroliga resan vi tar 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:
- **Vad programmering egentligen är (och varför det är det coolaste som finns!)** – Vi ska upptäcka hur kod bokstavligen är den osynliga magin som driver allt runt omkring dig, från det alarm som på något sätt vet att det är måndag morgon till algoritmen som perfekt anpassar dina Netflix-rekommendationer
- **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
- **Programmeringsspråk och deras fantastiska personligheter**– Föreställ dig att du går in på en fest där varje person har helt olika superkrafter och sätt att lösa problem. Så är programmeringsspråkens värld, och du kommer att älska att träffa dem!
- **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!
- **De grundläggande byggstenarna som får den digitala magin att hända** – Tänk på dessa 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 din fantasi än drömmer om
- **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
- **Professionella verktyg som får dig att känna att du just 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 av allt? Det är de samma proffsen använder!
- **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!
> 💡 **Här är grejen**: Försök inte ens memorera allt idag! Just nu vill jag bara att du ska känna den där gnistan av spänning över vad som är möjligt. Detaljerna fastnar naturligt när vi övar tillsammans – så lär du dig på riktigt!
> 💡 **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!
> Du kan ta den här lektionen på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
> 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)!
## Så vad är egentligen *programmering*?
## Så vad exakt *är* programmering?
Okej, låt oss ta oss an miljonfrågan: vad är programmering egentligen?
Okej, låt oss ta itu med den miljonfrågan: vad är programmering, egentligen?
Jag ger dig en historia som helt förändrade hur jag tänker på det här. 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 fann 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 i två sekunder, inte en, inte tre..." Låter det bekant? 😅
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? 😅
Det är programmering! Det är konsten att ge otroligt detaljerade, steg-för-steg-instruktioner till något som är väldigt kraftfullt men som behöver allt uttalat 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 var 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 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).
Här är vad som blåste bort mig när jag först lärde mig det: datorer är faktiskt ganska enkla i grunden. 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 i The Matrix. Då kommer **programmeringsspråken** till undsättning. De är som världens bästa översättare som tar dina helt normala mänskliga tankar och omvandlar dem till datorspråk.
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.
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, förmodligen sittande i pyjamas med en kopp kaffe, som skrev 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 sedan... gjorde de det!
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!
När du lär dig programmera plockar du inte bara upp en ny färdighet – du blir del av den här otroliga gemenskapen av problemlösare som tillbringar sina dagar med att fundera, "Tänk om jag kunde bygga något som gör någons dag bara lite bättre?" Är det ärligt talat något coolare än 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?
✅ **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 väntar dig! Historien bakom den personen ä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 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.
### 🧠 **Check-in: Hur känner du dig?**
### 🧠 **Dags för en check-in: Hur känner du dig?**
**Ta en stund att reflektera:**
**Ta en stund att reflektera:**
- Känns idén "att ge instruktioner till datorer" logisk för dig nu?
- Känns idén att "ge instruktioner till datorer" som något du förstår nu?
- Kan du tänka på en vardagssyssla du skulle vilja automatisera med programmering?
- Kan du tänka dig en daglig uppgift du skulle vilja automatisera med programmering?
- Vilka frågor bubblar upp i ditt huvud om hela det här programmeringsgrejen?
- Vilka frågor bubblar upp i ditt sinne om hela detta programmeringsgrej?
> **Kom ihåg**: Det är helt normalt om vissa koncept känns svåra 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 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!
## 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 med – programmeringsspråk är mycket som olika typer av musik. Tänk så här: du har jazz, som är mjuk och improviserande, rock som är kraftfull och rak-på-sak, klassiskt som är elegant och strukturerat och hip-hop som är kreativt och uttrycksfullt. Varje stil har sin egen stämning, sin egen passionerade fan-gemenskap, och varje är perfekt för olika humör och tillfällen.
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.
Programmeringsspråk fungerar precis likadant! Du skulle inte använda samma språk för att skapa ett kul mobilspel som du skulle använda för att bearbeta massiva mängder klimatdata, precis som du inte skulle spela death metal på yogaklassen (tja, på de flesta yogaklasser i alla fall! 😄).
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! 😄).
Men här är det som alltid fascinerar mig när jag tänker på det: de här språken är som att ha världens mest tålmodiga, briljanta tolk sittande 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 all den otroligt komplexa översättningen till 1:or och 0:or som datorer faktiskt förstår. Det är som att ha en vän som är fullständigt tvåspråkig 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 fråga samma fråga två gånger!
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!
### Populära programmeringsspråk och deras användningsområden
### Populära programmeringsspråk och deras användningsområden
@ -91,7 +91,7 @@ mindmap
Interaktiva Webbplatser
Interaktiva Webbplatser
TypeScript
TypeScript
JavaScript + Typer
JavaScript + Typer
Företagsappar
Företagsapplikationer
Data & AI
Data & AI
Python
Python
Dataanalys
Dataanalys
@ -106,7 +106,7 @@ mindmap
Företag
Företag
Swift
Swift
iOS
iOS
Apple-ekosystemet
Apple Ekosystem
Kotlin
Kotlin
Modern Android
Modern Android
Plattformoberoende
Plattformoberoende
@ -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** | Webbprogrammering, användargränssnitt | Körs i webbläsare och driver interaktiva webbplatser |
| **JavaScript** | Webb utveckling, användargränssnitt | Körs i webbläsare och driver interaktiva webbplatser |
| **Python** | Data science, automatisering, AI | Lätt att läsa och lära sig, kraftfulla bibliotek |
| **Python** | Data science, automatisering, AI | Lätt att läsa och lära, kraftfulla bibliotek |
| **Java** | Företagsapplikationer, Androidappar | Plattformoberoende, robust för stora system |
| **Java** | Företagsapplikationer, Android-appar | Plattformoberoende, robust för stora system |
| **C#** | Windowsapplikationer, spelutveckling | Stark Microsoft-ekosystemsupport |
| **C#** | Windows-appar, spelutveckling | Stark Microsoft-ekosystemsupport |
| **Go** | Molntjänster, backend-system | Snabbt, enkelt, designat för modern datoranvändning |
| **Go** | Molntjänster, backend-system | Snabbt, enkelt, designat för modern databehandling |
### Högnivå- vs. lågnivåspråk
### Högnivå- vs. lågnivåspråk
Okej, det här var ärligt talat konceptet som knäckte min hjärna när jag först började lära mig, så jag delar gärna analogin som äntligen gjorde att det föll på plats för mig – och jag hoppas verkligen att den hjälper dig också!
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å!
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 talar språket, och du desperat behöver 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, lokal slang och interna skämt som bara någon som vuxit upp där skulle förstå. Otroligt imponerande och 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 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.
- **Högnivåprogrammering** är som att ha den 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 ta hand om all kulturell översättning och ger dig vägbeskrivningen på ett sätt som din icke-lokala hjärna fattar perfekt.
- **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.
På programmeringsspråksspråk:
I programmeringstermer:
- **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... tja, låt oss säga att det är en ganska 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 måste tänka som en maskin, vilket är... tja, låt oss säga att det är en stor mental omställning!
- **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 att de har fantastiskt välkomnande gemenskaper fulla av människor som minns hur det var att vara ny och som verkligen vill hjälpa till!
- **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!
Gissa vilka jag kommer att föreslå att du börjar med? 😉 Högnivåspråk är som att ha stödhjul som du faktiskt aldrig vill ta av eftersom de gör hela upplevelsen så mycket roligare!
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!
```mermaid
```mermaid
flowchart TB
flowchart TB
A["👤 Mänskligt Tänkande:<br/>'Jag vill beräkna Fibonacci-tal'"] --> B{Välj Språknivå}
A["👤 Mänskligt Tanke:<br/>'Jag vill beräkna Fibonacci-tal'"] --> B{Välj Språknivå}
B -->|Hög nivå| C["🌟 JavaScript/Python<br/>Enkelt 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"]
@ -158,7 +158,7 @@ flowchart TB
E --> G["🤖 Datorförståelse:<br/>Översättaren hanterar komplexiteten"]
E --> G["🤖 Datorförståelse:<br/>Översättaren hanterar komplexiteten"]
F --> G
F --> G
G --> H["💻 Samma resultat:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
G --> H["💻 Samma Resultat:<br/>0, 1, 1, 2, 3, 5, 8, 13..."]
style C fill:#e1f5fe
style C fill:#e1f5fe
style D fill:#fff3e0
style D fill:#fff3e0
@ -166,13 +166,13 @@ flowchart TB
```
```
### Låt mig visa varför högnivåspråk är så mycket vänligare
### Låt mig visa varför högnivåspråk är så 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, få inte panik! Det ska se skrämmande ut. Det är exakt vad jag menar!
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!
Vi ska titta på samma uppgift skriven i två helt olika stilar. Båda skapar den så kallade Fibonaccisekvensen – 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 det här mönstret bokstavligen överallt i naturen – solrosfröspiraler, mönster i kottar, till och med hur galaxer formas!)
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!)
- **Skapat** en återanvändbar funktion med modern pil-funktionssyntax
- **Skapat** en återanvändbar funktion med modern arrow function-syntax
- **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 och ett tal
- **Använt** arrayindexering för att beräkna varje nytt tal från tidigare värden
- **Använt** arrayindexering för att räkna ut varje nytt tal från tidigare värden
- **Returnerat** hela sekvensen för flexibel användning i andra delar av vårt program
- **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,27 +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 uppnår exakt samma uppgift, men högnivåspråket är mycket lättare för människor att förstå, skriva och underhålla.
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.
**Viktiga skillnader du kommer att 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älvförklarande
- **Kommentarer**: Hög nivå-språk uppmuntrar förklarande kommentarer som gör koden självdokumenterande
- **Struktur**: JavaScripts logiska flöde matchar hur människor tänker på problem steg för steg
- **Struktur**: JavaScripts logiska flöde matchar hur människor tänker steg för steg kringproblem
- **Underhåll**: Uppdatering av 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 Fibonaccis talföljd**: Detta helt underbara talmönster (där varje nummer ä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, grankottars mönster, hur nautilusskal böjer sig och till och med i hur trädgrenar växer. Det är ganska häpnadsväckande hur matte och kod kan hjälpa oss förstå och återskapa de mönster som naturen använder för att skapa skönhet!
✅ **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!
## Byggstenarna som får magin att hända
Okej, nu när du har sett hur programmeringsspråk ser ut i praktiken, låt oss bryta ner de grundläggande bitarna som bygger upp bokstavligen varje program som någonsin skrivits. Tänk på dessa som de viktiga ingredienserna i ditt favoritrecept – när du förstår vad var och en gör, kommer du kunna läsa och skriva kod i nästan vilket språk som helst!
## Byggstenarna som gör magin möjlig
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 grammatik någonsin var! 😄
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!
### Satser: Steg-för-steg-instruktioner
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! 😄
Låt oss börja med **satser**– de är som enskilda meningar i en konversation med din dator. Varje sats berättar för datorn att göra en specifik sak, ungefär som att ge anvisningar: ”Sväng vänster här”, ”Stanna vid rött ljus”, ”Parkera på den där platsen”.
### Satser: steg-för-steg-instruktioner
Det jag älskar med satser är hur läsbara de brukar vara. Kolla här:
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."
Det jag älskar med satser är hur läsbara de oftast är. Kolla på detta:
```javascript
```javascript
// Grundläggande satser som utför enstaka åtgärder
// Grundläggande satser som utför enstaka åtgärder
@ -288,28 +289,28 @@ const sum = 5 + 3;
**Här är vad den här koden gör:**
**Här är vad den här koden gör:**
- **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 utmatning
- **Visar** ett hälsningsmeddelande i konsolens utdata
- **Beräknar** och lagrar resultatet av en matematisk operation
- **Beräknar** och lagrar resultatet av en matematisk operation
- **Modifierar** webbplatsens titel som visas i webbläsarfliken
- **Modifierar** webbsidans titel som visas i webbläsarfliken
- **Byter** bakgrundsfärgen på hela sidans kropp
- **Ändrar** bakgrundsfärgen för hela sidans kropp
### Variabler: Programmets minnessystem
### Variabler: ditt programs minnessystem
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!
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!
Tänk på din telefons kontaktlista en sekund. Du memorerar inte allas telefonnummer – istället sparar du ”Mamma”, ”Bästa vän” eller ”Pizzerian som levererar till kl 2 på natten” och låter telefonen minnas 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 hämta den senare med ett namn som faktiskt är begripligt.
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.
Det riktigt coola är: variabler kan förändras medan programmet körs (därav namnet ”variabel” – ser du vad de gjorde där?). Precis som du kan uppdatera kontaktinformationen till pizzerian 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!
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!
Låt mig visa hur otroligt enkelt detta kan vara:
Låt mig visa hur vackert enkelt detta kan vara:
```javascript
```javascript
// Steg 1: Skapa grundläggande variabler
// Steg 1: Skapa grundläggande variabler
@ -319,10 +320,10 @@ let temperature = 75;
let isRaining = false;
let isRaining = false;
```
```
**Att förstå dessa koncept:**
**Förstå dessa koncept:**
- **Lagra** oföränderliga värden i `const`-variabler (som webbplatsens namn)
- **Lagra** oföränderliga värden i `const`-variabler (som sajtens 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), siffror och booleska värden (true/false)
- **Tilldela** olika datatyper: strängar (text), nummer och booleaner (sant/falskt)
- **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
@ -334,24 +335,24 @@ const weatherData = {
};
};
```
```
**Ovanför har vi:**
**I det ovanstående har vi:**
- **Skapat** ett objekt för att gruppera relaterad väderinformation
- **Skapat** ett objekt för att gruppera relaterad väderinformation
- **Organiserat** flera datadelar under ett variabelnamn
- **Organiserat** flera data under ett variabelnamn
- **Använt** nyckel-värde-par för att märka varje informationsdel tydligt
- **Använt** nyckel-värdepar för att tydligt märka varje data
```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`);
- **Extrahera** specifika egenskaper från objekt med destructuring assignment
- **Extrahera** specifika egenskaper från objekt med destrukturering
- **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 upprepande punktnotation
- **Förenkla** koden genom att undvika upprepning av punktnotation
### Kontrollflöde: Lära ditt program att tänka
### Kontrollflöde: lära ditt program att tänka
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.
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.
Föreställ dig detta: i morse gick du säkert 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 tar kaffe på vägen.” Din hjärna följer naturligt detta if-then-logik dussintals gånger varje dag!
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!
Det här är vad som får program att kännas intelligenta och levande, istället för att bara följa något 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 fatta val!
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!
Vill du se hur vackert detta fungerar? Låt mig visa dig:
Vill du se hur vackert detta fungerar? Låt mig visa dig:
@ -388,10 +389,10 @@ if (userAge >= 18) {
}
}
```
```
**Det här gör den här koden:**
**Det här gör koden:**
- **Kontrollerar** om användarens ålder uppfyller röstningskravet
- **Kontrollerar** om användarens ålder uppfyller röstningskravet
- **Kör** olika kodblock baserat på villkorets resultat
- **Utför** olika kodblock baserat på villkorets resultat
- **Beräknar** och visar hur länge det är kvar tills röstberättigande om under 18
- **Beräknar** och visar hur länge det är kvar till rösträtt om under 18
- **Ger** specifik, hjälpsam feedback för varje scenario
- **Ger** specifik, hjälpsam feedback för varje scenario
- **Använd** ternära operatorn (`? :`) för enkla två-vals-villkor
- **Använda** ternära operatorn (`? :`) för enkla två-alternativ villkor
- **Skriv** villkoret först, följt av `?`, sedan sant resultat, sedan `:`, sedan falskt resultat
- **Skriv** villkoret först, följt av `?`, sedan sant resultat, `:`, och falskt resultat
- **Använd** detta mönster när du behöver tilldela värden baserat på villkor
- **Använd** detta mönster när du behöver tilldela värden baserat på villkor
```javascript
```javascript
@ -448,53 +449,53 @@ 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 tillsammans (veckodagar vs. helger)
- **Grupperar** liknande fall (vardagar vs helger)
- **Kör** rätt kodblock när en matchning hittas
- **Utför** rätt kodblock när en träff hittas
- **Inkluderar** ett `default`-fall för att hantera oväntade värden
- **Inkluderar** ett `default` fall för oförväntade värden
- **Använder**`break`-satser för att hindra 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
> 💡 **Verklighetsanalog**: 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 byggarbete blockerar motorvägen, försök den natursköna vägen.” Program använder exakt samma typ av villkorlig logik för att reagera smart på olika situationer och alltid ge användarna den bästa möjliga upplevelsen.
> 💡 **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.
### 🎯 **Begreppskoll: Behärska byggstenarna**
### 🎯 **Konceptkontroll: Mästare på byggstenarna**
**Låt oss se hur det går med grunderna:**
**Låt oss se hur du ligger 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 använder ett if-then-beslut (som vårt röstningsexempel)
- Tänk på ett verkligt scenario där du skulle använda en om-så-beslut (som vårt röstningsexempel)
- Vad är en sak med programmeringslogik som förvånade dig?
- Vad är en sak med programmeringslogik som överraskade dig?
✅ **Vad som kommer härnäst**: Vi kommer ha så roligt när vi dyker djupare in i dessa koncept under vår otroliga resa tillsammans! Just nu, fokusera bara på att känna den där spänningen för alla fantastiska möjligheter framför dig. De specifika färdigheterna och teknikerna kommer fastna naturligt när vi övar tillsammans – jag lovar att det här kommer bli så mycket roligare än du kanske förväntar dig!
✅ **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!
## Verktyg för jobbet
## Verktyg för arbetet
Okej, här får jag ärligt talat sådan pirr i magen att jag knappt kan hålla det inne! 🚀 Vi ska precis prata om de otroliga verktygen som kommer få dig att känna att du just fick 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 verktyg som kommer få dig att känna att du precis fått nycklarna till ett digitalt rymdskepp.
Du vet 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 tycks sjunga så fort de rör vid den? Ja, utvecklare har vår egen version av dessa magiska verktyg, och här är vad som kommer få dig att tappa hakan – de flesta är helt gratis!
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!
Jag studsar nästan i stolen när jag tänker på att dela detta med dig eftersom de helt har revolutionerat hur vi bygger mjukvara. Vi pratar om AI-drivna kodassistenter som kan hjälpa dig skriva kod (jag skojar inte!), molnmiljöer där du kan bygga hela applikationer bokstavligen var som helst med Wi-Fi, och felsökningsverktyg så sofistikerade att det är som att ha röntgensyn för dina program.
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.
Och här är delen som fortfarande ger mig rysningar: det här är inte ”nybörjarverktyg” som du kommer växa ur. Det är exakt samma professionella verktyg som utvecklare på Google, Netflix och det där indie app-studion du älskar använder just i detta ögonblick. Du kommer känna dig som ett proffs när du använder dem!
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!
```mermaid
```mermaid
graph TD
graph TD
A["💡 Din Idé"] --> B["⌨️ Kodredigerare<br/>(VS Code)"]
A["💡 Din idé"] --> B["⌨️ Kodredigerare<br/>(VS Code)"]
B --> C["🌐 Webbläsarutvecklarverktyg<br/>(Testning & Felsökning)"]
B --> C["🌐 Webbläsarverktyg<br/>(Testning & Felsökning)"]
C --> D["⚡ Kommandorad<br/>(Automatisering & Verktyg)"]
C --> D["⚡ Kommandorad<br/>(Automatisering & Verktyg)"]
D --> E["📚 Dokumentation<br/>(Inlärning& Referens)"]
D --> E["📚 Dokumentation<br/>(Lärande& Referens)"]
E --> F["🚀 Fantastisk Webbapp!"]
E --> F["🚀 Fantastisk Webbapp!"]
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["📦 Paketverktyg<br/>(npm, yarn)"]
D -.-> I["📦 Paketchefer<br/>(npm, yarn)"]
E -.-> J["👥 Gemenskap<br/>(Stack Overflow)"]
E -.-> J["👥 Gemenskap<br/>(Stack Overflow)"]
style A fill:#fff59d
style A fill:#fff59d
@ -506,56 +507,57 @@ graph TD
```
```
### Kodredigerare och IDE: Dina nya digitala bästa vänner
### Kodredigerare och IDE: Dina nya digitala bästa vänner
Låt oss prata om kodredigerare – dessa är på riktigt på väg att bli dina nya favoritställen att hänga på! Tänk på dem som ditt personliga kodningssanktuarium där du kommer spendera mest tid med att skapa och förfina dina digitala alster.
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.
Men här är vad som är helt magiskt med moderna redigerare: de är inte bara fina textredigerare. De är som att ha den smartaste, mest stödjande kodmentor som sitter bredvid dig dygnet runt. De fångar dina skrivfel 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 förstå vad varje kodbit gör, och några kan till och med förutsäga vad du är på väg att skriva och erbjuda sig att färdigställa dina tankar!
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!
Jag minns när jag först upptäckte automatisk komplettering – jag kände nästan att jag levde i framtiden. Du börjar skriva något, och editorn säger: ”Hej, tänkte du på den här funktionen som gör exakt vad du behöver?” Det är som att ha en tankeläsare som kodkompis!
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!
**Vad gör dessa redigerare så otroliga?**
**Vad gör dessa redigerare så otroliga?**
Moderna kodredigerare erbjuder en imponerande uppsättning funktioner designade för att boosta din produktivitet:
Moderna kodredigerare erbjuder en imponerande uppsättning funktioner som är utformade 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 hitta fel |
| **Syntaxmarkering** | Färglägger olika delar av din kod | Gör kod lättare att läsa och upptäcka fel |
| **Automatisk komplettering** | Föreslår kod medan du skriver | Snabbar upp kodandet och minskar skrivfel |
| **Autokomplettering** | Föreslår kod medan du skriver | Snabbar upp kodning och minskar stavfel |
| **Felsökningsverktyg** | Hjälper dig hitta och fixa fel | Sparar timmar vid felsökning |
| **Felsökningsverktyg** | Hjälper dig hitta och fixa fel | Sparar timmar av felsökningstid |
| **Tillägg** | Lägger till specialfunktioner | Anpassa din editor efter teknik |
| **Tillägg** | Lägger till specialfunktioner | Anpassa din editor 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 | Påskyndar lärande och produktivitet |
> 🎥 **Videoresurs**: Vill du se dessa verktyg i aktion? Kolla in den här [Tools of the Tradevideon](https://youtube.com/watch?v=69WJeXGBdxg) för en omfattande översikt.
> 🎥 **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.
#### Rekommenderade redigerare för webbutveckling
#### Rekommenderade redigerare för webbutveckling
**[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)
> 💡 **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.
> 💡 **Kom igång tips**: Börja med Visual Studio Code – det är gratis, välanvänt i branschen och har en enorm community som skapar hjälpsamma tutorials och tillägg.
Okej, förbered dig på att bli helt uppslukad! Du vet hur du har använt webbläsare för att scrolla genom sociala medier och titta på videos? Tja, 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å 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!
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 någon dyr programvara jag brukade betala hundratals kronor för. Det är som att upptäcka att ditt vanliga gamla kök har gömt ett professionellt kocklaboratorium bakom en hemlig panel!
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!
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 HÄR OCKSÅ?!" Du kan bokstavligen redigera vilken webbplats som helst i realtid, se exakt hur snabbt allt laddas, testa hur din sajt ser ut på olika enheter, och till och med debugga JavaScript som ett proffs. Det är helt hisnande!
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!
**Här är varför webbläsare är ditt hemliga vapen:**
**Här är varför webbläsare är ditt hemliga vapen:**
@ -565,34 +567,34 @@ När du skapar en webbplats eller webbapplikation behöver du se hur den ser ut
Moderna webbläsare inkluderar omfattande utvecklingspaket:
Moderna webbläsare inkluderar omfattande utvecklingspaket:
| Verktygskategori | Vad det gör | Exempel på användning |
| Verktygskategori | Vad det gör | Exempel på användningsområde |
| **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 stil för att se omedelbara resultat |
| **Konsol** | Visa felmeddelanden och testa JavaScript | Debugga problem och experimentera med kod |
| **Konsol** | Visa felmeddelanden och testa JavaScript | Felsöka problem och experimentera med kod |
| **Nätverksmonitor** | Följa 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 sajt fungerar för alla användare |
| **Tillgänglighetskontroll** | Testa inkluderande design | Säkerställ att din sida 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/)** – Industri-standard för DevTools med omfattande dokumentation
- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industriell standard för 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 verktyg för CSS Grid och tillgänglighet
- **[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
> ⚠️ **Viktig 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 stora webbläsare för att säkerställa konsekventa användarupplevelser.
> ⚠️ **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.
### Kommandoradsverktyg: Din port till utvecklarmagi
### Kommandoradsverktyg: Din väg till utvecklarmagi
Okej, låt oss vara helt ärliga om kommandoraden, för jag vill att du hör det från någon som verkligen förstår. När jag först såg den – bara den här skrämmande svarta skärmen med blinkande text – tänkte jag bokstavligen: "Nej, absolut inte! Det ser ut som något ur en hackarfilm från 80-talet, och jag är definitivt inte smart nog för det här!" 😅
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!" 😅
Men här är vad jag önskar att någon hade sagt till mig då, och vad jag säger till dig 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 fancy 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 precis vad du gillar och kan fixa något perfekt bara genom att du säger "överraska mig med något fantastiskt."
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."
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 BOOM – du har skapat hela projektstrukturer, installerat kraftfulla verktyg från hela världen, eller distribuerat din app på internet för miljontals att se. När du väl får en första smak av den kraften är det ärligt talat ganska beroendeframkallande!
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!
**Varför kommandoraden kommer bli ditt favoritverktyg:**
**Varför kommandoraden kommer bli ditt favoritverktyg:**
Medan grafiska gränssnitt är utmärkta för många uppgifter, utmärker sig kommandoraden i automatisering, precision och hastighet. Många utvecklingsverktyg fungerar primärt via kommandoradsgränssnitt, och att lära sig använda dem effektivt kan dramatiskt öka din produktivitet.
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.
```bash
```bash
# Steg 1: Skapa och navigera till projektmappen
# Steg 1: Skapa och navigera till projektmappen
@ -601,11 +603,11 @@ cd my-awesome-website
```
```
**Det här gör koden:**
**Det här gör koden:**
- **Skapa** en ny katalog som heter "my-awesome-website" för ditt projekt
- **Skapar** en ny mapp som heter "my-awesome-website" för ditt projekt
- **Navigera** in i den nyss skapade katalogen för att börja arbeta
- **Navigerar** in i den nyss skapade mappen för att börja arbeta
```bash
```bash
# Steg 2: Initiera projektet med package.json
# Steg 2: Initiera projekt med package.json
npm init -y
npm init -y
# Installera moderna utvecklingsverktyg
# Installera moderna utvecklingsverktyg
@ -613,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 händer följande:**
**Steg för steg, så här går det till:**
- **Initiera** ett nytt Node.js-projekt med standardinställningar via`npm init -y`
- **Initierar** ett nytt Node.js-projekt med standardinställningar med`npm init -y`
- **Installera** Vite som ett modernt byggverktyg för snabb utveckling och produktionsbyggen
- **Installerar** Vite som ett modernt byggverktyg för snabb utveckling och produktion
- **Lägg till** Prettier för automatisk kodformatering och ESLint för kodkvalitetskontroller
- **Lägger till** Prettier för automatisk kodformatering och ESLint för kvalitetskontroller
- **Använd** flaggan `--save-dev` för att markera dessa som endast utvecklingsberoenden
- **Använder** flaggan `--save-dev` för att markera dessa som utvecklingsberoenden
```bash
```bash
# Steg 3: Skapa projektstruktur och filer
# Steg 3: Skapa projektstruktur och filer
@ -630,95 +632,95 @@ 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 resurser
- **Genererat** en grundläggande HTML-fil med korrekt dokumentstruktur
- **Skapat** en enkel HTML-fil med korrekt dokumentstruktur
- **Startat** Vites utvecklingsserver för live-uppdatering och hot module replacement
- **Startat** Vite utvecklingsserver för live-uppdatering och varm modulbyte
#### 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/)** | Versionskontroll | Spåra ändringar, samarbeta och 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 & pakethanterare | Köra JavaScript utanför webbläsare, installera moderna utvecklingsverktyg |
| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & paket-hantering | Kör JavaScript utanför webbläsare, installera moderna utvecklingsverktyg |
| **[Vite](https://vitejs.dev/)** | Byggverktyg & utvecklingsserver | Super-snabb utveckling med hot module replacement |
> 🎯 **Lärandeväg**: Börja med grundläggande kommandon som `cd` (byt 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 bekväm kommer du naturligt att lära dig mer avancerade kommandon och automatiseringstekniker.
> 🎯 **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.
### Dokumentation: Din alltid tillgängliga lärarmästare
### Dokumentation: Din alltid tillgängliga lärarmästare
Okej, låt mig dela en liten hemlighet som kommer få dig att må 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, 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!
Tänk på dokumentation som tillgång till världens mest tålmodiga, kunniga lärare som är tillgängliga dygnet runt. Sitter du fast med 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 har din rygg 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 det på ett sätt som äntligen gör att det klickar!
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!
Här är något som helt förändrade min syn: webbutvecklingsvärlden rör sig otroligt snabbt, och ingen (menar verkligen ingen!) kan 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, utan om att veta var man snabbt hittar pålitliga svar och förstå hur man använder dem.
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 händer den verkliga magin:**
**Här händer den verkliga magin:**
Professionella utvecklare tillbringar en stor del av sin tid med att läsa dokumentation – inte för att de inte vet vad de gör, utan för att landskapet inom webbutveckling förändras så snabbt att det kräver kontinuerligt lärande. Bra dokumentation hjälper dig förstå inte bara *hur* något används, utan *varför* och *när* det ska användas.
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.
> 📚 **Studietips**: Försök inte memorera dokumentationen – lär dig istället navigera effektivt. Bokmärk ofta använda referenser och öva på att använda sökfunktioner för att snabbt hitta specifik information.
> 📚 **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.
### 🔧 **Verktygsmästerskap: Vad tilltalar dig mest?**
### 🔧 **Verktygsmästerskap: Vad tilltalar dig?**
**Ta en stund att fundera:**
**Ta en stund och fundera:**
- Vilket verktyg ser du mest fram emot att testa först? (Det finns inget fel svar!)
- Vilket verktyg är du mest sugen på att prova först? (Det finns inget fel svar!)
- Känns kommandoraden fortfarande skrämmande, eller är du nyfiken?
- Känner du fortfarande att kommandoraden är skrämmande, eller är du nyfiken på den?
- Kan du tänka 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 som spenderas med verktyg"
"Kodredigerare" : 40
"Kodredigerare" : 40
"Webbläsartestning" : 25
"Webbläsartestning" : 25
"Kommandorad" : 15
"Kommandorad" : 15
"Läser dokumentation" : 15
"Läsa dokumentation" : 15
"Felsökning" : 5
"Felsökning" : 5
```
```
> **Rolig insikt**: De flesta utvecklare tillbringar ungefär 40 % av sin tid i sin kodredigerare, men märker 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!
✅ **Att fundera på**: Här är något intressant att tänka på – 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 att vara 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 helheten av hur webbplatser blir till.
✅ **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.
## GitHub Copilot Agent-utmaning 🚀
## GitHub Copilot Agent-utmaning 🚀
@ -726,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, debugga eller underhålla kod mer effektivt. Ge för varje en kort förklaring av hur det gynnar ditt arbetsflöde.
**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.
---
---
@ -734,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 fått den här fantastiska grunden, har jag ett äventyr som kommer hjälpa dig se hur otroligt mångsidig och fascinerande programmeringsvärlden egentligen är. Och lyssna – det handlar inte om att skriva kod än, så ingen press! Tänk dig att du är en detektiv inom programmeringsspråk på ditt allra första spännande 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 på dig själv som en detektiv av programmeringsspråk på ditt allra första spännande fall!
**Din uppgift, om du väljer att acceptera den:**
**Ditt uppdrag, om du väljer att acceptera det:**
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 analyserar data för forskare. Hitta exempel på samma enkla uppgift skrivna i varje språk. Jag lovar att 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 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!
2. **Upptäck deras ursprung**: Vad gör varje språk speciellt? Här är en cool grej– 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 de här historierna är verkligen fascinerande!
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!
3. **Möt communityn**: Kolla hur välkomnande och passionerad varje språk 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 i dessa communityn!
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!
4. **Lyssna på 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 bara på din magkänsla! Det finns ärligt talat inget fel svar och du kan alltid utforska andra senare.
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.
**Bonusdetektivarbete**: Se om du kan ta reda på vilka stora webbplatser eller appar som är byggda med varje språk. Jag lovar att du kommer bli chockad över att få veta vad som driver Instagram, Netflix eller det där mobilsspelet du inte kan sluta spela!
**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!
> 💡 **Kom ihåg**: Du försöker inte bli expert i något av dessa språk idag. Du lär bara känna kvarteren innan du bestämmer dig för 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 nyfikenheten leda dig!
## Låt oss fira det du upptäckt!
## Låt oss fira det du har upptäckt!
Holy moly, du har tagit till dig så mycket otrolig information idag! Jag är verkligen peppad på 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 göra allt perfekt. Det här är mer som en fest för allt häftigt du lärt dig om den fascinerande världen du är på väg att dyka in i!
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!
[Ta quizet efter lektionen](https://ff-quizzes.netlify.app/web/)
## Review & Självstudier
**Ta din tid att utforska och ha kul med det!**
## Repetition & Självstudier
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!
**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!
**Fördjupa dig i det som intresserar dig:**
**Gå djupare in i det som fascinerar dig:**
**Prova på programmeringsspråk:**
**Prova på programmeringsspråk:**
- Besök de officiella webbplatserna för 2-3 språk som fångade ditt intresse. Varje språk har sin egen personlighet och historia!
- 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!
- Testa 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 – du kan inte förstöra något!
- 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!
- 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.
- 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.
**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 på att bläddra i Extensions-marknaden. Det är som en app-butik för din kodredigerare!
- Spendera några minuter med att bläddra i Extensions-marknaden. Det är som en appbutik för din kodredigerare!
- Öppna din webbläsares utvecklarverktyg och klicka runt. Oroa dig inte för att förstå allt – lär dig bara var saker finns.
- Ö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.
**Gå med i communityn:**
**Gå med i gemenskapen:**
- Följ några utvecklarcommunities på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringscommunityn är otroligt välkomnande för nybörjare!
- 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!
- Titta på 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 nybörjarvänliga kodningsvideor på YouTube. Det finns så många fantastiska skapare där ute som minns hur det var att börja.
- Överväg att gå med i lokala meetups eller online-communities. 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 nybörjare!
> 🎯 **Lyssna, det här vill jag att du ska minnas**: Du förväntas inte bli en kodningsmagiker över en natt! Just nu lär du bara känna denna fantastiska nya värld som du ska bli en del av. Ta din tid, njut av resan, och kom ihåg – varje enda utvecklare du beundrar har en gång suttit precis där du är nu, känt sig exalterad och kanske lite överväldigad. Det är helt normalt, och det betyder att du gör rätt!
> 🎯 **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!
@ -785,48 +787,48 @@ 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)
> 💡 **En liten puff för din uppgift**: Jag skulle verkligen vilja se dig utforska några verktyg som vi inte har täckt än! Hoppa över redigerare, webbläsare och kommandoradsverktyg som vi redan gått igenom – det finns en hel fantastisk värld av utvecklingsverktyg där ute som bara väntar på att bli upptäckta. Leta efter de som är aktivt underhållna och har livliga, hjälpsamma communities (de brukar ha de bästa guiderna och de mest stödjande människorna när du ofrånkomligt fastnar och behöver en hjälpande hand).
> 💡 **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).
---
---
## 🚀 Din programmeringsresa tidslinje
## 🚀 Din programmeringsresa tidslinje
### ⚡ **Vad du kan göra de kommande 5 minuterna**
### ⚡ **Vad du kan göra de närmaste 5 minuterna**
- [ ] Bokmärk 2-3 webbplatser för programmeringsspråk som fångade ditt intresse
- [ ] Bokmärk 2-3 webbplatser för programmeringsspråk som fångade din uppmärksamhet
- [ ] 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å någon webbplats
- [ ] Öppna din webbläsares DevTools (F12) och klicka runt på en webbplats
- [ ] Gå med i en programmeringscommunity (Dev.to, Reddit r/webdev, eller Stack Overflow)
- [ ] Gå med i en programmeringsgemenskap (Dev.to, Reddit r/webdev eller Stack Overflow)
### ⏰ **Vad du kan åstadkomma denna timme**
### ⏰ **Vad du kan åstadkomma den här timmen**
- [ ] Gör post-lektions quiz och reflektera över dina svar
- [ ] Gör quizzen efter lektionen och reflektera över dina svar
- [ ] Installera GitHub Copilot-tillägget i VS Code
- [ ] Ställ in VS Code med GitHub Copilot-tillägget
- [ ] Testa 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 livet av en utvecklare"-video på YouTube
- [ ] Titta på en "En dag i en utvecklares liv" video på YouTube
- [ ] Börja ditt detektivarbete om programmeringsspråk (från utmaningen)
- [ ] Börja din programmeringsspråksdetektivarbete (från utmaningen)
### 📅 **Ditt veckolånga äventyr**
### 📅 **Ditt veckolånga äventyr**
- [ ] Slutför uppgiften och utforska 3 nya utvecklingsverktyg
- [ ] Gör klart 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 (till och med "Hello, [Ditt Namn]!")
- [ ] Försök bygga något litet i CodePen eller Replit (även bara "Hello, [Ditt namn]!")
- [ ] Läs ett blogginlägg av en utvecklare om deras 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 ett virtuellt meetup eller titta på ett programmeringsföredrag
- [ ] Börja lära dig ditt valda språk med online-handledning
- [ ] Börja lära dig ditt valda språk med online-tutorials
### 🗓️ **Din månadslånga förändring**
### 🗓️ **Din månadslånga förvandling**
- [ ] Bygg ditt första lilla projekt (ännu en enkel webbsida räknas!)
- [ ] Bygg ditt första lilla projekt (ännu en enkel webbsida räknas!)
- [ ] Bidra till ett opensource-projekt (börja med dokumentationsfixar)
- [ ] Bidra till ett open-source-projekt (börja med dokumentationsfixar)
- [ ] Mentor någon som precis börjat sin programmeringsresa
- [ ] Mentorskap någon som precis börjat sin programmeringsresa
- [ ] Skapa din utvecklarportfolio-webbplats
- [ ] Skapa din utvecklarportfolio-webbplats
- [ ] Koppla ihop med lokala utvecklarcommunities eller studiegrupper
- [ ] Koppla ihop med lokala utvecklargemenskaper eller studiegrupper
- [ ] Börja planera din nästa lärandemilstolpe
- [ ] Börja planera din nästa lärandemilstolpe
### 🎯 **Slutlig reflektion**
### 🎯 **Slutlig reflektion**
**Innan du går vidare, ta en stund att fira:**
**Innan du går vidare, ta en stund för att fira:**
- Vad är en sak med programmering som fick dig att känna 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änner du om att börja denna programmeringsresa?
- Hur känns det att starta denna programmeringsresa?
- Vad är en fråga du skulle vilja ställa en utvecklare just nu?
- Vilken fråga skulle du vilja ställa en utvecklare just nu?
```mermaid
```mermaid
journey
journey
@ -834,21 +836,21 @@ journey
section Idag
section Idag
Nyfiken: 3: You
Nyfiken: 3: You
Överväldigad: 4: You
Överväldigad: 4: You
Exalterad: 5: You
Uppspelt: 5: You
section Denna Vecka
section Denna Vecka
Utforskar: 4: You
Utforskar: 4: You
Lär Sig: 5: You
Lär: 5: You
Kopplar Ihop: 4: You
Kopplar ihop: 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 seniorutvecklare 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 fantastisk sällskap, och denna resa 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 seniorutvecklare 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! 🎉
---
---
<!-- 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 bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell humanö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, 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 är ett utbildningsbibliotek för att lära ut grunderna i webbapputveckling för 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 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.
### Viktiga komponenter
### Viktiga komponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
Även om detta inte är ett traditionellt monorepo, innehåller detta bibliotek flera oberoende projekt:
Även om det inte är ett traditionellt monorepo innehåller detta förråd flera oberoende projekt:
- Varje lektion är självständig
- Varje lektion är självständig
- Projekt delar inga beroenden
- Projekten delar inte beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Arbeta på individuella projekt utan att påverka andra
- Klona hela repot för full utbildningsupplevelse
- Klona hela förrådet för hela kursplanens upplevelse
---
---
<!-- 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 felaktigheter. Det ursprungliga dokumentet på dess ursprungsspråk ska betraktas som den auktoritativa källan. För viktig information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår vid användning av denna översättning.
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.
Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna fördjupar sig i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i frågesporter, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Var och en av de 24 lektionerna dyker ner i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag!
> Detta förråd inkluderar över 50 språköversättningar som betydligt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt utläsning:
> Detta repository innehåller över 50 språköversättningar vilket ökar nedladdningsstorleken avsevärt. För att klona utan översättningar, använd sparsamt utcheckning:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Detta ger dig allt du behöver för att slutföra kursen med en mycket snabbare nedladdning.
> Detta ger dig allt du behöver för att slutföra kursen med en mycket snabbare nedladdning.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Om du vill ha ytterligare översättningsspråk stödjs dessa [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Om du vill ha ytterligare språkstöd finns de listade [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Är du student?_
#### 🧑🎓 _Är du student?_
Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och även sätt att få ett gratis certifikat-voucher. Detta är sidan du vill bokmärka och kolla då och då eftersom vi byter ut innehållet varje månad.
Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och till och med sätt att få ett gratis certifikatvoucher. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi uppdaterar innehåll varje månad.
### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar att slutföra!
### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar att slutföra!
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med GitHub Copilot och Agent-läge. Om du inte har använt Agent-läge tidigare kan det inte bara generera text utan kan också skapa och redigera filer, köra kommandon med mera.
Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med GitHub Copilot och Agent-läget. Om du inte använt Agent-läget tidigare kan det inte bara generera text, utan även skapa och redigera filer, köra kommandon och mer.
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_
Nytt AI Assistant-projekt nyligen tillagt, kolla in det [projekt](./9-chat-project/README.md)
Nytt AI-assistentprojekt just tillagt, kolla in det [projektet](./9-chat-project/README.md)
### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript har just släppts
### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript har just släppts
Missa inte vår nya läroplan för Generativ AI!
Missa inte vår nya Generativ AI-läroplan!
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång!
Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning som vägleder dig genom ämnen som:
- Frågeteknik och promptteknik
Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning som guidar dig i att lära dig ämnen som:
- Prompting och promptteknik
- Text- och bildappsgenerering
- Text- och bildappsgenerering
- Sökappar
- Sökappar
@ -82,130 +93,127 @@ Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att
## 🌱 Komma igång
## 🌱 Komma igång
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) om hur du kan använda denna läroplan. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) på hur man använder denna läroplan. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Lärande](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med en för-foreläsningsfrågesport och fortsätt med att läsa föreläsningsmaterialet, komplettera de olika aktiviteterna och kontrollera din förståelse med post-foreläsningsfrågesporten.
**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett förföreläsningsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med efterföreläsningsquizet.
För att förbättra din inlärningsupplevelse, anslut med dina kamrater för att arbeta med projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns tillgängliga för att svara på dina frågor.
För att förbättra din lärandeupplevelse, koppla ihop med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns tillgängliga för att svara på dina frågor.
För att vidareutbilda dig rekommenderar vi starkt att utforska [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial.
För att fördjupa din utbildning rekommenderar vi starkt att utforska [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial.
### 📋 Ställa in din miljö
### 📋 Ställa in din miljö
Denna läroplan har en utvecklingsmiljö redo att användas! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad, ingen installation behövs-miljö_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Denna läroplan har en utvecklingsmiljö redo att användas! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan behov av installation_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Skapa ditt förråd
#### Skapa ditt repository
För att du enkelt ska kunna spara ditt arbete rekommenderas att du skapar din egen kopia av detta förråd. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt förråd i ditt GitHub-konto med en kopia av läroplanen.
För att enkelt spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt repository i ditt GitHub-konto med en kopia av läroplanen.
Följ dessa steg:
Följ dessa steg:
1. **Forka FÖrrådet**: Klicka på "Fork"-knappen i det övre högra hörnet på denna sida.
1. **Forka Repositoryt**: Klicka på knappen "Fork" uppe i högra hörnet på denna sida.
I din kopia av detta förråd som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i.
I din kopia av detta repository som du skapade, klicka på knappen **Code** och välj **Open with Codespaces**. Detta kommer att skapa en ny Codespace för dig att arbeta i.
För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg](../../1-getting-started-lessons/1-intro-to-programming-languages), guidar dig genom olika alternativ för varje av dessa verktyg så att du kan välja det som passar dig bäst.
För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg för yrket](../../1-getting-started-lessons/1-intro-to-programming-languages), guidar dig genom olika alternativ för var och en av dessa verktyg så att du kan välja det som passar dig bäst.
Vårt rekommenderade redigeringsprogram är [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Vår rekommendation är att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din redigerare, som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klona ditt förråd till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:
1. Klona ditt repository till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:en:
[CodeSpace](./images/createcodespace.png)
[CodeSpace](./images/createcodespace.png)
Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, byt ut `<your-repository-url>` mot URL:en du just kopierade:
Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, där du byter ut `<your-repository-url>` mot URL:en du just kopierade:
```bash
```bash
git clone <your-repository-url>
git clone <your-repository-url>
```
```
2. Öppna mappen i Visual Studio Code. Det kan du göra genom att klicka på **File** > **Open Folder** och välja mappen du just klonade.
2. Öppna mappen i Visual Studio Code. Du kan göra detta genom att klicka på **File** > **Open Folder** och välja den mapp du just klonade.
> Rekommenderade tillägg för Visual Studio Code:
> Rekommenderade Visual Studio Code-tillägg:
>
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor i Visual Studio Code
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor inom Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - för att hjälpa dig skriva kod snabbare
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - för att hjälpa dig skriva kod snabbare
## 📂 Varje lektion inkluderar:
## 📂 Varje lektion innehåller:
- valfri sketchnote
- valfritt skissnotat
- valfri kompletterande video
- valfri kompletterande video
- förberedande quiz före lektionen
- värmande quiz före lektionen
- skriftlig lektion
- skriven lektion
- för projektbaserade lektioner, steg-för-steg guider för hur man bygger projektet
- för projektbaserade lektioner, steg-för-steg-guider för att bygga projektet
- kunskapskontroller
- kunskapskontroller
- en utmaning
- en utmaning
- kompletterande läsning
- kompletterande läsning
- uppgift
- uppgift
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
- [quiz efter lektionen](https://ff-quizzes.netlify.app/web/)
> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i mappen `quiz-app`.
> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/) och quizappen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`-mappen.
## 🗃️ Lektioner
## 🗃️ Lektioner
| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare |
| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare |
| 01 | Kom igång | Introduktion till programmering och verktyg| Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och programvara som hjälper professionella utvecklare | [Introduktion till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | Kom igång | Introduktion till programmering och verktyg | Lär dig grundläggande principer bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare | [Introduktion till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Kom igång | Grunder i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, och hur man samarbetar med andra i en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 02 | Kom igång | Grundläggande GitHub, inkluderar arbete i team | Hur du använder GitHub i ditt projekt och samarbetar med andra på en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbåtkomst | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 05 | JS Grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera applikationens logik | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 05 | JS-grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera logiken i en applikation | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher |
| 06 | JS Grunder | Beslutsfattande med JS | Lär dig att skapa villkor i din kod med hjälp av beslutsfattandemetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 06 | JS-grunder | Beslutsfattande med JS | Lär dig skapa villkor i din kod med beslutsmetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grunder | Arrayer och loopar | Arbeta med data genom arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | JS-grunder | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML:en för att skapa ett online-terrarium, med fokus på layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML för att skapa ett online-terrarium, med fokus på layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS:en för att styla online-terrarium, med fokus på CSS-grunder, inklusive responsivt webbdesign | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS för att styla online-terrarium, med fokus på grunder i CSS inklusive responsiv design | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-closures, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett drag/drop-gränssnitt, med fokus på closures och DOM-manipulation | [JavaScript-closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulering | Bygg JavaScript för att göra terrariet till en drag-och-släpp-gränssnitt, med fokus på closures och DOM-manipulering | [JavaScript-closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbordevenemang för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbords-event för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skissar de första elementen i en webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skapar basen för ett webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygg ett formulär, anropa en API och lagra variabler lokalt | Bygg JavaScript-komponenterna i din webbläsartillägg för att anropa en API med hjälp av variabler lagrade lokalt | [API:er, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Skapa ett formulär, anropa en API och lagra variabler i lokal lagring | Bygg JavaScript-element i ditt webbläsartillägg för att anropa en API med variabler lagrade i lokal lagring | [API:er, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar | [Bakgrundsuppgifter och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbsida prestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar för att förbättra | [Bakgrundsprocesser och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på en skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på en skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektion | Få element att kollidera och reagera på varandra med hjälp av knapptryckningar och ge en cooldown-funktion för spelets prestanda| [Kollisionsdetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få element att kollidera och reagera på varandra med tangenttryckningar samt skapa en cooldown-funktion för att säkerställa spelets prestanda | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserat på spelets status och prestanda | [Poängräkning](./6-space-game/5-keeping-score/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserade på spelets status och prestation | [Poängräkning](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att rensa tillgångar och återställa variabelvärden | [Avslutsvillkor](./6-space-game/6-end-condition/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att rensa tillgångar och återställa variabler | [Avslutsvillkor](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa grunden till en multipages webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och rutter](./7-bank-project/1-template-route/README.md) | Yohan |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa skalmallen för en webbplats med flera sidor med routing och HTML-mallar | [HTML-mallar och rutter](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg ett inloggnings- och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg ett inloggnings- och registreringsformulär | Lär dig bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Sätt att hämta och använda data | Hur data flyter in och ut ur din app, hur man hämtar, lagrar och gör sig av med det | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur man hämtar, lagrar och slänger den | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp i tillståndshantering | Lär dig hur din app behåller tillstånd och hur du hanterar det programmässigt | [Tillståndshantering](./7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp kring state management | Lär dig hur din app behåller state och hur du hanterar det programmatiskt | [State management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig hur man använder en kodredigerare | [Använd VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig använda en kodredigerare| [Använd VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig hur du bygger din egen AI-assistent | [AI Assistentprojekt](./9-chat-project/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig bygga din egen AI-assistent | [AI Assistant-projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogik
## 🏫 Pedagogik
Vår läroplan är utformad med två viktiga pedagogiska principer i åtanke:
Vårt läroplan är utformat med två viktiga pedagogiska principer i åtanke:
* projektbaserat lärande
* projektbaserat lärande
* frekventa quiz
* frekventa quiz
Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktygen och teknikerna som används av dagens webbutvecklare. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, en miljövänlig webbläsartillägg, ett rymd-invaderarspel och en bankapp för företag. I slutet av serien kommer studenter att ha en gedigen förståelse för webbutveckling.
Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktyg och tekniker som dagens webbutvecklare använder. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, virtuellt terrarium, miljövänligt webbläsartillägg, rymdinvasionsspel och en bankapp för företag. I slutet av serien kommer studenter att ha fått en gedigen förståelse för webbutveckling.
> 🎓 Du kan ta de första lektionerna i denna läroplan som en [Lärväg](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
> 🎓 Du kan ta de första lektionerna i denna läroplan som en [Lärväg](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn!
Genom att säkerställa att innehållet överensstämmer med projekten blir processen mer engagerande för studenterna och konceptens bestående förstärks. Vi skrev också flera grundläggande lektioner i JavaScript för att introducera koncept, tillsammans med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen av videotutorials, vars några författare bidrog till denna läroplan.
Genom att säkerställa att innehållet överensstämmer med projekt blir processen mer engagerande för studenter och behållning av koncept förstärks. Vi har också skrivit flera startlektioner i JavaScript-grunder för att introducera koncept, tillsammans med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorials, där några författare bidragit till denna läroplan.
Dessutom sätter ett lågrisk-quiz före en lektion studentens fokus mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare bestående förståelse. Denna läroplan är designad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar smått och blir successivt mer komplexa vid slutet av 12-veckorscykeln.
Medan vi medvetet har undvikit att introducera JavaScript-ramverk för att fokusera på grundläggande färdigheter som webbutvecklare innan ett ramverk används, är ett bra nästa steg efter att ha genomfört denna läroplan att lära sig om Node.js via en annan videosamling: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Dessutom sätter ett låginsats-quiz före en lektion studentens avsikt mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer vidare retention. Denna läroplan är designad för att vara flexibel och rolig och kan tas helt eller delvis. Projekten startar små och blir successivt mer komplexa under 12-veckorscykeln.
> Besök våra riktlinjer för [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidrag](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback!
Även om vi med avsikt undvikit att introducera JavaScript-ramverk för att fokusera på de grundläggande färdigheter som behövs som webbutvecklare innan man tar till sig ett ramverk, skulle ett bra nästa steg efter denna läroplan vara att lära sig om Node.js via en annan samling videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besök våra [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidragsgivare](CONTRIBUTING.md) riktlinjer. Vi välkomnar din konstruktiva feedback!
## 🧭 Offlineåtkomst
## 🧭 Offlineåtkomst
Du kan köra denna dokumentation offline genom att använda [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin, och sedan i rotmappen av detta repo skriver du `docsify serve`. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
Du kan köra denna dokumentation offline med hjälp av [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala dator, och skriv sedan `docsify serve` i rotmappen för detta repo. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`.
## 📘 PDF
## 📘 PDF
En PDF med alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
En PDF med alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Andra kurser
## 🎒 Andra kurser
Vårt team producerar andra kurser! Kolla in:
Vårt team producerar andra kurser! Kolla in:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
@ -223,7 +231,7 @@ Vårt team producerar andra kurser! Kolla in:
---
---
### Generative AI Series
### Generativ AI-serie
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
@ -231,7 +239,7 @@ Vårt team producerar andra kurser! Kolla in:
---
---
### Core Learning
### Kärnlärande
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -242,7 +250,7 @@ Vårt team producerar andra kurser! Kolla in:
---
---
### Copilot Series
### Copilot-serie
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
@ -250,21 +258,21 @@ Vårt team producerar andra kurser! Kolla in:
## Få hjälp
## Få hjälp
Om du fastnar eller har några frågor om att bygga AI-appar. Gå med andra studenter och erfarna utvecklare i diskussioner om MCP. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt.
Om du fastnar eller har några frågor om att bygga AI-appar. Gå med andra som lär sig och erfarna utvecklare i diskussioner om MCP. Det är ett stödjande community där frågor är välkomna och kunskap delas fritt.
Detta förråd är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
Detta arkiv är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information.
---
---
<!-- 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 god notera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår 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 onoggrheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För viktig 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.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือที่ใช้ในการทำงาน | เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 01 | เริ่มต้นใช้งาน | บทนำสู่การเขียนโปรแกรมและเครื่องมือในงานพัฒนา | เรียนรู้พื้นฐานเบื้องต้นที่อยู่เบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้าง Terrarium ออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การสร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 13 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | สร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage | สร้างส่วนขยายเบราว์เซอร์ของคุณโดยใช้ JavaScript เพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; ศึกษาเกี่ยวกับประสิทธิภาพเว็บและการปรับแต่งบางอย่างเพื่อทำให้ | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 14 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์และประสิทธิภาพเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการปรับปรุงบางอย่างเพื่อทำให้ดีขึ้น | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงเพิ่มเติมด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับ Inheritance โดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดบน canvas | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้สำหรับวาดองค์ประกอบบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดบน canvas | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบบนหน้าจอ | ค้นพบว่าองค์ประกอบสามารถเคลื่อนที่โดยใช้พิกัดคาร์ทีเซียนและ Canvas API ได้อย่างไร | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบรอบจอ | ค้นพบว่าสิ่งต่าง ๆ สามารถเคลื่อนไหวโดยใช้พิกัดคาร์ทีเซียนและ Canvas API ได้อย่างไร | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
ในขณะที่เราได้ตั้งใจหลีกเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อมุ่งเน้นทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะใช้เฟรมเวิร์ก ขั้นตอนถัดไปที่ดีในการเรียนรู้หลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านชุดวิดีโออีกชุดหนึ่ง: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
แม้เราจะจงใจหลีกเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนจะใช้เฟรมเวิร์ก ขั้นตอนถัดไปที่ดีหลังจบหลักสูตรนี้คือการเรียนรู้ Node.js ผ่านชุดวิดีโออื่น: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"
> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และแนวทาง [การมีส่วนร่วม](CONTRIBUTING.md) ของเรา เรายินดีรับข้อเสนอแนะเชิงสร้างสรรค์จากคุณ!
> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และแนวทาง [Contributing](CONTRIBUTING.md) ของเรา เรายินดีรับฟังความคิดเห็นในการพัฒนาของคุณ!
localizeflow[bot]
6 months ago