Ένας πρακτικός οδηγός για την εκμάθηση ανάπτυξης front-end για αρχάριους

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

Πριν ξεκινήσουμε

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

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

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

Ως σημείο εκκίνησης, προτείνω να εγγραφείτε στο freeCodeCamp.Και θα βασίσω τα υπόλοιπα στο πρόγραμμα σπουδών τους. Το θεωρώ εξαιρετικό πόρο για διάφορους λόγους:

  1. Διδακτέα ύλη. Αυτό μπορεί να είναι το κύριο μονοπάτι σας. Είναι μια καλά δομημένη επισκόπηση των πραγμάτων που πρέπει να μάθετε και παρέχει μια καλή καμπύλη μάθησης.
  2. Γυμνάσια. Είναι μεγέθους δαγκώματος, ώστε να μπορείτε εύκολα να συνεχίσετε το ρυθμό κάνοντας μερικά από αυτά κάθε μέρα και διατηρώντας τον χάρτη θερμότητας σας πράσινο.
  3. Εργα. Μετά την ολοκλήρωση κάθε κεφαλαίου, θα δημιουργήσετε 5 έργα για να λάβετε την πιστοποίησή σας. Είναι ιδανικό να εξασκηθείτε και να εδραιώσετε τις γνώσεις σας.
  4. Κοινότητα. Είναι κάτι περισσότερο από μια πλατφόρμα εκμάθησης. Υπάρχει ένα φόρουμ, ιστολόγιο και κανάλι YouTube όπου προγραμματιστές διαφορετικών επιπέδων μοιράζονται τις γνώσεις τους και όπου μπορείτε να βρείτε έμπνευση.
  5. Είναι δωρεάν. Τα χρήματα μπορεί να είναι κρίσιμα για πολλούς ανθρώπους και εδώ, σε κάθε περίπτωση, δεν θα ξοδέψετε τίποτα εκτός από χρόνο.
Επαγγελματική συμβουλή: μπορείτε να δημιουργήσετε έναν λογαριασμό στο Twitter , εάν δεν έχετε ακόμη, και να δεσμευτείτε δημόσια στο 100DaysOfCode πρόκληση. Ο λόγος είναι απλός - υπάρχουν πολλοί άνθρωποι που κάνουν αυτήν την πρόκληση. Θα λάβετε κίνητρα και υποστήριξη και θα σας βοηθήσει να συνεχίσετε τον ρυθμό. Το συνιστώ ανεπιφύλακτα, μην ντρέπεστε και απολαύστε την κοινότητα ;

Τώρα είμαστε όλοι έτοιμοι να ξεκινήσουμε! ;

Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές

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

Τα βασικά

Βασικά HTML και HTML5καιΟι βασικές ενότητες CSS είναι οι βασικές αρχές του σύγχρονου Διαδικτύου. Εφαρμοσμένη Οπτική Σχεδίαση, Εφαρμοσμένη Προσβασιμότητα και Αρχές Σχεδίασης Ιστούθα σας διδάξει τα βασικά για τη σύνταξη καλών ιστότοπων. Μην βιαστείτε και περπατήστε προσεκτικά, αυτά είναι τα κύρια δομικά στοιχεία που γνωρίζετε.

Μπορείτε να συμπληρώσετε τις σπουδές σας με έναν εξαιρετικό οδηγό για το Διαδίκτυο είναι δύσκολο.

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

CSS Flexbox

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

Και τέλος, εξασκηθείτε παίζοντας το εθιστικό Flexbox Froggyπαιχνίδι. ;

Πλέγμα CSS

Το πλέγμα είναι πιο προηγμένο και ευέλικτο, αλλά στις περισσότερες περιπτώσεις, το Flexbox είναι αρκετά. Τέλος πάντων, θα έχετε ένα άλλο ισχυρό εργαλείο στο οπλοστάσιό σας. Ειδικά, αν είναι τόσο εύκολο να κατανοηθεί όταν μεγαλώνετε τις καλλιέργειες σας στο Grid Garden.;

