|
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
|
|
[](http://makeapullrequest.com)
|
|
|
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
|
|
|
|
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
|
|
|
|
|
# Ανάπτυξη Ιστού για Αρχάριους - Πρόγραμμα Μαθημάτων
|
|
|
|
|
|
Οι Azure Could Advocates της Microsoft, είναι στην ευχάριστη θέση να σας προσφέρουν ένα πρόγραμμα μαθημάτων διάρκειας 12 εβδομάδων, 24 μαθήματα στο σύνολο, για τα βασικά της JavaScript, CSS και HTML. Κάθε μάθημα περιλαμβάνει ένα κουίζ στην αρχή και στο τέλος του, γραπτές οδηγίες για την ολοκλήρωση του μαθήματος, μια λύση, εργασία και άλλα. Η παιδαγωγική μας αρχή που στηρίζεται στις εργασίες, επιτρέπει να μαθαίνετε ενώ χτίζετε, ενας αποδεδειγμένος τρόπος να «κολλήσουν» νέες δεξιότητες.
|
|
|
|
|
|
**Ευχαριστούμε θερμά τους συγγραφείς μας Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
|
|
|
|
|
|
# Ξεκινώντας
|
|
|
|
|
|
> **Καθηγητές**, έχουμε [συμπεριλάβει κάποιες προτάσεις](for-teachers.el.md) για το πως να χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών. Θα χαρούμε πολύ τα σχόλια σας στο [φόρουμ συζήτησης](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
|
|
|
|
|
> **Μαθητές**, για να χρησιμοποιήσετε αυτό το πρόγραμμα μαθηματών, κάντε fork ολόκληρο το repo και ολοκληρώστε τις ασκήσεις μόνοι σας, ξεκινώντας με ένα κουίζ πρίν το μάθημα, μετά διαβάζοντας το μάθημα και ολοκληρώνοντας τις υπόλοιπες δραστηριότητες. Προσπαθήστε να κάνετε τις εργασίες κατανώντας τα μαθήματα παρά να αντιγράφετε απλά τον έτοιμο κώδικα με τη λύση. Ωστόσο, ο κώδικας με τη λύση είναι διαθέσιμος στους φακέλους /solutions στο κάθε μάθημα. Μια άλλη ιδέα θα ήταν να δημιουργήσετε μια ομάδα μελέτης με φίλους, και να δείτε το περιεχόμενο των μαθημάτων από κοινού. Για παραιτέρω μελέτη, προτείνουμε το [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-77807-sagibbon) και παρακολουθώντας τα βίντεο που αναφέρονται παρακάτω.
|
|
|
|
|
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
|
|
|
|
|
> 🎥 Κάντε κλικ στην εικόνα για ένα βίντεο σχετικά με το έργο αυτό και τους ανθρώπους που το δημιούργησαν!
|
|
|
|
|
|
## Παιδαγωγία
|
|
|
|
|
|
Επιλέξαμε δύο παιδαγωγικές αρχές κατά τη δημιουργία αυτού του προγράμματος μαθημάτων: διασφαλίσαμε ότι βασίζεται σε εργασίες και ότι περιλαμβάνει συχνά κουίζ. Μέχρι το τέλος των μαθημάτων, οι μαθητές θα έχουν δημιουργήσει ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια «πράσινη» επέκταση προγράμματος περιήγησης, ένα παιχνίδι τύπου «space invaders» και μια τραπεζική εφαρμογή επιχειρηματικού τύπου και θα έχουν μάθει τα βασικά της JavaScript , HTML και CSS μαζί με τα σύγχρονα εργαλεία του σημερινού προγραμματιστή ιστού.
|
|
|
|
|
|
> 🎓 Μπορείτε να κάνετε τα πρώτα μαθήματα αυτού του προγραμμάτος ως [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn!
|
|
|
|
|
|
Διασφαλίζοντας ότι το περιεχόμενο συνδυάζεται με εργασίες, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών αυξάνετε. Γράψαμε επίσης, πολλά αρχικά μαθήματα JavaScript για να εισαγάγουμε τις βασικές έννοιες, συνδυαζόμενο με βίντεο από τη "[Σειρά για αρχάριους: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-77807-sagibbon)" συλλογή των βιντεο tutorial, μερικοί από τους συγγραφείς των οποίων συνέβαλαν σε αυτό το πρόγραμμα μαθημάτων.
|
|
|
|
|
|
Επιπλέον, ένα κουίζ χαμηλής συμμετοχής πριν από κάθε μάθημα, θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει τη περαιτέρω διατήρηση του. Αυτό το πρόγραμμα μαθημάτων σχεδιάστηκε για να είναι ευέλικτο και διασκεδαστικό και μπορεί να γίνει ολόκληρο ή εν μέρει. Οι εργασίες ξεκινούν μικρές και γίνονται όλο και πιο περίπλοκες μέχρι το τέλος του κύκλου των 12 εβδομάδων.
|
|
|
|
|
|
Ενώ έχουμε αποφύγει σκόπιμα την εισαγωγή των JavaScript frameworks, ώστε να επικεντρωθούμε στις βασικές δεξιότητες που απαιτούνται ως προγραμματιστής Ιστού πριν υιοθετήσουμε ένα framework, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος μαθημάτων θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Σειρά για αρχάριους: 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](../CONTRIBUTING.md), και [Translation](../TRANSLATIONS.md) για οδηγίες. Ευπρόσδεκτα όλα τα εποικοδομητικά σχόλιά σας!
|
|
|
|
|
|
## Κάθε μάθημα περιλαμβάνει:
|
|
|
|
|
|
- προαιρετικό σκίτσο σημειώσεων
|
|
|
- προαιρετικό επιπρόσθετο βίντεο
|
|
|
- κουίζ προθέρμανσης πριν από το μάθημα
|
|
|
- γραπτό μάθημα
|
|
|
- για τα μαθήματα που έχουν εργασίες, βήμα-βήμα οδηγίες για το πώς να το φτιάξετε
|
|
|
- έλεγχοι γνώσεων
|
|
|
- πρόκληση
|
|
|
- συμπληρωματικό υλικό για διάβασμα
|
|
|
- εργασία
|
|
|
- κουίζ μετα το μάθημα
|
|
|
|
|
|
> **Σημείωση για τα κουίζ**: Όλα τα κουίζ περιέχονται [σε αυτή την εφαρμογή](https://ashy-river-0debb7803.1.azurestaticapps.net/), 48 στο συνολο απο τρείς ερωτήσεις το καθένα. Συνδέονται μέσα απο τα μαθήματα αλλα η εφαρμογη του κουίζ μπορεί να τρέξει και τοπικά; ακολουθήστε τις οδηγίες στο φάκελο `quiz-app`. Μεταφράζονται σταδιακά.
|
|
|
|
|
|
## Μαθήματα
|
|
|
|
|
|
| | Όνομα εργασίας | Έννοιες που διδάσκονται | Μαθησιακοί στόχοι | Συνδεμένο μάθημα | Συγγραφέας |
|
|
|
| :-: | :------------------------------------------------------: | :---------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
|
|
| 01 | Ξεκινώντας | Εισαγωγή στον προγραμματισμό και στα εργαλεία του εμπορίου | Εκμάθηση βασικών αρχών των περισσοτέρων γλωσσων προγραμματισμού και του λογισμικού που βοηθα τους επαγγελματίες να κάνουν τη δουλειά τους | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
|
|
| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει τη συνεργασία με μια ομάδα | Πώς να χρησιμοποιήσετε το GitHub στην εργασία σας, και πώς να συνεργαστείτε με άλλους στο κώδικα | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
|
|
| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
|
|
| 04 | JS Basics | Τύποι δεδομένων της JavaScript | Τα βασικά των τύπων δεδομένων στη JavaScript | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
|
|
| 05 | JS Basics | Functions και Methods | Μάθετε σχετικά με τις λειτουργίες και τις μεθόδους διαχείρισης της λογικής ροής μιας εφαρμογής | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
|
|
| 06 | JS Basics | Λήψη αποφάσεων με την JS | Μάθετε πως να δημιουργήσετε συνθήκες στον κώδικα σας, χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
|
|
| 07 | JS Basics | Πίνακες και επαναλήψεις | Εξάσκηση με δεδομένα χρησιμοποιώντας πίνακες και επαναλήψεις στη JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
|
|
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML στη πράξη | Δημιουργήστε το HTML για ένα online terrarium, εστιάζοντας στην κατασκευή της διάταξης | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
|
|
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS στη πράξη | Δημιουργήστε το CSS για να διαμορφώσετε το online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της απόκρισης της σελίδας (responsiveness) | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
|
|
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Δημιουργήστε το JavaScript για να λειτουργήσει το terrarium ως διεπαφή drag/drop, εστιάζοντας στα closures και τον χειρισμό DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
|
|
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Δημιουργία παιχνιδιού πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου για να τα συμπεριλάβετε στη λογική της εφαρμογής σας. | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
|
|
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δουλεύοντας με προγράμματα περιήγησης | Μάθετε πώς λειτουργούν τα προγράμματα περιήγησης, το ιστορικό τους και πώς ξεκινάμε μια επέκταση | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
|
|
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στον τοπικό χώρο αποθήκευσης | Δημιουργήστε τον κώδικα JavaScript της επέκτασης του προγράμματος περιήγησής σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές που είναι αποθηκευμένες στον τοπικό χώρο αποθήκευσης | [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 |
|
|
|
| 15 | [Space Game](/6-space-game/solution/README.md) | Προηγμένη ανάπτυξη παιχνιδιών με JavaScript | Μάθετε σχετικά με την κληρονομικότητα, χρησιμοποιώντας τις κλάσεις και τη σύνθεση και το μοτίβο 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 |
|
|
|
| 17 | [Space Game](/6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πως τα στοιχεία μπορύν να αποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
|
|
| 18 | [Space Game](/6-space-game/solution/README.md) | Ανίχνευση σύγκρουσης | Καντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας τα πατήματα πλήκτρων όπως επίσης και η λειτουργία cooldown γιατην εξασφαλίση της απόδοσης του παιχνιδιού | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
|
|
| 19 | [Space Game](/6-space-game/solution/README.md) | Διατήρηση βαθμολογίας | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και την απόδοση του παιχνιδιού | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
|
|
| 20 | [Space Game](/6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε σχετικά με τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού στοιχείων και της επαναφοράς των τιμών των μεταβλητών | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
|
|
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML Templates και Routes σε μια Web εφαρμογή | Μάθετε πώς μπορείτε να δημιουργήσετε τα θεμέλια της αρχιτεκτονικής ενος ιστοτόπου πολλαπλών σελίδων, χρησιμοποιώντας HTML templates και routing | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
|
|
| 22 | [Banking App](/7-bank-project/solution/README.md) | Δημιουργήστε μια φόρμα σύνδεσης και εγγραφής | Μάθετε σχετικά με τη δημιουργία φορμών και τη διαχείρηση επικύρωσης των στοιχείων | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
|
|
| 23 | [Banking App](/7-bank-project/solution/README.md) | Μέθοδοι λήψης και χρήσης δεδομένων | Μάθετε για τη ροή των δεδομένων και πως να τα ανακτήσετε, να τα αποθηκεύσετε και να τα απορρίψετε | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
|
|
| 24 | [Banking App](/7-bank-project/solution/README.md) | Έννοιες του State Management | Μάθετε πως η εφαρμογή σας διατηρεί μια κατάσταση και πως να τη διαχειρίζεστε προγραμματιστικά | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
|
|
|
|
|
## Πρόσβαση εκτός σύνδεσης
|
|
|
|
|
|
Μπορείτε να εκτέλεσετε αυτές τις οδηγίες εκτός σύνδεσης χρησιμοποιοώντας το [Docsify](https://docsify.js.org/#/). Κάντε fork το repo, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στο τοπικο σας μηχάνημα,στη συνέχεια, στο βασικό φάκελο αυτού του repo, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα προβάλλεται στη θύρα 3000 στο localhost: `localhost:3000`.
|
|
|
|
|
|
## PDF
|
|
|
|
|
|
Μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) ενα PDF με όλα τα μαθήματα.
|
|
|
|
|
|
## Άλλα προγράμματα μαθημάτων
|
|
|
|
|
|
Η ομάδα μας έχει κι'αλλα προγράμματα μαθημάτων! Ελέγξτε τα εδω:
|
|
|
|
|
|
- [Machine Learning για Αρχάριους](https://aka.ms/ml-beginners)
|
|
|
- [IoT για Αρχάριους](https://aka.ms/iot-beginners)
|
