Χάρτης πορείας για αρχάριους στην ανάπτυξη ιστού

Αυτός ο χάρτης πορείας για αρχάριους παρουσιάζει όλα τα βασικά στοιχεία για την ανάπτυξη ιστού. Θα ακολουθήσουμε κάθε βήμα - από το να υπολογίσουμε τι πρόγραμμα επεξεργασίας κώδικα θα χρησιμοποιήσει, σε ποιο πλαίσιο JavaScript ή γλώσσα back-end που μπορείτε να επιλέξετε. Και θα συμπεριλάβουμε επίσης συνδέσμους προς πόρους όπου μπορείτε να μάθετε αυτές τις δεξιότητες.

Το γεγονός είναι ότι, αν μόλις ξεκινήσετε, το μόνο που πρέπει να γνωρίζετε τώρα είναι τα βασικά. Πραγματικά δεν χρειάζεται να γνωρίζετε κάθε τεχνολογία, εργαλείο ή γλώσσα που υπάρχει απευθείας από την αρχή. (Θα διασχίσετε αυτήν τη γέφυρα όταν φτάσετε σε αυτήν, πιστέψτε με!)

Μέχρι το τέλος αυτού του οδηγού, θα έχετε κατανοήσει τα βασικά στοιχεία της ανάπτυξης ιστού, ποιες δεξιότητες πρέπει να γνωρίζετε και πού να τις βρείτε!

1: Τι είναι η ανάπτυξη ιστού : Πώς λειτουργούν οι ιστότοποι, front-end vs back-end, code editor‌‌

2: Βασικό front-end: HTML, CSS και JavaScript‌‌

3: Εργαλεία : Διαχειριστές πακέτων, εργαλεία κατασκευής, έλεγχος έκδοσης‌‌

4α: Πρόσθετο front-end: Sass, σχεδιασμός απόκρισης, πλαίσια JavaScript‌‌

4β: Βασικό back-end: Διαχείριση διακομιστή και βάσης δεδομένων, γλώσσα προγραμματισμού

Σε αυτόν τον χάρτη πορείας, προτείνω να κάνετε τα βήματα 1, 2 και 3 με τη σειρά. Στη συνέχεια, ανάλογα με το αν θέλετε να εστιάσετε σε περισσότερο front-end ή back-end, μπορείτε να κάνετε τα βήματα 4α ή 4β με οποιαδήποτε σειρά.

Προσωπικά πιστεύω ότι είναι καλή ιδέα για τους προγραμματιστές ιστού front-end να γνωρίζουν τουλάχιστον λίγο back-end, και το αντίστροφο. Τουλάχιστον, η γνώση των βασικών και των δύο θα σας βοηθήσει να καταλάβετε αν σας αρέσει καλύτερα το front-end ή το back-end;

Μπορείτε επίσης να δείτε την ενημερωμένη έκδοση αυτού του άρθρου στο ιστολόγιό μου!

1: Τι είναι η ανάπτυξη Ιστού;

Πριν μπείτε στην πραγματική κωδικοποίηση, ας ρίξουμε μια πρώτη ματιά σε μερικές γενικές πληροφορίες σχετικά με το τι είναι η ανάπτυξη ιστού: πώς λειτουργούν οι ιστότοποι, η διαφορά μεταξύ front and back-end και χρησιμοποιώντας έναν επεξεργαστή κώδικα.

Πώς λειτουργούν οι ιστότοποι;

Όλοι οι ιστότοποι, στο πιο βασικό τους, είναι απλώς μια δέσμη αρχείων που είναι αποθηκευμένα σε έναν υπολογιστή που ονομάζεται διακομιστής. Αυτός ο διακομιστής είναι συνδεδεμένος στο Διαδίκτυο. Στη συνέχεια, μπορείτε να φορτώσετε αυτόν τον ιστότοπο μέσω ενός προγράμματος περιήγησης (όπως Chrome, Firefox ή Safari) στον υπολογιστή σας ή στο τηλέφωνό σας. Το πρόγραμμα περιήγησής σας ονομάζεται επίσης πελάτης σε αυτήν την περίπτωση.

Έτσι, κάθε φορά που βρίσκεστε στο Διαδίκτυο, εσείς (ο πελάτης) λαμβάνετε και φορτώνετε δεδομένα (όπως φωτογραφίες γάτας) από το διακομιστή, καθώς και υποβάλλοντας δεδομένα πίσω στον διακομιστή ( φόρτωση φωτογραφιών γάτας moar! ) μεταξύ του πελάτη και του διακομιστή είναι η βάση του Διαδικτύου.

