HTML/CSSなどWebの基礎を「楽しく!」入門

 

■概要
今回は、HTML/CSSなどの基礎を「楽しく!」学ぶための学習メソッドです。

プログラミングの勉強において、根性でたくさんのコンテンツを乗り越えたり、詰め込み型の講座で結局何も身につかないなんて経験はありませんか?

偉そうにいうことじゃないけど、私は有ります。
例えば、iPhoneアプリの開発講座に、10万円3ヶ月ほどかけて通ったのですが、全く身につきませんでした・・・日々、1時間程度は最低でも勉強していたのだけど。
結局、プログラミング言語も、「言語」なのである程度基礎を固めて、日々触れる必要があるのですよね。

というわけで、今回は、「楽しく」学べるようにDashとCodecademyというWebサービスを用いた学習のレシピを公開します。

この学習レシピに従えば、結構な初心者の人でもHTML/CSS(とJavaScript・jQuery)を楽しく始められるはず。

なぜならば、「詰め込み型」ではなく、ストーリー形式+実際にコードを書いて、即座にフィードバックや結果が表示される形式のものを用いているから。

今回、このコースを作るに当たり、数ヶ月間無償で利用できるWeb上の様々なコーディング(プログラミング)学習サイトをみてきました。その中で、この2つは、私が、この最近触ったHTML/CSSの入門用としては、ものの中で初心者の人が、理解しやすいだろうと思われる内容でした。

そのポイントは、上記のストーリー形式などですが、例えばDashでは、「依頼人からの依頼で、Webサイトを作成していく」というストーリー形式です。それが、分かりやすいスライド、実際にコードを書く画面、その結果が表示される画面に分かれています。さらに、課題をクリアすると、アニメーションやキャラクターのコメントなど分かりやすい反応が得られます。

また、Codecademyは、ここ数年のWeb上でコーディングを学ぶためのサイトとして、比較的歴史が有ることもあってか、安定したコンテンツで安心して学ぶ事ができます。(Dashのコンテンツもかなり考えられていると思いますが)。

いずれのサービスも、プログラミング学習の際の最大の問題点だと私が思っている”stuck”「行き詰まり」に対しても、ヒントや掲示板などで回答がもらえるようになっています。

いずれも、今のところ英語(Codecademyは、2014年1月15日時点ではほんのすこしだけ日本語化されています)ですが、説明調の簡単な英語なので、「英語がものすごく苦手!」という人ではなければ、それほど問題ないかと思います。

Codecademy-WebFundamentals

■前提となる知識・スキル
・WebやHTMLに対する興味
・基本的な英語を読む能力(辞書をひくなども含め)
不安な人は、これを事前にこなしておくと良いかも。
【学習レシピ】英文読解の基礎(構造把握力)

・またどうしても英語が苦手だけど頑張りたいという場合は、
ドットインストールでHMTL・CSSなどを一通りみてからすすめるのが良いと思います。

■目安(習得期間、学習時間(開始時〜最大))
3ヶ月(たぶん)

■習得メリット
Webの基礎である、HTML、CSSについて一通り学べます。

■信頼度
・現在精査中

■必要ツール
・Dash、Codecademy

■手順
フェーズ1:Dash
準備
1.アカウントがない場合には作っておいてください。
#Twitterからでもログインできます。
2.Projectは、1〜3まで順に進めます。
#現在は、Project5まで作成中ですが、取り敢えず今回は3までで。

手順
1.Dashを開く
2.前回の続きを実行
3.メモの作成
Evernoteなどにメモを取りながら学習を進めましょう。
・一度やっただけだと忘れるので、電車の中などで読み返すためです。
・画像のキャプチャは、JingSkitchを使うと便利です。
4.日々の決まった学習時間が終わったらメモをを読み返す。
・電車の中などで読み返すと良いと思います。
・この復習をしておくと、記憶の定着がよくなり、学習効率も上がります。

フェーズ2:Codecademy
準備
1.アカウントがない場合には、作成します。
#Twitter、Facebook, Googleでもログインできます。
2.「学ぶ」から”Web Fundamentals”を選択します。

手順1・一回目
1.CodecademyのWeb Fundamentalsを開く
2.前回の続きから実行
・最初は、”Introduction to HTML”から始める。
3.メモの作成
4.日々の決まった学習時間が終わったらメモをを読み返す。
・電車の中などで読み返すと良いと思います。
・この復習をしておくと、記憶の定着がよくなり、学習効率も上がります。

補足)わからなくなったり行き詰まった場合
1.”stcuk? Get a hint!”を読む。
2.左下に”Q&A Forum”があるのでここのログをみたり、質問をする。
3.そのセクションの最初からやり直す
で、だいたい大丈夫だと思います。
あと、どうしてもという場合は聴いて貰えればある程度は回答出来ると思います。

手順2回目(ものすごく重要)
注意1)復習を行なうことで、定着していなかった点などが明確になり、「慣れ」を作っていけます。
注意2)2回目とは言え、丁寧にやって行くのでそれなりに時間がかかることは覚悟しておきましょう。
1.CodecademyのWeb Fundamentalsを開く
2.前回の続きから実行
・最初は、”Introduction to HTML”から始める。
3.メモの作成
4.日々の決まった学習時間が終わったらメモをを読み返す。
・電車の中などで読み返すと良いと思います。
・この復習をしておくと、記憶の定着がよくなり、学習効率も上がります。

手順3(適宜調整)
・Codecademyを再度やっても良いかと思います。
・また、この段階になると大分知識を身につけるベースもついてきていると思うので、ドットインストールやCODEPREPなどを行っても良いかと思います。

■実践へ(次のステップ)
・上記、手順3を参照

□コツ・ポイント
■生い立ち
・私自身のHTML/CSSの学習のため複数のオンライン上のコーディング学習サイトを調べていたので作成を予定していました。
・また、他の学習コンテンツの学習者の方からのリクエストをきっかけに作成しております。

■次のステップ
・上記、手順3を参照

■参考文献

■参考レシピ

■お知らせ
lifenotes.jpの最新・更新情報は、Facebookメルマガで配信しています。


コメント

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です