見出し画像

Progateで勉強した後の模写コーディング用のXDのデザインカンプ

ProgateのHTML、CSSコースで勉強をした後のコーディングはひたすら模写をした方がいいですがネットを探せば何を模写すればいいかがレベルごとに説明されています。

私が初めて模写コーディングをした時はWordPressテーマのWriteのトップページを模写したのですがその時の自分にとって難しすぎる内容で危うく挫折するところでした

多分1週間位はひたすら悩んでいたと思います。

最初から難しい内容を扱わない方がいい

「ひたすらググってやりたいんだ」という人は難しい内容を扱ってもいいと思いますがそうではない人もいるはずです。

だからいきなり難しい内容のコーディングをしたくない人のためにProgateのHTML、CSSコースの内容のみで模写をすることができるデザインカンプを作りました。

恐らくこの内容で挫折することはないと思いますが初めて模写する人は1週間位かけても全く問題ないのでぜひやり遂げて下さい。

最初は完成することが大事なのでデザインカンプの通りにきっちりコーディングができなくてもいいです

私が初めて模写した時はそれはもう酷かったです 笑

この模写が完成したら「やればできるんだ」という実感が持てると思いますので頑張ってやってみてください。

なお無料で使うことができますが添削みたいなのは基本しませんがどうしてもわからない部分があったら私に質問してもらっても大丈夫です

レスポンシブには対応していませんのでレスポンシブにしたかったら自分で勝手に作り変えて下さい。

一応私がコーディングしたファイルも付けておきます。

完成形は↓です。

画像1

ダウンロードは↓です。

WordPressを使ったWEBサイトを作るための解説の記事もありますのでよかったらどうぞ。

コーディングデータを使ってオリジナルテーマの作り方を解説していますがこれも全て無料です。

ここからどうぞ。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2
プロフィールをご覧頂きありがとうございます!大学受験の予備校で数学の授業をしています!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。