Οτιδήποτε έχετε πρόσβαση στο πρόγραμμα περιήγησής σας είναι κάτι που δημιούργησε ένας προγραμματιστής ιστού. Μερικά παραδείγματα είναι οι ιστότοποι μικρών επιχειρήσεων και τα ιστολόγια στην απλούστερη πλευρά, μέχρι πολύ περίπλοκες εφαρμογές ιστού όπως AirBnb, Facebook και Twitter.

Ποια είναι η διαφορά μεταξύ front-end και back-end;

Οι όροι "front end", "back end" και "full stack" web developer περιγράφουν ποιο μέρος της σχέσης πελάτη / διακομιστή με τον οποίο εργάζεστε.

Το "front end" σημαίνει ότι ασχολείστε κυρίως με την πλευρά του πελάτη. Ονομάζεται "front end" γιατί είναι αυτό που μπορείτε να δείτε στο πρόγραμμα περιήγησης. Αντιστρόφως, το "back end" είναι το μέρος του ιστότοπου που δεν μπορείτε να δείτε, αλλά χειρίζεται πολλή τη λογική και τη λειτουργικότητα που είναι απαραίτητες για να λειτουργήσουν όλα.

Ένας τρόπος με τον οποίο μπορείτε να σκεφτείτε αυτό είναι ότι η ανάπτυξη ιστού front-end μοιάζει με το μέρος του εστιατορίου "front of house". Είναι το τμήμα όπου οι πελάτες έρχονται να δουν και να βιώσουν το εστιατόριο - την εσωτερική διακόσμηση, τα καθίσματα και φυσικά το φαγητό.

Από την άλλη πλευρά, το back-end web development είναι σαν το "back of house" μέρος του εστιατορίου. Εκεί γίνεται διαχείριση των παραδόσεων και του αποθέματος και συμβαίνει η διαδικασία δημιουργίας του φαγητού. Υπάρχουν πολλά πράγματα πίσω από τα παρασκήνια που οι πελάτες δεν θα δουν, αλλά θα βιώσουν (και ελπίζουμε να απολαύσουν) το τελικό προϊόν - ένα υπέροχο γεύμα!

Εκτός από διασκεδαστικές εικόνες, τόσο η ανάπτυξη ιστού εμπρός όσο και πίσω όψης εξυπηρετούν διαφορετικές αλλά πολύ σημαντικές λειτουργίες.

Χρήση προγράμματος επεξεργασίας κώδικα

Όταν δημιουργείτε έναν ιστότοπο, το πιο σημαντικό εργαλείο που θα χρησιμοποιήσετε είναι ο επεξεργαστής κώδικα ή το IDE (Ολοκληρωμένο Περιβάλλον Ανάπτυξης). Αυτό το εργαλείο σας επιτρέπει να γράψετε τη σήμανση και τον κωδικό που θα συνθέσει τον ιστότοπο.

Υπάρχουν αρκετές καλές επιλογές εκεί έξω, αλλά αυτή τη στιγμή ο πιο δημοφιλής επεξεργαστής κώδικα είναι ο κώδικας VS. Ο κωδικός VS είναι μια πιο ελαφριά έκδοση του Visual Studio, το κύριο IDE της Microsoft. Είναι γρήγορο, δωρεάν, εύκολο στη χρήση και μπορείτε να το προσαρμόσετε με θέματα και επεκτάσεις.

Άλλοι συντάκτες κώδικα είναι Sublime Text, Atom και Vim.

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

Τώρα που έχουμε καλύψει κάποιες από τις ευρύτερες έννοιες σχετικά με το τι είναι η ανάπτυξη ιστού, ας πάρουμε περισσότερες λεπτομέρειες - ξεκινώντας από τη διεπαφή.

2: Βασικό front-end

Το μπροστινό μέρος ενός ιστότοπου αποτελείται από τρεις τύπους αρχείων: HTML, CSS και JavaScript. Αυτά τα αρχεία είναι αυτά που φορτώνονται στο πρόγραμμα περιήγησης, από την πλευρά του πελάτη.

Ας ρίξουμε μια πιο προσεκτική ματιά σε καθένα από αυτά.

HTML

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

