この記事では、HTML・CSS・JavaScriptの基本を学んだ人が、次のステップとして実際のコーディングに挑戦できるサイトを紹介しています。以下に5つのサイトをご紹介します。

1からコーディングを行うことでグンッとプログラミングスキルが上がるはずです！

無料コーディング案内所

『無料コーディング練習所』では、完全無料のコーディング教材を入門編から上級編まで６サイトをコーディングすることができます！

SassからCSS設計まで学習できるのでコーディングスキルが伸びること間違いなしです！

PENGIN BLOG

PENGIN BLOGはコーディングやWebデザインの記事が盛りだくさんのサイトです。加えて、完全無料でコーディングの練習ができます！

このブログのコーディング課題は、初心者から上級者まで自分のレベルに合わせて取り組むことができます！

レスポンシブコーディングやハンバーガーメニューの実装方法、jQueryを使ったアニメーションなんかも学ぶことができます！

デザインがかっこよく、コーディングで詰まってしまっても解説記事を見ればすぐに解決できるのでとても良心的です！

模写修行

模写コーディングサイトの中でもかなりデザイン性が高く、解説記事も綺麗にまとめられているのでとても学習しやすい教材です！

Codejump

実案件を想定したコーディングを練習でき、課題も豊富なので自分に合ったデザインカンプが見つかること間違いなしです！

しょーごブログ

Web制作を生業としフリーランスとして活躍しているしょーごさんが作ったコーディング課題です！
プロからのレビューをもらえるので、この課題をクリアすればどこへ行っても活躍できるスキルを手に入れることができます！

おすすめの進め方

番外編

番外編なのですが、私が一番コーディングをしていて楽しかったトレーニングとしては

自分の好きなアーティストやアイドルのホームページを模写するというやり方です！

当時乃木坂や欅坂が好きだったのでそのホームページを真似してコーディングをしていたらだんだんと知識が身になっていきました！

好きなものを見ながらコードを書けるのでなぜか長時間できてしまうし、プロ中のプロの方が作った複雑なレイアウトも実装できるので凄く力になりますよ！

まとめ

今回は模写コーディング課題を提供しているサイトを4つ紹介しました！

私がよく使っていたサイトは無料コーディング案内所とCodeJumpです。なるべくソースコードは見ないで学習するのが一番の成長につながると思うのでぜひ実践してみてください！