×
Κατασκευή Ιστοσελίδων WordPress Joomla wordpress vs html/css
×
Κατασκευή Eshop Woocommerce Opencart Magento Shopify
×
Προώθηση Ιστοσελίδων Digital Marketing Μαθήματα Facebook Σεμινάρια Linkedin Μαθήματα Instagram Σεμινάρια Twitter Μαθήματα Pinterest
×
Κατασκευή web εφαρμογών Σεμινάρια JAVA Μαθήματα PHP Σεμινάρια MySQL Προγραμματισμός Παιχνιδιών
×
Μαθήματα Excel Σεμινάρια VBA Σεμινάρια Photoshop Μαθήματα PowerPoint Σεμινάρια Word Μαθήματα Προγραμματισμού Πληροφορική στο δημοτικό

balatsoukas logo balatsoukas.com

Ασκήσεις html css και JavaScript για τη δημιουργία front-end

Ασκήσεις κατασκευής ιστοσελίδων με html, css και JavaScript. Σεμινάρια html για τη δημιουργία front-end web εφαρμογών. Μαθήματα δημιουργίας ιστοσελίδων.

Εκπαιδευτής Ενηλίκων Νικόλαος Μπαλατσούκας Τηλ. (+30) 6977676785

Δημιουργήσαμε τις ασκήσεις front-end με σκοπό να βοηθήσουμε στην εξάσκηση όσων ολοκληρώνουν τα μαθήματα html και css. Κάθε εκπαιδευόμενος που παρακολουθεί μαθήματα html είναι αναγκαίο να κάνει ασκήσεις θα τον βοηθήσουν να κατανοήσει καλύτερα τη θεωρία και να μπορέσεις να χρησιμοποιήσεις στην πράξη αυτά που έμαθε. Σε γενικές γραμμές η γλώσσα html είναι πολύ εύκολη και μπορεί κάποιος να ολοκληρώσει την εκμάθηση μέσα σε πολύ λίγα μαθήματα. Τα σεμινάρια html διαρκούν πολύ λίγες ώρες. Είναι όμως απαραίτητο μετά τα σεμινάρια html να ακολουθήσει εξάσκηση. Το ίδιο ισχύει για τη γλώσσα css. Είναι αρκετά εύκολο να παρακολουθήσετε σεμινάρια css τα οποία διαρκώς πολύ λίγες ώρες και να μάθετε πολύ καλά τους κανόνες σύνταξης. Αυτό όμως δεν φτάνει για να προχωρήσετε στην κατασκευή ιστοσελίδων. Εάν δεν εφαρμόζεται στην πράξη αυτά που μάθατε τότε είναι σαν να μην μάθατε τίποτα. Ακόμα και μία απλή κατασκευή ιστοσελίδας απαιτεί να γνωρίζετε πολύ καλά το HTML και το css. Αφού ολοκληρώσετε τις ασκήσεις που ακολουθούν τότε θα μπορείτε να είστε σίγουροι ότι γνωρίζετε πως γίνεται η κατασκευή ιστοσελίδων με αυτές τις τεχνολογίες.

Προδιαγραφές κατασκευής ιστοσελίδας

Σε καθεμία από τις ασκήσεις που ακολουθούν να φροντίσετε ώστε να ικανοποιούνται οι παρακάτω απαιτήσεις. Αποτελούν τα σημαντικότερα κριτήρια αξιολόγησης ιστοσελίδων που είναι σημαντικά τόσο γιατους επισκέπτες όσο και για τις μηχανές αναζήτησης:

  1. Να είναι φιλική προς smart phones (δηλαδή να είναι responsive).
  2. Να είναι προσβάσιμη από εμποδιζόμενα άτομα.
  3. Να είναι γρήγορη (σύμφωνα με τις μετρήσεις ταχύτητας google PageSpeed Insights).
  4. Ο κώδικας να είναι καλογραμμένος ώστε να ικανοποιεί τις απαιτήσεις του html validator.
  5. Κάθε σελίδα να έχει meta ετικέτες τίτλου, περιγραφής και λέξεων κλειδιών.
  6. Τα κείμενα να είναι γραμμένα στην Ελληνική γλώσσα.
  7. Οι εικόνες να έχουν εναλλακτική περιγραφή ώστε ο χρήστης να καταλαβαίνει το περιεχόμενο σε περίπτωση που δεν φορτώσουν.
  8. Όλες οι επιλογές μορφοποίησης να τοποθετηθούν σε ξεχωριστό αρχείο css.

