39 KiB

Raw Permalink Blame History Unescape Escape

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

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

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

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

🌐 Υποστήριξη Πολλαπλών Γλωσσών

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

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

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

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

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

Προστέθηκε νέο έργο AI Assistant, δείτε το έργο

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

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

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

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

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

Δημιουργία και βελτιστοποίηση προτροπών
Δημιουργία εφαρμογών κειμένου και εικόνας
Εφαρμογές αναζήτησης

Επισκεφθείτε 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 για να εργαστείτε.

!Codespace./images/createcodespace.png)

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

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

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

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

!CodeSpace

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

Άνοιγμα Φακέλου και επιλογή του φακέλου που μόλις κλωνοποιήσατε. Προτεινόμενες επεκτάσεις για το Visual Studio Code:

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

Copilot - για να γράφετε κώδικα πιο γρήγορα

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

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

Σημείωση για τα κουίζ: Όλα τα κουίζ βρίσκονται στον φάκελο 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 για να φτιάξετε ένα online terrarium, εστιάζοντας στη δημιουργία διάταξης	Εισαγωγή στο HTML	Jen
09	Terrarium	CSS στην Πράξη	Δημιουργήστε το CSS για να στυλιζάρετε το online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της προσαρμογής της σελίδας	Εισαγωγή στο CSS	Jen
10	Terrarium	Κλεισίματα JavaScript, Διαχείριση DOM	Δημιουργήστε το JavaScript για να λειτουργήσει το terrarium ως διεπαφή drag/drop, εστιάζοντας στα κλεισίματα και τη διαχείριση DOM	Κλεισίματα JavaScript, Διαχείριση DOM	Jen
11	Typing Game	Δημιουργία Παιχνιδιού Πληκτρολόγησης	Μάθετε πώς να χρησιμοποιείτε γεγονότα πληκτρολογίου για να καθοδηγήσετε τη λογική της εφαρμογής σας	Προγραμματισμός με Γεγονότα	Christopher
12	Green Browser Extension	Εργασία με Περιηγητές	Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους, και πώς να δημιουργήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή	Σχετικά με τους Περιηγητές	Jen
13	Green Browser Extension	Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών σε τοπική αποθήκευση	Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες σε τοπική αποθήκευση	APIs, Φόρμες και Τοπική Αποθήκευση	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	Ανίχνευση συγκρούσεων	Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και παρέχετε μια λειτουργία ψύξης για την απόδοση του παιχνιδιού	Ανίχνευση Συγκρούσεων	Chris
19	Space Game	Καταγραφή σκορ	Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και την απόδοση του παιχνιδιού	Καταγραφή Σκορ	Chris
20	Space Game	Τερματισμός και επανεκκίνηση παιχνιδιού	Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς τιμών μεταβλητών	Συνθήκη Τερματισμού	Chris
21	Banking App	Πρότυπα HTML και Διαδρομές σε μια Εφαρμογή Ιστού	Μάθετε πώς να δημιουργείτε τη δομή της αρχιτεκτονικής μιας ιστοσελίδας πολλαπλών σελίδων χρησιμοποιώντας διαδρομές και πρότυπα HTML	Πρότυπα HTML και Διαδρομές	Yohan
22	Banking App	Δημιουργία Φόρμας Εισόδου και Εγγραφής	Μάθετε για τη δημιουργία φορμών και τη διαχείριση ρουτινών επικύρωσης	Φόρμες	Yohan
23	Banking App	Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων	Πώς τα δεδομένα ρέουν μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτάτε, να τα αποθηκεύετε και να τα διαχειρίζεστε	Δεδομένα	Yohan
24	Banking App	Έννοιες Διαχείρισης Κατάστασης	Μάθετε πώς η εφαρμογή σας διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά	Διαχείριση Κατάστασης	Yohan
25	Browser/VScode Code	Εργασία με το VScode	Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα	Χρήση του VScode Code Editor	Chris
26	AI Assistants	Εργασία με AI	Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό AI	Έργο Βοηθού AI	Chris

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

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

μάθηση μέσω έργων
συχνά κουίζ

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

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

Με την εξασφάλιση ότι το περιεχόμενο ευθυγραμμίζεται με τα έργα, η διαδικασία γίνεται πιο ενδιαφέρουσα για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Γράψαμε επίσης αρκετά εισαγωγικά μαθήματα στις βασικές αρχές της JavaScript για να εισαγάγουμε έννοιες, συνοδευόμενα από ένα βίντεο από τη συλλογή "Σειρά για Αρχάριους: JavaScript", μερικοί από τους συγγραφείς της οποίας συνέβαλαν σε αυτό το πρόγραμμα σπουδών.

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

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

Επισκεφθείτε τις Οδηγίες Συμπεριφοράς και τις Οδηγίες Συνεισφοράς μας. Περιμένουμε με χαρά τα εποικοδομητικά σας σχόλια!

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

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

Άδεια Χρήσης

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

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

39 KiB Raw Permalink Blame History Unescape Escape