4 ιστοσελίδες με πρακτικά έργα HTML και CSS για αρχάριους

Βασικά Takeaways

• Η υπέρβαση της κόλασης των εκπαιδευτικών σε HTML και CSS είναι δυνατή μέσω πρακτικής εφαρμογής και ανάπτυξης έργου. Πλατφόρμες όπως το Codewell προσφέρουν πρότυπα σχεδίασης, πηγαίο κώδικα και στοιχεία για τη δημιουργία έργων πραγματικού κόσμου.
• Το devCallenges παρέχει μια σειρά από πραγματικές προκλήσεις κωδικοποίησης για αρχάριους και έμπειρους προγραμματιστές. Προσφέρει διαδρομές με διαφορετικά επίπεδα δυσκολίας και η ολοκλήρωση των προκλήσεων σας κερδίζει πιστοποιητικά για το χαρτοφυλάκιό σας.
• Το Frontend Mentor είναι μια δημοφιλής πλατφόρμα που προσφέρει προκλήσεις front-end σε συνδυασμό με επαγγελματικά σχέδια ιστού. Έχει μια υποστηρικτική κοινότητα και παρέχει πόρους για να βελτιώσετε τη μάθησή σας. Προκλήσεις μπορούν να προστεθούν στο χαρτοφυλάκιό σας για να αυξήσετε τις ευκαιρίες εργασίας.

Το tutorial hell είναι ένα πρόβλημα που μπορεί να αντιμετωπίσετε όταν αρχίσετε να μαθαίνετε HTML και CSS. Το να πνιγείτε σε μια θάλασσα από μαθήματα μπορεί να σας απογοητεύσει και ενδεχομένως να εμποδίσει την πρόοδό σας στην ανάπτυξη ιστού. Ο ευκολότερος τρόπος για να το ξεπεράσετε είναι να συμμετάσχετε σε πρακτική εφαρμογή και ανάπτυξη έργου με βάση οτιδήποτε μαθαίνετε.

Οι ιστότοποι σε αυτήν τη λίστα προσφέρουν έργα HTML και CSS πραγματικού κόσμου. Παρέχουν πρότυπα σχεδίασης, πηγαίο κώδικα και στοιχεία για τη δημιουργία έργων με χρήση HTML και CSS.

Η Codewell προσφέρει μια σειρά από προκλήσεις που έχουν σχεδιαστεί για να σας βοηθήσουν να εξασκηθείτε και να βελτιώσετε τις δεξιότητές σας σε HTML, CSS, JavaScript και responsive σχεδιασμό ιστοσελίδων. Αυτές οι προκλήσεις έχουν δύο κατηγορίες: δωρεάν και premium.

Κάτω από τη δωρεάν επιλογή, αποκτάτε πρόσβαση σε αρχεία εκκίνησης που περιέχουν στοιχεία, ένα αρχείο Readme που περιέχει πληροφορίες σχετικά με την πρόκληση και αρχεία σχεδίασης PNG για προβολή επιτραπέζιων υπολογιστών, tablet και κινητών. Η επιλογή της premium συνδρομής επεκτείνει τα πλεονεκτήματά σας, συμπεριλαμβανομένων όλων των δυνατοτήτων του δωρεάν επιπέδου, καθώς και ενός πρόσθετου προτύπου Figma.

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

Ορισμένες προκλήσεις στο Codewell περιλαμβάνουν σελίδες προορισμού, σελίδες εγγραφής και πίνακες εργαλείων. Όλα αυτά είναι έργα φιλικά για αρχάριους.

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

Υπάρχουν δωρεάν και επί πληρωμή προγράμματα από τα οποία μπορείτε να επιλέξετε. Το πρόγραμμα επί πληρωμή περιλαμβάνει pro και premium. Χρησιμοποιώντας τη δωρεάν επιλογή, έχετε πρόσβαση στις βασικές λειτουργίες και ορισμένες προκλήσεις. Η τελευταία επιλογή σάς προσφέρει προνόμια όπως πρόσβαση σε προκλήσεις premium, σχεδιασμός Figma και οδηγό απόστασης προκλήσεων.

Η πλατφόρμα ομαδοποιεί τις προκλήσεις σε μονοπάτια, καθεμία από τις οποίες στοχεύει διαφορετικές δεξιότητες όπως HTML και CSS, με διαφορετικά επίπεδα δυσκολίας. Μόλις ολοκληρώσετε τις προκλήσεις σε μία διαδρομή, θα λάβετε ένα πιστοποιητικό που θα συμπεριλάβετε στο χαρτοφυλάκιό σας.

Το devCallenges διαθέτει μια σελίδα επεξεργασίας όπου μπορείτε να δείτε τις ιδιαιτερότητες της πρόκλησης, συμπεριλαμβανομένων γραμματοσειρών, χρωμάτων, εικόνων θυρών προβολής, προβολής πλέγματος και λήψεων στοιχείων. Το ληφθέν αρχείο περιέχει μόνο εικόνες που θα χρειαστείτε.

