Web Foundations

1. HTML — η δομή

Το HTML περιγράφει τη δομή και τη σημασία του περιεχομένου. Χρησιμοποίησε headings για τίτλους, links για πλοήγηση, buttons για ενέργειες και semantic elements όπου ταιριάζουν.

<main>
  <h1>Το πρώτο μου AI project</h1>
  <p>Μια σύντομη περιγραφή.</p>
  <a href="../about/">Σχετικά με το project</a>
</main>

2. CSS — η παρουσίαση

Το CSS ελέγχει layout, αποστάσεις, typography και responsive συμπεριφορά. Στόχος δεν είναι μόνο να φαίνεται ωραίο αλλά να παραμένει usable σε διαφορετικές οθόνες.

3. JavaScript — η συμπεριφορά

Η JavaScript μπορεί να αντιδρά σε ενέργειες χρήστη, να αλλάζει το DOM και να συνδέεται με APIs. Κράτα τη λογική απλή και χώρισε δεδομένα, UI και λειτουργίες όσο μεγαλώνει το project.

const button = document.querySelector('#hello');
button.addEventListener('click', () => {
  document.querySelector('#message').textContent = 'Γεια σου!';
});

4. Accessibility από την αρχή

• Χρησιμοποίησε σωστή ιεραρχία headings.
• Τα interactive στοιχεία πρέπει να μπορούν να χρησιμοποιηθούν και με πληκτρολόγιο.
• Μην βασίζεσαι μόνο στο χρώμα για να μεταφέρεις πληροφορία.
• Τα links και buttons πρέπει να έχουν κατανοητό σκοπό.

5. Debugging

Όταν κάτι δεν λειτουργεί, μην αλλάζεις τυχαία κώδικα. Αναπαρήγαγε το πρόβλημα, διάβασε το error, απομόνωσε το μικρότερο κομμάτι που αποτυγχάνει και κάνε μία αλλαγή κάθε φορά.