Μάθετε Web Development

Καλώς ήρθατε στο Περιβάλλον Εκμάθησης MDN (Mozilla Developer Network). Η σειρά από τα άρθα που παρέχονται, προσφέρουν τα απαραίτητα που χρειάζεστε ως νέοι προγραμματιστές για την κατασκευή απλών ιστοσελίδων

Ο στόχος αυτής της σειράς εκμάθησης του MDN, δεν είναι η άμεση μετάβαση από <<αρχάριο>> προγραμματιστή σε <<επαγγελματία>>, αλλά η ομαλή μετάβαση σε ένα επίπεδο που θα μπορείτε να αισθάνεστε άνετα με τους όρους και τις διαδικασίες. Από εκεί και πέρα, μόνοι σας μαθαίνοντας απο το MDN και άλλες πηγές που σας προσφέρουν προχωρημένα θέματα web development, θα μπορέσετε εξελιχθείτε. Μην ξεχνάτε όμως, κάθε νεα γνώση προαπαιτεί να γνωρίζετε όλα όσα έχετε διδαχθεί μέχρι εκεί.

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

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

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

    Αρχάριος: Εάν είστε αρχάριος στο web development, θα σας προτείναμε να ξεκινήσετε με την ενότητα Ξεκινώντας με τον ιστό , που σας παρέχει μια εισαγωγή στο web development
  • Συγκεκριμένες απορίες: Εάν έχετε συγκεκριμένες απορίες για το web development, η ενότητα Common questions μπορεί να σας βοηθήσει να τις λύσετε.
  • Πέρα από τα βασικά:  Εάν έχετε ήδη μερικές γνώσες, το επόμενο βήμα είναι να μάθετε την HTML και τη CSS σε βάθος: ξεκινήστε με την ενότητα Introduction to HTML  και προχωρήστε με την ενότητα Introduction to CSS.
  • Προχωρόντας στο scripting: Εάν ήδη νιώθετε άνετα με τη χρήση της HTML και της CSS, ή αν κυρίως σαν ενδιαφέρει ο κώδικας, θα θέλατε να προχωρήστε με την εκμάθηση της Javascript ή γενικά με το server-side development. Ξεκινήστε με τις ενότητες JavaScript first steps και Server-side first steps.

Σημείωση:  Το γλωσσάριο μας, παρέχει την επεξήγηση της ορολογίας 

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

Θέματα που καλύπτονται         

Η παρακάτω λίστα περιλαμβάνει όλα τα θέματα που καλύπτονται στο MDN Περιβάλλον Εκμάθησης

Ξεκινώντας με τον ιστό
Παρέχεται μια ουσιαστική εισαγωγή στο web development για τους εντελώς αρχάριους.
HTML — Στήνοντας τον ιστό
HTML είναι η γλώσσα που χρησιμοποιούμε για να στήσουμε τα διαφορετικά μέρη του περιεχομένου μας και να καθορίσουμε την σημασία τους ή τον σκοπό τους. Αυτή η ενότητα σας διδάσκει την HTML σε βάθος.
CSS — Διακοσμώντας τον ιστό
CSS είναι η γλώσσα που χρησιμοποιούμε για να διακοσμήσουμε και διαρυθμίσουμε το περιεχόμενο, καθώς και να προσθέσουμε features όπως το animation. Η ενότητα αυτή σας παρέχει βασική εκπαίδευση της CSS.
JavaScript — Dynamic client-side scripting
JavaScript είναι μια scripting γλώσσα που χρησιμοποιείται για να προσθέσουμε δυναμική λειτουργία σε ιστοσελίδες. Αυτή η ενότητα σας προσφέρει όλες τις βασικές γνώσεις για να γράφετε και να καταλαβαίνετε, άνετα, την Javascript.
Προσβασιμότητα— κάντε τον ιστό προσβάσιμο για τον καθένα
Προσβασιμότητα είναι το αποτέλεσμα του να κάνετε το περιεχόμενο του ιστού διαθέσιμο σε όσους περισσότερους ανθρώπους γίνεται, ανεξαρτήτως ειδικών αναγκών, συσκευής, περιοχής ή άλλων διαφόρων παραγόντων. Αυτή η ενότητα θα σας προσφέρει όλα όσα χρειάζεται να μάθετε.
Web Performance — κάνοντας τις ιστοσελίδες γρήγορες και ανταποκρίσιμες
Web performance είναι η τέχνη του να είσαι σίγουρος ότι οι εφαρμογές κατεβαίνουν γρήγορα και ανταποκρίνονται στους χρήστες, ανεξαρτήτως της ταχύτητας internet που έχει ένας χρήστης, το μέγεθος της οθόνης και τις δυνατότητες της συσκευής ή τις ικανότητες του δικτύου του.
Εργαλεία και testing
Αυτή η ενότητα καλύπτει τα εργαλεία που χρησιμοποιούν οι προγραμματιστές για να διευκολύνουν την δουλειά τους, όπως κοινά testing tools για διαφορετικούς browsers.
Server-side προγραμματισμός
Ακόμα και εάν επικεντρώνεστε στο web development από μεριά χρήστη, παραμένει χρήσιμο το να γνωρίζετε πως λειτουργεί η μεριά του server και τα features του. Αυτή η ενότητα σας παρέχει μια γενική εισαγωγή στο πως λειτουργούν οι server, και λεπτομερείς οδηγούς που σας δείχνουν πως να αναπτύξετε μια εφαρμογή, από μεριάς server, χρησιμοποιώντας δύο γνωστά frameworks — Django (Python) και Express (node.js).

