46 KiB

Raw Blame History Unescape Escape

Ανάπτυξη Ιστότοπων για Αρχάριους - Ένα Πρόγραμμα Σπουδών

Μάθετε τα βασικά της ανάπτυξης ιστοτόπων με το ολοκληρωμένο μας μάθημα διάρκειας 12 εβδομάδων, από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS, και HTML μέσω πρακτικών έργων όπως τεραρίων, επεκτάσεις φυλλομετρητή και διαστημικά παιχνίδια. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Ενισχύστε τις δεξιότητές σας και βελτιώστε τη διατήρηση γνώσης με τη αποτελεσματική παιδαγωγική μας βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα!

Γίνετε μέλος της κοινότητας Discord του Azure AI Foundry

Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε με αυτούς τους πόρους:

Κλωνοποίηση του Αποθετηρίου: Κάντε κλικ στο
Αντιγραφή του Αποθετηρίου: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Γίνετε μέλος στο Azure AI Foundry Discord και γνωρίστε ειδικούς και συναδέλφους προγραμματιστές

🌐 Υποστήριξη Πολύγλωσσων

Υποστηρίζεται μέσω GitHub Action (Αυτοματοποιημένο & Πάντα Ενημερωμένο)

Προτιμάτε να Αντιγράψετε τοπικά;

Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών που αυξάνουν σημαντικά το μέγεθος λήψης. Για αντιγραφή χωρίς μεταφράσεις, χρησιμοποιήστε sparse checkout:
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'
Αυτό σας δίνει όλα όσα χρειάζεστε για να ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη.

Αν θέλετε να υποστηριχθούν πρόσθετες γλώσσες μετάφρασης, αυτές αναφέρονται εδώ

🧑‍🎓 Είσαι φοιτητής;

Επισκεφθείτε τη Σελίδα Φοιτητών όπου θα βρείτε πόρους για αρχάριους, πακέτα φοιτητών και ακόμη τρόπους για να αποκτήσετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στους σελιδοδείκτες σας και να ελέγχετε κατά διαστήματα καθώς αλλάζουμε το περιεχόμενο μηνιαίως.

📣 Ανακοίνωση - Νέες προκλήσεις λειτουργίας GitHub Copilot Agent για ολοκλήρωση!

Προστέθηκε νέα πρόκληση, αναζητήστε το "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Πρόκειται για νέα πρόκληση για να ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, είναι ικανή όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να τρέχει εντολές και άλλα.

📣 Ανακοίνωση - Νέο Έργο για κατασκευή με τη χρήση Γενετικής Τεχνητής Νοημοσύνης

Πρόσφατα προστέθηκε το νέο έργο Βοηθού AI, δείτε το έργο

📣 Ανακοίνωση - Νέο Πρόγραμμα Σπουδών για Γενετική Τεχνητή Νοημοσύνη στη JavaScript μόλις κυκλοφόρησε

Μην χάσετε το νέο μας πρόγραμμα σπουδών για τη Γενετική Τεχνητή Νοημοσύνη!

Επισκεφθείτε https://aka.ms/genai-js-course για να ξεκινήσετε!

Μαθήματα που καλύπτουν από βασικά μέχρι RAG.
Αλληλεπιδράστε με ιστορικούς χαρακτήρες χρησιμοποιώντας GenAI και την εφαρμογή συνοδού μας.
Διασκεδαστικό και συναρπαστικό αφήγημα, θα ταξιδεύετε στο χρόνο!

Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσεων και μια πρόκληση για να σας καθοδηγήσει στη μάθηση θεμάτων όπως:

Prompting και μηχανική μηνυμάτων
Δημιουργία εφαρμογών κειμένου και εικόνας
Εφαρμογές αναζήτησης

Επισκεφθείτε 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

Εκτέλεση του προγράμματος σπουδών σε Codespace

Στο αντίγραφό σας αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί Code και επιλέξτε Open with Codespaces. Αυτό θα δημιουργήσει ένα νέο Codespace για να εργαστείτε μέσα.

Εκτέλεση του προγράμματος σπουδών τοπικά στον υπολογιστή σας