Για παράδειγμα, μπορείτε να χρησιμοποιήσετε ετικέτες για να δημιουργήσετε τίτλους τίτλου, παραγράφους, λίστες με κουκκίδες, εικόνες και ούτω καθεξής. Οι ετικέτες HTML από μόνες τους έχουν κάποια συνημμένα στυλ, αλλά είναι αρκετά βασικά, όπως αυτό που θα δείτε σε ένα έγγραφο του Word.

CSS

Το CSS, ή Cascading Style Sheets, σας επιτρέπει να διαμορφώσετε αυτό το περιεχόμενο HTML, ώστε να φαίνεται ωραίο και φανταχτερό. Μπορείτε να προσθέσετε χρώματα, προσαρμοσμένες γραμματοσειρές και να σχεδιάσετε τα στοιχεία του ιστότοπού σας, ωστόσο θέλετε να φαίνονται. Μπορείτε ακόμη και να δημιουργήσετε κινούμενα σχέδια και σχήματα με CSS!

Υπάρχει πολύ βάθος για το CSS και μερικές φορές οι άνθρωποι τείνουν να το κάνουν γυαλιστερό, ώστε να μπορούν να προχωρήσουν σε πράγματα όπως το JavaScript. Ωστόσο, δεν μπορώ να υπερεκτιμήσω τη σημασία της κατανόησης του τρόπου μετατροπής ενός σχεδίου σε διάταξη ιστότοπου χρησιμοποιώντας CSS. Αν θέλετε να ειδικευτείτε στο front-end, είναι σημαντικό να έχετε πραγματικά ισχυρές δεξιότητες CSS.

JavaScript

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

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

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

Πού να μάθετε HTML, CSS και JavaScript

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

Σημείωση : Μερικοί από τους παρακάτω συνδέσμους (αυτοί στα μαθήματα επί πληρωμή και βιβλία) είναι σύνδεσμοι συνεργατών, πράγμα που σημαίνει ότι θα λάβω προμήθεια εάν τα αγοράσετε χωρίς επιπλέον κόστος για εσάς. Είναι ένας τρόπος που μπορείτε να με υποστηρίξετε στη δημιουργία χρήσιμων πόρων όπως αυτός!

freeCodeCamp

Ένα από τα αγαπημένα μου μέρη που προτείνω είναι το freeCodeCamp. Είναι ένα διαδικτυακό bootcamp κωδικοποίησης που είναι μη κερδοσκοπικό και εντελώς δωρεάν! Μου αρέσει αυτή η επιλογή γιατί αν είστε αρχάριος και δεν είστε απόλυτα σίγουροι αν η κωδικοποίηση είναι για εσάς, είναι ένας τρόπος χαμηλής πίεσης, χωρίς κίνδυνο για να δείτε αν σας αρέσει.

Ένα μειονέκτημα στο freeCodeCamp είναι ότι ενώ έχουν απίστευτο πρόγραμμα σπουδών με ενσωματωμένο περιβάλλον κωδικοποίησης, δεν έχουν δομημένα βίντεο ως μέρος αυτού.

Έτσι, αν σας αρέσει πραγματικά να μαθαίνετε από βίντεο, ακολουθούν μερικές άλλες επιλογές:

Team Treehouse

Το Team Treehouse είναι μια κορυφαία διαδικτυακή πλατφόρμα εκμάθησης που βασίζεται σε βίντεο και έχει πολλά κομμάτια που μπορείτε να ακολουθήσετε. Έχουν ακόμη και ένα διαδικτυακό πρόγραμμα Tech Degree που μοιάζει με ένα online bootcamp που μπορείτε να ολοκληρώσετε σε 4-5 μήνες.

Δυστυχώς, το Treehouse δεν είναι δωρεάν, αλλά έχουν διαφορετικά μηνιαία ή ετήσια προγράμματα ανάλογα με τον προϋπολογισμό σας. Έχουν μια δωρεάν δοκιμαστική περίοδο 7 ημερών, ώστε να μπορείτε να δείτε αν σας αρέσει, και μπορώ επίσης να σας δώσω μια συμφωνία όπου μπορείτε να κερδίσετε 100 $ έκπτωση από 1 έτος του Βασικού Προγράμματος. Εάν είστε αρκετά σίγουροι ότι θέλετε να μπείτε στην ανάπτυξη ιστού, το Team Treehouse είναι ένα εξαιρετικό μέρος για να μάθετε.

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

Wes Bos

Η Wes Bos έχει δωρεάν μαθήματα εκμάθησης Flexbox, CSS Grid και JavaScript που είναι εξαιρετικά. Μόλις πέρασα το μάθημα του CSS Grid, και ήταν πολύ προσεκτικό και διασκεδαστικό. Ο Wes είναι σπουδαίος δάσκαλος!