ΠΡΩΤΗ ΑΣΚΗΣΗ html / css

Να δημιουργηθεί ιστοσελίδα με συνταγές μαγειρικής:

Η ιστοσελίδα περιλαμβάνει 5 σελίδες html, καθεμία εκ των οποίων παρουσιάζει μια συνταγή. Σε κάθε σελίδα:

  1. Πάνω πάνω να υπάρχει μια εικόνα.
  2. Κάτω από την εικόνα να τοποθετηθεί οριζόντιο menu επιλογών: εκεί θα μπουν link προς τις 5 σελίδες συνταγών
  3. Ακολουθεί το περιεχόμενο, σε δυο στήλες: αριστερά οι οδηγίες, και δεξιά οι εικόνες του φαγητού
  4. Στην αριστερή στήλη (οδηγίες) να τοποεθτηθούν τρεις ενότητες: ΥΛΙΚΑ, ΟΔΗΓΙΕΣ, ΠΡΟΤΑΣΕΙΣ
  5. Κάθε ενότητα της αριστερής στήλης έχει τίτλο ο οποίος ακολουθείται από το κατάλληλο περιεχόμενο (παράγραφο ή λίστα)
  6. Στη δεξιά στήλη να τοποθετηθούν απλά δυο εικόνες, η μια κάτω απο την άλλη
  7. Κάτω κάτω να τοποθετηθούν τρια link. Το καθενα οδηγεί προς τις ιστοσελίδες διάσημων σεφ. Κάθε σελίδα σεφ να ανοίγει σε νέο παράθυρο.

ΔΕΥΤΕΡΗ ΑΣΚΗΣΗ html / css

Να δημιουργηθεί ιστοσελίδα με πληροφορίες για ποδοσφαιρικές ομάδες:

Η ιστοσελίδα περιλαμβάνει 10 σελίδες html, καθεμία εκ των οποίων παρουσιάζει μια ομάδα. Σε κάθε σελίδα:

  1. Πάνω πάνω να υπάρχει μια φωτογραφία (είτε το γήπεδο, είτε η κύρια ενδεκάδα, είτε μια σημαντική στιγμή π.χ. απονομή τίτλου).
  2. Η υπόλοιπη σελίδα να έχει δυο στήλες: αριστερά το menu και δεξιά οι πληροφορίες για τη συγκεκριμένη ομάδα.
  3. Το menu είναι κατακόρυφο και περιλαμβάνει link προς τις σελίδες των 10 ομάδων.
  4. Στην κεντρική στήλη να τοποθετηθούν πέντε ενότητες: ΤΙΤΛΟΙ, ΙΣΤΟΡΙΑ, ΕΝΔΕΚΑΔΑ, ΦΩΤΟΓΡΑΦΙΕΣ, VIDEO.
  5. Κάθε ενότητα της αριστερής στήλης έχει τίτλο ο οποίος ακολουθείται από το κατάλληλο περιεχόμενο (παράγραφο ή λίστα ή εικόνα ή embed)
  6. Κάτω κάτω να τοποθετηθούν τρία link. Το καθένα οδηγεί προς τις ιστοσελίδες μεγάλων ομάδων (Ελληνικών ή ξένων). Κάθε σελίδα μεγάλης ομάδας να ανοίγει σε νέο παράθυρο.
  7. Η μορφοποίηση των χρωμάτων να τοποθετηθεί σε ξεχωριστό αρχείο css ώστε αλλάζοντας τις ρυθμίσεις να αλλάζει το χρώμα της κάθε σελίδας. Το αρχείο css να καθορίζει το χρώμα γραμματοσειράς και το χρώμα φόντου για όλα τα html elements.
    (π.χ. η σελίδα του Παναθηναϊκού να έχει αποχρώσεις του πράσινου και του άσπρου, η σελίδα του Ολυμπιακού να έχει αποχρώσεις του κόκκινου και του άσπρου, η σελίδα της ΑΕΚ να έχει αποχρώσεις του κίτρινου και του μαύρου)

