Δημιουργία ιστοτόπου Ανάπτυξη front-end - δωρεάν μάθημα από το Παιδικό διαδικτυακό σχολείο προγραμματισμού Hello World, εκπαίδευση 44 ωρών, Ημερομηνία: 3 Δεκεμβρίου 2023.
μικροαντικείμενα / / December 06, 2023
Πώς λειτουργεί το Διαδίκτυο
Ας μιλήσουμε για τις βασικές έννοιες του Διαδικτύου και την αρχιτεκτονική του. Ας μάθουμε τι είναι αρχιτεκτονική τομέα, φιλοξενία, πελάτη-διακομιστή. Ας δημιουργήσουμε το περιβάλλον εργασίας και ας μιλήσουμε για τους τρεις πυλώνες της ανάπτυξης Front-end - HTML, CSS και JavaScript.
HTML
Δομή εγγράφου HTML
Ας δημιουργήσουμε τις πρώτες σελίδες HTML και ας δούμε παραδείγματα απλών και πολύπλοκων ιστοσελίδων. Ας καταλάβουμε ποια μπλοκ πρέπει να υπάρχουν στη σελίδα μας. Ας κάνουμε τις σελίδες μας να συνδέονται μεταξύ τους, να μάθουμε πώς διαφέρει το κείμενο από το υπερκείμενο και ποιες είναι οι ετικέτες και τα χαρακτηριστικά.
Εργαστείτε με κείμενο
Ας μάθουμε πώς να εργαζόμαστε σωστά με κείμενο σε HTML: χωρίστε το σε παραγράφους, υποδείξτε επικεφαλίδες και υποτίτλους. Ας μάθουμε πώς να φτιάχνουμε αριθμημένες και κουκκίδες λίστες και να αναφέρουμε τα κλασικά.
Σύνδεσμοι και εικόνες
Ας εξοικειωθούμε με τους συνδέσμους με περισσότερες λεπτομέρειες και επίσης ας μάθουμε πώς να εισάγουμε εικόνες και να τις χρησιμοποιούμε ως συνδέσμους.
Διάταξη τραπεζιού
Ας δημιουργήσουμε τον πρώτο μας πίνακα και ας μάθουμε από ποιες ετικέτες αποτελείται. Ας μάθουμε πώς να συγχωνεύουμε κελιά, να αλλάζουμε τον αριθμό των γραμμών και στηλών, να στοιχίζουμε κείμενο και πολλά άλλα. Θα μάθουμε επίσης βασικές συμβουλές από τον σχεδιαστή για το πώς να κάνετε το τραπέζι σας όμορφο.
Εισαγωγή στις Φόρμες
Ας δημιουργήσουμε την πρώτη μας φόρμα, ας μάθουμε πώς να δουλεύουμε με πεδία εισαγωγής, αναπτυσσόμενες λίστες, πλαίσια ελέγχου και, φυσικά, κουμπιά. Ας μελετήσουμε άλλα στοιχεία φόρμας που θα μας φανούν χρήσιμα στο μέλλον.
CSS
Εισαγωγή στο CSS
Ας θυμηθούμε τι είναι το CSS και πώς να το χρησιμοποιήσουμε. Ας μάθουμε πώς να χρησιμοποιείτε το CSS όταν εργάζεστε με σελίδες HTML. Ας μελετήσουμε τη σύνταξη του CSS και τι είναι οι επιλογείς, η κληρονομικότητα και με ποια προτεραιότητα εφαρμόζονται τα στυλ μας σε ένα έγγραφο HTML.
Επιλογείς
Ας μελετήσουμε τους επιλογείς με περισσότερες λεπτομέρειες. Ας μάθουμε πώς να αποκτήσετε πρόσβαση σε ένα ή περισσότερα στοιχεία, ποια είναι η διαφορά μεταξύ μιας κλάσης και μιας ψευδο-κλάσης και ενός στοιχείου από ένα ψευδο-στοιχείο. Ας ρίξουμε μια ματιά στις οδηγίες CSS και ας μάθουμε τι αρέσει να ρωτούν οι άνθρωποι για το CSS στις συνεντεύξεις.
Κληρονομικότητα, κλιμάκωση και προτεραιότητα
Μαθαίνουμε ότι το κασκαντέρ και οι κασκαντέρ δεν είναι από τον ίδιο χώρο. Ας κατανοήσουμε τις αρχές με τις οποίες εφαρμόζονται τα στυλ CSS σε στοιχεία HTML.
Διακόσμηση κειμένου
Ας επιστρέψουμε από εκεί που ξεκινήσαμε - στο κείμενο. Ας μάθουμε πώς να κάνουμε το κείμενό μας όμορφο και φιλικό προς τον χρήστη χρησιμοποιώντας ιδιότητες CSS: τόλμη, πλάγια γραφή, μέγεθος, χρώμα, φόντο και άλλα.
Αποκλεισμός μοντέλου εγγράφου
Ας μάθουμε ετικέτες div και span, καθώς και πώς να ορίζουμε μεγέθη στοιχείων, padding και περιγράμματα. Ας καταλάβουμε πώς διαμορφώνεται το μοντέλο μπλοκ ενός εγγράφου και ποιες δυνατότητες έχουμε για την τοποθέτηση στοιχείων.
JavaScript
Παρουσίαση της JavaScript
Ας εξοικειωθούμε με τον τρίτο πυλώνα ανάπτυξης Front-end - JavaScript. Ας μάθουμε ποιες είναι οι μεταβλητές, οι τύποι δεδομένων και γιατί χρειάζονται. Και φυσικά θα γράψουμε το πρώτο μας πρόγραμμα.
Συνθήκες
Ας θυμηθούμε τη λογική, τις λογικές πράξεις και τους συνδυασμούς τους. Είθε η δύναμη και ο έλεγχος να είναι μαζί μας.
Κύκλοι
Ας μάθουμε πώς να κάνουμε πολλά ενώ γράφουμε λίγο κώδικα. Ας καταλάβουμε ότι ένας κύκλος μέσα σε έναν κύκλο είναι απλός, αλλά πρέπει να είστε προσεκτικοί.
Πίνακες
Υπάρχουν μάζες πάγου, δάση και υπάρχουν συστοιχίες στον προγραμματισμό. Θα μελετήσουμε τι κοινό έχουν και πώς διαφέρουν σε αυτό το μάθημα. Υπόδειξη - οι βρόχοι από το προηγούμενο μάθημα θα μας βοηθήσουν πολύ.
Λειτουργίες
Εάν οι μεταβλητές και το σωστό όνομα για αυτές είναι τα ABC του προγραμματισμού, τότε η δυνατότητα εργασίας με συναρτήσεις και επιλογής κατάλληλων ονομάτων για αυτές είναι ήδη μια συνταγή. Θα μάθουμε πώς να χωρίζουμε ένα πρόγραμμα σε λογικά μπλοκ και γιατί αυτό είναι σημαντικό σε αυτό το μάθημα.
Αντικείμενα
Θα εξοικειωθούμε με την έννοια των αντικειμένων, των μεθόδων και θα αρχίσουμε να εξοικειωνόμαστε με τις αρχές του OOP.
Εισαγωγή στο DOM
Η JavaScript θα ήταν άχρηστη εάν δεν μπορούσε να αλληλεπιδράσει με ένα έγγραφο HTML. Θα μάθουμε τι είναι το DOM (Document Object Model), αλλά το πιο σημαντικό, θα μάθουμε πώς να εργαζόμαστε με HTML και CSS μέσω JavaScript.
Χειρισμός εκδηλώσεων
Τώρα θα το πάμε στο επόμενο επίπεδο και θα μάθουμε πώς να αντιδρούμε και να αλληλεπιδρούμε με τον χρήστη χρησιμοποιώντας JavaScript. Θα μάθουμε επίσης γιατί τα συμβάντα JavaScript μπορούν να σχηματίσουν φυσαλίδες και να βυθιστούν.
HTML5 & CSS3
HTML5: τι νέο υπάρχει και γιατί;
Ας μάθουμε ποιες αλλαγές έχουν συμβεί στην HTML5 και γιατί. Ας μελετήσουμε νέα στοιχεία και ας αναλύσουμε περιπτώσεις σωστής χρήσης τους.
Στοιχεία τοποθέτησης και πλέγμα
Ας δούμε νέους τρόπους δομής σελίδων και τοποθέτησης στοιχείων σε αυτές.
Φόρμες HTML5
Ας εξερευνήσουμε τη σκοτεινή πλευρά της δύναμης και ας εξασκηθούμε με νέες φόρμες στην HTML5, καθώς και αλλαγές σε παλιές. Ας δουλέψουμε με νέους τύπους πεδίων για την εισαγωγή ημερομηνιών, χρωμάτων, αριθμών και πώς να προτρέψουμε τον χρήστη να κάνει τη ζωή του λίγο πιο εύκολη.
Ήχος και βίντεο
Σε αυτό το σεμινάριο, είστε ο DJ καθώς και ο συντάκτης. Δεν θα έχουμε χρόνο να φτιάξουμε το δικό μας Youtube κατά τη διάρκεια αυτού του μαθήματος, αλλά θα προσπαθήσουμε πολύ σκληρά να δημιουργήσουμε ένα πρωτότυπο με βασική λειτουργικότητα.
Εργασία με κείμενο σε CSS3
Ας μάθουμε ποιες ευκαιρίες υπάρχουν και προτάσεις για μορφοποίηση κειμένου στην πιο πρόσφατη έκδοση του προτύπου.
Εφέ μετάβασης και μετασχηματισμού στο CSS3
Ας μάθουμε πώς να δημιουργείτε κινούμενα σχέδια και διάφορα εφέ χρησιμοποιώντας CSS3. Ας εξοικειωθούμε με τις παγίδες κατά τη δημιουργία τέτοιων εφέ.
Προσαρμοστική διάταξη
Ας μάθουμε γιατί πρέπει να κάνετε προσαρμοστική διάταξη και πότε δεν είναι απαραίτητο και μπορεί να προκαλέσει βλάβη. Ας δούμε τη βασική σύνταξη και, φυσικά, ας εξασκηθούμε στην προσαρμοστική διάταξη.
Πλέγμα Flexbox & CSS
Θα μάθουμε για τις σύγχρονες προσεγγίσεις για τη διάταξη μπλοκ, καθώς και για τις δυσκολίες που υπάρχουν στη χρήση τους.
Προεπεξεργαστές CSS: LESS και SASS
Θέλετε να χρησιμοποιήσετε μεταβλητές στο CSS; Εύκολα! Μάθετε ποια ενδιαφέροντα πράγματα μπορείτε να κάνετε χρησιμοποιώντας προεπεξεργαστές CSS.
JavaScript σε νέο επίπεδο
ES-2015+
Τι είναι η σύγχρονη JavaScript, η "αυστηρή λειτουργία" και πώς να ζήσετε με όλα αυτά.
OOP σε JavaScript
Ας μελετήσουμε πώς είναι δομημένες οι κλάσεις στη σύγχρονη JavaScript και γιατί χρησιμοποιούνται, εάν όλα μπορούν να γίνουν χρησιμοποιώντας συναρτήσεις. Πώς λειτουργεί η κληρονομικότητα και ποιοι άλλοι τρόποι δημιουργίας κλάσεων υπάρχουν στο JS.
Λειτουργίες αναλυτικά
Ας μάθουμε τι είναι η δήλωση συνάρτησης και η έκφραση συνάρτησης, μάθουμε πώς να καλούμε μια συνάρτηση χωρίς όνομα. Ας δούμε τη φράση «σύνδεση περιβάλλοντος».
AJAX και JSON
Ας πάμε σε ένα νέο επίπεδο ως προγραμματιστές, ας μάθουμε πώς να κάνουμε αιτήματα HTTP και ας μάθουμε πώς ο διακομιστής και ο πελάτης μπορούν να επικοινωνούν μεταξύ τους και να μην τσακώνονται.
Κανονικές εκφράσεις
«Αν έχετε ένα πρόβλημα και πρόκειται να το λύσετε με κανονικές εκφράσεις, τότε έχετε ήδη δύο προβλήματα». Ας μάθουμε πώς να αποφύγετε να πυροβολήσετε τον εαυτό σας στο πόδι χρησιμοποιώντας κανονικές εκφράσεις.
Builders, task runners και διαχείριση εξαρτήσεων
Bower, npm, gulp, Grunt, webpack και co. Δεν υπάρχει τίποτα περίπλοκο σε αυτό, αλλά θα πρέπει να το καταλάβετε.
Δοκιμή σε JavaScript
Όπου υπάρχει κωδικός, υπάρχουν πάντα λάθη. Θα μάθετε πώς να ελαχιστοποιήσετε τον αριθμό τους και ποιες πρακτικές και εργαλεία θα μας βοηθήσουν σε αυτό.
Αλγόριθμοι
Θα μάθουμε πώς να γράφουμε κώδικα, ώστε αργότερα ο επεξεργαστής και το πρόγραμμα περιήγησης να μην αισθάνονται βασανιστικό πόνο κατά την εκκίνηση του προγράμματός σας.
ReactJS
Εισαγωγή στο ReactJS
Ας εξοικειωθούμε με το ReactJS, ας μάθουμε πώς να γράφουμε απλά στοιχεία και να το συγκρίνουμε με άλλα δημοφιλή πλαίσια. Ας εξοικειωθούμε με την έννοια του Virtual DOM.
Αρχιτεκτονική και διαμόρφωση εφαρμογών React
Ας μάθουμε ποιες ενέργειες πρέπει να κάνουμε για να γράφουμε όχι μόνο στο React, αλλά και για να το κάνουμε όσο πιο αποτελεσματικά και βολικά γίνεται.
Δημιουργία της πρώτης εφαρμογής στο ReactJS
Ας ρίξουμε μια πιο προσεκτική ματιά στα JSX, ReactComponent, ReactDOM.render, λειτουργία Render. Διαμορφώνουμε και εκκινούμε την πρώτη εφαρμογή, καθιερώνουμε σχέσεις μεταξύ στοιχείων και συμβάντων διαδικασίας.
Δρομολόγηση και ReactJS
Τι είναι η δρομολόγηση; Ας εξοικειωθούμε με το ReactRouter και τη λειτουργικότητά του. Οργανώνουμε δρομολόγηση στην εφαρμογή μας.