Ούντεμι

Το Udemy είναι μια διαδικτυακή πλατφόρμα μάθησης με πολλά καλά μαθήματα. Ένα ιδιαίτερο που μπορεί να σας αρέσει είναι το μάθημα Advanced CSS και Sass από τον Jonas Schmedtmann - αυτό το πληρωμένο μάθημα καλύπτει πλέγμα CSS, flexbox, responsive design και άλλα θέματα CSS!

YouTube

Υπάρχουν επίσης πολλοί δωρεάν πόροι βίντεο στο YouTube:

Το Traversy Media, πιθανώς το μεγαλύτερο κανάλι ανάπτυξης ιστού εκεί έξω, διαθέτει HTML Crash Course και CSS Crash Course.

Το DesignCourse, ένα κανάλι επικεντρωμένο στο σχεδιασμό ιστοσελίδων και το front-end, έχει επίσης ένα σεμινάριο HTML & CSS.

Και το freeCodeCamp έχει το δικό του κανάλι YouTube, με βίντεο όπως ένα μάθημα JavaScript και άλλα σε βάθος μαθήματα.

Βιβλία και άρθρα για την ανάπτυξη ιστού

Εάν είστε περισσότερο από έναν αναγνώστη, θα συνιστούσα ανεπιφύλακτα τα εξής:

Τα απίστευτα δημοφιλή βιβλία του Jon Duckett, σε HTML & CSS, και JavaScript & jQuery. Αυτά τα βιβλία δεν είναι καθόλου πυκνά εγχειρίδια. Είναι όμορφα σχεδιασμένα, πολύ καλογραμμένα και έχουν πολλές φωτογραφίες και εικόνες για να βοηθήσουν στη διδασκαλία του υλικού.

Το Eloquent JavaScript είναι ένα άλλο βιβλίο που μου αρέσει πολύ. Μπορείτε να το διαβάσετε δωρεάν στον ιστότοπό τους ή να αγοράσετε ένα έντυπο αντίγραφο από την Amazon, αν σας αρέσουν τα φυσικά βιβλία. Το έχω μόνοι μου και μου αρέσει πολύ!

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

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

  • Δίκτυο προγραμματιστών Mozilla
  • Κόλπα CSS
  • Περιοδικό Smashing

3: Εργαλεία

Ας δούμε τώρα μερικές άλλες τεχνολογίες front-end. Όπως αναφέραμε, τα HTML, CSS και JavaScript είναι τα βασικά δομικά στοιχεία της ανάπτυξης ιστού front-end. Εκτός από αυτά, υπάρχουν μερικά άλλα εργαλεία που θέλετε να μάθετε.

Διαχειριστές πακέτων

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

Μπορείτε να τα σκεφτείτε σαν προσθήκες - αντί να γράφετε τα πάντα από το μηδέν, μπορείτε να χρησιμοποιήσετε χρήσιμα βοηθητικά προγράμματα που έχουν ήδη γράψει άλλοι.

Ο πιο δημοφιλής διαχειριστής πακέτων ονομάζεται npm ή Node Package Manager, αλλά μπορείτε επίσης να χρησιμοποιήσετε έναν άλλο διαχειριστή που ονομάζεται Yarn. Και οι δύο είναι καλές επιλογές που πρέπει να γνωρίζετε και να χρησιμοποιήσετε, αν και είναι ίσως καλύτερο να ξεκινήσετε με το npm.

Εάν θέλετε να μάθετε περισσότερα, μπορείτε να διαβάσετε αυτό το άρθρο σχετικά με τα βασικά στοιχεία της χρήσης npm.

Δημιουργήστε εργαλεία

Οι δέσμες λειτουργικών μονάδων και τα εργαλεία κατασκευής όπως το Webpack, το Gulp ή το Parcel, είναι ένα άλλο ουσιαστικό μέρος της ροής εργασίας front-end.

Σε βασικό επίπεδο, αυτά τα εργαλεία εκτελούν εργασίες και επεξεργάζονται αρχεία. Μπορείτε να τα χρησιμοποιήσετε για να μεταγλωττίσετε τα αρχεία Sass σε CSS, να μεταμορφώσετε τα αρχεία σας ES6 JavaScript σε ES5 για καλύτερη υποστήριξη προγράμματος περιήγησης, να εκτελέσετε έναν τοπικό διακομιστή ιστού και πολλές άλλες χρήσιμες εργασίες.

