CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer

Ads

一つの形として面白かったのでシェア。
実際にコードを書いていきながら徐々に
出来上がっていくさまを見ながら学べる
チュートリアルサイト。動画のチュート
リアルより見やすく頭に入りやすい気も
しないでもないです。

こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。

TheCodePlayer


ブログ形式でチュートリアルを公開しています。

説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。

Make a simple cloud in CSS3


こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど、これはこれでアリなんじゃないかなと。

最近のWeb制作向けのリソースは「学べるサイト」のタイプがとても多い印象です。ゲーム感覚、共有系、スライド式、動画式など様々な形式で提供されています。技術屋さんが挙って教育系に移行する業界にはなんとなく不安も抱きざるを得ませんが、これはこれで住み分けって形になっているんでしょうかね・・僕が考えたところで何も変わりませんけどw

とりあえず、アイデアがとっても参考になりました。他のチュートリアルは以下よりどうぞ。

TheCodePlayer