Πρακτική

Πριν προχωρήσετε στα τελικά έργα, σας προτείνω να το κάνετε αυτό:

  1. Δημιουργήστε έναν λογαριασμό στο Codepen . Είναι μια δροσερή παιδική χαρά για το μπροστινό μέρος όπου μπορείτε να δημιουργήσετε τα έργα σας, να δοκιμάσετε τα αποσπάσματα και να εξασκηθείτε.
  2. Εγκαταστήστε έναπρόγραμμα επεξεργασίας κώδικαστο μηχάνημά σας και μάθετε πώς να το χρησιμοποιείτε.
  3. Μάθετε τα βασικά της γραμμής εντολών από αυτό το βίντεοαπό τον Wes Bos ή το Shell Workshop on Udacity.
  4. Μάθετε πώς να χρησιμοποιείτε το Git σε αυτήν τη λίστα αναπαραγωγής από το NetNinja.
  5. Πάρτε κάποια πρακτική καθοδήγησης Επιλέξτε οποιαδήποτε έργα από αυτήν τη λίστα αναπαραγωγής από το Traversy Media και προσθέστε κώδικα Δημιουργήστε τα μέχρι να αισθανθείτε σίγουροι. Θα ήταν υπέροχο αν χρησιμοποιείτε ήδη έναν επεξεργαστή κώδικα και ένα στοιχείο ελέγχου έκδοσης και ανεβάσετε την εργασία σας σε ένα ειδικό ρεπό ρεπούλ στο Github

Τώρα είστε έτοιμοι να λάβετε την πρώτη σας πιστοποίηση! ;

Πηγαίνετε και φτιάξτε τα τελικά έργα σας και μοιραστείτε τα;

Αλγόριθμοι Javascript και δομές δεδομένων

Τώρα ξέρετε πώς να δημιουργήσετε στατικούς ιστότοπους και ήρθε η ώρα να μάθετε JavaScript.

Η ενότητα JavaScript του freeCodeCamp είναι υπέροχη, αλλά σας συμβουλεύω να δείτε το javascript.infoως πρόσθετη αναφορά. Αυτός είναι ο καλύτερος πόρος που παρέχει ολοκληρωμένες πληροφορίες για οτιδήποτε σχετίζεται με το JavaScript.

Περισσότερες προτάσεις

  1. Μάθημα βασικών JavaScript της Beau Carnes, εάν προτιμάτε οπτικούς οδηγούς.
  2. Όσον αφορά το νέο πρότυπο JavaScript, τα αγαπημένα μου είναι τα σπουδαία μαθήματα ES6 για όλους! (πληρώθηκε) από τον Wes Bos και Modern JavaScript από τον Beau Carnes.
  3. Πρόγραμμα τακτικών εκφράσεων για το Scrimba.
  4. Το αντικειμενοστρεφόμενο μάθημα JavaScript από το NetNinja ήταν πολύ χρήσιμο για μένα.

Αλγόριθμοι

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

Ως λίγη βοήθεια, σας συμβουλεύω να παρακολουθήσετε JavaScript Cardio Sessions από το Traversy Media.

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

Για να βρείτε άλλους αμφισβητίες του 100DaysOfCode συμπεριλαμβανομένου μου, μεταβείτε στις Ρυθμίσεις λογαριασμού σας και πληκτρολογήστε # 100DaysOfCode στο πεδίο Clan.

Πριν προχωρήσετε στα τελικά έργα, πρέπει να είστε προετοιμασμένοι για το τελικό αφεντικό, το Ταμείο. ;

Αφού το νικήσεις, μπορώ να πω ότι…

… Τώρα ξέρετε πώς να εργαστείτε με JavaScript! ;

Κολλάμε τα πράγματα μαζί

Τώρα ήρθε η ώρα να αντιμετωπίσετε την πρόκληση Javascript30 από τον Wes Bos. Αυτός είναι ο καλύτερος τρόπος για να μάθετε πώς συνεργάζονται HTML, CSS και JavaScript, να βελτιώσετε τις γνώσεις σας για τα βασικά στοιχεία και να κατανοήσετε το DOM. Η κατασκευή αυτών των μικρών έργων ήταν μια υπέροχη εμπειρία και πραγματικά διασκεδαστική για μένα!

