Progateで勉強した後にコーディングの技術を上げるためにサイトの模写をしないといけません。
でも情報がいーっぱいあってどれを見ればいいかが分からないと思います。
目次
どのサイトのコーディング勉強(模写)をすればいいか分からない
ググれば情報がいっぱい出てきますが人によって同じサイトに対する難易度が違って「結局このサイトの模写の難易度はどうなんだろう？」と思うはずです。
ある人が「このサイトの模写は簡単」と言っても自分にとってやりやすいのとそうでないのがあるからしょうがないと思いますが。
私が初めてサイトの模写をした時どのサイトの模写をすればいいか分からずnoteの有料のデータを買いました。
今思えば簡単な内容ですがflexboxを知らなかったので1週間かけて必死で模写しました。
有料データは買う必要がなかったかも
そして数ヶ月経って「あの時買ったデータは買う必要なかったな〜」と思いました、作成者からアドバイスを貰えないし添削みたいなものもしてもらえません。
それと色んなサイトの模写をして思ったのですが中身の一部のレイアウトに似ているんです。
言い方が悪いですがあるサイトの一部を取ってきて中身の画像を変えて使ってる印象なんです。
他のデータを見てないから分からないですが初心者用なので多分どのデータも似たり寄ったりだと思います。
「あれを実装してこれを実装して」って色々盛り込むと初心者では挫折する可能性があります。
YouTubeで情報を発信しているある若いエンジニアがいて有料データを販売していますが高くて難易度が高いので購入しない方がいいです。
だから無料のデータを作った
無料のデータがないなら私がデータを作って配布すればいいと思い無料のXDのデザインカンプを作りました。
私の今の実務はWEB制作なのでWordPressでどんな事ができるのかをテーマにしています。
↓からダウンロードできます。
https://note.com/uhei/n/n72be5a2b053e
Progateの内容のみでコーディングできる
コーディングする内容ですがProgateで学んだ内容のみでできるようにしています。(Progateで学ぶ内容は確認済みです)
だからProgateでちゃんと勉強した後なら時間がかかってでもコーディングは完成できるようになっています。
難しい実装は盛り込んでないですが初めて模写する人にとっては難しく感じるかもしれません。
レスポンシブデザインにはなってません
WEBサイトの模写をするなら必ずレスポンシブデザインになっていますが最初はPC画面のみの方が負担が少ないのでPC画面のみです。
初めて模写をする時「自分にできるんだろうか？」と思うかもしれませんが必ずできるので諦めずに完成して下さい。
私もコーディングをしていて完成形のコードも付けていますのでコーディングが分からなくなったら見て下さい。
クラスの付け方が変わった付け方になっていますが気にしないでください、BEMという命名規則でクラス名を付けています。
WEBの世界は実務未経験者には狭い門で最初がキツいですが私のデザインカンプでコーディングする事が実務に繋がれば嬉しいです。
今回が一作目ですが二作目ができたら配布します。
二作目はレスポンシブデザインも加える予定です。
