Flexbox Froggy

 (flexboxfroggy.com)
2 poin oleh GN⁺ 2023-10-01 | 1 komentar | Bagikan ke WhatsApp
  • Artikel pengantar tentang game 'Flexbox Froggy' yang membantu mempelajari kode CSS
  • Game yang memandu katak ke daun teratai dengan menggunakan properti justify-content
  • Properti justify-content menyelaraskan item secara horizontal di dalam container
  • Properti ini mendukung berbagai nilai seperti flex-start (menyelaraskan item ke kiri), flex-end (menyelaraskan item ke kanan), center (menyelaraskan item ke tengah), space-between (jarak yang sama di antara item), dan space-around (jarak yang sama di sekitar item)
  • Disediakan contoh justify-content: flex-end; yang memindahkan katak ke kanan
  • Game 'Flexbox Froggy' dibuat oleh Codepip, serta menyediakan tautan GitHub dan Twitter
  • Artikel ini merekomendasikan 'Grid Garden' bagi orang-orang yang ingin mempelajari CSS Grid

Bacaan terkait

1 komentar

 
GN⁺ 2023-10-01
Opini Hacker News
  • Artikel tentang 'Flexbox Froggy', sebuah game pembelajaran CSS
  • Game serupa untuk belajar CSS yang direkomendasikan pengguna: cssgridgarden.com, cssbattle.dev, flukeout.github.io, dan css-animations.io
  • Pengguna mengungkapkan kesulitan mengingat properti flex seperti align-content dan align-items, membandingkannya dengan masalah umum salah memasang kabel USB
  • Pengguna memuji CSS grid dan opsi tata letak yang diberikannya
  • Pengguna berbagi bahwa mereka banyak belajar melalui game seperti 'Flexbox Froggy'
  • Cheat sheet buatan pengguna untuk orang-orang yang kesulitan mengingat semua properti flexbox, darekkay.com/flexbox-cheatsheet
  • Pengguna menganggap 'Flexbox Froggy' sangat berguna terutama untuk menyegarkan kembali pengetahuan tentang flexbox
  • Pengguna mengusulkan fitur untuk drag-and-drop katak ke grid 3x3 agar menghasilkan kode CSS flexbox sebagai output
  • Game lain yang lebih berfokus pada membaca CSS, guess-css.app, direkomendasikan
  • Pengguna mendiskusikan pengalaman terkait flexbox; sebagian belajar tentang properti order, sementara yang lain mengungkapkan kebingungan tentang perbedaan penamaan justify-content dan align-items
  • Game lain yang direkomendasikan sebagai cara menyenangkan untuk belajar CSS, flexboxzombies.com