Πως παίρνουμε τα παραδείγματα κώδικα

Τα παραδείγματα κώδικα που θα βρείτε στο Περιβάλλον Εκμάθησης είναι όλα διαθέσιμα στο GitHub. Εάν θέλετε να τα κατεβάσετε όλα στον υπολογιστή σας, ο πιό εύκολος τρόπος είναι να κατεβάσετε το ZIP από το τελευταίο master code branch.

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

  1. Εγκαταστήστε το Git στον υπολογιστή σας. Αυτή είναι η τρέχουσα έκδοση του control system software που δουλεύει το GitHub.
  2. Εγγραφείτε στο GitHub
  3. Μόλις ολοκληρώσετε την εγγραφή, κάντε σύνδεση στο github.com με το όνομα χρήστη και τον κωδικό σας.
  4. Ανοίξτε το command prompt (Windows) ή το τερματικό (LinuxmacOS)
  5. Για να αντιγράψετε το repository της εκμάθησης σε ένα φάκελο που θα δημιουργηθεί αυτόματα και θα λέγεται learning-area στη συγκεκριμένη τοποθεσία που θα δείχνει το command prompt (συνήθως C:\Users\όνομα χρήστη>) ή το terminal σας (όνομα χρήστη@όνομα υπολογιστή: ~$), πληκτρολογήστε την παρακάτω εντολή:                                                       
    git clone https://github.com/mdn/learning-area
  6. Τώρα έχετε πρόσβαση στον φάκελο και στα αρχεία που θέλετε (είτε χρησιμοποιώντας τα finder / file explorer, όπως δηλαδή πλοηγούμαστε στον υπολογιστή μας και χρησιμοποιούμε τα αρχεία μας, είτε με την εντολή cd στο comand prompt / terminal).

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

  1. Στο command prompt/terminal, μεταφερθείτε στο learning-area directory χρησιμοποιώντας την εντολή cd. Για παράδειγμα, εάν είστε στον φάκελο που περιέχει τον learning-area φάκελο πληκτρολογήστε:
    cd learning-area
  2. Αφότου άλλαξε το directory σας, λάβετε την ενημέρωση από το repository χρησιμοποιώντας την παρακάτω εντολή:
    git pull

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

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

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

Δείτε επίσης

Mozilla developer newsletter
Το newsletter μας για τους web developers, που αποτελεί μια καλή πηγή πληροφοριών για όλα τα επίπεδα εμπειρίας
Web demystified
Μια σειρά από βίντεο που εξηγεί τα θεμελιώδη του web, που απευθύνεται, κυρίως, στους εντελώς αρχάριους του web development. Δημιουργός Jérémie Patonnier.
Codecademy
Ένα σπουδαίο διαδραστικό site που σας μαθαίνει γλώσσες προγραμματισμού από το μηδέν.
BitDegree
Βασική θεωρία προγραμματισμού με εκμάθηση βάσει παιχνιδιών. Απευθύνεται κυρίως σε αρχάριους
Code.org
Βασική θεωρία προγραμματισμού και εξάσκηση, που απευθύνεται κυρίως σε παιδιά / εντελώς αρχάριους
EXLskills 
Δωρεάν ανοιχτά μαθήματα για εκμάθηση tech skills, με καθοδήγηση και δημιουργία project ως βάση μάθησης
FreeCodeCamp.com
Διαδραστικό site με οδηγούς και projects για να μάθετε Web Development.
Web Literacy Map
Ένα framework για entry-level web literacy & 21st Century skills, που επίσης παρέχει πρόσβαση σε δραστηριότητες διδασκαλίας ταξινομημένες ανά κατηγορία
Teaching activities
Μια σειρά από δραστηριότητες διδασκαλίας για διδασκαλία (και μάθηση) δημιουργημένη από το Mozilla Foundation, που καλύπτει τα πάντα από βασικό web literacy και privacy μέχρι JavaScript και Minecraft hacking.
Edabit
Εκατοντάδες δωρεάν διαδραστικά coding challenges σε διάφορες γλώσσες προγραμματισμού.