Το Gulp , τεχνικά ένας δρομέας εργασιών, διαθέτει μια σειρά πακέτων npm που μπορείτε να χρησιμοποιήσετε για τη μεταγλώττιση και την επεξεργασία των αρχείων σας.

Το Webpack είναι ένα εξαιρετικά ισχυρό bundler που μπορεί να κάνει ό, τι μπορεί να κάνει ο Gulp και περισσότερα. Χρησιμοποίησε έναν τόνο σε περιβάλλοντα JavaScript, ειδικά με τα Πλαίσια JavaScript (στα οποία θα φτάσουμε λίγο). Μια κάτω πλευρά του Webpack είναι ότι απαιτεί πολλή διαμόρφωση για να ξεκινήσει και να λειτουργεί, κάτι που μπορεί να είναι απογοητευτικό.

Το Parcel είναι ένα νεότερο bundler όπως το Webpack, αλλά έρχεται προ-διαμορφωμένο από το κουτί, ώστε να μπορείτε κυριολεκτικά να το ξεκινήσετε σε λίγα λεπτά. Και δεν θα χρειαστεί να ανησυχείτε πολύ για τη διαμόρφωση όλων.

Προσωπικά μου αρέσει να χρησιμοποιώ το Gulp για τις δικές μου ροές εργασίας front-end όπου θέλω απλώς να μεταγλωττίσω τα αρχεία Sass και JavaScript και να μην κάνω πάρα πολλά άλλα.

Χρήσιμοι Σύνδεσμοι

Αν ενδιαφέρεστε για το Gulp ή το Parcel, έχω μαθήματα και για τα δύο:

  • Χρησιμοποιώντας το Gulp 4 στη ροή εργασίας σας
  • Οδηγός γρήγορης εκκίνησης για το Parcel

Αν θέλετε να μάθετε περισσότερα για το Webpack, δείτε τα παρακάτω βίντεο στο YouTube:

  • Μάθημα συντριβής στο Webpack από το DesignCourse
  • Σειρά 10 μερών στο Webpack από τον Colt Steele

Έλεγχος έκδοσης

Ο έλεγχος έκδοσης (ονομάζεται επίσης έλεγχος πηγής) είναι ένα σύστημα που παρακολουθεί κάθε αλλαγή κώδικα που κάνετε στα αρχεία του έργου σας. Μπορείτε ακόμη και να επιστρέψετε σε προηγούμενη αλλαγή εάν κάνετε λάθος. Είναι σχεδόν σαν να έχετε άπειρους αποθηκευτικούς πόντους για το έργο σας, και επιτρέψτε μου να σας πω, μπορεί να είναι ένα τεράστιο ναυαγοσώστη.

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

Μπορεί επίσης να έχετε ακούσει για το GitHub, το οποίο είναι μια διαδικτυακή εταιρεία φιλοξενίας που ανήκει στη Microsoft, όπου μπορείτε να αποθηκεύσετε όλα τα αποθετήρια Git.

Για να μάθετε το Git και το GitHub, το GitHub.com διαθέτει μερικούς διαδικτυακούς οδηγούς που εξηγούν πώς να ξεκινήσετε και να τρέξετε. Το Traversy Media διαθέτει επίσης ένα βίντεο στο YouTube που εξηγεί πώς λειτουργεί το Git.

4α: Πρόσθετο front-end

Μόλις έχετε τα βασικά του front-end, υπάρχουν μερικές ενδιάμεσες δεξιότητες που θέλετε να μάθετε. Σας συνιστώ να εξετάσετε τα εξής: Sass, σχεδιασμός απόκρισης και πλαίσιο JavaScript.

Σας

Το Sass είναι μια επέκταση του CSS που κάνει τα στυλ γραφής πιο διαισθητικά και αρθρωτά. Είναι ένα πραγματικά ισχυρό εργαλείο. Με το Sass, μπορείτε να χωρίσετε τα στυλ σας σε πολλά αρχεία για καλύτερη οργάνωση, να δημιουργήσετε μεταβλητές για την αποθήκευση χρωμάτων και γραμματοσειρών και να χρησιμοποιήσετε mixins και placeholder για να επαναχρησιμοποιήσετε εύκολα τα στυλ.

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

Μπορείτε να μάθετε περισσότερα για το Sass σε αυτό το σεμινάριο Scotch.io, καθώς και ένα βίντεο YouTube από τον Dev Ed.

Ανταποκρίσιμος σχεδιασμός

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

