Πώς να δημιουργήσετε και να αναπτύξετε τη δική σας προσωπική ιστοσελίδα χαρτοφυλακίου

Γειά σου! Το όνομά μου είναι Kevin Powell. Μου αρέσει να διδάσκω στους ανθρώπους πώς να φτιάχνουν τον Ιστό και πώς να το κάνουν να φαίνεται καλό ενώ είναι σε αυτό.

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

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

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

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

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

Μάθημα 1: Εισαγωγή

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

Μερικές γενικές πληροφορίες σχετικά με τον συγγραφέα του μαθήματος

Μάθημα 2: Ρύθμιση πραγμάτων - HTML

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

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

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

Μάθημα 3: Η περιοχή κεφαλίδας - HTML

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

Μάθημα 4: Ενότητα εισαγωγής

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

Στο τέλος, προσθέτουμε μια ενότητα σχετικά με τις κύριες δεξιότητες / υπηρεσίες που μπορούμε να κάνουμε. Προς το παρόν μπορούμε απλά να τα συμπληρώσουμε με κείμενο "Lorem ipsum" ως σύμβολο κράτησης θέσης, έως ότου είστε έτοιμοι να το συμπληρώσετε με το δικό σας κείμενο.

Μάθημα 5: Σχετικά με εμένα, Work and Footer - HTML

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

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

Προς το παρόν, όλα φαίνονται λίγο ωμά και όλη η διασκέδαση CSS είναι μπροστά μας.

Μάθημα 6: Ρύθμιση των προσαρμοσμένων ιδιοτήτων και των γενικών στυλ

Εντάξει, ήρθε η ώρα να κάνετε αυτή τη σελίδα να φανεί καταπληκτική!

Σε αυτό το μέρος, θα μάθουμε πώς να προσθέτουμε προσαρμοσμένες ιδιότητες.

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

Μάθημα 7: Προσδιορισμός των τίτλων και των υπότιτλων

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

Μάθημα 8: Ρύθμιση της ενότητας εισαγωγής

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

Διατηρούμε τα πάντα με απόκριση, χρησιμοποιώντας το CSS Grid και κάνουμε μια μικρή βουτιά στη χρήση emμονάδων επίσης.

Αυτό είναι το τέλειο παράδειγμα όπου CSS Grid λάμπει μέσα και θα πάμε για να μάθουν πώς να χρησιμοποιούν τις ιδιότητες, όπως grid-column-gap, grid-template-areasκαι grid-template-columns.

Εισαγωγική ενότητα του ιστότοπου

Μάθημα 9: Προσδιορισμός της ενότητας υπηρεσιών

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

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

Το τμήμα υπηρεσιών του ιστότοπου

Μάθημα 10: Η ενότητα Σχετικά με εμένα

Μεγάλη πρόοδος! Αυτό είναι λοιπόν το σημαντικότερο τμήμα Σχετικά με εμένα. Αυτό μοιάζει πολύ με το Intro επειδή πρόκειται να χρησιμοποιήσουμε το CSS Grid, αλλά μετακινήστε την εικόνα στη δεξιά πλευρά και βρείτε ένα χρήσιμο παράδειγμα για τη frμονάδα CSS .

Η ενότητα Σχετικά με εμένα του ιστότοπου

Μάθημα 11: Το χαρτοφυλάκιο

Το τμήμα χαρτοφυλακίου

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

Ενότητα χαρτοφυλακίου με επισημασμένο στοιχείο

Μάθημα 12: Προσθήκη των κοινωνικών εικονιδίων με το Font Awesome

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

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

Για παράδειγμα, δείτε πώς μπορείτε να προσθέσετε ένα εικονίδιο για το GitHub όταν έχετε συνδέσει τη Γραμματοσειρά με το σήμα σας.

Μάθημα 13: Στυλ του υποσέλιδου

Το υποσέλιδο

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

Με λίγη χρήση του flexbox και αφαιρώντας το στυλ από τη λίστα με list-style: noneσχετικά απλή κίνηση προς τα εμπρός.

Μάθημα 14: Ρύθμιση των στυλ πλοήγησης

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

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

μενού πλοήγησης με στυλ

Μάθημα 14: Δημιουργία χάμπουργκερ

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

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

Θα έχουμε μια τυχαία πρακτική ::beforeκαι ::afterψευδο-επιλογείς, μετάβαση και, δεδομένου ότι δεν είναι ένας σύνδεσμος αλλά ένας button, πρέπει επίσης να ορίσουμε τον διαφορετικό κέρσορα όταν τοποθετούμε το δείκτη πάνω από το εικονίδιο χάμπουργκερ για να δείξουμε ότι μπορεί να γίνει κλικ cursor: pointer.

Μάθημα 15: Προσθήκη του JS

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

μενού ανοιχτό / κλείσιμο animation

Κοιτάζω επίσης πώς μπορούμε να προσθέσουμε την ομαλή κύλιση με CSS μόνο χρησιμοποιώντας scroll-behavior: smooth. Ναι, είναι πραγματικά τόσο απλό! Κάνει επίσης ένα υπέροχο tweet για το Today I Learned (TIL). Μη διστάσετε να σας στείλουμε TILs στο @scrimba και είμαι βέβαιος ότι θα είναι πολύ χαρούμενοι να τα retweet!

Μάθημα 16: Δημιουργία της σελίδας στοιχείων χαρτοφυλακίου

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

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

σελίδα στοιχείων χαρτοφυλακίου

Μάθημα 17: Προσαρμογή της σελίδας σας

Εδώ μπαίνει η μαγεία των προσαρμοσμένων ιδιοτήτων CSS!

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

Μάθημα 18: Σταγονίδια DigitalOcean - Τι είναι και πώς να το δημιουργήσετε

Σε αυτό το screencast, θα εξερευνήσουμε τα σταγονίδια DigitalOcean. Είναι εικονικές μηχανές που βασίζονται σε Linux και ότι κάθε σταγονίδιο είναι ένας νέος διακομιστής που μπορείτε να χρησιμοποιήσετε.

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

Πίνακας ελέγχου DigitalOcean

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

Μάθημα 19: Σταγονίδια DigitalOcean - Μεταφόρτωση αρχείων μέσω FTP

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

Μάθημα 20: Τελειώστε

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

Μόλις τα συνδυάσετε και το αποκτήσετε στο διαδίκτυο, μοιραστείτε το χαρτοφυλάκιό σας με εμένα και την ομάδα της Scrimba! Μπορείτε να μας βρείτε στα @KevinJPowell και @scrimba στο Twitter και θα χαρούμε πολύ να μοιραστούμε αυτό που σας ενδιαφέρει!

Δείτε το πλήρες μάθημα

Θυμηθείτε, αυτό το μάθημα είναι εντελώς δωρεάν. Προχωρήστε τώρα στο Scrimba και μπορείτε να το ακολουθήσετε και να δημιουργήσετε μια φανταστική τοποθεσία!