ΤΡΙΤΗ ΑΣΚΗΣΗ html / css

Να δημιουργηθεί σελίδα εταιρείας κουφωματων αλουμινίου:

Να δημιργηθουν πέντε σελίδες με κατηγορίες προϊόντων (σήτες, κουφώματα αλουμινίου, κουφώματα pvc, συρόμενες πόρτες, εσωτερικές πόρτες)

  1. Η ιστοσελίδα να έχει header, footer και τρεις στήλες.
  2. Η μεσαία στήλη να έχει μεγαλύτερο πλάτος από τις δύο προηγούμενες.
  3. Στο header να τοποθετηθεί το λογότυπο της εταιρείας.
  4. Στο footer να τοποθετηθεί η διεύθυνση, το τηλέφωνο, τα κοινωνικά δίκτυα και ο χάρτης.
  5. Στην αριστερή στήλη να τοποθετηθούν οι κατηγορίες προϊόντων. Κάθε κατηγορία αποτελεί link προς σελίδα προϊόντων κατηγορίας.
  6. Στη μεσαία στήλη θα τοποθετηθούν τα προϊόντα της κατηγορίας. Κάθε κατηγορία να έχει πέντε προϊόντα. Κάθε προϊόν να έχει τίτλο, φωτογραφία και περιγραφή.
  7. Στη δεξιά στήλη να μπουν δύο εικόνες: πρώτα η κατακόρυφη φωτογραφία του καταστήματος και από κάτω μια φωτογραφία προσφοράς.

Άσκηση html, css και JavaScript για τη δημιουργία σελίδας με εικόνες

Να δημιουργηθεί σελίδα με image gallery.

  1. Αρχικά παρουσιάζονται 12 εικόνες σε μικρογραφία, σε 4 σειρες, κάθε σειρά έχει 3 εικόνες.
  2. Όταν κάνουμε κλικ σε μια εικόνα να ανοίγει σε μεγάλο μέγεθος χωρίς να αλλάξει σελίδα.
  3. Όταν η εικόνα παρουσιάζεται σε μεγάλο μέγεθος να υπάρχουν buttons πλοήγησης προς προηγούμενη και επόμενη εικόνα.
  4. Επίσης να υπάρχει button για το κλείσιμο μεγάλης εικόνας και επιστροφής στη σελίδα με τις 12 μικρογραφίες.
  5. Κάθε εικόνα να έχει περιγραφή η οποία να φαίνεται όταν η εικόνα μεγαλώσει.
  6. Κάθε εικόνα έχει εναλλακτική περιγραφή (alt)

Άσκηση html, css και JavaScript για τη δημιουργία σελίδας με ερωτήσεις και απαντήσεις

Να δημιουργηθεί σελίδα με ερωτήσεις και απαντήσεις. Τέτοιου είδους σελίδες χρησιμοποιούνται συνήθως στις ιστσελίδες για τη δημιουργία "Συχνές Ερωτήσεις".

  1. Να δημιουργηθεί σελίδα η οποία να έχει links το ένα κάτω από το άλλο, σε κατακόρυφη διάταξη. Το κάθε link αποτελεί μία ερώτηση.
  2. Όταν κάνουμε κλικ στο link τότε ακριβώς από κάτω να εμφανίζεται η απάντηση.
  3. Όταν κάνουμε κλικ σε άλλη ερώτηση τότε κλείνει η προηγούμενη απάντηση και ανοίγει η νέα, για την ερώτηση που μόλις κάναμε κλικ.
  4. Κάθε απάντηση περιλαμβάνει επίσης button κλεισίματος, το οποίο την κλείνει και επιστρέφουμε στην κατακόρυφη λίστα των ερωτήσεων.

Άσκηση html, css και JavaScript για τη δημιουργία σελίδας με κουίζ

Να δημιουργηθεί σελίδα με 10 ερωτήσεις πολλαπλής επιλογής.

  1. Κάτω από κάθε ερώτηση υπάρχουν δύο η περισσότερες απαντήσεις, μόνο μία εκ των οποίων είναι η σωστή.
  2. Η απάντηση μπορεί να περιλαμβάνει κείμενο, εικόνα η άλλο στοιχείο HTML.
  3. Ο επισκέπτης μπορεί να επιλέξει μόνο μια απάντηση σωστή απάντηση για κάθε ερώτηση.
  4. Κάτω από όλες τις ερωτήσεις υπάρχει το button "ΥΠΟΒΟΛΗ".

