グリッドガーデンでCSSグリッドレイアウト（楽しい方法）を学ぶ

ほとんどのWeb開発者はFlexbox Froggyというゲームを知っています。 flexboxの基本を教えます ゼロから。この無料ゲームは話題になりました、そしてそれはまだflexboxでコーディングする方法を人々に教えるために非常に価値があります.

まあ、そのゲームを作った同じ開発者 新しいゲームがあります 呼ばれる グリッドガーデン.

このゲームは同じように機能しますがあなたに教えます CSSグリッドのコーディング方法. これは比較的新しい機能ですが、 早く追いつく そしてGrid Gardenは簡単に学ぶための最良の方法です.

Grid Gardenのすべてのものは 似たような教え方 Flexbox Froggyとして。これは同じ開発者Thomas Parkによって作成されたので、同じレベルの難しさと使いやすさが期待できます。.

デフォルトでは、レベル1から始めます。 計28レベル 最初から最後まで。いつでもできます レベルをスキップ 難しすぎると思う人もいるかもしれませんが、それらをすべて復習するのと同じように作業していくのが良いと思います。.

グリッド関連のプロパティがどのように機能するのかがわからない場合は、Googlingに多くの単語があることに気付くでしょう。 CSSグリッドレイアウトは 全く新しいモジュール 独自の構文と機能を持つ.

あなたがチャンスを得たときはいつでも私はGrid Gardenと一緒にいじり回ることを強く勧めます。実際には CSS開発者の遊び場 さまざまなグリッドレイアウトプロパティをすべて学習および研究するためのものです。.

私はこのゲームがあなたをCSSグリッドのエキスパートにするとは言えません。プロジェクトを構築し、たくさん練習するだけであなたをエキスパートレベルにすることができます。しかし、Grid Gardenは、何か新しいことを学ぶのに必要な通常のストレスなしに始めるための楽しい方法です。.

あなたが勉強したり拡張したりするためにローカルでそれをダウンロードしたいのであれば、プロジェクト全体がGitHub上で完全に無料でオープンソースになっています。 Twitterの@thomashparkであなたの考えを作成者と共有することもできます。.