自作でWebサイトを作ってるなう！！
サイト作成のために独学じゃしんどいなーと感じたので、ぼくは「コラボキャンプ」という1ヶ月のプログラムに参加しています。
（*関連：【1ヶ月で就活終了！？】18卒は必見の「コラボキャンプ」がすごすぎる！！）
今日はその２回目の授業があったのでそのレボート記事を書きます〜！
ぜひぜひ見てやってください^w^
なお一回目の授業のレボートも公開してますのでそちらもどうぞ。
（*関連：【レボート】webデザインを学ぶ「コラボキャンプ」の最初の授業に参加したから感想書くぞ！【Week1】）
というわけで、さっそくいってみましょう。
今日のメインポイント：コーディング
webサイトを作る上で必須の流れは「要件定義」、「デザイン」、「コーディング」、「公開」の4つです。
（*関連：自分でWebサイトを作るために必要な4つのステップ）
Week1の授業では4つのうち要件定義とデザインの2つを学びました。
それに対し、Week2の授業では実際のコーディングについて勉強しました^w^
流れを順に見ていきましょう。
1.作ったサイトデザインについて，フィードバックをするワーク。
まずはPhotoshopで作ったサイトのモックアップ（設計図）について、フィードバックをもらうワークが行われました。
講師の方のアドバイスは、「背景をぼかすこと」と「記事タイトルの文字を小さくする」の2点でした。
アドバイスを受け修正したデザインをもとに、実際にコーディングをしていくことになります。
2.徹底解説：HTML/CSSって何？
実際にコーディングするときに欠かせない言語は「HTMLとCSS」という2つの言語です。
この2つの言語について、講師の方から詳しい説明を受けました。
3:コーディングの前にすべき「ボックス分け」
コーディングをいきなり始める前に、まず「ボックスわけ」を行いました。
これは、印刷したモックアップを要素分けして、それぞれを四角く囲む作業のことです。
コーディングの質をあげるために有効な方法なのだとか。
▲このように、原始的に鉛筆を使って区分けしていきます。
これによって、コーディング時の作業効率をグンとあげることができるんですよ。
4.休憩後、コーディング課題をみんなで行う。
休憩を挟んで、コーディングの課題をみんなで行いました。
課題は、「以下の画像のものを、ブラウザ上で表現せよ」というものでした。
▲ほおおお〜！！
20分くらい頑張って、ぼくは以下のようなものを完成させました。
▲んー微妙www
周りに影は作れてないし、下のマークはスクショだしwwwwww
コーディング、どうやらまだまだのようです。
▲講師の方の解説も充実していました。
ざっくりとした解説で、回答コードは授業後に共有されました。効率めっちゃいい！！
5.自分のサイトを実際にコーディング！！
さあ！！最後にメインディッシュ！！
自分のサイトを作っていくタスクが与えられました。
このコラボキャンプは徹底して「実践型」のプログラムになっていて、授業中に主体的に学ぶことができるので、「授業を受ける」という従来の学習形態が苦手なひとには超おすすめです。
さあ、制限時間をフルに使い、完成したサイトを御覧ください！！
▲ひどいwwwwwww
どうやらコーディングが致命的にザコいようです。
というわけで、サイトデザインの構築は宿題となってしまいました・・・。
終わりに
というわけで、Week2の授業はこんな感じでした。
宿題は「サイトのコーディング」、「コーディング課題の理解」、「自習の予習」の3つ。
なかなかエグい内容となっていますね。
かっこいいWebサイトを作るため、来週も頑張ります^w^ノ
（*関連：【1ヶ月で就活終了！？】18卒は必見の「コラボキャンプ」がすごすぎる！！）
（*関連：【レボート】webデザインを学ぶ「コラボキャンプ」の最初の授業に参加したから感想書くぞ！【Week1】）
