Το Front-End Web Development είναι η δημιουργία ιστοσελίδων και interfaces web εφαρμογών. Πιο συγκεκριμένα, περιλαμβάνει τα στοιχεία με τα οποία οι χρήστες έρχονται σε επαφή και μπορούν να αλληλεπιδράσουν με το διαδίκτυο. Οι βασικές γλώσσες που χρησιμοποιούνται στο Front-End είναι οι HTML, CSS και JavaScript. Σκοπός του εργαστηρίου είναι να δημιουργήσουμε μία λειτουργική ιστοσελίδα χρησιμοποιώντας αυτές τις τεχνολογίες. Αρχικά, θα αναπτύξουμε την HTML σελίδα μας, ορίζοντας τα απαραίτητα HTML tags, elements και attributes και θα την μορφοποιήσουμε, χρησιμοποιώντας CSS. Στη συνέχεια, θα επικεντρωθούμε στο να συντάξουμε τον απαραίτητο κώδικα σε JavaScript, χρησιμοποιώντας μεταβλητές, συνθήκες και συναρτήσεις που θα τις χρησιμοποιήσουμε ως event handlers, τις οποίες θα συνδέσουμε με κατάλληλο τρόπο σε elements του HTML αρχείου μας, έτσι ώστε να κάνουμε τη σελίδα μας διαδραστική. Τέλος θα δοκιμάσουμε την ορθή λειτουργία της σελίδας μας και θα προχωρήσουμε στις απαραίτητες διορθώσεις, όπου χρειάζεται. Για την συμμετοχή δεν απαιτείται προηγούμενη εμπειρία προγραμματισμού.

Πρόσθετο υλικό:

HTML tutorial. <https://www.w3schools.com/html/default.asp>

Introduction To JavaScript. <https://www.codecademy.com/learn/introduction-to-javascript>

JavaScript tutorial. <https://www.w3schools.com/js/>

CodePen is a Nearly Perfect Place for Kids to Learn to Code. <https://medium.com/young-coder/codepen-is-a-nearly-perfect-place-for-kids-to-learn-to-code-ed0a855d6fdd>

Introduction to events. <https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events>

Events: Your First Lesson in JavaScript. <https://medium.com/young-coder/events-your-first-lesson-in-javascript-3899b46bd8a>

Playing with JavaScript Events. <https://medium.com/young-coder/playing-with-javascript-events-be12f922736f>

CSS tutorial. <https://www.w3schools.com/css/default.asp>

utl