ドットインストールの256timesを6クラスやってみた
こんにちは。Akiです。
前書き
もろもろ思うところあって、Web制作（HTML/CSS）を勉強しています。
Web制作の勉強っていろいろやり方があるとは思うのですが、ぼくはドットインストールという動画学習サービスを利用しています。
そしてそのドットインストールの中で、256timesという課題を出してもらうレッスンがあるのですが、そのレッスンを最初から順にやっていっています。
オンラインで参加できるのですが、最近は参加者も少なくてなんか運営が用意したbotみたいなのと一緒に受講しています泣
この記事の目的
256timesというサービスに興味あるけど、受講しようか悩んでる人がいたらその人の役に立つかも知れない、という思いと、振り返ってみて、俺ちょっとはできるようになってるかも、とニヤニヤするためにこの記事を書きました。
そもそも、なぜWeb制作を勉強しようと思ったか
ここは興味ないひとは読み飛ばしてください。
実は今、ぼくは休職中です。詳しくはこちら。
復職は目指しているものの、会社戻りたくないなという思いもあり・・・。
ちょっと手に職（会社に所属しなくても稼げる道）が欲しくなりました。まずは副業でもいいから、お金を自分で稼ぎたい。
その手段として、むかしちょっとかじったことがあるWeb制作はどうか、と思って学習してみています。もともと理系の大学院を卒業し、入社して１０年くらいは組み込み系ソフトウェアエンジニアだった（コーディングは３年くらいしかやってないですが）ので、プログラミングは馴染みがあります。
とはいえ、世の中そんなサクッと稼げるほど甘いもんじゃない という声が聞こえてきそうですが、もちろんすでに僕の頭の中も響いています。
でもまぁ学習が結構楽しくて、まずはやってみようかなと。（じゃっかんげんじつとうひ）
256timesの受講状況
現時点で僕が受講したのはこちらです。
上のクラスの方が最近受けたものです。
１クラス１週間かけて受講するので、7週間やり続けてる。振り返ってみると意外と頑張ってます。（最初の方は簡単だったのでそんな時間かからなかったです）
１週間の最後に出てくる自由課題は、運営曰く共有してもよい、とのことなので、自由課題の軌跡を列挙してみます。
256timesの自由課題の軌跡
書いて覚えるCSS Vol.1
自由課題は
【自由制作】 好きなCSSプロパティを紹介するカードを作ろう
でした。とてもかわいい感じ。はじめてのお使い感が出ています。
書いて覚えるCSS Vol.2
自由課題は
【自由制作】 こだわり物件をおすすめするカードを作ろう
でした。まだカードのスタイリングです。画像素材は提供されて、好きにカードをスタイリングしてね、という感じ。文章内容は適当です。猫付きの物件ってなんだ笑
書いて覚えるCSS Vol.3
自由課題は
【自由制作】 ロボットの紹介ページを作ろう
でした。これも画像素材だけもらって、内容は自分で好きに作ってね、という感じ。Web制作って、内容と見た目をコーディングして作るんですが、デザインとか色って大事じゃないですか。色とか適当で、デザインセンスないと無理じゃね？という時期です。おしゃれな色合いってなんでしょう？
書いて覚えるフレックスボックス
自由課題は
【自由制作】 新作ドリンクの紹介ページを作ろう
でした。少しWebサイトっぽくなってきたかも。カフェと言われて、スタバのブランドカラーをパクりました。少し見た目を意識してきます。（思春期）
書いて覚えるメディアクエリー
自由課題は
【自由制作】 こだわりカフェの紹介ページを作ろう
でした。ここでは、スマートフォンサイトとパソコンサイトの画面幅によって見やすいように見せ方変えようね、という課題。なんかそれっぽくなってきたぜ。スタバはおしゃれという先入観で、またスタバカラーをチョイス。デザインセンスってどうやって身に付けるんだろう。
スマートフォンでは縦に並べるだけだった各要素を、パソコン版では横並びにしたり、横に広い画像を表示させたりしてます。
画像は、最初はスマホ版、次がパソコン版。まぁなんかありそうじゃないですか？
フロントエンド案件修行 osumou flowers編
ここでついに案件修行です。
以下のような設定がありました。
知り合いから「ある有名力士がお花屋を始めるらしい。サイト制作を手伝ってみない？」と声をかけられました。以下のこだわり、要件をもとに制作を進めてみてください。
有名力士が花屋？という謎設定でした。
ヘッダー（上の帯）とヒーローエリア（上の帯の下のメイン写真）、フッター（下の帯）のデザインはもらって、それ以外の要素（Concepts / Services / Gallery）は画像と文字以外は自由にデザイン含めて作ってね、 という課題。
これはめっっっっっっちゃ大変でした。時間かかったし、デザインも思いつかないから「花屋 Webサイト おしゃれ」とかで検索して、これやってみたいな、というところを真似したりしてたら時間かかって・・けどなんかいい感じになった気がした。頑張った俺すごい。
ってか素材画像がおしゃれだととりあえずいい感じになる、ということに気付きました。あとは横幅いっぱいに画像置くとおしゃれ感増す。
Galleryのセクションは、画像だと分かりませんが横に流れるアニメーション入れてます。おしゃれ！
上がスマホ版、下がパソコン版です。縦長すみません。
最初の課題と最後の課題を見比べると、だいぶ成長してません？いや、してるはず！！
256timesけっこう楽しい
最初の方の課題は割と簡単でしたが、最後の課題はまじで大変でした。他にも案件修行とかあるんで、引き続きやってみようと思っています。