Για να εκτελέσετε αυτό το πρόγραμμα σπουδών τοπικά στον υπολογιστή σας, θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν φυλλομετρητή και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, Εισαγωγή στις Γλώσσες Προγραμματισμού και τα Εργαλεία του Επαγγέλματος, θα σας καθοδηγήσει μέσα από διάφορες επιλογές για το καθένα από αυτά τα εργαλεία για να επιλέξετε τι λειτουργεί καλύτερα για εσάς.

Η σύστασή μας είναι να χρησιμοποιήσετε το Visual Studio Code ως τον επεξεργαστή σας, που διαθέτει επίσης ενσωματωμένο Τερματικό. Μπορείτε να κατεβάσετε το Visual Studio Code εδώ.

Κλωνοποιήστε το αποθετήριό σας στον υπολογιστή σας. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί Code και αντιγράφοντας το URL:

CodeSpace Στη συνέχεια, ανοίξτε το Τερματικό μέσα στο Visual Studio Code και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το <your-repository-url> με τη διεύθυνση URL που μόλις αντιγράψατε:
```
git clone <your-repository-url>
```
Ανοίξτε το φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο Αρχείο > Άνοιγμα Φακέλου και επιλέγοντας το φάκελο που μόλις κλωνοποιήσατε.

Συνιστώμενες Επεκτάσεις για το Visual Studio Code:

Live Server - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code

Copilot - για να σας βοηθήσει να γράφετε κώδικα πιο γρήγορα

📂 Κάθε μάθημα περιλαμβάνει:

προαιρετικό σχεδιάγραμμα (sketchnote)
προαιρετικό συμπληρωματικό βίντεο
προθέρμανση πριν το μάθημα με quiz
γραπτό μάθημα
για μαθήματα που βασίζονται σε έργα, οδηγίες βήμα προς βήμα για το πώς να δημιουργήσετε το έργο
ελέγχους γνώσεων
μια πρόκληση
συμπληρωματική ανάγνωση
ανάθεση εργασίας
quiz μετά το μάθημα

Σημείωση για τα κουίζ: Όλα τα κουίζ περιλαμβάνονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα εδώ η εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο quiz-app.

🗃️ Μαθήματα

	Όνομα Έργου	Διδακτικές Έννοιες	Μαθησιακοί Στόχοι	Συνδεδεμένο Μάθημα	Συγγραφέας
