Flexbox Froggy

 (flexboxfroggy.com)
2 poin oleh GN⁺ 2023-10-01 | 1 komentar | Bagikan ke WhatsApp
  • Gim pembelajaran interaktif untuk mengirim katak ke daun teratai dengan mengetik langsung CSS flexbox, sehingga efek properti alignment bisa langsung dilihat di layar
  • Pada level pertama, #pond sudah diatur dengan display: flex;, lalu penyelarasan horizontal diubah menggunakan justify-content
  • justify-content mengatur penempatan item di dalam container dengan nilai seperti flex-start, flex-end, center, space-between, dan space-around
  • Misalnya, jika memasukkan justify-content: flex-end;, katak akan berpindah ke daun teratai di kanan sehingga hubungan antara properti dan hasilnya bisa langsung dipahami
  • Secara keseluruhan terdiri dari 24 level, serta menyediakan berbagai bahasa termasuk bahasa Korea dan mode koreksi buta warna

Cara mempelajari CSS flexbox lewat game

  • Flexbox Froggy adalah game untuk mempelajari CSS flexbox dengan mengirim Froggy dan teman-temannya ke posisi target
  • Jika menuliskan properti di area edit kode CSS #pond pada layar, posisi katak akan berubah
  • Level pertama adalah tugas menggunakan justify-content untuk mengirim katak ke daun teratai di sebelah kanan
  • Kode dasarnya menampilkan struktur berikut
    • #pond {
    • display: flex;
    • }

Belajar penyelarasan horizontal dengan justify-content

  • justify-content adalah properti untuk menyelaraskan item secara horizontal
  • Nilai yang bisa digunakan adalah sebagai berikut
    • flex-start: menyelaraskan item ke sisi kiri container
    • flex-end: menyelaraskan item ke sisi kanan container
    • center: menyelaraskan item ke tengah container
    • space-between: memberi jarak yang sama di antara item
    • space-around: memberi jarak yang sama di sekitar item
  • Dengan justify-content: flex-end;, katak akan bergerak ke kanan sehingga nilai properti dan hasil tata letak bisa langsung dibandingkan

Komposisi dan materi belajar terkait

  • Game ini ditampilkan sebagai Level 1 of 24, dan pengaturan bahasanya mencakup berbagai bahasa termasuk bahasa Korea
  • Sebagai game terkait untuk belajar CSS lebih lanjut, tersedia tautan ke Grid Garden dan Anchoreum

Bacaan terkait

