Basics of modern layout - δωρεάν μάθημα από το Hexlet, εκπαίδευση 9 ωρών, Ημερομηνία: 5 Δεκεμβρίου 2023.
μικροαντικείμενα / / December 06, 2023
Θα μάθετε περισσότερα για τη σήμανση HTML και τις δυνατότητες του σύγχρονου προτύπου HTML5. Θα αποκτήσετε επίσης βασικές γνώσεις στυλ χρησιμοποιώντας CSS: μάθετε πώς να συνδέετε στυλ, να χρησιμοποιείτε επιλογείς και να εργάζεστε με cascading. Εκτός από το HTML και το CSS, θα μάθετε να εργάζεστε με τα ενσωματωμένα εργαλεία εντοπισμού σφαλμάτων διάταξης του προγράμματος περιήγησης, ιδιαίτερα με τα Εργαλεία προγραμματισμού του Google Chrome. Ως αποτέλεσμα, θα μάθετε πώς να χρησιμοποιείτε τη γλώσσα σήμανσης HTML για τη διάταξη κειμένου σε έναν ιστότοπο και επίσης θα εξοικειωθείτε με τους βασικούς κανόνες χρήσης CSS και στυλ κειμένου.
Θα είστε σε θέση να εφαρμόσετε αμέσως τις νέες σας δεξιότητες - θα μελετήσουμε τους επεξεργαστές διάταξης και τις προσθήκες για αυτούς. Στο τέλος κάθε μαθήματος θα βρείτε μικρές ανεξάρτητες εργασίες. Αποσκοπούν στην πιο πρακτική κατανόηση του καλυπτόμενου θέματος και επομένως συνιστώνται ιδιαίτερα για εφαρμογή.
Τα βασικά στοιχεία της διάταξης θα σας φανούν χρήσιμα εάν αποφασίσετε να μελετήσετε την ανάπτυξη ιστού, ανεξάρτητα από την κατεύθυνση. Οι γνώσεις από αυτό το μάθημα βοηθούν τους προγραμματιστές να επισημαίνουν δεδομένα και να τα εμφανίζουν στον ιστότοπο. Αυτό το μάθημα είναι κατάλληλο για αρχάριους και προγραμματιστές που δεν έχουν συναντήσει
Εισαγωγή
Το μάθημα «Βασικές αρχές της σύγχρονης διάταξης» είναι η βάση για την εκμάθηση των βασικών στοιχείων της διάταξης ιστοτόπων HTML και CSS. Σε αυτό το μάθημα θα μιλήσουμε εν συντομία για το τι μαθαίνουμε στο μάθημα και πώς αυτή η γνώση μπορεί να εφαρμοστεί στην πράξη.
Εισαγωγή στην HTML
Το μάθημα είναι αφιερωμένο στη διάταξη HTML από την αρχή. Μιλάμε για το ρόλο των χαρακτηριστικών και μελετάμε το γενικό σχήμα για την περιγραφή των ετικετών HTML.
Μοντέλο μπλοκ
Ποια στοιχεία είναι υπεύθυνα για το πλαίσιο της σελίδας και ποια βοηθούν στη διαδικασία διαμόρφωσης ή προσθήκης λειτουργικών τμημάτων; Ας εξοικειωθούμε με μπλοκ και ενσωματωμένα στοιχεία HTML και ας μελετήσουμε την επίδραση των στυλ στο τελικό πλάτος των στοιχείων.
Σημασιολογική HTML
Ο κύριος στόχος κάθε διάταξης HTML είναι να μεταφέρει το νόημα των μπλοκ. Σε αυτό το μάθημα, θα εξερευνήσουμε τις δυνατότητες σημασιολογίας του πιο πρόσφατου προτύπου HTML5 και θα μάθουμε για την προσβασιμότητα στον ιστό.
Βασική δομή ενός εγγράφου HTML
Κάθε έγγραφο HTML έχει μια βασική δομή που αποτελείται από ετικέτες και στοιχεία υπηρεσίας. Το πρόγραμμα περιήγησης τα χρειάζεται για να εμφανίζει σωστά τις πληροφορίες. Σε αυτό το μάθημα θα εξετάσουμε κάθε γραμμή αυτής της δομής.
Βασικά CSS
Η γλώσσα CSS δημιουργήθηκε για την οπτική σχεδίαση μιας ιστοσελίδας. Μελετάμε τις βασικές δυνατότητες της γλώσσας, καταλαβαίνουμε πώς να τις χρησιμοποιήσουμε μαζί με HTML. Μαθαίνουμε να συμπεριλαμβάνουμε αρχεία CSS και εξοικειωνόμαστε με τους βασικούς τύπους επιλογέων.
Cascading σε CSS
Τι είναι το cascading και πώς λειτουργεί στο CSS; Το μάθημα είναι αφιερωμένο στις διαφορές στις προτεραιότητες του επιλογέα και στη δυνατότητα χρήσης αυτού στα έργα σας.
Chrome DevTools
Κατά τη δημιουργία ενός ιστότοπου, είναι σημαντικό να βρίσκουμε έγκαιρα σφάλματα ή να κατανοούμε πώς να μετατρέψουμε σωστά το μπλοκ που χρειαζόμαστε. Προηγουμένως, αυτό γινόταν κυρίως με το χέρι. Σήμερα τα σύγχρονα προγράμματα περιήγησης έχουν μια λειτουργία επιθεωρητή ιστού. Ας εξετάσουμε τις δυνατότητες ενός από αυτά - του Chrome DevTools.
Συντάκτες κώδικα
Για να αποθηκεύσετε την εργασία σας, χρειάζεστε ένα πρόγραμμα επεξεργασίας κώδικα. Σε αυτό το μάθημα θα δούμε πώς να εγκαταστήσετε τον κώδικα του Visual Studio. Αυτό είναι ένα ισχυρό εργαλείο που μπορεί να χρησιμοποιηθεί όχι μόνο για διάταξη, αλλά και για προγραμματισμό σε οποιαδήποτε γλώσσα.
Έμμετ
Ας μελετήσουμε ένα από τα πιο χρήσιμα πρόσθετα για σχεδιαστές διάταξης - το Emmet. Θα επιταχύνει τη σήμανση κώδικα HTML και θα καταργήσει τα περισσότερα από τα βήματα ρουτίνας.
Δημοσίευση στο Διαδίκτυο
Για να τοποθετήσετε ένα έργο στο Διαδίκτυο, πρέπει να χρησιμοποιήσετε τη φιλοξενία - έναν ειδικό διακομιστή που θα αποθηκεύει αρχεία και θα παρέχει πρόσβαση σε αυτά μέσω ενός ονόματος τομέα. Σε αυτό το σεμινάριο θα εξετάσουμε τη δωρεάν φιλοξενία GitHub.
Επεξεργαστής γραφικών
Υπάρχουν αρκετοί σημαντικοί συντάκτες στην αγορά. Ορισμένα από αυτά αφορούν μόνο ένα λειτουργικό σύστημα, ενώ άλλα μπορούν να εγκατασταθούν σε οποιοδήποτε από αυτά. Σε αυτήν την ενότητα, ας δούμε τα κύρια βήματα όταν ένας σχεδιαστής διάταξης συνεργάζεται με τον ηλεκτρονικό επεξεργαστή Figma.
Ανεξάρτητη εργασία
Πρόσθετες εργασίες που σας επιτρέπουν να εδραιώσετε την επίκτητη θεωρία
Πρόσθετα υλικά
Άρθρα και βίντεο επιμέλεια της ομάδας Hexlet. Θα σας βοηθήσει να βουτήξετε βαθύτερα στο θέμα του μαθήματος