この記事はiCARE Dev Advent Calendar 2021カレンダー2の4日目です。

私は現在、フロントエンドエンジニアとして株式会社iCAREで働かせていただいております。
フロントエンドエンジニアですが、CSSがとても苦手です。
CSSと仲良くなって得意分野と言えるように、学習を続けていきたい所存です。
今回はCSS学習サイト３選というお題です。
私がCSS学習する上で利用しているサイトを３つご紹介したいと思います。

FLEXBOX FROGGY

１つ目はFLEXBOX FROGGYです。ご存知の方は多いと思います。
flexboxを学習できるサイトです。
CSSコードを書いて、カエルのキャラクターを蓮の葉の上に乗せるゲームです。
レベル1〜24まであり、レベルが上がるにつれどんどん難しくなっていきます。
レベル24をクリアできたらflexboxマスターになれる気がします。

Free Code Camp

２つ目はFree Code Campです。
CSSだけではなくプログラミングについて無料で学ぶことができるサイトです。
CSSについては、基礎から応用まで学ぶことができます。
一度の学習ではなかなか身につかないので継続し利用していきたいです。
海外のサービスのため日本語には対応していませんが、英語学習もできて一挙両得感があります。

Markup

最後にご紹介するのは、Markupというサイトです。
レイアウトに特化した無料のCSS学習サイトです。
STEP1〜STEP4まであり、順番に学習もできますし、自分が学習したいSTEPだけを勉強することもできます。
Webサイトのスタイリングをしていく感覚で学習できます。

まとめ

今回はCSSの学習サイトを３つご紹介させていただきました。
普段CSSフレームワークを使って開発していると、ついついCSSの書き方が分からなくなってしまいがちなので、これからもこれらのサイト活用して学習を続けていきたいと思います！