Διάταξη και ανάπτυξη ιστοσελίδων. Προηγμένο επίπεδο Web Develop - μάθημα 1990 rub. από Stepik, εκπαίδευση 131 μαθημάτων, Ημερομηνία: 1 Δεκεμβρίου 2023.
μικροαντικείμενα / / December 04, 2023
Γειά σου!
Το όνομά μου είναι Δήμα. Και σας προσκαλώ να βουτήξετε στα βάθη της δημιουργίας και της διάταξης ιστότοπου!
Αυτό το μάθημα απευθύνεται σε όσους γνωρίζουν ήδη τα βασικά, αλλά θέλουν να περάσουν από ένα καλό επίπεδο δημιουργίας ιστότοπου σε ένα εξαιρετικό.
Το μάθημα απευθύνεται σε όσους γνωρίζουν τα βασικά της HTML και CSS, αλλά γνωρίζουν ότι υπάρχουν ακόμα πολλές τεχνικές, τεχνικές ανάπτυξης και τεχνολογίες που χρησιμοποιούνται από πραγματικούς επαγγελματίες προγραμματιστές.
Εάν αυτό σας φαίνεται γνωστό, τότε αυτό το μάθημα είναι για εσάς)
Δώστε ζωή στους ιστότοπούς σας με σύγχρονα κινούμενα σχέδια μέσω CSS
Θα ξεκινήσουμε εισάγοντας τη δυναμική στους ιστότοπούς μας, δηλαδή θα κάνουμε animation. Θα μάθουμε πώς να κάνουμε κίνηση σε κουμπιά, κείμενα και επικεφαλίδες χρησιμοποιώντας καθαρό CSS, να μάθουμε πώς να δημιουργείτε κινούμενα σχέδια καρτών, να δημιουργήσουμε ένα μενού δυναμικής πλοήγησης και όλα αυτά χωρίς ούτε μια γραμμή κώδικα JS, μόνο καθαρό CSS.
Αυτό το μάθημα περιέχει βέλτιστες πρακτικές στο responsive design.
Θα μάθετε νέους τρόπους και κόλπα για να σχεδιάζετε τους ιστότοπούς σας με απόκριση, θα χρησιμοποιείτε νέες τεχνικές για τον καθορισμό και τη σύνταξη ερωτημάτων μέσων και θα μάθετε πώς να προσαρμόστε όλα τα στοιχεία σελίδας αλλάζοντας μόνο μία ιδιότητα CSS, ώστε ο ιστότοπός σας να φαίνεται καλύτερος από ποτέ σε οποιαδήποτε φορητή συσκευή συσκευή
Μάθετε όλες τις περιπλοκές και τα πλεονεκτήματα των σύγχρονων προεπεξεργαστών
Θα μάθετε πώς να επιταχύνετε τη δημιουργία του ιστότοπού σας αρκετές φορές χρησιμοποιώντας τις πλήρεις δυνατότητες του προεπεξεργαστή SASS, όπως mixins, μεταβλητές και λειτουργίες.
Βασικά βασικά για τη χρήση του NPM
Επίσης, τα πακέτα NPM με τα πρόσθετα απαραίτητα για κάθε επαγγελματία προγραμματιστή θα μας δώσουν την ευκαιρία να δημιουργήσουμε και να βελτιστοποιήσουμε ιστοσελίδες πιο γρήγορα και πιο αποτελεσματικά από ποτέ.
Το σύστημα ελέγχου έκδοσης Git θα σας βοηθήσει στην ανάπτυξή σας
Επιπλέον, θα μάθετε τα απαραίτητα βασικά για την εργασία με το σύστημα ελέγχου έκδοσης git ώστε να έχετε πάντα τη δυνατότητα να επιστρέψετε στη σωστή έκδοση του ιστότοπού σας, ανεξάρτητα από το πόσο άσχημα μπερδέψατε την τελευταία φορά ενημερώστε τον ιστότοπο)
Δημιουργείτε 2 σύγχρονες ιστοσελίδες για το χαρτοφυλάκιό σας
Αυτό το μάθημα βασίζεται στην πρακτική και χωρίζεται σε μικρά μαθήματα βίντεο στα οποία θα δημιουργήσουμε βήμα προς βήμα 2 μεγάλα σύγχρονα έργα βασισμένα στο σύστημα float - για να μπορείτε να υποστηρίξετε παλιά έργα και φυσικά στο σύστημα GRID CSS, που σας επιτρέπει να δημιουργήσετε διατάξεις απίστευτης πολυπλοκότητας.
Και φυσικά, δεν θα ντρέπεστε να δείξετε αυτά τα έργα στους πιθανούς πελάτες ή στους μελλοντικούς εργοδότες σας.
Είμαι πάντα σε επαφή!
Και να είστε σίγουροι, δεν θα μείνετε μόνοι, γιατί μετά από κάθε μικρό μάθημα, θα έχετε την ευκαιρία να συγκρίνετε τον κωδικό σας με τον δικό μου ή απλώς να κάνετε μια ερώτηση· οι απαντήσεις συνήθως δεν αργούν να φτάσουν.
Εγγύηση επιστροφής χρημάτων!
Και αν εξακολουθείτε να έχετε αμφιβολίες, αυτό το μάθημα παρέχει την ευκαιρία να επιστρέψετε τα χρήματα που δαπανήθηκαν για αυτό εάν δεν σας αρέσουν εντός 30 ημερών.
Ελάτε μαζί μου και μαζί θα μάθουμε πώς να δημιουργούμε επαγγελματικές, μοντέρνες ιστοσελίδες.
Τα λέμε στην τάξη!
9
ΚΥΚΛΟΣ ΜΑΘΗΜΑΤΩΝΔημιουργώ πρωτότυπα διαδικτυακά μαθήματα από το 2016. Διδάσκω επαγγελματικά τη συνεργασία με γραφικούς συντάκτες της Adobe, διδάσκω σχεδιασμό και ανάπτυξη ιστού.
Γειά σου! Με λένε Ντίμα! Δεν θέλω να καυχηθώ, αλλά πρέπει) Έχω διδάξει περισσότερους από 5.000 μαθητές σε όλο τον κόσμο στα ιδιόκτητα διαδικτυακά μου μαθήματα. Πάνω από 2.000 πραγματικές κριτικές με μέση βαθμολογία 4,83 από 5,00! Διδάσκω σχεδιασμό ιστοσελίδων, ανάπτυξη ιστοσελίδων και το απαραίτητο λογισμικό (Photoshop Illustrator, Figma). Η διδακτική μου εμπειρία αποτελείται από 5 χρόνια ανεξάρτητης διδασκαλίας, καθώς και διδασκαλία μέσω διαδικτυακών σχολών και μαθημάτων, σε παγκόσμιες πλατφόρμες εξ αποστάσεως εκπαίδευσης. Οι μαθητές των μαθημάτων μου σημειώνουν τα καλύτερα προσόντα μου στον τρόπο που παρουσιάζω το υλικό χωρίς στριμώξεις, με διασκεδαστικό και ενδιαφέροντα τρόπο.
Προετοιμασία / Επανάληψη / Πρώτα κινούμενα σχέδια
1. Γεια σας!) Λήψη υλικού για το μάθημα
2. Εγκαταστήστε και διαμορφώστε το απαραίτητο λογισμικό
3. Νέα διαδρομή κλιπ ιδιοκτησίας. Αρχίζουμε να δημιουργούμε την πρώτη ενότητα του ιστότοπου
4. Εάν η εφαρμογή scout δεν λειτουργεί για εσάς
5. Εξάσκηση: Δημιουργήστε το σχήμα σας χρησιμοποιώντας το Clip-path
6. Ευθυγράμμιση στοιχείων κατακόρυφα χρησιμοποιώντας απόλυτη τοποθέτηση
7. Γνωρίστε το @KeyFrames. Ας δημιουργήσουμε το πρώτο animation.
8. Backface-ορατότητα και δημιουργία κουμπιών μέσω ψευδο-κλάσεων
9. Κινούμενη κίνηση ενός κουμπιού χρησιμοποιώντας ψευδοστοιχεία
10. Λειτουργία κίνησης-γεμίσματος. Ξεκινώντας ένα animation από ένα συγκεκριμένο σημείο.
11. 3 αρχές ανάπτυξης ιστοσελίδων
12. Χρησιμοποιήστε REM αντί για PX
Git και GitHub
1. Τι είναι αυτό το μπλοκ;
2. Βασικές εντολές στο τερματικό
3. Πώς να επεξεργαστείτε αρχεία μέσω τερματικού
4. Εγκαταστήστε το σύστημα git στον υπολογιστή μας
5. Πώς να εκτελέσετε το git σε ένα συγκεκριμένο έργο
6. Δημιουργία της πρώτης δέσμευσης
7. Υποβολή έργου στο GitHub
8. Εάν έχετε κάποιο σφάλμα κατά την υποβολή του έργου σας στο GitHub
9. Σφάλμα σύνδεσης κατά την προσπάθεια προώθησης ενός έργου στο GitHub
10. Εξάσκηση: Δημιουργήστε το δικό σας αποθετήριο
11. Πώς να διαγράψετε ένα αποθετήριο GitHub
12. Πώς να κατεβάσετε αποθετήρια από το GitHub
13. Μιμούμε την εργασία 2 προγραμματιστών σε ένα αποθετήριο
14. Πώς να εμφανίσετε πληροφορίες σχετικά με δεσμεύσεις στο τερματικό. Ημερολόγιο Git
15. Τι είναι τα κλαδιά
16. Πώς να δημιουργήσετε και να πλοηγηθείτε σε υποκαταστήματα.
17. Κλείνουμε το κενό από την αρχή του μίνι μαθήματος με τους συμβολισμούς -u και -M
18. Μη αποθηκευμένο σφάλμα δέσμευσης κατά την ολοκλήρωση αγοράς
19. Πώς να προωθήσετε τις αλλαγές που δημιουργήθηκαν σε έναν νέο κλάδο
20. Πώς να προωθήσετε πολλαπλές δεσμεύσεις σε έναν νέο κλάδο
21. Ποια είναι η κατάσταση της αποκολλημένης κεφαλής; Αποσπασμένο ΚΕΦΑΛΙ
22. Πώς να επαναφέρετε ένα συγκεκριμένο αρχείο από μια προηγούμενη δέσμευση
23. Σύνθετο αρχείο καταγραφής git και εμφάνιση git
24. Πώς να συγχωνεύσετε κλάδους χρησιμοποιώντας τη συγχώνευση Git. Μέθοδος γρήγορης προώθησης
25. Πώς να διαγράψετε υποκαταστήματα
26. Πώς να αφαιρέσετε αρχεία καταλόγου από κατάσταση χωρίς παρακολούθηση
27. Επαναφορά Git -- Δύσκολο. Πώς να επαναφέρετε σκληρά μια δέσμευση
28. Δεύτερος τρόπος για να βρείτε μια δέσμευση που έχει κολλήσει χρησιμοποιώντας το ORIG_HEAD
29. Επαναφορά Git --μαλακό
30. Git commit --τροποποίηση αλλάζοντας το σχόλιο μιας προηγούμενης δέσμευσης
31. Επαναφορά Git --μικτή
32. Διαφορά μεταξύ επαναφοράς git και επαναφοράς git
33. Εισαγωγή στο git diff. Εκτύπωση της διαφοράς πολλών δεσμεύσεων στην κονσόλα
34. Πρακτικό παράδειγμα χρήσης git diff
35. Πώς να εμφανίσετε το διάγραμμα διακλάδωσης στο τερματικό. Git log -- γράφημα
36. Συγχωνεύουμε κλάδους χρησιμοποιώντας τη συγχώνευση git. Μέθοδος "True Fusion"
37. Πώς να επιστρέψετε μετά από μια συγχώνευση
38. Πώς να αντιγράψετε ένα συγκεκριμένο commit χρησιμοποιώντας το git cherry-pick
39. Συγχώνευση κλάδων με git rebase
40. Ποιο είναι καλύτερο git rebase ή git merge
41. Πώς να χρησιμοποιήσετε το αρχείο .gitignore
42. Τελευταία λέξη
Σύνθετη διάταξη - CSS/SASS
1. Τι είναι αυτό το μπλοκ;
2. Πώς λειτουργούν οι μεταβλητές SASS
3. Πώς λειτουργούν τα mixins
4. Πώς να προσθέσετε ορίσματα σε mixins
5. Τι είναι τα πρότυπα SASS
6. Πώς λειτουργούν οι λειτουργίες SASS
7. Οργάνωση αρχείων SASS για ένα μεγάλο έργο
8. 3 τρόποι τοποθέτησης στοιχείων
9. Πώς λειτουργεί το float;
10. Δημιουργώντας το δικό μας σύστημα πλέγματος
11. Εφαρμογή διαβάθμισης στο κείμενο. Φόντο-κλιπ
12. Πώς να δημιουργήσετε σύμβολα χρησιμοποιώντας HTML
13. Εμψύχωση και ολοκλήρωση της δεύτερης ενότητας
14. Πώς να δημιουργήσετε τις δικές σας γραμματοσειρές εικονιδίων
15. Χρησιμοποιούμε την ιδιότητα προοπτική για να αντικατοπτρίσουμε την προοπτική των στοιχείων
16. Πώς λειτουργεί η λειτουργία ανάμειξης στο CSS
17. Ολοκληρώνοντας το τμήμα με κάρτες
18. Τρόπος στρογγυλοποίησης κειμένου χρησιμοποιώντας την ιδιότητα shape-outside
19. Πώς λειτουργούν τα φίλτρα CSS
20. Πώς να προσθέσετε ένα βίντεο σε μια σελίδα
21. Γνωριμία με την ετικέτα φόρμας και τα περιεχόμενά της
22. Εμψύχωση της φόρμας
23. Δημιουργήστε το δικό σας κουμπί επιλογής χρησιμοποιώντας CSS
24. Δημιουργία υποσέλιδου ιστότοπου
25. Δημιουργία μενού πλοήγησης με χρήση καθαρού CSS part-1
26. Ρύθμιση μεταβάσεων ταχύτητας κινουμένων σχεδίων χρησιμοποιώντας το cubic-bezier
27. Ζωντανεύοντας ένα χάμπουργκερ
Προσαρμοστικός σχεδιασμός
1. Τι είναι αυτό το μπλοκ;
2. Πώς να δημιουργήσετε responsive ιστότοπους
3. Δημιουργία μίξης με κανόνες πολυμέσων
4. Προσαρμογή του έργου Μέρος 1
5. Προσαρμογή του έργου Μέρος 2
6. Προσαρμογή του έργου Μέρος 3
7. Τι είναι οι αποκριτικές εικόνες
8. Πώς να προσαρμόσετε εικόνες σε HTML
9. Ας προσαρμόσουμε εικόνες HTML στο έργο μας
10. Προσαρμογή εικόνων CSS
11. Μερικές τελικές επεξεργασίες ιστότοπου
Διαχειριστής πακέτων κόμβου
1. Τι είναι αυτό το μπλοκ;
2. Τι είναι το node.js και το npm
3. Προετοιμασία του πρώτου πακέτου npm για χρήση
4. Εκκίνηση του πρώτου πακέτου npm
5. Χρησιμοποιώντας gulp στο έργο μας
6. Πώς να ανοίξετε έναν ιστότοπο σε ένα κινητό τηλέφωνο
Εισαγωγή στο CSS GRID
1. Τι είναι αυτό το μπλοκ;
2. Παρασκευή
3. Πώς να δημιουργήσετε ένα πρότυπο πλέγματος. Πρότυπο πλέγματος
4. Πώς λειτουργούν οι μονάδες fr
5. Πώς να μετακινήσετε ένα στοιχείο σε άλλο κελί
6. Τοποθέτηση πολλών στοιχείων σε ένα κελί
7. Εξάσκηση: Δημιουργήστε μια διάταξη ιστότοπου
8. Παράδειγμα δασκάλου. Δημιουργήστε μια διάταξη
9. Πώς να μετονομάσετε κάθε γραμμή σε ένα πλέγμα
10. Πώς να δημιουργήσετε ένα πρότυπο πλέγματος χρησιμοποιώντας ένα σχήμα ονομάτων
11. Τι είναι τα ρητά και τα άρρητα πλέγματα;
12. Πώς να ευθυγραμμίσετε στοιχεία μέσα στα κελιά
13. Πώς να ευθυγραμμίσετε ένα πλέγμα μέσα σε ένα δοχείο
14. Ελάχιστο-Μέγιστο περιεχόμενο
15. Αυτόματη συμπλήρωση και αυτόματη προσαρμογή. Μεγέθη κελιών με βάση το περιεχόμενο
16. Συμπέρασμα. Κήπος με πλέγμα
Έργο GRID CSS
1. Τι είναι αυτό το μπλοκ;
2. Παρασκευή
3. Δημιουργήστε ένα πρότυπο πλέγματος μέρος 1
4. Δημιουργήστε ένα πρότυπο πλέγματος μέρος 2
5. Πώς λειτουργούν τα SVG sprites
6. Ολοκληρώνουμε τη δεύτερη ενότητα του ιστότοπου
7. Δημιουργία της ενότητας "Banner", μέρος 1
8. Δημιουργία της ενότητας "Banner", μέρος 2
9. Δημιουργία ενότητας με κάρτες
10. Δημιουργία γκαλερί
11. Δημιουργία υποσέλιδου
12. Φτιάχνοντας "Χάμπουργκερ"
13. Δημιουργία κεφαλίδας μέρους 1
14. Δημιουργία κεφαλίδας μέρους 2
15. Προσαρμόζουμε τον ιστότοπο
Τα λέμε!
1. Αντιο σας!
Πάρτε το πιστοποιητικό σας
1. Τεστ για την απόκτηση πιστοποιητικού ολοκλήρωσης του μαθήματος