Πώς να γίνετε καλύτερος προγραμματιστής με βάση έργα οικοδόμησης (περιλαμβάνονται ιδέες)

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

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

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

Ο καλύτερος τρόπος για να μάθετε αυτές τις δεξιότητες είναι να κάνετε κάποια έργα προγραμματιστών front-end και να μάθετε στην πορεία. Και το καλύτερο μέρος; Δεν χρειάζεστε καν πελάτη για να ξεκινήσετε επειδή μπορείτε να κάνετε αυτά τα έργα μόνοι σας.

Πώς να επιλέξετε ένα Προσωπικό Πρόγραμμα Ανάπτυξης

Λάβετε υπόψη το επίπεδο δεξιοτήτων σας

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

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

Για παράδειγμα, εάν έχετε μάθει πρόσφατα HTML και CSS, ήρθε η ώρα να ανεβείτε επίπεδο εκμάθησης JavaScript.

Λύστε ένα προσωπικό πρόβλημα ή ένα πρόβλημα που σας ενδιαφέρει

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

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

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

4 Διασκεδαστικά Προγράμματα Ανάπτυξης

Δημιουργήστε έναν κλώνο ενός ιστότοπου.

Δεξιότητες για μάθηση: HTML, CSS, JavaScript ή / και Bootstrap.

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

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

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

Μπορείτε επίσης να ακολουθήσετε αυτήν την άσκηση για να σας βοηθήσουμε να κλωνοποιήσετε τη σελίδα προορισμού μιας εφαρμογής που ονομάζεται Karma WiFi. Δημιουργήθηκε από τον Kyle Koski, έναν από τους μέντορες της Thinkful, και χρησιμοποιεί HTML και CSS.

Το καλό με την κλωνοποίηση ενός ιστότοπου είναι ότι μπορείτε να επιλέξετε το επίπεδο πολυπλοκότητας του ιστότοπου. Εάν μόλις ξεκινήσετε, ένας απλός ιστότοπος που χρειάζεται μόνο HTML και CSS είναι ένα καλό μέρος για να ξεκινήσετε. Εάν είστε πιο προηγμένοι, επιλέξτε έναν ιστότοπο που απαιτεί JavaScript ή React.

Δημιουργήστε ένα παιχνίδι κουίζ JavaScript.

Ικανότητα να μάθετε: JavaScript

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

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

Είναι κάτι περισσότερο από διασκέδαση και παιχνίδια. Τα κουίζ κερδίζουν πραγματικά δημοτικότητα ως εργαλεία μάρκετινγκ περιεχομένου. Έχετε δει ποτέ τέτοια πράγματα;

Τα κουίζ είναι καταπληκτικά εργαλεία μάρκετινγκ επειδή είναι διαδραστικά. Σύμφωνα με δημοσκόπηση του Content Marketing Institute, το 81% των εμπόρων συμφωνούν ότι το διαδραστικό περιεχόμενο - το οποίο είναι οποιοδήποτε είδος περιεχομένου που απαιτεί τη συμμετοχή του χρήστη - προσελκύει την προσοχή πιο αποτελεσματικά από το στατικό περιεχόμενο.

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

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

Για να δημιουργήσετε ένα κουίζ, ρίξτε μια ματιά σε αυτά τα σεμινάρια για τη δημιουργία κουίζ JavaScript από το WebDevTrick και το SitePoint. Δείτε πώς μπορεί να μοιάζει το κουίζ σας JS:

Δημιουργήστε τη δική σας συσκευή ανάγνωσης QR για κινητά.

Ικανότητα να μάθετε: JavaScript

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

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

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

Οι ιστότοποι που εκτελούνται σε μια έξυπνη συσκευή με κάμερα μπορούν να κάνουν το τέχνασμα.

Αυτός ο οδηγός σας δείχνει τη διαδικασία βήμα προς βήμα για τη δημιουργία του δικού σας αναγνώστη κώδικα QR.

Θα χρησιμοποιήσετε HTML και JavaScript, αλλά το πιο σημαντικό μέρος είναι να χρησιμοποιήσετε μια βιβλιοθήκη JS που μπορεί να ερμηνεύσει τον κώδικα QR. Τα καλά νέα είναι ότι δεν θα χρειαστεί να τα δημιουργήσετε από το μηδέν, επειδή υπάρχουν πολλές εξαιρετικές βιβλιοθήκες εκεί έξω για αυτόν τον ακριβή σκοπό.

