Μάθετε προγραμματισμό web

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

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

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

Τι νέο υπάρχει;

Το περιεχόμενο στην περιοχή εκμάθησης εμπλουτίζεται τακτικά. Εκδίδουμε σημειώσεις έκδοσης για την περιοχή εκμάθησης για να ενημερώνεστε σχετικά με τις αλλαγές — μην ξεχνάτε να ελέγχετε τακτικά για νέο περιεχόμενο!

Αν έχετε απορίες όσον αφορά τα θέματα που θέλετε να καλύψουμε ή αυτά που θεωρείτε ότι απουσιάζουν, ενημερώστε μας στο φόρουμ μας στο Discourse.

Από πού να ξεκινήσετε

Σημείωση: Το γλωσσάρι μας παρέχει ορισμούς όρων. Επίσης, αν έχετε μια συγκεκριμένη απορία σχετικά με τον προγραμματισμό web, η ενότητα Συχνές ερωτήσεις ίσως μπορεί να σας βοηθήσει.

Τυχαίο λεξιλόγιο

Προγραμματισμός υπολογιστών
Ο προγραμματισμός είναι μια διαδικασία με την οποία διατυπώνεται η λύση ενός υπολογιστικού προβλήματος ή αυτοματοποιείται μια επαναλαμβανόμενη εργασία ως ακολουθία οδηγιών σε ένα εκτελέσιμο πρόγραμμα.

Καλυπτόμενα θέματα

Ακολουθεί μια λίστα με όλα τα θέματα που καλύπτονται στην περιοχή εκμάθησης του MDN.

Ξεκινώντας με το web
Παρέχεται μια ουσιαστική εισαγωγή στον προγραμματισμό web για αρχάριους.
HTML — Κατασκευή του web
Η HTML είναι η γλώσσα που χρησιμοποιούμε για να κατασκευάσουμε τα διάφορα μέρη του περιεχομένου μας και να καθορίσουμε τη σημασία ή το σκοπό τους. Αυτό το άρθρο εξηγεί την HTML σε βάθος.
CSS — Διακόσμηση του web
Η CSS είναι η γλώσσα που χρησιμοποιούμε για να διακοσμήσουμε και να διατάξουμε το περιεχόμενο, καθώς και να προσθέσουμε συμπεριφορές, όπως εφέ κίνησης. Αυτό το άρθρο σας παρέχει βασική εκπαίδευση της CSS.
JavaScript — Δυναμικά σενάρια από την πλευρά του πελάτη
Η JavaScript είναι μια γλώσσα προγραμματισμού σεναρίων που χρησιμοποιούμε για να προσθέσουμε δυναμική λειτουργικότητα σε ιστοσελίδες. Αυτό το άρθρο εξηγεί όλα όσα χρειάζεστε για να εξοικειωθείτε με τη σύνταξη και την κατανόηση της Javascript.
Προσβασιμότητα — κάντε το web χρήσιμο για όλους
Η προσβασιμότητα είναι η πρακτική με την οποία κάνετε το διαδικτυακό περιεχόμενο διαθέσιμο για όσους περισσότερους χρήστες γίνεται, ανεξαρτήτως αναπηρίας, συσκευής, τοποθεσίας ή άλλων παραγόντων. Αυτό το άρθρο παρέχει όλες τις απαραίτητες πληροφορίες.
Επιδόσεις web — γρήγορες και ανταποκρίσιμες ιστοσελίδες
Οι επιδόσεις web είναι η τέχνη του να επιτυγχάνει κανείς υψηλή ταχύτητα λήψης των εφαρμογών web, καθώς και καλή ανταποκρισιμότητα κατά την αλληλεπίδραση με το χρήστη, ανεξάρτητα από το εύρος ζώνης του χρήστη, το μέγεθος της οθόνης, το δίκτυο ή τις ικανότητες της συσκευής.
Εργαλεία και δοκιμή
Αυτό το άρθρο καλύπτει τα εργαλεία που χρησιμοποιούν οι προγραμματιστές για να διευκολύνουν τη δουλειά τους, όπως εργαλεία δοκιμής για διαφορετικά προγράμματα περιήγησης, linters, formatters, εργαλεία μεταμόρφωσης, συστήματα ελέγχου εκδόσεων, εργαλεία ανάπτυξης και πλαίσια JavaScript από την πλευρά του πελάτη.
Προγραμματισμός ιστοσελίδων από την πλευρά του διακομιστή
Ακόμα κι αν επικεντρώνεστε στον προγραμματισμό web από την πλευρά του πελάτη, είναι χρήσιμο να γνωρίζετε πώς λειτουργούν οι διακομιστές και οι λειτουργίες του κώδικά τους. Αυτό το άρθρο παρέχει μια γενική εισαγωγή στον τρόπο λειτουργίας του διακομιστή, καθώς και λεπτομερείς οδηγούς, οι οποίοι δείχνουν πώς να αναπτύξετε μια εφαρμογή από πλευράς διακομιστή με τη βοήθεια δύο γνωστών πλαισίων — Django (Python) και Express (node.js).

