Webサイト制作を学ぶ「コラボキャンプ」受講レポート!【Week3】

みなさんこんにちはどろますた運営の伊藤っす。

今日はwebサイト制作を学ぶ「コラボキャンプ」の第3回目の授業があったのでレポートします!

さっそくいってみましょー。

▼過去2回の受講レポートはこちら。

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

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

まずはサイトのコーディングの確認から!

まずは宿題となってたサイトコーディングの進捗確認から。

前回の授業で、ぼくはこんなサイトをコードで作りました。

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

▲ひどいwwww

正直周りに遅れをとってました。

1週間かけて(正確には直前の1日)修正して、次のようなデザインができました。

スクリーンショット 2016-06-23 0.57.05

▲(ドヤッ)

なんとか初回にPhotoshopで作ったモックアップに近づいた感じ。

とはいえSNSボタンはバラバラやし、右端に妙な隙間があるし、ぶっちゃけまだまだレベルが低いのが客観的にわかります。

JavaScriptの基礎をおさらい

スクリーンショット 2016-06-22 23.52.07

▲続いてJavaScript(Web上で物理的に動く唯一のプログラミング言語)の基礎を講師の方から学びました。

スクリーンショット 2016-06-22 23.52.15

▲詳しい部分は省きますが、プラグインの実装方法や、Web上でのスライドショーの作り方などを実践的に学びました。

実際に手を動かしてゴールまでたどり着く必要があるので、定着もはやいっす。

講師の方が巡回されているので、サボれないところがまたいいですね。

サイトをスマホ対応にするやり方を学ぶ

最後に、レスポンシブデザイン(PCだけじゃなく、携帯を含むデバイスに対応したデザインのこと)を学び、

実際に時間内に学習内容を活かして簡単なデザインを作るワークが行われました。

スクリーンショット 2016-06-22 23.52.45

▲左っ側がPC用デザイン、右っ側が携帯用デザイン。

スクリーンショット 2016-06-23 0.49.12

▲ワークは15分と短く、ぼくはここまでしかできず。。。

携帯対応以前に、フツーのデザイン構築さえ失敗しました。

修行が足りませんね。。

終わりに

スクリーンショット 2016-06-22 23.53.15

以上、第3回目の授業レポートでした!

めっちゃ内容濃くて大変でしたが、だんだん知識が増え楽しくなってきました^w^

第4回の授業では、受講者が白板の前で完成した自分のサイトを発表します。

アウトプット型の授業は正直しんどいことも多いですが、あと1週間で終わるので頑張ります!!

スクリーンショット 2016-06-22 23.53.22

▲キャンプが行われているARCO TOWER。

高級感にあふれていて場違い感が半端じゃありません、、笑

ここに来るのもあと1回。がんばるぞー!!