---
title: Μάθετε προγραμματισμό web
slug: Learn
tags:
  - CSS
  - HTML
  - Web
  - Αρχάριος
  - Βασικά
  - Εισαγωγή
  - Εκμάθηση
  - Οδηγός
  - Προγραμματισμός-ιστού
translation_of: Learn
---
<p>{{LearnSidebar}}</p>

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

<p>Στόχος της περιοχής εκμάθησης του MDN δεν είναι να σας κάνει "επαγγελματίες", αλλά να σας βοηθήσει να αποκτήσετε κάποια εξοικείωση. Από εκεί και πέρα, θα μπορέσετε να εξελιχθείτε με τη <a href="https://developer.mozilla.org/el">βοήθεια του MDN</a> και άλλων πηγών που αναλύουν πιο σύνθετα θέματα, τα οποία απαιτούν βασικές γνώσεις.</p>

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

<h2 id="Τι_νέο_υπάρχει">Τι νέο υπάρχει;</h2>

<p>Το περιεχόμενο στην περιοχή εκμάθησης εμπλουτίζεται τακτικά. Εκδίδουμε <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">σημειώσεις έκδοσης για την περιοχή εκμάθησης</a> για να ενημερώνεστε σχετικά με τις αλλαγές — μην ξεχνάτε να ελέγχετε τακτικά για νέο περιεχόμενο!</p>

<p>Αν έχετε απορίες όσον αφορά τα θέματα που θέλετε να καλύψουμε ή αυτά που θεωρείτε ότι απουσιάζουν, ενημερώστε μας στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>.</p>

<h2 id="Από_πού_να_ξεκινήσετε">Από πού να ξεκινήσετε</h2>

<ul class="card-grid">
 <li><span>Για αρχάριους:</span> Αν είστε αρχάριοι στον προγραμματισμό web, θα σας προτείναμε να ξεκινήσετε με την ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a>, η οποία παρέχει μια εισαγωγή στον προγραμματισμό web.</li>
 <li><span>Πέρα από τα βασικά:</span> Αν έχετε ήδη μερικές γνώσεις, το επόμενο βήμα είναι να μάθετε λεπτομερώς {{Glossary("HTML")}} και {{Glossary("CSS")}}. Ξεκινήστε με την ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a> και έπειτα, συνεχίστε στην ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">Εισαγωγή στην CSS</a>.</li>
 <li><span>Προχωρώντας σε σενάρια:</span>Αν έχετε ήδη εξοικειωθεί με τις HTML και CSS, ή σας ενδιαφέρει κυρίως η συγγραφή κώδικα, μπορείτε να προχωρήσετε στην {{Glossary("JavaScript")}} ή στον προγραμματισμό από την πλευρά του διακομιστή. Ξεκινήστε με τις ενότητες <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Πρώτα βήματα στη JavaScript</a> και <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Πρώτα βήματα στην πλευρά του διακομιστή</a>.</li>
 <li><span>Πλαίσια και εργαλεία:</span>Αφού κατακτήσετε τις βασικές γνώσεις σε HTML, CSS και JavaScript, θα πρέπει να μάθετε τα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">εργαλεία προγραμματισμού από την πλευρά του πελάτη</a> και έπειτα, εμβαθύνετε στα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">πλαίσια JavaScript από την πλευρά του πελάτη</a> και στον <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">προγραμματισμό ιστοσελίδων από την πλευρά του διακομιστή</a>.</li>
</ul>

<div class="note">
<p><strong>Σημείωση</strong>: Το <a href="/en-US/docs/Glossary">γλωσσάρι</a> μας παρέχει ορισμούς όρων. Επίσης, αν έχετε μια συγκεκριμένη απορία σχετικά με τον προγραμματισμό web, η ενότητα <a href="/en-US/docs/Learn/Common_questions">Συχνές ερωτήσεις</a> ίσως μπορεί να σας βοηθήσει.</p>
</div>

<p>{{LearnBox({"title":"Τυχαίο λεξιλόγιο"})}}</p>