Απόκτηση παραδειγμάτων κώδικα

Τα παραδείγματα κώδικα που θα συναντήσετε στην περιοχή εκμάθησης είναι όλα διαθέσιμα στο GitHub. Αν θέλετε να τα αντιγράψετε όλα στον υπολογιστή σας, ο πιο εύκολος τρόπος είναι να κάνετε λήψη του ZIP του πιο πρόσφατου κύριου branch κώδικα.

Αν προτιμάτε να αντιγράψετε το αποθετήριο με έναν πιο ευέλικτο τρόπο, που επιτρέπει αυτόματες ενημερώσεις, μπορείτε να ακολουθήσετε τις πιο σύνθετες οδηγίες:

  1. Κάντε εγκατάσταση του Git στον υπολογιστή σας. Αυτό είναι το λογισμικό συστήματος ελέγχου εκδόσεων, πάνω στο οποίο λειτουργεί το GitHub.
  2. Ανοίξτε τη γραμμή εντολών (Windows) ή το τερματικό (Linux, macOS) στον υπολογιστή σας.
  3. Για να αντιγράψετε το αποθετήριο της περιοχής εκμάθησης σε ένα φάκελο με όνομα "learning-area" στην τοποθεσία που δείχνει η γραμμή εντολών ή το τερματικό σας, χρησιμοποιήστε την εξής εντολή:
    git clone https://github.com/mdn/learning-area
  4. Μπορείτε πλέον να ανοίξετε τον κατάλογο και να βρείτε τα αρχεία που ψάχνετε (είτε μέσω Finder/Εξερεύνησης αρχείων είτε μέσω της εντολής cd).

Μπορείτε να ενημερώσετε το αποθετήριο learning-area μετά από τυχόν αλλαγές που έγιναν στην κύρια έκδοση στο GitHub, ακολουθώντας τα εξής βήματα:

  1. Στη γραμμή εντολών/τερματικό, μπείτε στον κατάλογο learning-area με την εντολή cd. Για παράδειγμα, αν βρίσκεστε στον γονικό κατάλογο:
    cd learning-area
  2. Ενημερώστε το αποθετήριο με την ακόλουθη εντολή:
    git pull

Επικοινωνήστε μαζί μας

Αν θέλετε να επικοινωνήσετε με εμάς για οτιδήποτε, ο καλύτερος τρόπος είναι να μας αφήσετε ένα μήνυμα στο φόρουμ μας στο Discourse. Θα θέλαμε να μας πείτε αν θεωρείτε ότι κάτι είναι λάθος ή λείπει από την ιστοσελίδα, αν έχετε αιτήματα για νέα θέματα εκμάθησης, αν έχετε αιτήματα για βοήθεια με ό,τι δεν κατανοείτε, ή οποιαδήποτε άλλη απορία/ανησυχία.

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

Δείτε επίσης

Mozilla newsletter για προγραμματιστές
Το newsletter μας για προγραμματιστές web, το οποίο αποτελεί μια εξαιρετική πηγή πληροφοριών για όλα τα επίπεδα εμπειρίας.
Learn JavaScript
Μια εξαίσια πηγή πληροφοριών για νέους προγραμματιστές web — Μάθετε JavaScript σε ένα διαδραστικό περιβάλλον, με σύντομα μαθήματα και διαδραστικά τεστ, ενώ παρέχεται αυτοματοποιημένη αξιολόγηση. Τα πρώτα 40 μαθήματα είναι δωρεάν και μπορείτε να αποκτήσετε ολόκληρη τη σειρά μαθημάτων με μια μικρή εφάπαξ πληρωμή.
Web demystified
Μια θαυμάσια σειρά βίντεο που εξηγεί τα θεμελιώδη θέματα του web και απευθύνεται σε αρχάριους. Δημιουργήθηκε από τον Jérémie Patonnier.
Codecademy
Μια εξαιρετική, διαδραστική ιστοσελίδα για εκμάθηση γλωσσών προγραμματισμού από την αρχή.
BitDegree
Βασική θεωρία κώδικα με μια διασκεδαστική διαδικασία εκμάθησης. Απευθύνεται κυρίως σε αρχάριους.
Code.org
Βασική θεωρία και εξάσκηση κώδικα, απευθύνεται κυρίως σε παιδιά/αρχάριους.
EXLskills
Δωρεάν μαθήματα ανοικτού κώδικα για τεχνολογικές ικανότητες. Παρέχεται καθοδήγηση και η εκμάθηση επιτυγχάνεται μέσω εργασιών.
freeCodeCamp.org
Διαδραστική ιστοσελίδα με οδηγούς και εργασίες για να μάθετε προγραμματισμό web.
Web literacy map
Ένα πλαίσιο για βασικές γνώσεις σχετικά με το web και ικανότητες, ενώ παρέχει επίσης πρόσβαση σε διδακτικές δραστηριότητες, ταξινομημένες σε κατηγορίες.
Edabit
Χιλιάδες διαδραστικές προκλήσεις JavaScript.