【レボート】Webサイト制作を学ぶ「コラボキャンプ」でコーディングを学んできたぞ!【Week2】

自作でWebサイトを作ってるなう!!

サイト作成のために独学じゃしんどいなーと感じたので、ぼくは「コラボキャンプ」という1ヶ月のプログラムに参加しています。

(*関連:【1ヶ月で就活終了!?】18卒は必見の「コラボキャンプ」がすごすぎる!!

今日はその2回目の授業があったのでそのレボート記事を書きます〜!

ぜひぜひ見てやってください^w^

なお一回目の授業のレボートも公開してますのでそちらもどうぞ。

(*関連:【レボート】webデザインを学ぶ「コラボキャンプ」の最初の授業に参加したから感想書くぞ!【Week1】

というわけで、さっそくいってみましょう。

今日のメインポイント:コーディング

スクリーンショット 2016-06-15 22.25.10

webサイトを作る上で必須の流れは「要件定義」、「デザイン」、「コーディング」、「公開」の4つです。

(*関連:自分でWebサイトを作るために必要な4つのステップ

Week1の授業では4つのうち要件定義とデザインの2つを学びました。

それに対し、Week2の授業では実際のコーディングについて勉強しました^w^

流れを順に見ていきましょう。

1.作ったサイトデザインについて,フィードバックをするワーク。

まずはPhotoshopで作ったサイトのモックアップ(設計図)について、フィードバックをもらうワークが行われました。

講師の方のアドバイスは、「背景をぼかすこと」と「記事タイトルの文字を小さくする」の2点でした。

アドバイスを受け修正したデザインをもとに、実際にコーディングをしていくことになります。

2.徹底解説:HTML/CSSって何?

実際にコーディングするときに欠かせない言語は「HTMLとCSS」という2つの言語です。

この2つの言語について、講師の方から詳しい説明を受けました。

3:コーディングの前にすべき「ボックス分け」

コーディングをいきなり始める前に、まず「ボックスわけ」を行いました。

これは、印刷したモックアップを要素分けして、それぞれを四角く囲む作業のことです。

コーディングの質をあげるために有効な方法なのだとか。

スクリーンショット 2016-06-15 22.25.51

▲このように、原始的に鉛筆を使って区分けしていきます。

これによって、コーディング時の作業効率をグンとあげることができるんですよ。

4.休憩後、コーディング課題をみんなで行う。

休憩を挟んで、コーディングの課題をみんなで行いました。

課題は、「以下の画像のものを、ブラウザ上で表現せよ」というものでした。

スクリーンショット 2016-06-15 20.35.00

▲ほおおお〜!!

20分くらい頑張って、ぼくは以下のようなものを完成させました。

スクリーンショット 2016-06-15 20.25.03

▲んー微妙www

周りに影は作れてないし、下のマークはスクショだしwwwwww

コーディング、どうやらまだまだのようです。

スクリーンショット 2016-06-15 22.26.29

▲講師の方の解説も充実していました。

ざっくりとした解説で、回答コードは授業後に共有されました。効率めっちゃいい!!

5.自分のサイトを実際にコーディング!!

さあ!!最後にメインディッシュ!!

自分のサイトを作っていくタスクが与えられました。

このコラボキャンプは徹底して「実践型」のプログラムになっていて、授業中に主体的に学ぶことができるので、「授業を受ける」という従来の学習形態が苦手なひとには超おすすめです。

さあ、制限時間をフルに使い、完成したサイトを御覧ください!!

スクリーンショット 2016-06-15 22.27.08

▲ひどいwwwwwww

どうやらコーディングが致命的にザコいようです。

というわけで、サイトデザインの構築は宿題となってしまいました・・・。

終わりに

というわけで、Week2の授業はこんな感じでした。

宿題は「サイトのコーディング」、「コーディング課題の理解」、「自習の予習」の3つ。

なかなかエグい内容となっていますね。

かっこいいWebサイトを作るため、来週も頑張ります^w^ノ

(*関連:【1ヶ月で就活終了!?】18卒は必見の「コラボキャンプ」がすごすぎる!!

(*関連:【レボート】webデザインを学ぶ「コラボキャンプ」の最初の授業に参加したから感想書くぞ!【Week1】