カエルのゲームでFlexboxを学べるサイト「Flexbox Froggy」

 
カエルを指定の葉っぱに移動させることでFlexboxを学べる学習サイト「Flexbox Froggy」の紹介です。問題はレベル24まで出題されヒントを頼りにCSSを埋めていきます。これからFlexboxを学びたい方にオススメのサイトです。

Flexbox Froggy

短時間で制覇できるので時間の空いてる時に試してみてはいかがでしょうか。以上、ゲーム感覚でCSSのFlexboxのプロパティを学べるサイト「Flexbox Froggy」の紹介でした。



  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
  • バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」
  • CSSで実装するローディングアニメーション「Single Element CSS Spinners」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
RELATED POSTS
  • 遊びながら学べるプログラミング学習ゲーム「CodeCombat」
  • 手書きのオリジナルフォントを簡単に作成できる「Calligraphr」
  • スクリーンショットにブラウザ枠をつけてくれるWebツール「Screely」
  • 1999年から現在までのフライヤーをアーカイブした「FLYER ARCHIVE JP」
  • フォントを調べる時に役に立つツール・サイト10選
  • アップロードしたイメージからカラーを抽出するツール「Pictones」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • 導入しておきたいWordPressのおすすめプラグイン
  • Photoshopで画像を切り抜くテクニック【初心者向け】