模写コーディングでスキルアップ！おすすめサイト
模写コーディングは、コーディングスキルとデザイン理解を同時に向上させるための効果的な学習方法です。 実際のWebデザインやアプリケーションを模倣し、コードで再現することで、HTML、CSS、JavaScriptの知識を深めることができます。 今回は、模写コーディングにおすすめのサイトを紹介し、それぞれの特徴やメリットを解説します。これから紹介するサイトを利用して、あなたのスキルを一段と引き上げていきましょう！
Code Jump
初心者から上級者まで対応した模写コーディング課題が提供されています。
レベル別に挑戦できるので、まずは簡単なものからコーディングしていき、徐々にレベルアップしながら、様々な実装について学ぶことが出来ます。
目安となる単価が記載されていたり、XDやFigmaなどのデザインカンプデータが提供されているのも、実践のようにコーディング出来ておすすめです。
マネるデザイン研究所
https://maneru-design-lab.net/2463
こちらは、デザインの「マネしたいポイント」が記載されており、デザイナーを目指す人の勉強になるサイトです。
とても素敵なサイトが多く紹介されているので、模写コーディングするときに、モチベーションアップにもなります。
デザインカンプがあるわけではないので、基礎力が付いた人が、「次は何を作ろうかな～」っと迷ったときに良さそうですね。
Pas-Pol
こちらは特に、WordPressを使ってサイト構築の練習をするときに、模写するサイトとしておすすめですね。
- カスタム投稿
- カスタムフィールド
- WordPressのテンプレート階層
- アーカイブページや記事詳細ページ
など、WordPressの便利な機能を使ったサイト構築が学べます。
プロゲート
プログラミングの基礎を勉強するのに有名なサイトですね。
サービスも良いですが、CSS設計としてBEM記法などを勉強している人にも、模写するときに勉強になるサイトかと思います。
Frontend Mentor
https://www.frontendmentor.io/
こちらも模写コーディングにおすすめです。
英語ではありますが、様々な課題があり、難易度別にも分かれているので、スキルアップできるでしょう。
また、面白い機能として、他の人からのコードレビューを受けられるというものがあります。