Ένα έργο κωδικοποίησης την ημέρα για 20 ημέρες

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

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

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

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

Μπορείτε να βρείτε τα έργα 20 ημερών μου στο CodePen.

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

Εργαλεία

Χρησιμοποίησα όλα τα παρακάτω εργαλεία, αλλά όλα εκτός από HTML, CSS, Javascript και ένα πρόγραμμα επεξεργασίας κώδικα είναι προαιρετικά.

  • CodePen. Ένα ηλεκτρονικό πρόγραμμα επεξεργασίας κώδικα για HTML, CSS και Javascript, όπου οι χρήστες μπορούν να παρουσιάσουν το έργο τους - ιδανικό για την προβολή του κώδικα dev του web.
  • Photoshop. Ένα επεξεργαστή γραφικών παγκόσμιας κλάσης για τη δημιουργία ράστερ γραφικών. Δημιούργησα γραφικά για ορισμένα έργα με αυτό και ένα tablet Huion.
  • HTML. Γλώσσα σήμανσης υπερκειμένου δημιουργεί το περιεχόμενο μιας ιστοσελίδας.
  • Πατημασιά. Μια μηχανή προτύπου για μια πιο «καθαρή, ευαίσθητη σύνταξη για το HTML» - μεγάλη για την επιτάχυνση της ανάπτυξης.
  • Bootstrap. Μια βιβλιοθήκη συνιστωσών για γρήγορη γρήγορη λήψη στοιχείων που ανταποκρίνονται στις ανάγκες σας. Εξαιρετική για ταχύτητα. δεν είναι τόσο μεγάλη για μοναδικά σχέδια αφού κάθε στοιχείο θα έχει μια προκαθορισμένη εμφάνιση.
  • CSS. Cascading Sheets Style; υπαγορεύει το σχεδιασμό μιας ιστοσελίδας.
  • Sass. Γλώσσα φύλλου στυλ που παρέχει μεταβλητές, λειτουργίες, mixins και πολλά άλλα για την απλοποίηση της δημιουργίας CSS.
  • Javascript. Χρησιμοποιείται για τον ορισμό απρόβλεπτων ή ελεγχόμενων από το χρήστη συμβάντων μιας ιστοσελίδας.
  • Αντιδρώ. Μια βιβλιοθήκη Javascript που βοηθά στη διατήρηση της κατάστασης και τη δημιουργία του περιεχομένου μιας ιστοσελίδας, διαχωρίζοντας κάθε μέρος σε ένα επαναχρησιμοποιήσιμο στοιχείο.
  • jQuery. Μια βιβλιοθήκη Javascript που θα σας βοηθήσει να απλοποιήσετε τον χειρισμό και τον διαχωρισμό HTML DOM - σημειώστε, ωστόσο, ότι η ευκολία του έρχεται με το κόστος του σχετικά μεγάλου μεγέθους του - περίπου 30 KB.
  • three.js. Μια βιβλιοθήκη Javascript για τη δημιουργία και εμφάνιση τρισδιάστατων μοντέλων.
  • Firebase. Μια πλατφόρμα για κινητά και web που παρέχει εύκολη πρόσβαση στη βάση δεδομένων, μηνύματα, έλεγχο ταυτότητας και άλλες υπηρεσίες.
Συλλέγοντας έμπνευση από τους Awwwards, CodePen και Dribbble

Δημιουργική διαδικασία

Για να δημιουργήσω επιτυχώς ένα έργο, έπρεπε να κάνω δύο πράγματα:

  1. Εχω μια ιδέα,
  2. Ξέρτε ότι θα ήταν εφικτό.

Έτσι, η δημιουργική μου διαδικασία πήρε μορφή σε τρία βήματα -

1. Πάρτε μια ιδέα (30 λεπτά)

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

Οι αγαπημένες μου ιστοσελίδες σχεδίασης:

  • Αποσπάστε.
  • Behance.
  • Ημερήσια UI.

Οι αγαπημένες μου τοποθεσίες web dev:

  • CodePen.
  • Όλοι.
  • Κωδικοποιητές.
  • CodyHouse.)

Και κατάλαβα μια λίστα με ιδέες όπως οι εξής:

Μια καταιγίδα

... στη συνέχεια πήρε το αγαπημένο μου από τη λίστα ως την επίσημη ιδέα της ημέρας ™.

2. Βρείτε παραδείγματα (30 λεπτά)

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

  • GitHub
  • CodePen
  • JSFiddle
  • Υπερχείλιση στοίβας
  • Απλό Google
  • .. και να μεταβείτε στα Εργαλεία προγραμματιστών Chrome σε κάθε ιστότοπο που μοιάζει με αυτό που προσπαθούσα να ολοκληρώσω.

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

Δεν χρειάζεται να ανακαλύψετε τον τροχό όταν μπορείτε να βελτιώσετε το παρελθόν.

3. Δημιουργήστε! (υπόλοιπο της ημέρας)

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

Ημέρες 1-9: Δημιουργία παραδειγμάτων

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

Ημέρες 10-20: Ανάπτυξη πρωτότυπων ιδεών

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

Αντανάκλαση

1. Μάθησε τη δια βίου γνώση.

Κοιτάζοντας πίσω, ήρθα πολύ μακριά από εκεί που ήμουν πριν. Στη διάρκεια των 20 ημερών, έμαθα Bootstrap, jQuery, React, Pug, Sass και άλλα εργαλεία, καθώς και πολλά ένθετα έννοιες HTML / CSS / Javascript, όπως λειτουργίες συνδυασμού, μάσκες και αποκοπές, κινούμενα σχέδια, κλεισίματα και περιβάλλον, υποσχέσεις και πολλά άλλα. Αυτά θα με βοηθήσουν να αντιμετωπίσω τα μελλοντικά έργα, ειδικά αν και καθώς η ανάπτυξη ιστού και οι προοδευτικές εφαρμογές ιστού γίνονται πιο δημοφιλείς.

2. Ποτέ δεν υπάρχει αρκετός χρόνος.

Αν και έμαθα πολλά, δεν έμαθα τόσο πολύ όσο θα ήθελα. Είμαι λυπημένος που δεν είχα χρόνο να μάθω άλλα εργαλεία που είχα το μάτι μου, όπως Vue.js, Redux, GreenSock, και άλλοι. Παρ 'όλα αυτά, αυτά είναι όλα τα πράγματα που μπορώ να επιστρέψω και να εργαστώ στο μέλλον.

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

3. Αυξήθηκε με αυτοπεποίθηση.

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

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

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

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

Μεγάλη ευχαριστία στην Tiantian Xu που με ενέπνευσε με την 100 ημερών της κίνησης!

Αν σας άρεσε να το διαβάσετε, φροντίστε να δώσετε ένα (ή πολλά!) Θα σήμαινε τόσο πολύ για μένα.

Μπορείτε επίσης να ακολουθήσετε εμένα σε Twitter, Tumblr, Instagram και GitHub για πιο δροσερά έργα :)