Όταν ο χρήστης πατήσει το button "ΥΠΟΒΟΛΗ" τότε:

  1. Να εμφανιζει το αποτέλεσμα, δηλαδή το score (π.χ. 7 από 10)
  2. Πρασινίζει τις σωστές απαντήσεις.
  3. Κοκκινίζει τις λανθασμένες απαντήσεις.
  4. Στις ερωτήσεις με λανθασμένες απαντήσεις (τις οποίες κοκκινίζει) να βάλει πολύ απαλό πράσινο στη σωστή απάντηση.

Αύξηση δυσκολίας:

  1. Να επιτρέπονται περισσότερες από μία σωστές απαντήσεις (Σε περίπτωση που υπάρχουν δύο η περισσότερες σωστές απαντήσεις τότε για να εκληφθεί ως σωστή απάντηση θα πρέπει ο χρήστης να επιλέξει όλες τις σωστές απαντήσεις. Για να μπορεί να το κάνει αυτό θα πρέπει να χρησιμοποιήσουμε τα κατάλληλα στοιχεία της γλώσσας html)
  2. Σε κάποιες ερωτήσεις να δίνεται η απάντηση μέσω text box
  3. Οι ερωτήσεις να έχουν συντελεστή βαρύτητας.Για παράδειγμα εάν απαντήσει σωστά στην πρώτη ερώτηση να παίρνει π.χ. 5 μονάδες, εάν απαντήσει σωστά στη δεύτερη ερώτηση να παίρνει π.χ. 4 μονάδες, κ.ο.κ.
  4. Να υπάρχει αρνητική βαθμολογία. Δηλαδή εάν ο χρήστης επιλέξει λανθασμένη απάντηση τότε να χάνει μονάδες.
  5. Να είναι υποχρεωτικό να απαντηθούν όλες οι ερωτήσεις. Αλλιώς να μην επιτρέπεται να πατηθεί το button "ΥΠΟΒΟΛΗ".

Να εφαρμόσετε τον κώδικα που δημιουργήσατε για να φτιάξετε δυο τεστ, για παράδειγμα:

  1. Τεστ γεωγραφίας: οι ερωτήσεις αφορούν πόλεις και χώρες. Για παράδειγμα, μία ερώτηση θα μπορούσε να είναι "Ποια είναι η πρωτεύουσα της Γαλλίας", ενώ τέσσερις πιθανές απαντήσεις θα μπορούσε να είναι: "Λυών", "Μαδρίτη", "Παρίσι", "Ρωμη".
  2. Τεστ ιστορίας: οι ερωτήσεις αφορούν ιστορικά γεγονότα. Για παράδειγμα, μία ερώτηση θα μπορούσε να είναι "Με ποια συνθήκη ανακηρύχθηκε η Ελλάδα ως αυτόνομο ελεύθερο κράτος;", ενώ τέσσερις πιθανές απαντήσεις θα μπορούσε να είναι: "Συνθηκη του Μάαστριχτ", "Συνθήκη του Λονδίνου", "Συνθηκη των Σεβρών", "Πρωτόκολλο του Λονδίνου", "Συνθήκη της Λωζάνης".

Ασκηση html, css και JavaScript για τη δημιουργία σελίδας παρουσίασης

Να δημιουργηθεί σελίδα html στην οποία να παρουσιάζονται 10 ενότητες.

  1. Κάθε ενότητα περιέχει περιεχόμενο με να στοιχεία html ( κείμενα, εικόνες, επικεφαλίδες, links)
  2. Κάθε ενότητα να έχει λιγο περιεχόμενο ώστε να χωράει σε μια οθόνη κινητού.

Οταν η σελίδα εμφανίζεται σε οθόνη υπολογιστή τότε οι ενότητες μπαίνουν απλά η μία κάτω από την άλλη.

