無料コーディング練習所

カリキュラムに沿って6サイトを構築しながら独学できる無料サイト。
デザインカンプと完成版データがあり気軽にマークアップを学べます。無料ですが基礎からしっかり学べ脱初心者を目指せます。

無料コーディング練習所とは

Web制作初心者向けにデザインカンプ（デザイン見本）＋完成版コード一式を無償で提供してくれるコーディング教材サイトです。入門編から上級編まで複数のレベルが用意されており、自分の習熟に合わせて練習できる構成になっています。

具体的には、小さな企業サイトやセミナーサイト、ジムサイト、ゲームサイトなど、テーマが異なる複数の練習課題が用意されており、各課題にはデザインデータ（XD／Figma）と完成版の HTML/CSS／JS コードがダウンロード可能。

また他のページでは各種学習方法やポートフォリオ、転職のテクニックなど様々な記事がご覧いただけます。

レベル別課題	入門 → 初級 → 中級 → 上級と段階的にレベルアップできる課題が複数解説を見ながら進められるよう構成されています
デザインカンプデータ提供	課題ごとに XD／Figma のデザインデータを無料でダウンロード可能デザインの作り方の参考にも◎
完成版コード提供	解答例として参照可能
ポートフォリオ利用の許可	練習で作ったものをポートフォリオやブログで公開してもOK。ただしクレジット（一言リンク）を入れることが求められています

アカウント登録やログインなしで自由に利用可能です！

①興味のあるレベル・課題を選ぶ
入門編、初級編、中級編、上級編から自分のレベルに合ったものを選択

②デザインデータをダウンロード
課題ページの「デザインデータ（XD / Figma）」リンクからダウンロード

③完成版コードをダウンロード
HTML/CSS/JSの完成版コードをダウンロードし、答え合わせや参考にする

④コーディングしてみる
デザインカンプを見ながら、HTML → CSS → JavaScriptと順に組み立てていきます

⑤答え合わせ・修正
自分の書いたものと完成版を比較し、違いを確認。分からない部分を学び直します

⑥成果物を公開（任意）
練習で作ったサイトを自分のポートフォリオやブログに掲載してもOK。掲載時には “無料コーディング練習所” へのリンクを貼りましょう

※「課題を使ってコーディングしたものはポートフォリオやブログへ掲載してよい。ただし、掲載する際はリンクを貼ること」という条件が明記されています

※デザインデータをそのまま販売したり、再配布する行為は禁止

※その他、サイト運営者の規約が適用されるため、公開ページで注意書きなどを確認することをおすすめします