Υπάρχει επίσης ένας πίνακας κατάταξης, ώστε να είστε ανταγωνιστικοί ενώ προπονείστε. Η πλατφόρμα προωθεί τη συμμετοχή της κοινότητας, ενθαρρύνοντάς σας να μοιραστείτε τις λύσεις σας. Προσφέρει βοήθεια και μπορείτε να μάθετε από άλλους χρήστες μέσω της ενότητας λύσεων.

Όπως το Codewell, θα χρειαστεί να παράσχετε έναν σύνδεσμο προς την επίδειξη και το αποθετήριο για να υποβάλετε τις λύσεις σας. Η διεπαφή είναι φιλική, επομένως δεν θα έχετε κανένα πρόβλημα να πλοηγηθείτε.

Το Frontend Mentor ξεχωρίζει ως η πιο δημοφιλής επιλογή μεταξύ των πλατφορμών αυτής της λίστας, χάρη στα πολλά προνόμιά του. Ξεχωρίζει προσφέροντας μια πλούσια συλλογή προκλήσεων στο front-end σε συνδυασμό με επαγγελματικά σχέδια ιστού. Η πλατφόρμα ενθαρρύνει επίσης μια ζωντανή και υποστηρικτική κοινότητα προγραμματιστών ιστού.

Όπως και άλλες πλατφόρμες, το Frontend Mentor διαθέτει δωρεάν και επί πληρωμή επιλογές. Με τη δωρεάν έκδοση, θα έχετε πρόσβαση στις βασικές λειτουργίες και στις περισσότερες προκλήσεις, ενώ η πληρωμένη έκδοση σάς δίνει πρόσβαση σε premium προκλήσεις, αρχεία σχεδίασης Figma και πολλά άλλα.

Οι προκλήσεις εμπίπτουν σε τρεις κύριες ομάδες, συμπεριλαμβανομένων του τύπου, της δυσκολίας και των γλωσσών. Κάτω από τις γλώσσες, μπορείτε να αποκτήσετε πρόσβαση σε προκλήσεις που απαιτούν μόνο HTML και CSS για να ολοκληρωθούν.

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

Το Frontend Mentor χρησιμοποιεί ένα σύστημα πόντων για να σας ενθαρρύνει να ολοκληρώσετε τις προκλήσεις. Μπορείτε να προσθέσετε όλα τα ολοκληρωμένα έργα σας στο α χαρτοφυλάκιο για να τοποθετήσετε τον εαυτό σας για ευκαιρίες εργασίας.

Αυτό που πραγματικά ξεχωρίζει το Frontend Mentor είναι η σελίδα πόρων του, η οποία περιέχει πάνω από 15 κλάδους υλικού ανάπτυξης ιστού. Κάθε ένα διαθέτει μια επιμελημένη λίστα πόρων από τους οποίους μπορείτε να επιλέξετε, ώστε να μπορείτε να μάθετε όλα όσα θα χρειαστείτε ποτέ να εξασκηθείτε.

Τέλος, το Frontend Mentor απορρίπτει τις προκλήσεις δύο φορές το μήνα, πράγμα που σημαίνει ότι θα υπάρχει πάντα κάτι για να δουλέψετε.

Το Frontend Practice διαφέρει από τις άλλες πλατφόρμες με πολλούς τρόπους. Πρώτον, δεν παρουσιάζει προκλήσεις. Αντίθετα, προσφέρει έργα. Αυτά τα έργα είναι πραγματικοί ιστότοποι που ανήκουν σε πραγματικές εταιρείες που θα αναδημιουργήσετε. Δεν χρειάζεστε επίσης λογαριασμό για να επιχειρήσετε αυτά τα έργα.

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

Η πλατφόρμα προσφέρει ένα επίπεδο δυσκολίας τριών επιπέδων, αλλά, ως αρχάριος, η κύρια εστίασή σας θα είναι στο επίπεδο ένα. Εδώ, μπορείτε να εξασκηθείτε σε HTML, CSS, απόκριση, κινούμενα σχέδια και πολλά άλλα. Επιπλέον, έχετε άδεια να συμπεριλάβετε τα έργα στο χαρτοφυλάκιό σας, υπό την προϋπόθεση ότι τηρείτε έναν κανόνα που αναφέρεται στον ιστότοπο.

Το Frontend Practice είναι μια εξαιρετική επιλογή εάν θέλετε να βελτιώσετε τις δεξιότητές σας αναδημιουργώντας υπάρχοντες ιστότοπους, ξεκινώντας από το μηδέν μέχρι να εξασκήσετε τις δεξιότητές σας σε HTML.

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

Βελτιώστε τις δεξιότητές σας HTML και CSS μέσω της εξάσκησης

Η κόλαση των φροντιστηρίων θα είναι μια πρόκληση, αλλά μπορείτε να την ξεπεράσετε με εξάσκηση. Οι δυνατότητες είναι πραγματικά ατελείωτες, και όλα ξεκινούν με το να κάνετε αυτό το πρώτο βήμα. Αναλαμβάνοντας δημιουργημένες προκλήσεις και έργα πραγματικού κόσμου, θα χρησιμοποιείτε τις γνώσεις σας σε θέματα HTML και CSS και θα προσθέτετε σε αυτές.

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