1 komentar

 
GN⁺ 2023-10-01
Pendapat Hacker News

  • Ada juga materi berbentuk game lain yang bagus untuk belajar CSS
    https://cssgridgarden.com/ — mirip Froggy untuk Grid
    https://cssbattle.dev/ — platform untuk menyelesaikan berbagai tantangan, dengan komunitas besar
    https://flukeout.github.io/ — belajar selector CSS
    https://css-animations.io/ — berlatih animasi CSS

  • Meski sudah bertahun-tahun memakai CSS, properti terkait flex seperti align-content dan align-items masih saja membingungkan setiap kali
    Rasanya seperti selalu memasang kabel USB terbalik; align dan justify juga begitu
    CSS Grid juga benar-benar luar biasa. Sekarang ada begitu banyak pilihan layout yang bagus sampai-sampai kita cukup dimanjakan

    • Saya sudah menulis HTML sejak pertengahan 90-an dan bekerja sebagai web developer selama 10 tahun, tetapi masih sering merujuk panduan flexbox dan panduan grid dari CSS Tricks
      Cheat sheet keduanya juga saya cetak dan taruh di meja, dan itu benar-benar sumber yang sangat berharga
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • Aturannya begini: justify- berkaitan dengan sumbu utama, align- dengan sumbu silang
      -content dipakai untuk track grid atau baris pada container flex-wrap, sedangkan -items dipakai untuk elemen anak individual, yaitu item di dalam baris atau sel grid
      Meski begitu, saya berharap namanya lebih jelas
    • Mungkin tujuannya untuk menggeneralisasi seluruh flex-direction. Karena itu, properti seperti flex-align menjadi bergantung pada arah parent
      Dalam praktiknya, kasus di mana kita mengganti arah dan mendapatkan manfaat besar dari itu sangat jarang
      Saya tidak tahu apakah itu satu-satunya alasan, jadi saya tidak akan memastikan bahwa itu pilihan yang buruk, tetapi saya juga sama-sama tidak bisa mengingat mana yang mana
      Akan lebih baik jika namanya langsung menunjukkan sumbunya, atau propertinya independen dari arah parent; sampai saat itu, kita perlu memakai cheat sheet
    • Flexbox dan Grid memang menyedot perhatian, tetapi jangan lupakan kegunaan columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • Saya benar-benar sulit memasukkan flex-basis, flex-grow, flex-shrink ke kepala
      Namun karena tidak sering perlu memikirkannya, mungkin itu juga sebabnya jadi makin sulit diingat

  • Saya belajar sangat banyak dari game seperti ini. Vim juga saya pelajari lewat https://vim-adventures.com/, dan sekarang rasanya hampir tidak bisa hidup tanpa Vim

  • Postingan HN sebelumnya:
    https://news.ycombinator.com/item?id=30251054 2022, 317 poin, 31 komentar
    https://news.ycombinator.com/item?id=22629903 2020, 27 poin, 2 komentar
    https://news.ycombinator.com/item?id=21796926 2019, 2 poin, 0 komentar
    https://news.ycombinator.com/item?id=18752031 2018, 3 poin, 0 komentar
    https://news.ycombinator.com/item?id=18731852 2018, 6 poin, 1 komentar
    https://news.ycombinator.com/item?id=15605783 2017, 4 poin, 0 komentar
    https://news.ycombinator.com/item?id=14349739 2017, 3 poin, 0 komentar
    https://news.ycombinator.com/item?id=10652909 2015, 315 poin, 69 komentar

  • Bagus sekali. Dulu saya memakai ini saat belajar flexbox
    Ada juga https://codepip.com/games/grid-garden/ dari pembuat yang sama, yang membantu mempelajari CSS Grid dengan pendekatan serupa

    • Menurut saya game adalah cara yang sangat bagus untuk belajar CSS
      Sepertinya karena, dengan bekal yang sudah dipelajari, kita menyelesaikan soal yang terlihat mudah dengan cara yang makin sulit, sehingga terbentuk jalur belajar yang sangat alami
      Dulu saya pernah memainkan game ini dengan seru untuk belajar selector CSS: https://flukeout.github.io/

  • Guess CSS juga punya bagian Flexbox, tetapi lebih berfokus pada membaca CSS daripada menulisnya: https://www.guess-css.app/

    • Untuk CSS position, jelas saya benar-benar tidak memahami apa pun
      Soal lain bisa terus saya jawab dengan benar, tetapi position terus salah

  • Sangat berguna. Saya selalu akhirnya mencari perataan vertikal di flexbox
    Agar bisa membantu menyegarkan pengetahuan flexbox dengan cepat saat terburu-buru, akan bagus jika ada fitur untuk drag-and-drop katak ke grid 3x3 lalu menampilkan kode CSS flexbox yang sesuai
    Meski begitu, ini tutorial yang dibuat dengan sangat cermat
    Saya mengatakan ini karena secara pribadi saya sudah menyerah untuk terus mengikuti fitur CSS baru. Saya telah memakai CSS sesekali sejak era IE7, dan setelah melewati masa menulis vendor prefix secara manual serta fitur-fitur baru yang didorong oleh Chrome Canary, saya tidak punya energi lagi untuk terus menyimpan trik-trik CSS di kepala

    • Sekarang hampir tidak ada lagi yang disebut trik, dan tidak banyak juga yang perlu diikuti. Flexbox dan Grid pada dasarnya adalah tahap akhir
      Untuk sebagian besar UI, flexbox saja sudah cukup; pada dasarnya ini adalah alat untuk menata item secara vertikal dan horizontal seperti stack/group atau vbox/hbox
      Pelajarilah flexbox. Ini hal paling berguna yang pernah masuk ke layout CSS dan benar-benar sederhana. Spasi memakai gap, penempatan kira-kira cukup dengan justify dan align, jadi 99% selesai di situ

  • Saya suka Flexbox Froggy. Bisa dibilang satu generasi developer belajar flexbox lewat situs ini. Saya juga begitu

    • Dalam kasus saya, berkat Flexbox Froggy konsep flexbox akhirnya benar-benar klik di kepala
      Saat itu saya sudah memakai CSS selama 15 tahun
      Alat pembelajaran yang luar biasa

  • Panduan interaktif flexbox dari Josh Comeau juga layak dilihat: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • Bagus. Akan menarik jika ada versi Tailwind juga