LP作成に必要なスキル

Progateで勉強した後のコーディング勉強(模写)の無料データ

Progateで勉強した後にコーディングの技術を上げるためにサイトの模写をしないといけません。

でも情報がいーっぱいあってどれを見ればいいかが分からないと思います

 

どのサイトのコーディング勉強(模写)をすればいいか分からない

ググれば情報がいっぱい出てきますが人によって同じサイトに対する難易度が違って「結局このサイトの模写の難易度はどうなんだろう?」と思うはずです。

ある人が「このサイトの模写は簡単」と言っても自分にとってやりやすいのとそうでないのがあるからしょうがないと思いますが。

私が初めてサイトの模写をした時どのサイトの模写をすればいいか分からずnoteの有料のデータを買いました。

今思えば簡単な内容ですがflexboxを知らなかったので1週間かけて必死で模写しました

 

有料データは買う必要がなかったかも

そして数ヶ月経って「あの時買ったデータは買う必要なかったな〜」と思いました、作成者からアドバイスを貰えないし添削みたいなものもしてもらえません

それと色んなサイトの模写をして思ったのですが中身の一部のレイアウトに似ているんです

言い方が悪いですがあるサイトの一部を取ってきて中身の画像を変えて使ってる印象なんです。

他のデータを見てないから分からないですが初心者用なので多分どのデータも似たり寄ったりだと思います。

「あれを実装してこれを実装して」って色々盛り込むと初心者では挫折する可能性があります。

YouTubeで情報を発信しているある若いエンジニアがいて有料データを販売していますが高くて難易度が高いので購入しない方がいいです。

YouTubeでプログラミングの勉強法を解説するエンジニアに注意
YouTubeでプログラミングの勉強法を解説するエンジニアに注意 「WEB制作の仕事は稼げる」、「3ヶ月で5万稼ぐのは余裕」と言ったりYouTubeで毎日の様に情報発信をする20代のエンジニアが...

 

だから無料のデータを作った

無料のデータがないなら私がデータを作って配布すればいいと思い無料のXDのデザインカンプを作りました

私の今の実務はWEB制作なのでWordPressでどんな事ができるのかをテーマにしています。

↓からダウンロードできます。

https://note.com/uhei/n/n72be5a2b053e

 

Progateの内容のみでコーディングできる

コーディングする内容ですがProgateで学んだ内容のみでできるようにしています。(Progateで学ぶ内容は確認済みです)

だからProgateでちゃんと勉強した後なら時間がかかってでもコーディングは完成できるようになっています。

難しい実装は盛り込んでないですが初めて模写する人にとっては難しく感じるかもしれません

 

レスポンシブデザインにはなってません

WEBサイトの模写をするなら必ずレスポンシブデザインになっていますが最初はPC画面のみの方が負担が少ないのでPC画面のみです。

初めて模写をする時「自分にできるんだろうか?」と思うかもしれませんが必ずできるので諦めずに完成して下さい。

私もコーディングをしていて完成形のコードも付けていますのでコーディングが分からなくなったら見て下さい。

クラスの付け方が変わった付け方になっていますが気にしないでください、BEMという命名規則でクラス名を付けています。

実務経験42日目、命名規則BEMでコーディングすると早い
実務経験42日目、命名規則BEMでコーディングすると早い 命名規則BEMでコーディングすると早くなる コーディングをしていると同じ内容が何度も出てくる事がよくあります。 特に商品ペー...

WEBの世界は実務未経験者には狭い門で最初がキツいですが私のデザインカンプでコーディングする事が実務に繋がれば嬉しいです。

今回が一作目ですが二作目ができたら配布します。

二作目はレスポンシブデザインも加える予定です。