今回は、多くの方が挑戦している「iSara」さんの模写コーディングについて、僕の主観で書いていこうと思います。
今回書いていく内容をまとめます。
- 模写を通して得られたこと
- 模写を通して学んだコーディングスキル
と、その前に模写をした僕のレベルについて説明すると、
Progateでweb制作の基礎を固め終わったところです。
当時は、bootstrapすら知りませんでした。基本的には、フレームワークを使わずに全てコーディングしました。
これだけだと、わかりにくいと思うので、Progateの達成率のスクショを貼っておきます。
では、やっていきましょう！
模写を通して得られたこと
模写は、実戦に近いことを学ぶことができます。
得られたことをリストアップすると、
- サイトを見ることで、作り方がなんとなくわかるようになる
- 知らないことが多いので、たくさん検索する→検索力が鍛えられる
- 何をすればいいかわからないと言う状況から抜け出すことができる。
- スキルがグングン上がる
- 自身がつく
- ポートフォリオが一つ完成する
ざっとこんな感じですかね。
当時、何から手をつければいいのかわからなかった僕にとっては、成長しかありませんでした。
個人的に、上のリストで一番大きな力がついたな、と思うことは、検索力がついたことです。
僕は、あまりパソコンの経験がなかったので、キーワードで検索するのではなく、「〇〇がしたい」みたいな感じで検索をかけていたのですが、効率的に情報を得るためには、キーワード検索をする必要があるので、頑張って身に付けました。
制作期間は、１ヶ月一杯かかりました。ほとんど、わからない事だらけだったので、たくさん検索をして、その度に軽くメモしたりして、勉強をしました。
模写を通して学んだコーディングスキル
これらもたくさんあるので、リストアップすると、
- 背景画像の使い方
- 謎の余白の対応方法
- ポジションの使い方
- jQueryのプロゲートでやっていない便利なメソット
- jQueryのレスポンシブ対応
- cssのcalc関数
など、パッと思い浮かぶのは、こんな感じです。
僕が苦労したところは、謎の余白、jQueryのレスポンシブ対応についてです。
これらについては、また別の記事で書いていこうと思います。
まとめ
以上が、僕がiSaraさんの模写で学んだことです。
実際にサイトのコーディングをする経験をする事で、先ほど挙げたような力がついたり、iSaraさんのような、オシャレなサイトを作ると、やりがいも感じ、モチベーションアップにもつながります。
僕のサイトでも、ポイントになりそうなところを抜粋して、記事を書いていこうと思うので、是非、自分の力試しやスキルアップのために作ってみてください。
特に、Progateが終わって、次に何をすればいいかわからない。と言う方には、考えるより手を動かす方が効率がいいと思うので、お勧めします。
この記事でやってみようと思っていただけたら、嬉しいです。