<h2 id="Καλυπτόμενα_θέματα"><span>Καλυπτόμενα θέματα</span></h2>

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

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a></dt>
 <dd>Παρέχεται μια ουσιαστική εισαγωγή στον προγραμματισμό web για αρχάριους.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML — Κατασκευή του web</a></dt>
 <dd>Η HTML είναι η γλώσσα που χρησιμοποιούμε για να κατασκευάσουμε τα διάφορα μέρη του περιεχομένου μας και να καθορίσουμε τη σημασία ή το σκοπό τους. Αυτό το άρθρο εξηγεί την HTML σε βάθος.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — Διακόσμηση του web</a></dt>
 <dd>Η CSS είναι η γλώσσα που χρησιμοποιούμε για να διακοσμήσουμε και να διατάξουμε το περιεχόμενο, καθώς και να προσθέσουμε συμπεριφορές, όπως εφέ κίνησης. Αυτό το άρθρο σας παρέχει βασική εκπαίδευση της CSS.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Δυναμικά σενάρια από την πλευρά του πελάτη</a></dt>
 <dd>Η JavaScript είναι μια γλώσσα προγραμματισμού σεναρίων που χρησιμοποιούμε για να προσθέσουμε δυναμική λειτουργικότητα σε ιστοσελίδες. Αυτό το άρθρο εξηγεί όλα όσα χρειάζεστε για να εξοικειωθείτε με τη σύνταξη και την κατανόηση της Javascript.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Προσβασιμότητα — κάντε το web χρήσιμο για όλους</a></dt>
 <dd>Η προσβασιμότητα είναι η πρακτική με την οποία κάνετε το διαδικτυακό περιεχόμενο διαθέσιμο για όσους περισσότερους χρήστες γίνεται, ανεξαρτήτως αναπηρίας, συσκευής, τοποθεσίας ή άλλων παραγόντων. Αυτό το άρθρο παρέχει όλες τις απαραίτητες πληροφορίες.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Επιδόσεις web — γρήγορες και ανταποκρίσιμες ιστοσελίδες</a></dt>
 <dd>Οι επιδόσεις web είναι η τέχνη του να επιτυγχάνει κανείς υψηλή ταχύτητα λήψης των εφαρμογών web, καθώς και καλή ανταποκρισιμότητα κατά την αλληλεπίδραση με το χρήστη, ανεξάρτητα από το εύρος ζώνης του χρήστη, το μέγεθος της οθόνης, το δίκτυο ή τις ικανότητες της συσκευής.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Εργαλεία και δοκιμή</a></dt>
 <dd>Αυτό το άρθρο καλύπτει τα εργαλεία που χρησιμοποιούν οι προγραμματιστές για να διευκολύνουν τη δουλειά τους, όπως εργαλεία δοκιμής για διαφορετικά προγράμματα περιήγησης, linters, formatters, εργαλεία μεταμόρφωσης, συστήματα ελέγχου εκδόσεων, εργαλεία ανάπτυξης και πλαίσια JavaScript από την πλευρά του πελάτη.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Προγραμματισμός ιστοσελίδων από την πλευρά του διακομιστή</a></dt>
 <dd>Ακόμα κι αν επικεντρώνεστε στον προγραμματισμό web από την πλευρά του πελάτη, είναι χρήσιμο να γνωρίζετε πώς λειτουργούν οι διακομιστές και οι λειτουργίες του κώδικά τους. Αυτό το άρθρο παρέχει μια γενική εισαγωγή στον τρόπο λειτουργίας του διακομιστή, καθώς και λεπτομερείς οδηγούς, οι οποίοι δείχνουν πώς να αναπτύξετε μια εφαρμογή από πλευράς διακομιστή με τη βοήθεια δύο γνωστών πλαισίων — Django (Python) και Express (node.js).</dd>
</dl>

<h2 id="Απόκτηση_παραδειγμάτων_κώδικα">Απόκτηση παραδειγμάτων κώδικα</h2>

<p>Τα παραδείγματα κώδικα που θα συναντήσετε στην περιοχή εκμάθησης είναι όλα <a href="https://github.com/mdn/learning-area/">διαθέσιμα στο GitHub</a>. Αν θέλετε να τα αντιγράψετε όλα στον υπολογιστή σας, ο πιο εύκολος τρόπος είναι να <a href="https://github.com/mdn/learning-area/archive/master.zip">κάνετε λήψη του ZIP του πιο πρόσφατου κύριου branch κώδικα</a>.</p>

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

<ol>
 <li><a href="https://git-scm.com/downloads">Κάντε εγκατάσταση του Git</a> στον υπολογιστή σας. Αυτό είναι το λογισμικό συστήματος ελέγχου εκδόσεων, πάνω στο οποίο λειτουργεί το GitHub.</li>
 <li>Ανοίξτε τη <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">γραμμή εντολών</a> (Windows) ή το τερματικό (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>) στον υπολογιστή σας.</li>
 <li>Για να αντιγράψετε το αποθετήριο της περιοχής εκμάθησης σε ένα φάκελο με όνομα "learning-area" στην τοποθεσία που δείχνει η γραμμή εντολών ή το τερματικό σας, χρησιμοποιήστε την εξής εντολή:
  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
 </li>
 <li>Μπορείτε πλέον να ανοίξετε τον κατάλογο και να βρείτε τα αρχεία που ψάχνετε (είτε μέσω Finder/Εξερεύνησης αρχείων είτε μέσω της <a href="https://en.wikipedia.org/wiki/Cd_(command)">εντολής</a> <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code></a>).</li>