01	Ξεκινώντας	Εισαγωγή στον Προγραμματισμό και τα Εργαλεία της Εμπορικής Τέχνης	Μάθετε τις βασικές αρχές που βρίσκονται πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους	Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία της Εμπορικής Τέχνης	Jasmine
02	Ξεκινώντας	Βασικά του GitHub, περιλαμβάνει εργασία με ομάδα	Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργαστείτε με άλλους σε μια βάση κώδικα	Εισαγωγή στο GitHub	Floor
03	Ξεκινώντας	Προσβασιμότητα	Μάθετε τα βασικά της προσβασιμότητας στον ιστό	Βασικά της Προσβασιμότητας	Christopher
04	Βασικά JS	Τύποι Δεδομένων JavaScript	Τα βασικά των τύπων δεδομένων JavaScript	Τύποι Δεδομένων	Jasmine
05	Βασικά JS	Συναρτήσεις και Μέθοδοι	Μάθετε για τις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής	Συναρτήσεις και Μέθοδοι	Jasmine and Christopher
06	Βασικά JS	Λήψη Αποφάσεων με JS	Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων	Λήψη Αποφάσεων	Jasmine
07	Βασικά JS	Πίνακες και Βρόχοι	Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στη JavaScript	Πίνακες και Βρόχοι	Jasmine
08	Terrarium	HTML στην Πράξη	Δημιουργήστε το HTML για να φτιάξετε ένα διαδικτυακό terrarium, με εστίαση στην κατασκευή διάταξης	Εισαγωγή στο HTML	Jen
09	Terrarium	CSS στην Πράξη	Δημιουργήστε το CSS για να στυλιζάρετε το διαδικτυακό terrarium, εστιάζοντας στα βασικά του CSS και στο να κάνετε τη σελίδα ανταποκρινόμενη	Εισαγωγή στο CSS	Jen
10	Terrarium	Κλεισίματα JavaScript, χειρισμός DOM	Δημιουργήστε τον JavaScript κώδικα για να λειτουργεί το terrarium ως διεπαφή drag/drop, εστιάζοντας στα κλεισίματα και το χειρισμό DOM	Κλεισίματα JavaScript, χειρισμός DOM	Jen
11	Typing Game	Δημιουργία Παιχνιδιού Πληκτρολόγησης	Μάθετε πώς να χρησιμοποιείτε τα συμβάντα πληκτρολογίου για να οδηγήσετε τη λογική της εφαρμογής JavaScript	Προγραμματισμός με Βάση τα Συμβάντα	Christopher
12	Green Browser Extension	Εργασία με Περιηγητές	Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να δομήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή	Σχετικά με τους Περιηγητές	Jen
13	Green Browser Extension	Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθετήριο	Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας για να καλείτε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες στο τοπικό αποθετήριο	API, Φόρμες και Τοπικό Αποθετήριο	Jen
14	Green Browser Extension	Διαδικασίες παρασκηνίου στον περιηγητή, απόδοση ιστού	Χρησιμοποιήστε τις διαδικασίες παρασκηνίου του περιηγητή για να διαχειριστείτε το εικονίδιο της επέκτασης. Μάθετε για την απόδοση του ιστού και ορισμένες βελτιστοποιήσεις για να κάνετε	Εργασίες Παρασκηνίου και Απόδοση	Jen
15	Space Game	Πιο προχωρημένη ανάπτυξη παιχνιδιών με JavaScript	Μάθετε για την κληρονομιά χρησιμοποιώντας τόσο Κλάσεις όσο και Σύνθεση και το πρότυπο Pub/Sub, σε προετοιμασία για τη δημιουργία ενός παιχνιδιού	Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών	Chris
16	Space Game	Σχεδίαση στο καμβά	Μάθετε για το Canvas API, που χρησιμοποιείται για να σχεδιάζει στοιχεία σε μια οθόνη	Σχεδίαση στον Καμβά	Chris
17	Space Game	Μετακίνηση στοιχείων στην οθόνη	Ανακαλύψτε πώς τα στοιχεία μπορούν να αποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το Canvas API	Μετακίνηση Στοιχείων	Chris
18	Space Game	Ανίχνευση συγκρούσεων	Κάντε τα στοιχεία να συγκρουστούν και να αντιδρούν το ένα στο άλλο χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε μια λειτουργία cooldown για να εξασφαλίσετε την απόδοση του παιχνιδιού	Ανίχνευση Συγκρούσεων	Chris
19	Space Game	Κρατώντας το σκορ	Εκτελέστε μαθηματικούς υπολογισμούς βάσει της κατάστασης και της απόδοσης του παιχνιδιού	Κρατώντας το Σκορ	Chris
20	Space Game	Λήξη και επανεκκίνηση του παιχνιδιού	Μάθετε για τη λήξη και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου καθαρισμού πόρων και επαναφοράς τιμών μεταβλητών	Η Συνθήκη Λήξης	Chris
21	Banking App	Πρότυπα HTML και Διαδρομές σε μια Web Εφαρμογή	Μάθετε πώς να δημιουργήσετε τη δομή μιας ιστοσελίδας πολλαπλών σελίδων χρησιμοποιώντας διαδρομές και πρότυπα HTML	Πρότυπα HTML και Διαδρομές	Yohan
22	Banking App	Δημιουργία φορμας σύνδεσης και εγγραφής	Μάθετε για τη δημιουργία φορμών και τη διαχείριση διαδικασιών επικύρωσης	Φόρμες	Yohan
23	Banking App	Μέθοδοι ανάκτησης και χρήσης δεδομένων	Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα αντλήσετε, να τα αποθηκεύσετε και να τα απορρίψετε	Δεδομένα	Yohan
24	Banking App	Έννοιες διαχείρισης κατάστασης	Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να την διαχειριστείτε προγραμματιστικά	Διαχείριση Κατάστασης	Yohan
25	Browser/VScode Code	Εργασία με το VScode	Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα	Χρήση του Επεξεργαστή Κώδικα VScode	Chris
26	AI Assistants	Εργασία με Τεχνητή Νοημοσύνη	Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό τεχνητής νοημοσύνης	Έργο Βοηθού Τεχνητής Νοημοσύνης	Chris