Όταν η σελίδα εμφανίζεται σε tablet η σε κινητό τηλέφωνο τότε:

  1. Κάθε φορά εμφανίζεται μόνο μια από τις 10 ενότητες.
  2. Στο κάτω μέρος της οθόνης υπάρχουν δύο buttons: προηγούμενο / επόμενο, με τα οποία μπορούμε να μεταβούμε στην προηγούμενη η στην επόμενη ενότητα.
  3. Στο πάνω μέρος της οθόνης υπάρχουν 10 αριθμοί, καθένας εκ των οποίων αποτελεί link προς την αντίστοιχη ενότητα.

Πώς χρησιμοποιούμε τη γλώσσα html

Ο πιο εύκολος δρόμος για τη δημιουργία απλης ιστοσελίδας είναι να χρησιμοποιήσουμε τη γλώσσα html. Απλά τοποθετουμε εικόνες, κειμενα, συνδέσμους και άλλα html elements. Με αυτό τον τρόπο κατασκευάζονται ιστοσελίδας όταν πρωτοβγήκε το διαδίκτυο στις αρχές της δεκαετίας του 1990. Για να δημιουργήσετε μία τόσο απλή ιστοσελίδα μας αρκεί η γλώσσα html. Αυτή η ιστοσελίδα θα έχει υπερβολικά απλή μορφοποίηση. Δυστυχώς η γλώσσα html δεν έχει πολλές δυνατότητες μορφοποίησης. Μην παραλείψετε να ρίξετε μια ματιά στις ασκήσεις html οι οποίες μπορούν να σας βοηθήσουν πολύ στα πρώτα σας βήματα στη δημιουργία ιστοσελίδας.

Τι προσφέρει το css στην κατασκευή ιστοσελίδων

Η γλώσσα html δεν προσφέρει πολλές δυνατότητες μορφοποίησης. Η λύση έρχεται από το css το οποίο μας επιτρέπει να κάνουμε κάθε είδους μορφοποίησης σε όλα τα html elements. Επίσης το css μας επιτρέπει να χρησιμοποιήσουμε το ίδιο αρχείο μορφοποίησης για όλες τις σελίδες του ιστότοπου επιτυγχάνοντας ομοιομορφία μεταξύ όλων των σελίδων. Στα μαθήματα css έχετε τη δυνατότητα να μάθετε όλες τις επιλογές μορφοποίησης για όλα τα στοιχεία html. Ο συνδυασμός html και css μας επιτρέπει να δημιουργήσουμε πολύ εντυπωσιακές ιστοσελίδες. Όμως είναι δύσκολο να βάλουμε κίνηση ως απάντηση ενεργειών του χρήστη.

Τι προσφέρει η JavaScript στην κατασκευή ιστοσελίδων

Η JavaScript μας επιτρέπει να δημιουργήσετε μία πλήρως διαδραστική ιστοσελίδα. Μαζεύει δυνατότητα να ανιχνεύσουμε το κλικ η το mouseover για οποιαδήποτε άλλη ενέργεια πάνω σε οποιοδήποτε html element. Επίσης η γλώσσα JavaScript μας δίνει τη δυνατότητα να μορφοποιεί σου με οποιοδήποτε html element χρησιμοποιώντας το DOM model. Στα μαθήματα javascript μαθαίνετε πώς να κάνετε όλες αυτές τις ενέργειες. Στην ολοκλήρωση ενός σεμιναρίου JavaScript είναι σημαντικό με ακολουθήσει εξάσκηση χρησιμοποιώντας συνδυασμένα όλες τις τεχνολογίες κατασκευής ιστοσελίδων. Αυτή ακριβώς η εξάσκηση γίνεται με τις παραπάνω ασκήσεις.

Ταχύτητα ιστοσελίδας

Για να μεγιστοποιήσουμε την ταχύτητα μιας ιστοσελίδας θα πρέπει να χρησιμοποιήσουμε όσο το δυνατόν λιγότερα αρχεία, ελαφρύτερα αρχεία και λιγότερο κώδικα. Όταν γνωρίζουμε το html css και την JavaScript μπορούμε να πετύχουμε ταχύτητα ιστοσελίδας που προσεγγίζει το 100. η ομάδα μας δημιουργεί ιστότοπος με εξαιρετικά υψηλή ταχύτητα ιστοσελίδας που ανεβαίνουν πολύ εύκολα στην πρώτη σελίδα της Google. Η καλή γνώση των βασικών τεχνολογιών διαδικτύου μας επιτρέπει επίσης να πάρουμε μία αργή ιστοσελίδα και να την επιταχύνουμε όσο μπορούμε. Εάν έχουμε πρόσβαση στα αρχεία css και JavaScript του content management System καθώς και στα αρχαία εικόνων τότε μπορούμε να βελτιώσουμε πολύ την ταχύτητα της ιστοσελίδας.

