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

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

Dash
https://dash.generalassemb.ly/

General Assembly
https://generalassemb.ly/

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

学習の操作画面

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

コードを記載するエリア

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

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

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

今年も一年ありがとうございました。このブログ（Blogger）の記事のタイトル周りのCSSを変更しました。

このブログのデザインについては、「Blogger テンプレート デザイナー」のシンプルカテゴリのブルーを使っています。ただ、デフォルトの記事タイトルの扱いが弱いような気がしていました。気にはなっていたのですが、そのまま使っていました。もう少し、記事タイトルが強調出来るように修正をしました。

編集するのはCSSですが、Bloggerの場合、テンプレートファイルとCSSが一緒になっているので、そのファイルを編集します。管理画面のデザインタブの中にある「デザイン編集」のページにある「テンプレートを編集」の内容を変更します。

記事の部分を目立たせるように、タイトルの横に青いラインを配置して、フォントが弱かったので、フォント指定を変更しました。2箇所のソースを変更しました。

■変更前　その1

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

■変更後　その1

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
  padding:  0 0 0 .30em;
  border-left: 7px solid #66bbdd;
}

■変更前　その2

■変更後　その2

変更前

変更後

今年一年、TwitterやBlogでお世話になった皆様、ありがとうございました。来年も宜しくお願いします。