ブラウザ上で架空のクライアントからの依頼プロジェクトを通じて、HTML, CSS, JavaScriptを学習できるサービス「Dash」を試してみました。

「Dash」は、General Assemblyが自社用のツールとして作成して、誰もが利用できる学習ツールとして一般公開されたものです。英語での説明ですが、ウェブ開発の基礎知識があれば、分かる内容の英語なので、ナビゲーションに従って、学習をすることが出来ます。

Dash
https://dash.generalassemb.ly/

General Assembly
https://generalassemb.ly/

学習画面は3つの要素で構成されていて、左上にスライドショーにて、架空のクライアントからの依頼（個人のウェブサイトを作ってください、とか、レスポンシブ対応のブログのテーマを作ってください）の表示と、作成するべきソースの内容が説明されます。指示のあったソースを、左下のエディタエリアに記述すると、右側のプレビューエリアに表示されます。右側のプレビューエリアでは、PCでの表示と、スマホでの表示を切り替えることが出来ます。途中のチェックポイントの課題をクリアしないと、次のスライドに行けない仕組みになっています。

学習の操作画面

プレビュー画面は、スマホでのプレビューも表示できます

コードを記載するエリア

学習したスキルを確認するエリア

架空のクライアントからの依頼内容を作成するというスタイルをとります

架空の依頼ではあれ、クライアントからのサイト制作の依頼を、実際に作る過程を細かに説明、自分でソースを書いて、プレビューしていくという仕組みは、とても分かりやすいと思います。