Διδάξτε τον εαυτό σας CSS Flexbox με το παιχνίδι Flexbox Froggy
Στο παρελθόν έχουμε αναλυθεί το flexbox και τα βασικά στοιχεία για το πώς λειτουργεί. Αλλά στην πραγματικότητα η εφαρμογή flexbox στη δουλειά σας μπορεί να είναι δύσκολη, επειδή είναι τόσο περίπλοκη προσθήκη στο spec CSS.
Με το Flexbox Froggy μπορείτε μάθετε όλα τα βασικά του flexbox με ένα διασκεδαστικό webgame που περιλαμβάνει βατράχους και lilypads. Ξέρω ότι ακούγεται τρελό αλλά αυτό είναι σοβαρά ένα φοβερό webapp.
Ξεκινάτε στο επίπεδο 1 και σιγά-σιγά το δρόμο σας μέσα από 24 διαφορετικά επίπεδα διδάσκοντας τις πολλές πτυχές του προσανατολισμού flexbox. Τα πρώιμα επίπεδα αρχίζουν εύκολα ζητώντας σας ευθυγραμμίστε έναν ή δύο βατράχους κατά μήκος ενός μόνο δοχείου. Τα πρώτα μαθήματα περιλαμβάνουν επίσης συμβουλές και προτάσεις για να σας βοηθήσουν στο δρόμο.
Αλλά μόλις περάσετε το μάθημα 10 πράγματα πραγματικά ζεσταίνουν. Θα χρειαστεί να μάθετε πώς να το επαναλάβετε-οργανώστε αντικείμενα μέσα σε ένα κοντέινερ, πως να οργανώνω περιεχόμενο κάθετα, και πώς να δημιουργήσετε ισόπεδη απόσταση μεταξύ διαφορετικών σειρών διαφορετικού περιεχομένου.
Τα χαριτωμένα βατράχια μπορεί να σας δελεάσουν, αλλά να είστε βέβαιοι ότι αυτό είναι ένα σκληρό παιχνίδι.
Ωστόσο, από πλήρεις αρχάριους σε πιο έμπειρους προγραμματιστές ιστού, το παιχνίδι γίνεται για όλα τα επίπεδα. Τα πρώτα μαθήματα είναι ένα αεράκι και τα πιό πρόσφατα μαθήματα μπορούν να σας αφήσουν να κρέμονται πάνω από την οθόνη με συστάδες μαλλιών δίπλα σας.
Ο πλήρης πηγαίος κώδικας του παιχνιδιού είναι διαθέσιμος δωρεάν στο GitHub, ώστε να μπορείτε να τον κατεβάσετε και να τον αναπαράγετε τοπικά εάν το επιθυμείτε.
Επιπλέον, το webapp είναι πολύγλωσσο προσφέροντας 20 γλώσσες συμπεριλαμβανομένων των αγγλικών, γαλλικών, γερμανικών, ιταλικών, κινεζικών, ιαπωνικών και ρωσικών (και πολλών άλλων).
Θα το ομολογήσω η αναδιάταξη των βατράχων δεν θα σας κάνει αμέσως κύριο του flexbox. Αλλά αυτά τα μαθήματα προορίζονται να να εξοικειωθείτε με τη σύνταξη flexbox ώστε να αισθάνεστε άνετα να εργάζεστε σε σενάρια πραγματικού κόσμου.
Αν είσαι α web developer οποιουδήποτε επιπέδου δεξιοτήτων θα πρέπει σίγουρα να ελέγξετε το Flexbox Froggy. Είναι εντελώς δωρεάν, αρκετά διασκεδαστικό να παίζετε και εκπληκτικά εκπαιδευτικό.