🏫 Παιδαγωγική

Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές κατά νου:

εκμάθηση με βάση τα έργα
συχνά κουίζ

Το πρόγραμμα διδάσκει τα βασικά του JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούνται από τους σημερινούς προγραμματιστές ιστού. Οι μαθητές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία δημιουργώντας παιχνίδι πληκτρολόγησης, εικονικό terrarium, φιλική προς το περιβάλλον επέκταση προγράμματος περιήγησης, παιχνίδι τύπου space-invader και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια σταθερή κατανόηση της ανάπτυξης ιστού.

🎓 Μπορείτε να παρακολουθήσετε τα πρώτα λίγα μαθήματα αυτού του προγράμματος ως Μονοπάτι Μάθησης στο Microsoft Learn!

Διασφαλίζοντας ότι το περιεχόμενο ευθυγραμμίζεται με τα έργα, η διαδικασία γίνεται πιο ενδιαφέρουσα για τους μαθητές και η διατήρηση των εννοιών θα ενισχυθεί. Επίσης, γράψαμε αρκετά εισαγωγικά μαθήματα στις βασικές έννοιες της JavaScript για να εισάγουμε έννοιες, σε συνδυασμό με ένα βίντεο από τη συλλογή βίντεο "Beginners Series to: JavaScript", με κάποιους από τους συγγραφείς του να συμβάλλουν σε αυτό το πρόγραμμα σπουδών.

Επιπλέον, ένα κουίζ χαμηλού κόστους πριν το μάθημα θέτει την πρόθεση του μαθητή για τη μάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή εν μέρει. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο πολύπλοκα μέχρι το τέλος του δωδεκαβδομαδιαίου κύκλου.

Παρόλο που αποφεύξαμε σκόπιμα την εισαγωγή πλαισίων εργασίας JavaScript για να επικεντρωθούμε στις βασικές δεξιότητες που χρειάζονται ως προγραμματιστής ιστού πριν υιοθετήσουμε ένα πλαίσιο, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "Beginner Series to: Node.js".

Επισκεφθείτε τις οδηγίες μας Κώδικας Συμπεριφοράς και Συνεισφοράς. Καλωσορίζουμε τα εποικοδομητικά σας σχόλια!

🧭 Πρόσβαση εκτός σύνδεσης

Μπορείτε να τρέξετε αυτήν την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το Docsify. Φτιάξτε ένα αντίγραφο αυτού του αποθετηρίου, εγκαταστήστε το Docsify στον τοπικό σας υπολογιστή και μετά στον ριζικό φάκελο αυτού του αποθετηρίου, πληκτρολογήστε docsify serve. Η ιστοσελίδα θα φιλοξενείται στην πόρτα 3000 στο τοπικό σας μηχάνημα: localhost:3000.

📘 PDF

Ένα αρχείο PDF με όλα τα μαθήματα μπορεί να βρεθεί εδώ.

🎒 Άλλα Μαθήματα

Η ομάδα μας παράγει και άλλα μαθήματα! Δείτε:

LangChain

Azure / Edge / MCP / Agents

Generative AI Series

Core Learning

Copilot Series

Λήψη Βοήθειας

Αν κολλήσετε ή έχετε οποιεσδήποτε ερωτήσεις σχετικά με τη δημιουργία εφαρμογών AI. Συμμετάσχετε με άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα.

Αν έχετε σχόλια για το προϊόν ή σφάλματα κατά την κατασκευή επισκεφτείτε:

Άδεια

Αυτό το αποθετήριο έχει άδεια υπό την άδεια MIT. Δείτε το αρχείο LICENSE για περισσότερες πληροφορίες.

Απόρριψη ευθυνών:
Αυτό το έγγραφο έχει μεταφραστεί με τη χρήση της υπηρεσίας αυτόματης μετάφρασης AI Co-op Translator. Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να είστε ενήμεροι ότι οι αυτόματες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στην μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

46 KiB Raw Blame History Unescape Escape