Τι είναι τα JavaScript Frameworks και γιατί να τα χρησιμοποιήσετε

Η ευρεία χρήση της JavaScript οδήγησε στη δημιουργία framewoorks που αυτοματοποιουν κάποιες διαδικασίες και επιταχύνουν την ανάπτυξη εφαρμογών λογισμικού καθώς και τη σύνδεση με το back-office και τη βάση δεδομένων. Δηλαδή με τα javascript frameworks επιτυγχάνουμε καλύτερο αποτέλεσμα σε λιγότερο χρόνο. Αυτός είναι και ο λόγος για τον οποίο στην αγορά δεν ζητείται απευθείας γνώσεις JavaScript αλλά ζητείται γνώση των JavaScript frameworks. Δηλαδή εάν κοιτάξετε τις μικρές αγγελίες για εύρεση εργασίας περισσότερες είναι οι αγγελίες που ζητάνε γνώσεις React JS. Vue JS ή Angular παρά εκείνες που ζητάνε γνώσεις JavaScript. Για να καταφέρετε όμως να κατανοήσετε σε βάθος τα JavaScript frameworks, να τα κάνετε κτήμα σας και να μπορείτε να εργάζεστε άνετα σε αυτά θα πρέπει να έχετε πολύ καλή γνώση της JavaScript.

Επιλέγω html επειδή βοηθάει στην προώθηση ιστοσελίδων

Ο λόγος για τον οποίο επιλέγουμε τη γλώσσα html είναι ότι μας δίνει ένα πολύ σημαντικό πλεονέκτημα στην προώθηση ιστοσελίδων. Η δημιουργία ενός site έχει ως στόχο να το ανεβάσουμε στην πρώτη σελίδα της google με τις κατάλληλες ενέργειες προώθησης ιστοσελίδων. Ο πιο σημαντικός παράγοντας κατάταξης για την google είναι η ταχύτητα της ιστοσελίδας. Οι σελίδες που κατασκευάζονται με τη γλώσσα html έχουν πάρα πολύ μικρό μέγεθος και κατά συνέπεια εξαιρετικά γρήγορη ταχύτητα. Με τη γλώσσα html μπορούμε εύκολα να βελτιστοποιήσουμε όλες τις παραμέτρους που είναι σημαντικές για την προώθηση ιστοσελίδων.

Κατασκευή e-shop με JavaScript

Η JavaScript χρησιμοποιείται κατά κόρον στην κατασκευή e-shop. Είναι η γλώσσα προγραμματισμού με την οποία δημιουργούμε το καλάθι αγορών. Συνήθως στην πράξη αυτό δεν φαίνεται διότι παίρνουμε ολόκληρο το content management System κατασκευές e-shop. Εάν επιλέξετε να κάνετε δημιουργία e-shop με το magento, με το opencart ή με το woocommence τότε δεν είναι απαραίτητο να γνωρίζει τη JavaScript. Διότι ολόκληρος ο κώδικας έρχεται έτοιμος Με την εγκατάσταση του content management system. Εάν όμως θελήσετε να κατασκευάσετε ένα δικό σας πίσω από την αρχή τότε το front-end θα πρέπει να χτιστεί πάνω στην JavaScript. Δεν είναι λίγες οι περιπτώσεις στις οποίες είναι προτιμότερο να δημιουργήσουμε το e-shop από την αρχή παρά να το χτίσουμε πάνω σε κάποια έτοιμη πλατφόρμα. Αυτό ισχύει κυρίως στις περιπτώσεις που είναι αυξημένες οι απαιτήσεις για το business logic. Εάν για παράδειγμα θέλετε να δημιουργήσετε ένα e-shop το οποίο να έχει περίπλοκους κανόνες τιμολόγησης, περίπλοκους κανόνες μεταφορικών καθώς και ιδιαίτερες απαιτήσεις b2b, τότε το κόστος κατασκευής e-shop με κάποια έτοιμη πλατφόρμα θα είναι ιδιαίτερα αυξημένο. Σε αυτή την περίπτωση πιθανώς είναι προτιμότερο με το δημιουργήσετε μόνοι σας Ιδανική γλώσσα για το back office είναι η Java. Όσον αφορά το front-end το καλύτερο είναι να χρησιμοποιήσετε html css και JavaScript για την κατασκευή του e-shop.

