Eτοιμάζονταςτην πρώτη σας HTML σελίδα! μέρος 1 - το βασικό layout

Σε αυτό το πρώτο μέρος γίνεται μία χρήσιμη εισαγωγή και σύντομη παρουσίαση της βασικής HTML/CSS δομής που θα εμπλουτίζεται σε κάθε βήμα με ενδεικτικά περιεχόμενα & CSS - για εύκολη κατανόηση & πλοήγηση στον κώδικα.
Το συγκεκριμένο απλό και "ευέλικτο" δείγμα layout βασισμένου σε flexbox, βρίσκεται με κάποιες παραλλαγές του στο codepen collection που θα βρείτε εδώ
αν και η παρότρυνση στα πλαίσια του workshop ήταν να χρησιμοποιησει ο καθένας το δικό του, όπως θα προέκυπτε μετά την γνωριμία & εξάσκηση στη χρήση Flexbox (δείτε το παρακάτω playlist link).

Η σειρά συτή από video-παρουσιάσεις έχει σκοπό να λειτουργήσει ως βοήθημα στη δημιουργία μίας πρώτης ιστοσελίδας, συνδυάζοντας βασικές γνώσεις HTML/CSS (*) με την παρουσίαση κάποιων χρήσιμων online εργαλείων και πηγών για την ένταξη χρήσιμων στοιχείων σε αυτή, αλλά και τη σταδιακή γνωριμία με νέες τεχνικές & δυνατότητες, απαραίτητες σε κάθε τέτοιο project.
To βάρος εδώ δεν δίνεται στον "εικαστικό" σχεδιασμό (design) όσο στην εφαρμογή & κατανόηση του κώδικα και προϋποθέτει κάποιες βασικές γνώσεις(*):
1. Γνώση & κάποια εξάσκηση στη χρήση βασικών HTML Tags.
2. Βασικές γνώσεις χρήσης CSS (selectors, classes, rules).
3. Αρχική γνωριμία & εξάσκηση στη χρήση Flexbox που μπορείτε να βρείτε εδώ:

✎ Παρότι ο code editor που χρησιμοποιώ εδώ είναι ο Brackets, μια που είχε χρήσιμα ιδίως για αρχάριους βοηθήματα, μπορείτε σαφώς να χρησιμοποιήσετε όποιον editor είστε εξοικειωμένοι - απλά αγνοήστε αναφορές σε συγκεκριμένα Brackets extentions που μπορεί να περιέχονται - ο κώδικας είναι ο ίδιος παντού έτσι κι αλλιώς (περισσότερα για code editors παρακάτω).

▼ Αναλυτικοί χρόνοι περιεχομένων:

0:00 - Εισαγωγή και σύντομη παρουσίαση της βασικής HTML/CSS δομής

7:05 - Πολύ χρήσιμες δυνατότητες "στόχευσης" με css selectors που δεν πιθανά δεν έχετε χρησιμοποιήσει συχνα μέχρι σήμερα και σε συγκεκριμένες περιπτώσεις μπορούν είναι απαραίτητες.
Πέρα από τις αναφορές σε shortcuts & extensions για το Brackets code editor που χρησιμοποιώ εδώ, αντίστοιχες δυνατότητες & εργαλεία (ή και τα ίδια, όπως το Emmet που αναφέρεται) υπάρχουν σε όποιον editor επιλέξετε, απλά θα χρειαστεί να τις εντοπίσετε.

9:40 - Σωστή προετοιμασία για site menus

10:33 - Αναφορά στα codepen collections (αυτό και επόμενα, για media queries κλπ) και πως μπορείτε να τα αξιοποιήσετε.
Το συγκεκριμένο απλό και "ευέλικτο" δείγμα flexbox layout βρίσκεται, με παραλλαγές του, στο codepen collection:

✽ Όσοι θέλετε να κατεβάσετε τον Brackets, παρότι χάνει σε δημοτικότητα από τη στιγμή που η Adobe εγκατέλειψε την υποστήριξη του, μπορείτε να τον βρείτε εδώ:
Υποστηρίζεται ακόμα από μέρος της κοινότητας ανοιχτού λογισμικού.
Εναλλακτικά μπορείτε να στραφείτε στο VSCode:
που επί χρόνια επίσης χρησιμοποιώ και πιθανά θα περιλαμβάνεται πλέον όλο συχνότερα στα νεώτερα videos, ή όποιον άλλο προτιμάτε.

➽ Εγγραφείτε στο κανάλι για ενημερώσεις & updates αλλά και στο newsletter του κεντρικού site:
όπου μπορείτε να επιλέξετε ή αιτηθείτε ενότητες ή online σεμινάρια που σας ενδιαφέρουν.

[videotutorgr]

✔ Έχουν ενταχθεί κεφάλαια/chapters για πιο εύκολο εντοπισμό σημείων ενδιαφέροντος σε όλα τα video, καθώς και αναλυτικά περιεχόμενα με τα όποια χρήσιμα links και αρχεία περιλαμβάνει η κάθε παρουσίαση στις περιγραφές τους.