Για παράδειγμα, αντί να ρυθμίσετε το περιεχόμενό σας σε στατικό πλάτος 400 εικονοστοιχείων, μπορείτε να χρησιμοποιήσετε ένα ερώτημα πολυμέσων και να ορίσετε το περιεχόμενο σε πλάτος 50% σε επιτραπέζιο υπολογιστή και 100% σε κινητά.

Η οικοδόμηση των ιστοτόπων σας με αποκριτικό CSS είναι απαραίτητη αυτές τις μέρες, καθώς η κίνηση για κινητά υπερβαίνει την επισκεψιμότητα από επιτραπέζιους υπολογιστές σε πολλές περιπτώσεις.

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

Πλαίσια JavaScript

Μόλις μειώσετε τα βασικά του JavaScript βανίλιας, ίσως θελήσετε να μάθετε ένα από τα πλαίσια JavaScript (ειδικά εάν θέλετε να είστε προγραμματιστής JavaScript πλήρους στοίβας).

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

Αυτήν τη στιγμή, έχετε τρεις κύριες επιλογές: React, Angular και Vue.

Το React (τεχνικά μια βιβλιοθήκη), δημιουργήθηκε από το Facebook και είναι το πιο δημοφιλές πλαίσιο αυτήν τη στιγμή. Μπορείτε να ξεκινήσετε να μαθαίνετε μεταβαίνοντας στον ιστότοπο του React.js. Αν ενδιαφέρεστε για ένα premium μάθημα React, και οι δύο Tyler McGinnins και Wes Bos έχουν υπέροχα μαθήματα.

Το Angular ήταν το πρώτο μεγάλο πλαίσιο και δημιουργήθηκε από την Google. Είναι ακόμα πολύ δημοφιλές, παρόλο που έχει ξεπεραστεί πρόσφατα από το React. Μπορείτε να αρχίσετε να μαθαίνετε Angular στον ιστότοπό τους. Ο Gary από το DesignCourse έχει επίσης ένα γωνιακό πρόγραμμα γωνίας στο YouTube.

Το Vue είναι ένα νεότερο πλαίσιο που δημιουργήθηκε από τον Evan You, έναν πρώην προγραμματιστή της Angular. Ενώ είναι μικρότερο σε χρήση από το React και το Angular, αναπτύσσεται γρήγορα και θεωρείται επίσης εύκολο και διασκεδαστικό στη χρήση. Μπορείτε να ξεκινήσετε να τρέχετε μαζί του στον ιστότοπο της Vue.

Ποιο πλαίσιο πρέπει να μάθετε;

Ίσως αναρωτιέστε τώρα, "Εντάξει, ποιο πλαίσιο είναι το καλύτερο;"

Η αλήθεια είναι ότι είναι όλα καλά. Στην ανάπτυξη ιστού, σχεδόν ποτέ δεν υπάρχει μία επιλογή που να είναι 100% η καλύτερη επιλογή για κάθε άτομο και κάθε κατάσταση.

Η επιλογή σας θα εξαρτηθεί πιθανότατα από τη δουλειά σας ή απλώς από ποια από τις οποίες σας αρέσει να χρησιμοποιείτε περισσότερο. Εάν ο τελικός σας στόχος είναι να βρείτε μια δουλειά, δοκιμάστε να ερευνήσετε ποιο πλαίσιο φαίνεται να είναι το πιο συνηθισμένο στις πιθανές λίστες εργασίας.

Μην ανησυχείτε πάρα πολύ για το πλαίσιο που θα επιλέξετε. Είναι πιο σημαντικό να μαθαίνετε και να κατανοείτε τις έννοιες πίσω από αυτές. Επίσης, μόλις μάθετε ένα πλαίσιο, θα είναι πιο εύκολο να μάθετε άλλα (παρόμοια με τις γλώσσες προγραμματισμού).

Ας προχωρήσουμε τώρα στην τελευταία ενότητα: ανάπτυξη ιστού back-end!

4β: Βασικό back-end

Το back-end, ή η πλευρά του διακομιστή της ανάπτυξης ιστού, αποτελείται από τρία κύρια στοιχεία: τον διακομιστή, μια γλώσσα προγραμματισμού από την πλευρά του διακομιστή και τη βάση δεδομένων.

Υπηρέτης

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