Μαθήματα προγραμματισμού στο διαδίκτυο

Οι τεχνολογίες html css και JavaScript αποτελούν το front-end κομμάτι μιας web εφαρμογής. Στα μαθήματα προγραμματισμού που αναλαμβάνει ομάδα μας έχετε τη δυνατότητα να μάθετε τώρα το front-end κομμάτι όσο και τη backhand λειτουργία μία web εφαρμογής. Ουσιαστικά στα μαθήματα προγραμματισμού για το backhand κομμάτι μαθαίνουμε πώς να δημιουργούμε βάσεις δεδομένων καθώς και τις τεχνολογίες πρόσβασης σε αυτές. Η σημαντικότερη βάση δεδομένων στο διαδίκτυο είναι η mysql. Μπορείτε να παρακολουθήσετε μαθήματα mysql ανεξάρτητα από το αν γνωρίζετε ή όχι τις front-end τεχνολογίες. Όσον αφορά την εκπαίδευση στις γλώσσες προγραμματισμού για το backend κομμάτι κυρίως περιλαμβάνουν μαθήματα php και μαθήματα java.

Ασκήσεις εμπέδωσης της θεωρίας

Το σημαντικότερο κομμάτι της εκπαιδευτικής διαδικασίας είναι η εξάσκηση. Στην ιστοσελίδα μας έχουμε ασκήσεις για πολλές θεματικές ενότητες. Για παράδειγμα εδώ θα βρείτε ασκήσεις excel ώστε να μπορέσετε να εφαρμόσετε όσα μάθατε στα μαθήματα excel. Εδώ βλέπετε την εκφώνηση της άσκησης. Στο κανάλι μας στο YouTube θα βρείτε τη λύση σε όλες τις ασκήσεις excel. Επίσης έχουμε ασκήσεις για όσους θέλουν να κάνουν εξάσκηση στο πληκτρολόγιο. Οι ασκήσεις δημιουργήθηκαν με τη JavaScript. Είναι διαδραστικές ασκήσεις που μπορείτε να χρησιμοποιήσετε τόσο μέσω υπολογιστή όσο και μέσω κινητού. Όταν δώσετε σωστή απάντηση τότε ανάβει ένα πράσινο button που σας επιτρέπει να προχωρήσετε στην επόμενη άσκηση. Εχουμε ασκήσεις για να κάνουν εξάσκηση τα παιδιά ώστε να μάθουν πως να βάζουν τόνο, πως να βάζουν διαλυτικά αλλά και πως να βάζουν τόνο και διαλυτικά μαζί.

Πολύ χρήσιμο βοήθημα για τα σεμινάρια επεξεργασίας κειμένου είναι οι ασκήσεις Word που έχουμε δημοσιεύσει στην ιστοσελίδα μας. Ξεκινούν από βασικές γνώσεις και καλύπτουν άτομα και πιο προηγμένες απαιτήσεις επεξεργασίας κειμένου. Εδώ θα βρείτε συγκεντρωμένες όλες τις ασκήσεις Word.

Εάν παρακολουθείτε μαθήματα photoshop σίγουρα θα θέλετε να εκτελέσετε πολύ περισσότερες ασκήσεις. Για αυτή ακριβώς την ανάγκη που προκύπτει στα σεμινάρια ενηλίκων έχουμε δημιουργήσει ασκήσεις photoshop με μία ευρεία γκάμα εργαλείων και διαβαθμισμένη δυσκολία. Μπορείτε να ξεκινήσετε από απλές ασκήσεις photoshop και κατά την εξέλιξή του σεμιναρίου να προχωρήσετε σε δυσκολότερες ασκήσεις.