</ol>

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

<ol>
 <li>Στη γραμμή εντολών/τερματικό, μπείτε στον κατάλογο <code>learning-area</code> με την εντολή <code>cd</code>. Για παράδειγμα, αν βρίσκεστε στον γονικό κατάλογο:

  <pre class="brush: bash notranslate">cd learning-area</pre>
 </li>
 <li>Ενημερώστε το αποθετήριο με την ακόλουθη εντολή:
  <pre class="brush: bash notranslate">git pull</pre>
 </li>
</ol>

<h2 id="Επικοινωνήστε_μαζί_μας">Επικοινωνήστε μαζί μας</h2>

<p>Αν θέλετε να επικοινωνήσετε με εμάς για οτιδήποτε, ο καλύτερος τρόπος είναι να μας αφήσετε ένα μήνυμα στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>. Θα θέλαμε να μας πείτε αν θεωρείτε ότι κάτι είναι λάθος ή λείπει από την ιστοσελίδα, αν έχετε αιτήματα για νέα θέματα εκμάθησης, αν έχετε αιτήματα για βοήθεια με ό,τι δεν κατανοείτε, ή οποιαδήποτε άλλη απορία/ανησυχία.</p>

<p>Αν σας ενδιαφέρει να βοηθήσετε με την ανάπτυξη/βελτίωση του περιεχομένου, ρίξτε μια ματιά στο <a href="/en-US/docs/Learn/How_to_contribute">πώς να μπορέσετε να βοηθήσετε</a> και να έρθετε σε επικοινωνία μαζί μας! Θα χαρούμε ιδιαίτερα να μιλήσουμε μαζί σας, είτε είστε μαθητής, είτε είστε δάσκαλος, είτε είστε έμπειρος προγραμματιστής web, είτε απλά ενδιαφέρεστε να συμβάλλετε στη βελτίωση της εμπειρίας εκμάθησης.</p>

<h2 id="Δείτε_επίσης">Δείτε επίσης</h2>

<dl>
 <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla newsletter για προγραμματιστές</a></dt>
 <dd>Το newsletter μας για προγραμματιστές web, το οποίο αποτελεί μια εξαιρετική πηγή πληροφοριών για όλα τα επίπεδα εμπειρίας.</dd>
 <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
 <dd>Μια εξαίσια πηγή πληροφοριών για νέους προγραμματιστές web — Μάθετε JavaScript σε ένα διαδραστικό περιβάλλον, με σύντομα μαθήματα και διαδραστικά τεστ, ενώ παρέχεται αυτοματοποιημένη αξιολόγηση. Τα πρώτα 40 μαθήματα είναι δωρεάν και μπορείτε να αποκτήσετε ολόκληρη τη σειρά μαθημάτων με μια μικρή εφάπαξ πληρωμή.</dd>
 <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
 <dd>Μια θαυμάσια σειρά βίντεο που εξηγεί τα θεμελιώδη θέματα του web και απευθύνεται σε αρχάριους. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
 <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
 <dd>Μια εξαιρετική, διαδραστική ιστοσελίδα για εκμάθηση γλωσσών προγραμματισμού από την αρχή.</dd>
 <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
 <dd>Βασική θεωρία κώδικα με μια διασκεδαστική διαδικασία εκμάθησης. Απευθύνεται κυρίως σε αρχάριους.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Βασική θεωρία και εξάσκηση κώδικα, απευθύνεται κυρίως σε παιδιά/αρχάριους.</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
 <dd>Δωρεάν μαθήματα ανοικτού κώδικα για τεχνολογικές ικανότητες. Παρέχεται καθοδήγηση και η εκμάθηση επιτυγχάνεται μέσω εργασιών.</dd>
 <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
 <dd>Διαδραστική ιστοσελίδα με οδηγούς και εργασίες για να μάθετε προγραμματισμό web.</dd>
 <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt>
 <dd>Ένα πλαίσιο για βασικές γνώσεις σχετικά με το web και ικανότητες, ενώ παρέχει επίσης πρόσβαση σε διδακτικές δραστηριότητες, ταξινομημένες σε κατηγορίες.</dd>
 <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
 <dd>Χιλιάδες διαδραστικές προκλήσεις JavaScript.</dd>
</dl>