Οι παραδοσιακοί διακομιστές εκτελούνται σε λειτουργικά συστήματα όπως Linux ή Windows. Θεωρούνται «συγκεντρωτικά» επειδή όλα - τα αρχεία του ιστότοπου, ο κώδικας back-end και τα δεδομένα αποθηκεύονται μαζί στον διακομιστή.

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

Παρά το όνομα, ωστόσο, εξακολουθείτε να χρειάζεστε κάποιο είδος διακομιστή, για να αποθηκεύσετε τουλάχιστον τα αρχεία του ιστότοπού σας. Μερικά παραδείγματα παρόχων χωρίς διακομιστές είναι AWS (Amazon Web Services) ή Netlify.

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

Για να μάθετε περισσότερα σχετικά με τις ρυθμίσεις χωρίς διακομιστές, το Netlify διαθέτει μια ενημερωτική ανάρτηση ιστολογίου που σας καθοδηγεί σε όλα τα βήματα για να ρυθμίσετε έναν στατικό ιστότοπο με ανάπτυξη.

Γλώσσα προγραμματισμού

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

Οι δημοφιλείς γλώσσες προγραμματισμού για τον Ιστό περιλαμβάνουν PHP, Python, Ruby, C # και Java. Υπάρχει επίσης μια μορφή JavaScript από το διακομιστή - Node.js, το οποίο είναι ένα περιβάλλον χρόνου εκτέλεσης που μπορεί να εκτελέσει κώδικα JavaScript στο διακομιστή.

Υπάρχουν επίσης πλαίσια που μπορείτε να χρησιμοποιήσετε με καθεμία από αυτές τις γλώσσες από τον διακομιστή. Ακριβώς όπως τα πλαίσια JavaScript front-end, αυτά τα πλαίσια back-end είναι χρήσιμα εργαλεία που κάνουν τη δημιουργία εφαρμογών ιστού πολύ πιο γρήγορα.

Ας δούμε μια λίστα με τις γλώσσες προγραμματισμού που χρησιμοποιούνται πιο συχνά για την ανάπτυξη ιστού:

ΝΤΟ#

Το C # αναπτύχθηκε ως ανταγωνιστής της Microsoft στην Java. Χρησιμοποιείται για την κατασκευή εφαρμογών ιστού με το πλαίσιο .NET, την ανάπτυξη παιχνιδιών και μπορεί ακόμη και να χρησιμοποιηθεί για τη δημιουργία εφαρμογών για κινητά.

Μέρη για να μάθετε C #: ‌‌C # Προγραμματισμός Κίτρινο Βιβλίο από τον Rob Miles‌‌C # Βασικά στοιχεία για το Udemy

Ιάβα

Η Java είναι μια από τις πιο δημοφιλείς γλώσσες προγραμματισμού και χρησιμοποιείται σε εφαρμογές ιστού καθώς και για τη δημιουργία εφαρμογών Android.

Μέρη για να μάθετε Java: ‌ Πανεπιστήμιο του MOOC‌ του Ελσίνκι Το πλήρες μάθημα προγραμματιστών Java για το Udemy

Node.js

Το Node.js είναι μια πολύ δημοφιλής τεχνολογία (σύμφωνα με την έρευνα προγραμματιστών του Stack Overflow για το 2019). Ένα πράγμα που πρέπει να σημειωθεί: δεν είναι τεχνικά μια γλώσσα από διακομιστή - είναι μια μορφή JavaScript που εκτελείται στον διακομιστή χρησιμοποιώντας το πλαίσιο Express.js.

Μέρη για να μάθετε Node.js: ‌‌Node.js tutorial by Programming with Mosh‌‌Μάθετε τον κόμβο από τον Wes Bos

PHP

Η PHP είναι η γλώσσα που τροφοδοτεί το WordPress, οπότε αυτή μπορεί να είναι μια καλή επιλογή αν νομίζετε ότι θα συνεργάζεστε με ιστότοπους μικρών επιχειρήσεων, καθώς πολλοί από αυτούς χρησιμοποιούν το WordPress. Μπορείτε επίσης να δημιουργήσετε εφαρμογές ιστού με το πλαίσιο Laravel.

Μέρη για να μάθετε PHP: ‌ Εισαγωγή στην PHP από mmtuts‌PHP από τον Edwin Diaz στο Udemy

Πύθων

Η Python αυξάνεται σε δημοτικότητα, ειδικά καθώς χρησιμοποιείται στην επιστήμη των δεδομένων και στη μηχανική μάθηση. Θεωρείται επίσης καλή, καθώς η σύνταξή της είναι απλούστερη από μερικές άλλες γλώσσες. Εάν θέλετε να δημιουργήσετε εφαρμογές ιστού, μπορείτε να χρησιμοποιήσετε τα πλαίσια Django ή Flask.