Δημιουργήστε μια εφαρμογή καιρού.

Δεξιότητα για μάθηση: Γωνιακό 8

Το Angular είναι ένα από τα τρία πιο δημοφιλή πλαίσια ανάπτυξης front-end παράλληλα με το React και το Vue.js. Συνήθως χρησιμοποιείται για τη δημιουργία εφαρμογών βάσει φόρμας (όπου πρέπει να εγγραφείτε για να δημιουργήσετε λογαριασμό), αλλά μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία παιχνιδιών και ακόμη και εφαρμογών με στοιχεία εικονικής πραγματικότητας.

Υπάρχει ένα πολύ λεπτομερές, βήμα προς βήμα σεμινάριο για το Medium που διδάσκει στους αρχάριους πώς να δημιουργήσουν μια όμορφη εφαρμογή καιρού με το Angular 8 (η τελευταία έκδοση του Angular). Η εφαρμογή καιρού μοιάζει με αυτό:

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

Αυτό που είναι υπέροχο για αυτό το έργο είναι να έχετε μια αίσθηση του πώς είναι να δημιουργήσετε μια εύχρηστη, ανταποκρινόμενη εφαρμογή από το μηδέν. Θα μάθετε τα πάντα, από την εγκατάσταση του Node.js και του Angular CLI έως τη δοκιμή του κωδικού σας με το LightHouse.

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

Κάντε αυτό σωστά και θα έχετε μια εντυπωσιακή εφαρμογή καιρού στο χαρτοφυλάκιό σας.

Μπορείτε να αποκτήσετε πρόσβαση στο σεμινάριο εδώ.

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

Σχεδιάστε και κωδικοποιήστε τον δικό σας ιστότοπο χαρτοφυλακίου.

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

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

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

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

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

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

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

Πού μπορώ να εξασκήσω την ανάπτυξη front-end;

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

Αυτά είναι υπέροχα μέρη για να λάβετε βοήθεια καθώς ασχολείστε με την ανάπτυξη front-end:

  1. freeCodeCamp.org - Πρόκειται για έναν ιστότοπο γεμάτο με δωρεάν μαθήματα σχετικά με τη θεωρία ανάπτυξης ιστού, τις γλώσσες και τις βέλτιστες πρακτικές Υπάρχει επίσης μια εξαιρετική κοινότητα εδώ που μπορεί να βοηθήσει στις ερωτήσεις σας.
  2. Μοντέρνο HTML & CSS από την αρχή - Αυτό είναι ένα μάθημα Udemy από τον Brad Traversy. Είναι γεμάτο με χρήσιμες πληροφορίες και μπορεί πραγματικά να σας διδάξει όλα όσα χρειάζεστε για να ξεκινήσετε με αυτές τις γλώσσες.
  3. Frontτροoror.io - Μπορείτε να βρείτε δωρεάν και εξαιρετικές «προκλήσεις» εδώ που μπορείτε να κάνετε στον ελεύθερο χρόνο σας για να αναπτύξετε το skillet σας. Η δυσκολία των προκλήσεων κυμαίνεται από «νεώτερος» έως «προχωρημένος». Ακολουθούν παραδείγματα των προκλήσεων που θα βρείτε εδώ:

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

Αυτά είναι 5 διασκεδαστικά αναπτυξιακά έργα που μπορείτε να δοκιμάσετε σήμερα. Και πάλι, αυτά εννοούνται ως σημεία εκκίνησης. Τελικά εναπόκειται σε εσάς να το προσαρμόσετε για να προσθέσετε λίγο από την προσωπική σας πινελιά :)

Θυμηθείτε, είναι όλα σχετικά με την πρακτική. ΠΡΕΠΕΙ να χτίσετε πράγματα για να βελτιώσετε το skillet σας.

Μην μάθετε μόνο παρακολουθώντας.

Μάθετε χτίζοντας.

Μάθε κάνοντας.

- Kyle Prinsloo (@study_web_dev) 24 Ιουνίου 2020

Καλή κωδικοποίηση!

Ευχαριστούμε που διαβάσατε και ζητωκραυγές για τώρα,

Κάιλ

Ακολουθήστε με στο Twitter για περισσότερες συμβουλές.