Βιβλιοθήκες διεπαφής

Από αυτό το σημείο, γίνεστε ένας πραγματικός προγραμματιστής;

Μπότα

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

jQuery

Παρόλο που κάποιοι λένε ότι το jQuery είναι νεκρό, θα είναι πάντα χρήσιμο όταν η λύση σε καθαρή JavaScript είναι περίεργη και η χρήση ενός πλαισίου JS είναι υπερβολική. Αυτό θα είναι ένα άλλο εξαιρετικό εργαλείο στο οπλοστάσιό σας. Δημιουργήστε μερικές μικρές εφαρμογές για να εξασκηθείτε.

Σας

Δεν εκτιμούσα πλήρως τα πλαίσια CSS έως ότου είδα την πραγματική τους δύναμη. Ήθελα να μάθω προηγμένες τεχνικές CSS και αγόρασα ένα εκπληκτικό Advanced CSS και Sassμάθημα (πληρωμένο) από τον Jonas Schmedtmann Συνιστάται ιδιαίτερα εάν θέλετε να γυαλίσετε τις δεξιότητές σας CSS και να κατανοήσετε τη ροή εργασίας. Είμαι ακόμα χαρούμενος που το βρήκα.

Αντιδράστε & Redux

Αυτό είναι το κύριο μέρος της ενότητας Front End Library. Το React είναι μια εξαιρετική επιλογή ως η πρώτη βιβλιοθήκη JavaScript που θα μάθετε.

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

Τα προσωπικά μου αγαπημένα:

  1. Πλήρες σεμινάριο React (με Redux)από την NetNinja
  2. Αντιδράστε για αρχάριους (πληρώθηκε) από τον Wes Bos
  3. React - Ο πλήρης οδηγός (πληρώνεται) από την Academind

Ελπίζω να είστε ενθουσιασμένοι που θα χρησιμοποιήσετε τις νέες γνώσεις σας για τα τελικά έργα.

Τώρα μπορείτε να δημιουργήσετε οτιδήποτε θέλετε ;

Προχωράμε περισσότερο

Είστε ένας πραγματικός προγραμματιστής front-end τώρα και έχετε αρκετές δεξιότητες για να δημιουργήσετε εξαιρετικές εφαρμογές ιστού. Ίσως να είστε περίεργοι τι να κάνετε στη συνέχεια και η απάντηση είναι τόσο απλή όσο το "Build, build, build!" . Η τρέχουσα αποστολή σας είναι να δημιουργήσετε ένα χαρτοφυλάκιο για τον εαυτό σας και να αποκτήσετε περισσότερη πρακτική.

Ακολουθούν ορισμένες συμβουλές για το τι πρέπει να κάνετε στη συνέχεια:

  1. Λάβετε ιδέες για ένα έργο στοΠάρτε οικιακά έργαενότητα στο freeCodeCamp.
  2. Δημιουργήστε οποιοδήποτε έργο μαζί με ένα μάθημα και μετά τροποποιήστε το και βελτιώστε το προσθέτοντας νέες δυνατότητες.
  3. Αντιμετωπίστε τα D3.js και Node.js για να λάβετε τις επόμενες πιστοποιήσεις freeCodeCamp!
  4. Διαβάστε το Eloquent JavaScript καιΔεν ξέρετε JSγια να γίνετε ninja JavaScript.
  5. Βελτιώστε την κατάταξή σας στο Codewars.
  6. Απολαύστε μια προηγμένη σχεδίαση ιστοσελίδων από αυτό το Web Design για Web Developersσειρά μαθημάτων.
  7. Διατηρήστε ενεργό τον λογαριασμό σας GitHub και προσπαθήστε να συνεισφέρετε στο ανοιχτό κώδικα.

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

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

Καλή τύχη!