Μέρη για να μάθετε Python: ‌The Modern Python 3 Bootcamp από τον Colt Steele στο Udemy‌‌LearnPython.org

Ρουμπίνι

Το Ruby είναι μια άλλη γλώσσα που έχει μια σύνταξη που θεωρείται ότι μπορεί να μάθει. Μπορείτε να δημιουργήσετε εφαρμογές ιστού με το πλαίσιο Ruby on Rails.

Μέρη για να μάθετε Ruby: ‌The Odin Project‌‌Ruby on Rails Tutorial από τον Michael Hartl

Όπως και με τα πλαίσια JavaScript, δεν υπάρχει # 1 καλύτερη γλώσσα προγραμματισμού. Η επιλογή σας πρέπει να βασίζεται είτε στο προσωπικό σας ενδιαφέρον και την προτίμησή σας, καθώς και σε πιθανές θέσεις εργασίας - οπότε κάντε λίγη έρευνα για την οποία μπορεί να είναι μια καλή επιλογή για εσάς .

Βάσεις δεδομένων

Οι βάσεις δεδομένων, όπως υποδηλώνει το όνομα, είναι όπου αποθηκεύετε πληροφορίες για τον ιστότοπό σας. Οι περισσότερες βάσεις δεδομένων χρησιμοποιούν μια γλώσσα που ονομάζεται SQL (προφέρεται "συνέχεια") που σημαίνει "Structured Query Language".

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

Η βάση δεδομένων εκτελείται στο διακομιστή, χρησιμοποιώντας διακομιστές όπως ο Microsoft SQL Server σε διακομιστές Windows και το MySQL για Linux.

Υπάρχουν επίσης βάσεις δεδομένων NoSQL, οι οποίες αποθηκεύουν τα δεδομένα σε αρχεία JSON σε αντίθεση με τους παραδοσιακούς πίνακες. Ένας τύπος βάσης δεδομένων NoSQL είναι το MongoDB, το οποίο χρησιμοποιείται συχνά με εφαρμογές React, Angular και Vue.

Μερικά παραδείγματα για το πώς χρησιμοποιούνται τα δεδομένα σε ιστότοπους είναι:

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

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

Ορισμένοι πόροι για να μάθετε τα βασικά του SQL είναι:

  • The Complete SQL Bootcamp από τον Jose Portilla στο Udemy
  • SQLBolt

Μερικές συμβουλές για να σας αφήσουν…

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

Μερικές συμβουλές που έχω αν ακολουθείτε την αυτοδίδακτη διαδρομή:

  1. Μην προσπαθήσετε να μάθετε τα πάντα ταυτόχρονα. Επιλέξτε μια δεξιότητα για να μάθετε κάθε φορά.
  2. Μην μεταβείτε από εκπαιδευτικό σεμινάριο. Καθώς μαθαίνετε, είναι εντάξει να δείτε διαφορετικούς πόρους για να δείτε ποιος σας αρέσει περισσότερο. Αλλά πάλι, διαλέξτε ένα και προσπαθήστε να το ξεπεράσετε.
  3. Να γνωρίζετε ότι η εκμάθηση της ανάπτυξης ιστού είναι ένα μακροπρόθεσμο ταξίδι. Παρά τις ιστορίες που μπορεί να έχετε διαβάσει για άτομα που πηγαίνουν από το μηδέν έως την προσγείωση μιας εργασίας στο web dev σε 3 μήνες, θα στοχεύσω περισσότερο σε 1 έως 2 χρόνια για να είμαι έτοιμος για δουλειά, αν ξεκινάτε από την αρχή.
  4. Το να παρακολουθείτε ένα μάθημα βίντεο ή να διαβάζετε ένα βιβλίο δεν θα σας κάνει αυτόματα έναν ειδικό. Η εκμάθηση του υλικού είναι μόνο το πρώτο βήμα. Η δημιουργία πραγματικών ιστότοπων και έργων (ακόμη και μόνο για επίδειξη) θα σας βοηθήσει να ενισχύσετε πραγματικά τη μάθησή σας.

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

Θέλετε να με ακολουθήσετε;

Δημοσιεύω μίνι συμβουλές στην ανάπτυξη ιστού στο Instagram και το Twitter και δημιουργώ βίντεο εκμάθησης κωδικοποίησης στο YouTube!