自作でWebサイトを作ってるなう!!
サイト作成のために独学じゃしんどいなーと感じたので、ぼくは「コラボキャンプ」という1ヶ月のプログラムに参加しています。
(*関連:【1ヶ月で就活終了!?】18卒は必見の「コラボキャンプ」がすごすぎる!!)
今日はその2回目の授業があったのでそのレボート記事を書きます〜!
ぜひぜひ見てやってください^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】)