Προγραμματιστής Frontend: ιστότοποι σε HTML/CSS/JavaScript - μάθημα 18.000 rub. από το Coddy School of Programming for Children, εκπαίδευση 3 ενοτήτων (μήνες)
μικροαντικείμενα / / December 03, 2023
Ηλικία: 11-14 ετών
Επίπεδο: για αρχάριους.
Διάρκεια: από 3 ενότητες (μήνες), από 24 ώρες*.
Μορφή: ατομικά και ομαδικά μαθήματα, offline και online (σε πραγματικό χρόνο).
Αριθμός παιδιών: από 1 έως 8.
Τιμή:
από 750 ρούβλια/ώρα σε διαδικτυακή ομάδα,
από 850 τρίψιμο/ώρα σε ομάδα εκτός σύνδεσης,
από 1050 τρίψιμο/ώρα μεμονωμένα online,
από το 1980 τρίψιμο/ώρα μεμονωμένα εκτός σύνδεσης.
Στον σύγχρονο κόσμο, κάθε σοβαρή εταιρεία προσπαθεί να αποκτήσει τη δική της ιστοσελίδα, γιατί είναι ένα είδος «επαγγελματική κάρτα» στο Διαδίκτυο, χωρίς την οποία η επιχειρηματική δραστηριότητα φαίνεται ήδη ξεπερασμένη, επιπόλαιη και απελπισμένος.
Τα τελευταία χρόνια, το επάγγελμα του webmaster έχει ανέβει στην κορυφή της κατάταξης των πιο ελκυστικών και περιζήτητων επαγγελμάτων στον χώρο της πληροφορικής. Από αυτή την άποψη, υπάρχουν αυτήν τη στιγμή όλο και περισσότεροι άνθρωποι που επιθυμούν να υποβληθούν σε εκπαίδευση στη δημιουργία ιστοσελίδων με ξύστε και κατακτήστε αυτή την αριστοκρατική ειδικότητα για να έχετε μια σταθερή και αξιοπρεπή κέρδη. Η σχολή προγραμματισμού μας CODDY προτείνει να μην καθυστερήσετε και να εγγράψετε το παιδί σας στο μάθημα «Frontend Developer: Websites σε HTML/CSS/JavaScript» αυτή τη στιγμή! Σκοπός αυτού του μαθήματος είναι να διδάξει στα παιδιά πώς να δημιουργούν σύγχρονες ιστοσελίδες και να τους μυήσει στα βασικά του επαγγέλματος του προγραμματιστή διεπαφής.
Τι είναι το webmaster και πώς να γίνετε webmaster;
Το Webmastering είναι ένα σύνολο δραστηριοτήτων για την ανάπτυξη, δημιουργία, βελτιστοποίηση και προώθηση ιστοσελίδων. Όλα όσα συνδέονται με τον ένα ή τον άλλο τρόπο με την παραγωγή και τη συντήρηση των χώρων. Αυτή είναι μια ολόκληρη επιστήμη που απαιτεί ορισμένες δεξιότητες και γνώσεις σε πολλούς τομείς, όπως προγραμματισμός ιστού, σχεδιασμός, copywriting, SEO και άλλοι.
Στο σύγχρονο Διαδίκτυο, ο καθένας μπορεί να δημιουργήσει τη δική του ιστοσελίδα. Αλλά κατά κανόνα, η ποιότητα των έργων Ιστού αφήνει πολλά να είναι επιθυμητή. Για να είναι ένας ιστότοπος ανταγωνιστικός, πρέπει να προσεγγίσετε το θέμα με αρμοδιότητα και να εμπλέξετε επαγγελματίες στη δουλειά. Χρησιμοποιώντας μια γλώσσα προγραμματισμού, ο προγραμματιστής δημιουργεί σελίδες ιστότοπου και τις συνδυάζει σε ένα ενιαίο αντικείμενο, μετά από το οποίο τις τοποθετεί για σωστή εμφάνιση σε προγράμματα περιήγησης. Ιδιαίτερη προσοχή πρέπει να δοθεί στη διεπαφή του μελλοντικού ιστότοπου, διασφαλίζοντας τη σωστή λειτουργία και την ασφάλειά του. Οπότε, ένας επαγγελματίας webmaster κάνει μόνος του όλα τα παραπάνω! Αυτός είναι ένας προγραμματιστής, σχεδιαστής ιστοσελίδων, σχεδιαστής διάταξης, διαχειριστής και συντονιστής, και μερικές φορές ένας κειμενογράφος SEO που ενσωματώνεται σε ένα.
Ποιες γνώσεις και τεχνολογίες χρειάζεστε για να γίνετε webmaster;
Προτού γίνετε webmaster, πρέπει να εξοικειωθείτε και να μελετήσετε πολλές τεχνολογίες, προγράμματα και συστήματα. Εδώ είναι τα κύρια βήματα που θα θέσουν τα θεμέλια για το μελλοντικό σας επάγγελμα:
1. Εκμάθηση HTML – Γλώσσα σήμανσης υπερκειμένου.
Μόλις αρχίσετε να μαθαίνετε HTML, θα κατανοήσετε τη δομή ενός εγγράφου Ιστού και θα μάθετε πώς να δημιουργείτε απλούς ιστότοπους.
2. Εκμάθηση CSS – γλώσσα στυλ εμφάνισης ιστοσελίδας. Χάρη στην εισαγωγή στυλ CSS στο έγγραφο, ο ιστότοπος αποκτά τη δική του γεύση και μοναδική εμφάνιση. Μπορείτε να ορίσετε το χρώμα, το μέγεθος, το φόντο και πολλά άλλα στην ιστοσελίδα.
3. Εισαγωγή στο CMS – σύστημα διαχείρισης περιεχομένου ή «μηχανή» του ιστότοπου.
4. Mastering Adobe Photoshop – ένα πρόγραμμα επεξεργασίας γραφικών με απίστευτο αριθμό δυνατοτήτων. Πολλοί ειδικοί το χρησιμοποιούν για να σχεδιάσουν σχέδια και να δημιουργήσουν τις δικές τους πρωτότυπες και υψηλής ποιότητας διατάξεις.
5. Βασική εξοικείωση με γλώσσες προγραμματισμού. Η συντριπτική πλειοψηφία των ιστοσελίδων χρησιμοποιούν PHP και JavaScript. Η ταχύτητα του ιστότοπου, η ασφάλειά του, η πιθανή επεκτασιμότητα και η υποστήριξη από τρίτους προγραμματιστές εξαρτώνται από την ποιότητα των γραπτών σεναρίων. Με άλλα λόγια, πρέπει να είστε σε θέση να γράψετε κώδικα ποιότητας.
6. Εργασία με βάσεις δεδομένων.
Και το πιο σημαντικό, ο webmaster πρέπει να δημιουργήσει πρωτότυπους ιστότοπους. Με την εμφάνιση έτοιμων λύσεων για όλα τα δημοφιλή CMS, ένας ιστότοπος με πρωτότυπο σχεδιασμό χωρίς πρότυπα είναι πιο περιζήτητος από ποτέ. Ένας επαγγελματίας webmaster όχι μόνο μπορεί να εργαστεί με ένα σύνολο έτοιμων προγραμμάτων, αλλά και να γράψει αυτά τα έτοιμα προγράμματα. Για να φτάσετε σε αυτό το επίπεδο θα πρέπει να εργαστείτε σκληρά. Και το μάθημά μας «Πρώτος προγραμματιστής: Ιστότοποι σε HTML/CSS/JavaScript» θα βοηθήσει το παιδί σας να κάνει τα πρώτα βήματα με αυτοπεποίθηση σε αυτό το δύσκολο έργο. Υπό την καθοδήγηση έμπειρων επαγγελματιών διδασκαλίας, θα μάθει να δημιουργεί ενημερωτικούς ιστότοπους που διαθέτουν πρωτότυπο γραφικό σχέδιο.
Κατά τη διάρκεια της εκπαιδευτικής διαδικασίας θα μελετηθούν τα ακόλουθα θέματα:
1. Βασικά στοιχεία της γλώσσας σήμανσης υπερκειμένου (HTML) και των επικαλυπτόμενων φύλλων στυλ (CSS)
2. διάταξη των σύγχρονων ιστοσελίδων
3. σε βάθος μελέτη των χαρακτηριστικών του στυλ ιστοσελίδων
4. βασικά στοιχεία της εργασίας με το Adobe Photoshop και της εργασίας με διατάξεις σχεδίασης ιστοτόπων
Στο αρχικό στάδιο, θα εξοικειωθούμε με τα βασικά του επαγγέλματος του προγραμματιστή διεπαφής ιστού και θα μελετήσουμε τους κανόνες χτίζοντας τη δομή και τη λογική των ιστοσελίδων, αποκτώντας πρακτικές δεξιότητες προγραμματισμού διεπαφές ιστού. Κάθε μαθητής θα μάθει τα βασικά της γραφής κώδικα HTML και CSS.
Με την ολοκλήρωση αυτού του θέματος, το παιδί σας θα δημιουργήσει τη δική του σύγχρονη ιστοσελίδα.
Η δεύτερη ενότητα περιλαμβάνει μια σε βάθος μελέτη εργαλείων προγραμματισμού διεπαφής ιστού. Σε αυτή την ενότητα θα συνεχίσουμε την εισαγωγή μας στην HTML και CSS. Οι μαθητές θα εξοικειωθούν με τον αλγόριθμο και τη δομή της δημιουργίας σύγχρονων ιστοσελίδων στην πράξη, θα δημιουργήσουν ανεξάρτητα μια διαδραστική συλλογή εικόνων και θα δημοσιεύσουν το έργο τους στο Διαδίκτυο.
Κατά την τρίτη ενότητα, θα συνεχίσουμε τη γνωριμία μας με το επάγγελμα του προγραμματιστή ιστοσελίδων, θα αποκτήσουμε πρακτικές δεξιότητες στην εργασία με το Adobe Photoshop και θα μελετήσουμε σύγχρονα εργαλεία σχεδίασης ιστοσελίδων. Στο στάδιο της δημιουργίας ενός σχεδίου ιστοσελίδας, ο μαθητής θα αποκτήσει βασικές δεξιότητες στην εργασία σε ένα πρόγραμμα επεξεργασίας γραφικών. Θα αναλύσουμε διάφορες επιλογές σχεδίασης ιστότοπου, θα συζητήσουμε τα πλεονεκτήματα και τα μειονεκτήματα του καθενός και θα ανακαλύψουμε πώς μπορεί να βελτιωθεί ο σχεδιασμός.
Στο τέλος του μαθήματος, οι μαθητές μου και εγώ θα δημιουργήσουμε έναν ιστότοπο χρησιμοποιώντας μια έτοιμη διάταξη σχεδίασης χρησιμοποιώντας τα πιο πρόσφατα εργαλεία προγραμματισμού Ιστού και θα δημοσιεύσουμε το αποτέλεσμα της εργασίας μας στο Διαδίκτυο.
11
ΚΥΚΛΟΣ ΜΑΘΗΜΑΤΩΝΚαθηγητής μαθήματος:
"Minecraft: Εισαγωγή στην Τεχνητή Νοημοσύνη", "Unity 3D", "Εμπρός προγραμματιστής: Ιστότοποι HTML/CSS/JavaScript", "Σχέδιο σε στυλ Anime", «Προγραμματισμός για τους μικρούς», «Προγραμματισμός Minecraft», «Σχεδιαστική σκέψη», «Bots σε Python», «Γραφιστική σχεδίαση Photoshop», "Videobloggin"
Εκπαίδευση:
Πλήθος μαθημάτων βελτίωσης δεξιοτήτων πληροφορικής σε διεθνείς εταιρείες (Chatbot Hackathons, Prototyping στον τομέα της τεχνητής νοημοσύνης, αρχιτεκτονική πληροφορικής κ.λπ.). University of Heilbronn, Heilbronn, Γερμανία (Master of Business Administration). Κρατικό Οικονομικό Πανεπιστήμιο της Λευκορωσίας, Μινσκ, Λευκορωσία (Master of Business Administration).
Εμπειρία:
Ασχολείται με την παροχή συμβουλών πελατών νομικών συστημάτων, συστημάτων για ελεγκτικές λύσεις και αυτοματοποίηση διαδικασιών, εργάζεται στον καινοτόμο τομέα της πληροφορικής και start-up στη Γερμανία σε διεθνή εταιρεία.
Τα ενδιαφέροντα:
Προσωπική ανάπτυξη, πάθος για ανταλλαγή γνώσεων, δικτυωτής, opener world, life designer, αθλητικός ακτιβιστής.
«Σήμερα όλος ο κόσμος είναι διασυνδεδεμένος: άνθρωποι, χώρες, οικονομίες, τεχνολογίες κ.λπ. Ο προγραμματισμός είναι μια βασική ικανότητα του μέλλοντος. Σας βοηθά να κατανοήσετε καλύτερα τον κόσμο του μέλλοντος, να τον διαμορφώσετε ενεργά και να γίνετε ένα καινοτόμο μέλος μιας συναρπαστικής κοινωνίας χωρίς σύνορα. Η ικανότητα κωδικοποίησης ανοίγει ατελείωτες πόρτες στο μέλλον για τα παιδιά μας σε αυτόν τον κόσμο και τα κάνει πρεσβευτές των νέων τεχνολογιών».
9
ΚΥΚΛΟΣ ΜΑΘΗΜΑΤΩΝΚαθηγητής μαθήματος:
"Minecraft: Εισαγωγή στην Τεχνητή Νοημοσύνη", "Unity 3D", "Εμπρός προγραμματιστής: Ιστότοποι HTML/CSS/JavaScript", "Σχέδιο σε στυλ Anime", «Προγραμματισμός για τους μικρούς», «Προγραμματισμός Minecraft», «Σχεδιαστική σκέψη», «Bots σε Python», «Γραφιστική σχεδίαση Photoshop», "Βίντεο blogging"
Εκπαίδευση:
Πολυάριθμα μαθήματα για τη βελτίωση των δεξιοτήτων πληροφορικής σε διεθνείς εταιρείες (SAP, αυτοματοποίηση διαδικασιών, ηλεκτρονικό εμπόριο). FOM University of Stuttgart, Stuttgart, Germany (Master of Business Administration) Κρατικό Τεχνικό Πανεπιστήμιο Karaganda, Karaganda, Καζακστάν.
Εμπειρία:
Ιδρυτής ενός επιτυχημένου διαδικτυακού καταστήματος ηλεκτρικών ειδών στη Γερμανία, που ασχολείται με την παροχή συμβουλών πελατών σε τομέας αυτοματοποίησης διαδικασιών πωλήσεων, εργάζεται στον τομέα των πωλήσεων πληροφορικής στη Γερμανία στο διεθνές εταιρείες.
Τα ενδιαφέροντα:
Ταξίδια, ψάρεμα, αθλήματα, σκάκι.
Ο Ι. Γκαίτε είπε: «Μπορείς να μάθεις μόνο αυτό που αγαπάς»
1η ενότητα
Η πρώτη μέρα
Βασικά στοιχεία διάταξης ιστοσελίδας
- Δομή εγγράφου HTML
- Πρώτη ιστοσελίδα που χρησιμοποιεί γλώσσα σήμανσης HTML
- Παρουσιάζοντας το πρόγραμμα επεξεργασίας Sublime Text 3
Αποτέλεσμα του μαθήματος: δημιούργησε την πρώτη ιστοσελίδα, έμαθε βασικούς τρόπους σήμανσης κειμένου χρησιμοποιώντας ετικέτες.
Πρακτική εργασία: δημιουργήστε μια ιστοσελίδα χρησιμοποιώντας τη γλώσσα σήμανσης Html.
Δεύτερη μέρα
Χαρακτηριστικά στοιχείου Div και ετικέτας
- Συνεργασία με τον επιθεωρητή ιστού
- Δημιουργία πολυσέλιδου ιστότοπου
- Εκμάθηση νέων στοιχείων και χαρακτηριστικών ετικέτας
Αποτέλεσμα του μαθήματος: έμαθε πώς να προσθέτει συνδέσμους και εικόνες στον ιστότοπο, πρόσθεσε χαρακτηριστικά σε ετικέτες
Πρακτική εργασία: δημιουργήστε τον πρώτο σας πολυσέλιδο ιστότοπο.
Τρίτη μέρα
Cascading Style Sheets
- Εισαγωγή στα Cascading Style Sheets
- Στυλ στοιχείων HTML
- Χρήση επιλογέων
- Εγκατάσταση και εργασία με το πρόσθετο Emmet και προσθήκη κειμένου Lorem
Αποτέλεσμα του μαθήματος: έμαθε πώς να αλλάζει το χρώμα φόντου και το χρώμα κειμένου των στοιχείων HTML, να χρησιμοποιεί δύο τύπους επιλογέων, να δημιουργεί κείμενο Lorem χρησιμοποιώντας το πρόσθετο Emmet
Πρακτική εργασία: αλλάξτε την εμφάνιση της σελίδας χρησιμοποιώντας ιδιότητες CSS.
Ημέρα τέταρτη
Δημιουργία ιστοσελίδας Jaguar
- Δημιουργία πολυσέλιδου ιστότοπου Jaguar
- Δημιουργία δομής αρχείου έργου
- Εργασία με επένδυση και επένδυση στοιχείων
Αποτέλεσμα του μαθήματος: έμαθε να εργάζεται με ένα εξωτερικό αρχείο CSS, εξοικειώθηκε με την εξωτερική και εσωτερική συμπλήρωση στοιχείων.
Πρακτική εργασία: δημιουργήστε έναν πολυσέλιδο ιστότοπο της Jaguar.
2η ενότητα
Η πρώτη μέρα
Μοντέλο κουτιού σε CSS
- Box Model σε CSS
- Δημιουργία μπλοκ ασυνήθιστου σχήματος
- Εργασία με την ιδιότητα μεγέθους κουτιού για να αλλάξετε τον τρόπο υπολογισμού του πλάτους και του ύψους ενός στοιχείου
Αποτέλεσμα του μαθήματος: έμαθε πώς να δημιουργεί μπλοκ ασυνήθιστων σχημάτων, να χρησιμοποιεί την ιδιότητα box-sizing με την τιμή border-box για να υπολογίζει σωστά το πλάτος ενός στοιχείου και να ορίζει τα μεγέθη των στοιχείων σε διαφορετικές μονάδες μέτρησης
Πρακτική εργασία: δημιουργήστε κάρτες με κείμενο χρησιμοποιώντας διαφορετικές τιμές ιδιοτήτων μεγέθους κουτιού.
Δεύτερη μέρα
Προηγμένη επεξεργασία κειμένου σε CSS
- Διαφορετικοί τύποι γραμματοσειρών
- Επιλογή γραμματοσειρών για ιστότοπους
- Δημιουργία νέων στυλ που σας επιτρέπουν να προσαρμόσετε την εμφάνιση κειμένου σε προχωρημένο επίπεδο
Αποτέλεσμα του μαθήματος: δημιούργησε μια σελίδα χρησιμοποιώντας διαφορετικούς τύπους γραμματοσειρών, βελτίωσε την εμφάνιση και την αναγνωσιμότητα του κειμένου χρησιμοποιώντας τις ιδιότητες που πέρασε.
Πρακτική εργασία: δημιουργήστε μια σελίδα χρησιμοποιώντας βασικούς τύπους γραμματοσειρών.
Τρίτη μέρα
Στοιχεία τοποθέτησης στο CSS
- Εργασία με την ιδιοκτησία float
- Τύποι τοποθέτησης στοιχείων στη σελίδα
- ιδιότητα θέσης
Αποτέλεσμα του μαθήματος: έμαθε να εργάζεται με τις ιδιότητες float και position, να δημιουργεί αναδίπλωση κειμένου γύρω από εικόνες
Πρακτική εργασία: δημιουργήστε μια ιστοσελίδα και τοποθετήστε στοιχεία σε αυτήν χρησιμοποιώντας ιδιότητες float και position
Ημέρα τέταρτη
Δημιουργία σελίδας ιστολογίου
- Δημιουργία σελίδας ιστολογίου
- Ιδιότητες τοποθέτησης στοιχείων για την τοποθέτηση μενού και αναρτήσεων στη σελίδα
- Σημασιολογικές ετικέτες
Αποτέλεσμα του μαθήματος: έμαθε να εργάζεται με σημασιολογικές ετικέτες χρησιμοποιώντας ιδιότητες τοποθέτησης, τοποθέτησε τα κύρια στοιχεία του ιστολογίου στη σελίδα
Πρακτική εργασία: δημιουργήστε μια σελίδα ιστολογίου χρησιμοποιώντας σημασιολογικές ετικέτες
3η ενότητα
Η πρώτη μέρα
Ψευτο-τάξεις και εργασία με εικόνες σε CSS
- Χρήση εικόνων φόντου σε μια ιστοσελίδα
- Ψευτο-τάξεις αιωρούνται, ενεργές και επισκέψιμες
- Αλλαγή του στυλ ενός στοιχείου κατά την ενεργοποίηση μιας ψευδο-κλάσης σε ένα άλλο στοιχείο
- Δημιουργία μοτίβων φόντου
Αποτέλεσμα του μαθήματος: έμαθε πώς να εργάζεται με εικόνες φόντου, μελέτησε ιδιότητες για εργασία με εικόνες
Πρακτική εργασία: προσθέστε εξωτερικές αλλαγές σε στοιχεία όταν τοποθετείτε το δείκτη του ποντικιού πάνω τους με τον κέρσορα του ποντικιού.
Δεύτερη μέρα
FlexBox σε CSS
- Εργασία με CSS Flexible Box Layout
- Ιδιότητες για την ευθυγράμμιση στοιχείων σε ένα δοχείο Flex
- Εκπαιδευτικό παιχνίδι Flex-Frog
Αποτέλεσμα του μαθήματος: έμαθε να εργάζεται με την τεχνολογία Flex για τη δημιουργία ευέλικτων διατάξεων, ολοκλήρωσε το παιχνίδι flex-frog για να ενοποιήσει το υλικό που καλύπτεται
Πρακτική εργασία: ολοκληρώστε το παιχνίδι flex-frog για να εμπεδώσετε το υλικό που καλύπτεται
Τρίτη μέρα
Ανάπτυξη της ιστοσελίδας του καταστήματος Sneakers. Μέρος 1
- Δημιουργία δομής ιστότοπου με μοντέλα
- Σύνδεση σε τοποθεσία γραμματοσειρών
- Ιδιότητες της κεφαλίδας του ιστότοπου και των θυγατρικών στοιχείων του
- Λειτουργίες για τη δημιουργία φόντου σελίδας με κλίση
Αποτέλεσμα του μαθήματος: δημιούργησε μια δομή ιστότοπου με μοντέλα, συνέδεσε τη γραμματοσειρά με τον ιστότοπο.
Πρακτική εργασία: επιλέξτε και κατεβάστε εικόνες με μοντέλα, προσθέστε μια σκιά στην κεφαλίδα του ιστότοπου
Ημέρα τέταρτη
Ανάπτυξη της ιστοσελίδας του καταστήματος Sneakers. Μέρος 2ο
- Ολοκλήρωση εργασιών στον ιστότοπο
- Δημιουργία μπλοκ με κάρτες
- Αλλαγή της συμπεριφοράς των στοιχείων όταν αιωρούνται πάνω τους
- Τεχνολογία FlexBox για τοποθέτηση καρτών
Αποτέλεσμα του μαθήματος: δημιούργησε έναν ιστότοπο με πρότυπες κάρτες
Πρακτική εργασία: προσθέστε μια συλλογή χρησιμοποιώντας την τεχνολογία FlexBo
4η ενότητα
Η πρώτη μέρα
Διάταξη πλέγματος σε CSS
- Εισαγωγή στο σύστημα Grid
- Δημιουργία σελίδας με χρήση πλέγματος
- Ιδιότητες για προηγμένη εργασία με κελιά πλέγματος
Αποτέλεσμα του μαθήματος: μελέτησε το σύστημα δισδιάστατης διάταξης (CSS Grid Layout), έμαθε πώς να τοποθετεί τα κελιά Grid στη σελίδα.
Πρακτική εργασία: ολοκληρώστε το παιχνίδι του κήπου με πλέγμα για να εμπεδώσετε το υλικό που καλύπτεται.
Δεύτερη μέρα
Ψευδοστοιχεία μετά και πριν
- Ψευδοστοιχεία πριν και μετά
- Συνδυασμός εικόνας με κείμενο μέσα
- Στοιχεία με ψευδοστοιχεία πρώτου γράμματος και πρώτης γραμμής
Αποτέλεσμα του μαθήματος: έμαθε να εργάζεται με ψευδοστοιχεία πριν, μετά, πρώτο γράμμα και πρώτη γραμμή, συνδυάστε ψευδοστοιχεία με διαφορετικές ιδιότητες για να δημιουργήσετε όμορφα μπλοκ
Πρακτική εργασία: δημιουργήστε ένα στοιχείο χρησιμοποιώντας το after και το befor ψευδοστοιχεία.
Τρίτη μέρα
Κινούμενα σχέδια και μετασχηματισμοί στο CSS
- Μετασχηματισμοί CSS
- Εφαρμογή μετασχηματισμών σε στοιχεία HTML
- Δημιουργία κινούμενων μπλοκ σε CSS
- Εφαρμογή συναρτήσεων χρονισμού σε βασικά καρέ
Αποτέλεσμα του μαθήματος: έμαθε πώς να εργάζεται με μετασχηματισμούς σε CSS, να δημιουργεί ατελείωτα κινούμενα σχέδια σε CSS.
Πρακτική εργασία: δημιουργήστε ένα κουμπί, προσθέστε μετασχηματισμούς σε αυτό όταν τοποθετείτε το δείκτη του ποντικιού.
Ημέρα τέταρτη
Εξασκηθείτε στη δημιουργία κινούμενων εικόνων σε CSS
- Εφαρμογή κινουμένων σχεδίων και μετασχηματισμού στην πράξη
- Δημιουργία ενός κινούμενου τροχιακού συστήματος πλανητών στο ηλιακό μας σύστημα
Αποτέλεσμα του μαθήματος: δημιούργησε μια σελίδα που δείχνει την κίνηση των πλανητών στο ηλιακό σύστημα και ένα κινούμενο φόντο.
Πρακτική εργασία: δημιουργήσουμε ένα κινούμενο τροχιακό σύστημα πλανητών στο ηλιακό μας σύστημα.
5η ενότητα
Η πρώτη μέρα
Δημιουργία ηλεκτρονικού καταστήματος
- Τι είναι το ηλεκτρονικό κατάστημα;
- Δημιουργία Δομής Έργου
- Ρύθμιση έργου
Αποτέλεσμα του μαθήματος: άρχισε να δημιουργεί ένα ηλεκτρονικό κατάστημα.
Πρακτική εργασία: επιλέξτε τα εικονίδια που θα χρησιμοποιηθούν στον ιστότοπο.
Δεύτερη μέρα
Δημιουργία κεφαλίδας ηλεκτρονικού καταστήματος
- Μεταβλητές στο CSS και τρόπος χρήσης τους
- Σύνδεση γραμματοσειρών σε εξωτερικό φύλλο στυλ χρησιμοποιώντας τη λειτουργία url
- Επικεφαλίδα ηλεκτρονικού καταστήματος, το στυλ του
- Προσθήκη πρόσθετης λειτουργικότητας μενού χρησιμοποιώντας τη γλώσσα προγραμματισμού JavaScript
Αποτέλεσμα του μαθήματος: διαμόρφωσε καθολικές μεταβλητές στο έργο, δημιούργησε μια πολυλειτουργική κεφαλίδα με μενού, συνέδεσε ένα αρχείο Javascript για να προσθέσει επιπλέον λειτουργίες μενού.
Πρακτική εργασία: προσθέστε αλλαγή του φόντου της κεφαλίδας του ιστότοπου κατά την κύλιση της σελίδας
Τρίτη μέρα
Δημιουργία της πρώτης οθόνης με το κύριο προϊόν
- Η δομή HTML του μπλοκ παρουσίασης
- Σύστημα πλέγματος για σωστή απεικόνιση στοιχείων
- Τιμές ιδιοτήτων CSS χρησιμοποιώντας μεταβλητές
- Στοιχεία styling
Αποτέλεσμα του μαθήματος: δημιούργησε το μέρος παρουσίασης του ηλεκτρονικού καταστήματος
Πρακτική εργασία: δημιουργήστε ένα μέρος παρουσίασης ενός ηλεκτρονικού καταστήματος
Ημέρα τέταρτη
Δημιουργία μπλοκ με δημοφιλή προϊόντα
- Σήμανση HTML για ένα μπλοκ με προϊόντα
- Styling για κάρτες προϊόντων
- Πλέγμα για την τοποθέτηση της κάρτας
- Στυλοποίηση μπλοκ με την ιστορία της εταιρείας
Αποτέλεσμα του μαθήματος: δημιούργησε ένα μπλοκ με δημοφιλή προϊόντα και ιστορικό εταιρείας
Πρακτική εργασία: προσθέστε εξωτερική και εσωτερική επένδυση σε στοιχεία στο μπλοκ με το ιστορικό της εταιρείας
6η ενότητα
Η πρώτη μέρα
Δημιουργία ρυθμιστικού με κριτικές πελατών.
- Μπλοκ αναθεώρησης
- Τρόποι για τη δημιουργία κοντέινερ με δυνατότητα κύλισης στο CSS
- ιδιότητες scroll-behavior και scroll-snap-type
- Σημεία αγκύρωσης του ολισθητήρα
Αποτέλεσμα του μαθήματος: δημιούργησε ένα ρυθμιστικό με κριτικές πελατών χρησιμοποιώντας HTML και CSS.
Πρακτική εργασία: προσθέστε σημεία αγκύρωσης στις κύριες ενότητες του ιστότοπου και δημιουργήστε μια αυτόματη κύλιση σε αυτά τα μπλοκ όταν κάνετε κλικ στο κουμπί.
Δεύτερη μέρα
Εργασία με φόρμες και περιεχόμενο βίντεο.
- Ετικέτες HTML5 για την εισαγωγή περιεχομένου βίντεο σε έναν ιστότοπο
- Δημιουργία στυλ ενότητας με βίντεο κλιπ πλήρους οθόνης
- Ετικέτα πεδίου εισαγωγής -, και τα χαρακτηριστικά της
- Ετικέτα για τη δημιουργία φορμών σε Html
- Στυλ στοιχείου εισαγωγής κειμένου
Αποτέλεσμα του μαθήματος: δημιούργησε μια ενότητα με ένα βίντεο και ένα μπλοκ με μια φόρμα σχολίων
Πρακτική εργασία: δημιουργήστε μια φόρμα ανατροφοδότησης, στυλ στα στοιχεία
Τρίτη μέρα
Δημιουργία ξεχωριστής σελίδας γκαλερί
- Προσαρμοσμένο πλέγμα πλέγματος για μια σελίδα γκαλερί
- Προσθήκη μπλοκ με εικόνες στο πλέγμα
- Ψευδοστοιχεία και διάφορα κινούμενα σχέδια μπλοκ με εικόνες
- Φίλτρα CSS για τη βελτίωση της οπτικής σχεδίασης της γκαλερί
Αποτέλεσμα του μαθήματος: δημιούργησε μια ξεχωριστή σελίδα με μια συλλογή φωτογραφιών
Πρακτική εργασία: χρησιμοποιώντας διαφορετικούς τύπους τοποθέτησης για να δημιουργήσετε ένα ημιδιαφανές ασυνήθιστο φόντο.
Ημέρα τέταρτη
Προσαρμογή περιεχομένου για όλους τους τύπους συσκευών.
- Τρόποι προσαρμογής περιεχομένου για κινητές συσκευές
- Ερωτήματα μέσων για την εφαρμογή διαφορετικών ιδιοτήτων στο ίδιο στοιχείο σε συσκευές με διαφορετικά πλάτη
- Κανόνες CSS για τρεις τύπους συσκευών
Αποτέλεσμα του μαθήματος: Προσαρμόσαμε τον ιστότοπο για tablet και τηλέφωνα.
Πρακτική εργασία: χρησιμοποιώντας ερωτήματα πολυμέσων, αλλάξτε τις τιμές ιδιοτήτων των στοιχείων HTML για να προσαρμόσετε το περιεχόμενο σε όλους τους τύπους συσκευών
7η ενότητα
Η πρώτη μέρα
Εισαγωγή στο πλαίσιο Tailwind SS.
- Τι είναι τα πλαίσια και πώς επιταχύνουν τη διαδικασία ανάπτυξης του έργου;
- Εγκατάσταση του πλαισίου και των προσθηκών Tailwind CSS
- Tailwind CSS Framework Concepts
- Εργασία με τυπογραφία και χρώματα στο Tailwind CSS
Αποτέλεσμα του μαθήματος: δημιούργησε την πρώτη ιστοσελίδα χρησιμοποιώντας το πλαίσιο Tailwind CSS.
Πρακτική εργασία: δημιουργήστε ένα μπλοκ με κείμενο, στοιχεία στυλ χρησιμοποιώντας κλάσεις tailwind.
Δεύτερη μέρα
Τάξεις Tailwind για τη δημιουργία μιας αποκριτικής ιστοσελίδας
- Εργασία με τάξεις Tailwind για τη δημιουργία ενός ανταποκρινόμενου ιστότοπου
- Μαθήματα για την προσθήκη εφέ αιώρησης και εστίασης
- Μαθήματα για την προσθήκη σκιών σε στοιχεία
- Μαθήματα για εργασία με μεγέθη στοιχείων
- Μαθήματα για εργασία με εξωτερική και εσωτερική επένδυση στοιχείων
Αποτέλεσμα του μαθήματος: Δημιουργήσαμε μια προσαρμοστική σελίδα για όλους τους τύπους συσκευών.
Πρακτική εργασία: δημιουργήστε κουμπιά, προσθέστε εφέ όταν κάνετε κλικ σε αυτά χρησιμοποιώντας τάξεις Tailwind
Τρίτη μέρα
Tailwind Flex Layout.
- Εργασία με Tailwind Flex Layout
- Μαθήματα για την ευθυγράμμιση θυγατρικών στοιχείων σε ένα δοχείο Flex
- Δημιουργία κάρτας με την τιμή ενός προϊόντος
- Δημιουργία δεικτών προόδου
- Εργασία με Pseudo Elements στο Tailwind CSS
Αποτέλεσμα του μαθήματος: δημιούργησε ένα δοχείο Flex με κάρτες προϊόντων
Πρακτική εργασία: δημιουργήστε μια κάρτα με περιγραφή του προϊόντος.
Ημέρα τέταρτη
Σύστημα πλέγματος στο Tailwind CSS.
- Ιδιότητες ανοίγματος σειρών και διαστήματος
- Ιδιότητες για αυτόματη πλήρωση κενού χώρου σε Πλέγμα με στοιχεία
- Σελίδα ομάδας έργου
Αποτέλεσμα του μαθήματος: δημιούργησε μια προσαρμοστική σελίδα ομάδας έργου χρησιμοποιώντας το σύστημα Tailwind Grid.
Πρακτική εργασία: προσθέστε εφέ σε στοιχεία πλέγματος όταν τοποθετείτε τον δείκτη του ποντικιού πάνω τους
8η ενότητα
Η πρώτη μέρα
Ρύθμιση έργου
- Ρύθμιση του έργου τοποθεσίας εφαρμογής «Διαχείριση».
- Δημιουργία μιας αποκριτικής κεφαλίδας ιστότοπου
- Δημιουργία μενού χάμπουργκερ με χρήση JavaScript
- Δημιουργία ενότητας παρουσίασης με ένα προϊόν
Αποτέλεσμα του μαθήματος: δημιούργησε την πρώτη οθόνη του ιστότοπου της εφαρμογής «Διαχείριση».
Πρακτική εργασία: προσθέστε μια εικόνα φόντου στην πρώτη οθόνη.
Δεύτερη μέρα
Δημιουργία ενότητας με περιγραφή της εφαρμογής
- Ενότητα με περιγραφή της εφαρμογής και των πλεονεκτημάτων της
- Προσαρμόστε το δημιουργημένο μπλοκ για όλους τους τύπους συσκευών
- Ενότητα με λειτουργία εφαρμογής
- Εφαρμόστε φίλτρα Tailwind σε μια εικόνα
Αποτέλεσμα του μαθήματος: δημιούργησε δύο ενότητες του ιστότοπου "Διαχείριση"
Πρακτική εργασία: δημιουργήστε μια πρόσθετη ενότητα με το ιστορικό της δημιουργίας της εφαρμογής
Τρίτη μέρα
Δημιουργία ενότητας για την ομάδα έργου
- Ενότητα για την ομάδα
- Ρυθμιστικό χρησιμοποιώντας Tailwind CSS και Javascript
- Κάρτες εργαζομένων
Αποτέλεσμα του μαθήματος: δημιούργησε μια ενότητα για την ομάδα του έργου
Πρακτική εργασία: δημιουργήστε μια ενότητα με ένα κουμπί CTA
Ημέρα τέταρτη
Δημιουργία ενότητας με τιμές
- Δημιουργήστε μια ενότητα με τιμές
- Δημιουργήστε ένα αποκριτικό υποσέλιδο ιστότοπου
- Ολοκληρώστε το έργο
Αποτέλεσμα του μαθήματος: ολοκλήρωσε τις εργασίες για το έργο, δημιούργησε τον ιστότοπο για την εφαρμογή «Διαχείριση».
Πρακτική εργασία: ολοκληρώστε το έργο, βάλτε τον ιστότοπο στο Διαδίκτυο
9η ενότητα
Η πρώτη μέρα
Ξεκινήστε να εργάζεστε στο δικό σας έργο.
- Επιλέξτε ένα θέμα έργου
- Ξεκινήστε να αναπτύσσετε τον δικό σας ιστότοπο
Αποτέλεσμα του μαθήματος: έχει επιλεγεί ένα θέμα και έχει ξεκινήσει η εργασία για το έργο
Πρακτική εργασία: Εργασία έργου
Δεύτερη μέρα
Συνέχιση των εργασιών στο έργο
- Συνεχίστε να εργάζεστε στο έργο
- Διορθώστε τα σφάλματα στο έργο
Αποτέλεσμα του μαθήματος: δημιουργία ιστοσελίδων
Πρακτική εργασία: Εργασία έργου
Τρίτη μέρα
Προετοιμασία παρουσίασης έργου.
- Περιγράψτε το έργο σας
- Δημιουργήστε ένα πρότυπο παρουσίασης για να υπερασπιστείτε το έργο σας
- Ολοκληρώστε το έργο
- Βάλτε τον ιστότοπο στο Διαδίκτυο
Αποτέλεσμα του μαθήματος: ετοίμασε μια παρουσίαση και έκανε πρόβα της ομιλίας.
Πρακτική εργασία: ετοιμάστε μια παρουσίαση του έργου, βάλτε την ιστοσελίδα στο Διαδίκτυο.
Ημέρα τέταρτη
Προστασία έργου.
- Ολοκληρώστε την παρουσίαση του έργου
- Υπερασπιστείτε το έργο σας μπροστά σε κοινό
Αποτέλεσμα του μαθήματος: Ολοκληρώσαμε την εργασία για το πρόγραμμα του μαθήματος και το παρουσιάσαμε στους γονείς.
Πρακτική εργασία: οριστικοποίηση του έργου, προετοιμασία και διεξαγωγή παρουσίασης.