Μάθετε τα βασικά της ανάπτυξης ιστοσελίδων με το ολοκληρωμένο μας μάθημα διάρκειας 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεράριουμ, επεκτάσεις προγράμματος περιήγησης και διαστημικά παιχνίδια. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Βελτιώστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με τη στοχευμένη μας παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!
Γίνετε μέλος της κοινότητας Azure AI Foundry στο Discord
Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε με αυτούς τους πόρους:
- Δημιουργήστε Fork στο Αποθετήριο: Πατήστε
- Κλωνοποιήστε το Αποθετήριο:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git - Γίνετε μέλος του Azure AI Foundry Discord και γνωρίστε ειδικούς και άλλους προγραμματιστές
Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Khmer | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese
Προτιμάτε να Κλωνοποιήσετε τοπικά;
Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις που αυξάνουν σημαντικά το μέγεθος λήψης. Για κλωνοποίηση χωρίς μεταφράσεις, χρησιμοποιήστε sparse checkout:
Bash / macOS / Linux:
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'CMD (Windows):
git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"Αυτό σας δίνει όλα όσα χρειάζεστε για να ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.
Εάν επιθυμείτε να προστεθούν επιπλέον γλώσσες μετάφρασης, οι υποστηριζόμενες γλώσσες αναφέρονται εδώ
Επισκεφθείτε τη σελίδα Student Hub όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμη τρόπους να αποκτήσετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που αξίζει να αποθηκεύσετε στα αγαπημένα και να ελέγχετε τακτικά καθώς ανανεώνουμε το περιεχόμενο κάθε μήνα.
Προστέθηκε νέα Πρόκληση, αναζητήστε "GitHub Copilot Agent Challenge 🚀" στις περισσότερες ενότητες. Πρόκειται για νέα πρόκληση για να ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, αυτή μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα.
Μόλις προστέθηκε νέο έργο AI Assistant, ρίξτε μια ματιά στο έργο
📣 Ανακοίνωση - Νέο Πρόγραμμα Σπουδών για Γενετική Τεχνητή Νοημοσύνη για JavaScript μόλις κυκλοφόρησε
Μην χάσετε το νέο μας πρόγραμμα Γενετικής Τεχνητής Νοημοσύνης!
Επισκεφθείτε https://aka.ms/genai-js-course για να ξεκινήσετε!
- Μαθήματα που καλύπτουν τα πάντα από τα βασικά έως RAG.
- Αλληλεπιδράστε με ιστορικούς χαρακτήρες χρησιμοποιώντας το GenAI και την εφαρμογή συνοδός μας.
- Διασκεδαστική και συναρπαστική αφήγηση, θα ταξιδεύετε στο χρόνο!
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσεων και μια πρόκληση που θα σας καθοδηγήσει στην εκμάθηση θεμάτων όπως:
- Δημιουργία προτροπών και τεχνική prompt engineering
- Δημιουργία εφαρμογών κειμένου και εικόνας
- Εφαρμογές αναζήτησης
Επισκεφθείτε https://aka.ms/genai-js-course για να ξεκινήσετε!
Καθηγητές, έχουμε συμπεριλάβει κάποιες προτάσεις για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε τα σχόλιά σας στο φόρουμ συζητήσεων!
Μαθητές, για κάθε μάθημα, ξεκινήστε με ένα προ-μάθημα κουίζ και συνεχίστε διαβάζοντας το υλικό, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγχοντας την κατανόησή σας με το κουίζ μετά το μάθημα.
Για να βελτιώσετε την εκπαιδευτική σας εμπειρία, συνδεθείτε με τους συναδέλφους σας για να δουλέψετε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο φόρουμ συζητήσεών μας όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμη να απαντήσει στις ερωτήσεις σας.
Για περαιτέρω εκπαίδευση, προτείνουμε ανεπιφύλακτα να εξερευνήσετε το Microsoft Learn για επιπλέον εκπαιδευτικό υλικό.
Αυτό το πρόγραμμα έχει ένα έτοιμο περιβάλλον ανάπτυξης! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε ένα Codespace (ένα περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς να χρειάζεται εγκατάσταση), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας ένα επεξεργαστή κειμένου όπως το Visual Studio Code.
Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε πατώντας το κουμπί Use this template στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας GitHub με ένα αντίγραφο του προγράμματος σπουδών.
Ακολουθήστε αυτά τα βήματα:
- Δημιουργήστε Fork στο Αποθετήριο: Πατήστε το κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας.
- Κλωνοποιήστε το Αποθετήριο:
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Στο αντίγραφό σας αυτού του αποθετηρίου που δημιουργήσατε, πατήστε το κουμπί Code και επιλέξτε Open with Codespaces. Αυτό θα δημιουργήσει ένα νέο Codespace για να δουλέψετε μέσα.
Για να τρέξετε το πρόγραμμα τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, ένα πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία του Επαγγέλματος, θα σας καθοδηγήσει μέσα από τις διάφορες επιλογές κάθε εργαλείου ώστε να επιλέξετε τι ταιριάζει καλύτερα σε εσάς.
Η πρότασή μας είναι να χρησιμοποιήσετε το Visual Studio Code ως τον επεξεργαστή σας, που διαθέτει επίσης ενσωματωμένο Τερματικό. Μπορείτε να κατεβάσετε το Visual Studio Code εδώ.
-
Αντιγράψτε το αποθετήριο σας στον υπολογιστή σας. Μπορείτε να το κάνετε αυτό πατώντας το κουμπί Code και αντιγράφοντας το URL:
Στη συνέχεια, ανοίξτε το Τερματικό μέσα στο Visual Studio Code και εκτελέστε την παρακάτω εντολή, αντικαθιστώντας το
<your-repository-url>με το URL που μόλις αντιγράψατε:git clone <your-repository-url>
-
Ανοίξτε το φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε αυτό πατώντας File > Open Folder και επιλέγοντας το φάκελο που μόλις αντιγράψατε.
Προτεινόμενες επεκτάσεις για το Visual Studio Code:
- Live Server - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code
- Copilot - για να σας βοηθά να γράφετε κώδικα πιο γρήγορα
- προαιρετικό σκίτσο
- προαιρετικό συμπληρωματικό βίντεο
- προθέρμανση με quiz πριν το μάθημα
- γραπτό μάθημα
- για μαθήματα με έργα, οδηγούς βήμα-βήμα για το πώς να φτιάξετε το έργο
- ελέγχους γνώσης
- μια πρόκληση
- συμπληρωματική ανάγνωση
- ανάθεση εργασίας
- quiz μετά το μάθημα
Μια σημείωση για τα quiz: Όλα τα quiz περιέχονται στον φάκελο Quiz-app, συνολικά 48 quiz με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα εδώ και η εφαρμογή quiz μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο
quiz-app.
| Όνομα Έργου | Διδακτικές Έννοιες | Στόχοι Μάθησης | Συνδεδεμένο Μάθημα | Συγγραφέας | |
|---|---|---|---|---|---|
| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία της Επαγγελματίας | Μάθετε τις βασικές αρχές που διέπουν τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία | Jasmine |
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει συνεργασία με ομάδα | Πώς να χρησιμοποιείτε το GitHub στο έργο σας και πώς να συνεργάζεστε με άλλους σε μια βάση κώδικα | Εισαγωγή στο GitHub | Floor |
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στο διαδίκτυο | Βασικά Προσβασιμότητας | Christopher |
| 04 | Βασικά JS | Τύποι Δεδομένων JavaScript | Τα βασικά για τους τύπους δεδομένων στη JavaScript | Τύποι Δεδομένων | Jasmine |
| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για συναρτήσεις και μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | Συναρτήσεις και Μέθοδοι | Jasmine και Christopher |
| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικα σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | Λήψη Αποφάσεων | Jasmine |
| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη JavaScript | Πίνακες και Βρόχοι | Jasmine |
| 08 | Terrarium | HTML στην Πράξη | Δημιουργήστε το HTML για να φτιάξετε ένα διαδικτυακό terrarium, εστιάζοντας στη δημιουργία διάταξης | Εισαγωγή στο HTML | Jen |
| 09 | Terrarium | CSS στην Πράξη | Δημιουργήστε το CSS για να στυλιζάρετε το διαδικτυακό terrarium, εστιάζοντας στα βασικά του CSS και το responsive design | Εισαγωγή στο CSS | Jen |
| 10 | Terrarium | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε το JavaScript ώστε το terrarium να λειτουργεί με drag/drop interface, εστιάζοντας στα closures και χειρισμό DOM | Κλεισίματα JavaScript, χειρισμός DOM | Jen |
| 11 | Παιχνίδι Πληκτρολόγησης | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου για να καθοδηγήσετε τη λογική της εφαρμογής JavaScript σας | Προγραμματισμός με συμβάντα | Christopher |
| 12 | Πράσινη Επέκταση Περιηγητή | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους, και πώς να στήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | Σχετικά με τους Περιηγητές | Jen |
| 13 | Πράσινη Επέκταση Περιηγητή | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών τοπικά | Δημιουργήστε τα JavaScript στοιχεία της επέκτασης περιηγητή σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες τοπικά | APIs, Φόρμες και Τοπική Αποθήκευση | Jen |
| 14 | Πράσινη Επέκταση Περιηγητή | Παρασκηνιακές διεργασίες στον περιηγητή, απόδοση στο web | Χρησιμοποιήστε τις παρασκηνιακές διεργασίες του περιηγητή για να διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση και βελτιστοποιήσεις | Παρασκηνιακές Εργασίες και Απόδοση | Jen |
| 15 | Παιχνίδι Διαστήματος | Προχωρημένη Ανάπτυξη Παιχνιδιού με JavaScript | Μάθετε για την κληρονομικότητα μέσω Κλάσεων και Σύνθεσης καθώς και το μοτίβο Pub/Sub, προετοιμαζόμενοι για ανάπτυξη παιχνιδιού | Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιού | Chris |
| 16 | Παιχνίδι Διαστήματος | Σχεδίαση σε καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται για τη σχεδίαση στοιχείων σε οθόνη | Σχεδίαση σε Καμβά | Chris |
| 17 | Παιχνίδι Διαστήματος | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν να κινηθούν χρησιμοποιώντας καρτεσιανές συντεταγμένες και το Canvas API | Μετακίνηση Στοιχείων | Chris |
| 18 | Παιχνίδι Διαστήματος | Ανίχνευση Σύγκρουσης | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε συνάρτηση cooldown για την απόδοση του παιχνιδιού | Ανίχνευση Σύγκρουσης | Chris |
| 19 | Παιχνίδι Διαστήματος | Καταμέτρηση Βαθμολογίας | Πραγματοποιήστε μαθηματικούς υπολογισμούς βάσει της κατάστασης και της απόδοσης του παιχνιδιού | Καταμέτρηση Βαθμολογίας | Chris |
| 20 | Παιχνίδι Διαστήματος | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς μεταβλητών | Ο Όρος Τερματισμού | Chris |
| 21 | Εφαρμογή Τραπεζικής | Πρότυπα HTML και Διαδρομές σε Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας διαδρομές και πρότυπα HTML | Πρότυπα HTML και Διαδρομές | Yohan |
| 22 | Εφαρμογή Τραπεζικής | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και διαχείριση ελέγχων εγκυρότητας | Φόρμες | Yohan |
| 23 | Εφαρμογή Τραπεζικής | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτάτε, αποθηκεύετε και απορρίπτετε | Δεδομένα | Yohan |
| 24 | Εφαρμογή Τραπεζικής | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | Διαχείριση Κατάστασης | Yohan |
| 25 | Κώδικας Browser/VScode | Εργασία με VScode | Μάθετε πώς να χρησιμοποιείτε έναν κειμενογράφο κώδικα | Χρήση του Visual Studio Code | Chris |
| 26 | Βοηθοί Τεχνητής Νοημοσύνης | Εργασία με Τεχνητή Νοημοσύνη | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό AI | Έργο Βοηθού AI | Chris |
Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές κατά νου:
- μάθηση βασισμένη σε έργα
- συχνά quiz
Το πρόγραμμα διδάσκει τα θεμέλια της JavaScript, HTML και CSS, καθώς και τα πιο σύγχρονα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστοσελίδων. Οι μαθητές θα έχουν την ευκαιρία να αναπτύξουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια οικολογική επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια εφαρμογή τραπεζικής για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια στέρεη κατανόηση της ανάπτυξης ιστού.
🎓 Μπορείτε να παρακολουθήσετε τα πρώτα μαθήματα αυτής της ύλης ως Μονοπάτι Μάθησης στο Microsoft Learn!
Με τη διασφάλιση ότι το περιεχόμενο ευθυγραμμίζεται με τα έργα, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Επίσης, γράψαμε αρκετά αρχικά μαθήματα στα βασικά της JavaScript για να εισαγάγουμε έννοιες, σε συνδυασμό με ένα βίντεο από τη συλλογή βιντεομαθημάτων "Beginners Series to: JavaScript", με ορισμένους από τους συγγραφείς της να συμβάλλουν σ' αυτό το πρόγραμμα σπουδών.
Επιπλέον, ένα quiz χαμηλής έντασης πριν από το μάθημα θέτει την πρόθεση του μαθητή για τη μάθηση ενός θέματος, ενώ ένα δεύτερο quiz μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση γνώσεων. Το πρόγραμμα σπουδών έχει σχεδιαστεί να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή μερικώς. Τα έργα ξεκινούν μικρά και γίνονται ολοένα και πιο σύνθετα μέχρι το τέλος του 12-εβδομάδων κύκλου.
Ενώ αποφεύξαμε σκόπιμα την εισαγωγή πλαισίων JavaScript για να εστιάσουμε στις βασικές δεξιότητες που χρειάζεται ένας προγραμματιστής ιστού πριν υιοθετήσει ένα πλαίσιο, το επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "Beginner Series to: Node.js".
Επισκεφτείτε τους Κανόνες Συμπεριφοράς και τις οδηγίες Συμμετοχής. Καλωσορίζουμε τα εποικοδομητικά σας σχόλια!
Μπορείτε να εκτελέσετε αυτή την τεκμηρίωση χωρίς σύνδεση χρησιμοποιώντας το Docsify. Κάντε fork αυτό το αποθετήριο, εγκαταστήστε το Docsify στον τοπικό σας υπολογιστή και στη συνέχεια στον ριζικό φάκελο αυτού του αποθετηρίου πληκτρολογήστε docsify serve. Η ιστοσελίδα θα σερβιριστεί στη θύρα 3000 στο localhost σας: localhost:3000.
Ένα PDF με όλα τα μαθήματα μπορείτε να βρείτε εδώ.
Η ομάδα μας δημιουργεί και άλλα μαθήματα! Ρίξτε μια ματιά:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Αν κολλήσετε ή έχετε οποιεσδήποτε ερωτήσεις σχετικά με την ανάπτυξη εφαρμογών AI. Ενταχθείτε σε άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.
Αν έχετε σχόλια για το προϊόν ή σφάλματα κατά την ανάπτυξη επισκεφθείτε:
Αυτό το αποθετήριο έχει αδειοδοτηθεί υπό την άδεια MIT. Δείτε το αρχείο LICENSE για περισσότερες πληροφορίες.
Αποποίηση ευθυνών:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI Co-op Translator. Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε σημειώστε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε καμία ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.