デザインカンプからのHTML/CSSコーディングの練習になる学習サイト
HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！
↑私が10年以上利用している会計ソフト！
Codestep
Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。
コーディングのポイントもまとめられています。
- デザインカンプあり（Adobe XD）
- 素材ファイルのダウンロード可能（ただしグレー画像になっています）
- コーディングのヒントあり
- 解答例（ソースコード）あり
Codewell
きれいで今風のデザインが用意されているCodewell。無料版では素材ファイルと完成形PNG画像がダウンロードできます。GitHubのアカウントが必要なので、先に取得しておくといいでしょう。英語ですが制作の手順は変わりません。デザインカンプ通り制作できたら、日本語にアレンジ！見え方の違いを確認したり、日本語でうまく表示させる方法を考えてみるといいですね。
余白をうまく使ったデザインが多く揃っています。
- 素材ファイルのダウンロード可能
- 毎週追加される課題テンプレート
- GitHubアカウントが必要
- Slackのコミュニティあり
- 有料会員になるとデザインファイルをダウンロード可能（Figma）
- 英語のみ
デザインファイルの配布サイト
学習サイトとしてではありませんが、デザインファイルのみを配布しているWebサイトは多く存在しています。コーディングの練習用教材として使ってみるといいですね！
HTMLやCSSの基礎学習が終わったら、あとは実際にWebサイトを作っていくのがスキルアップの近道です。焦らずひとつひとつ丁寧に作ってみてくださいね！
