Progateで勉強した後の模写コーディング用のXDのデザインカンプ
ProgateのHTML、CSSコースで勉強をした後のコーディングはひたすら模写をした方がいいですがネットを探せば何を模写すればいいかがレベルごとに説明されています。
私が初めて模写コーディングをした時はWordPressテーマのWriteのトップページを模写したのですがその時の自分にとって難しすぎる内容で危うく挫折するところでした。
多分1週間位はひたすら悩んでいたと思います。
最初から難しい内容を扱わない方がいい
「ひたすらググってやりたいんだ」という人は難しい内容を扱ってもいいと思いますがそうではない人もいるはずです。
だからいきなり難しい内容のコーディングをしたくない人のためにProgateのHTML、CSSコースの内容のみで模写をすることができるデザインカンプを作りました。
恐らくこの内容で挫折することはないと思いますが初めて模写する人は1週間位かけても全く問題ないのでぜひやり遂げて下さい。
最初は完成することが大事なのでデザインカンプの通りにきっちりコーディングができなくてもいいです。
私が初めて模写した時はそれはもう酷かったです 笑
この模写が完成したら「やればできるんだ」という実感が持てると思いますので頑張ってやってみてください。
それとこのデザインカンプでコーディングができれば一般企業ならコーダーとして働くのも可能だと思います。
私が初めてコーディングした時は今回の内容より遥かに簡単でした。
レスポンシブには対応しています、ブレイクポイントはスマホ→タブレット→PCの順に375px→768px→1920pxにしていますが無理して私のサイズに合わせなくても大丈夫です。
完成形は↓です(これはPCサイズです)。
ダウンロードは↓です。
ばっちり完成して実務に繋がったら幸いです。
WordPressを使ったWEBサイトを作るための解説の記事もありますのでよかったらどうぞ。
コーディングデータを使ってオリジナルテーマの作り方を解説していますがこれも全て無料です。
2021年にWordPressで初めてサイトを作る人が完全無料で使えるコミュニティを作ることにしていますので作ったら告知します。
この記事が気に入ったらサポートをしてみませんか？