HTML/CSSコーディング練習サイト7選【無料あり】
HTML/CSSのコーディング練習をしてコーディング力を上げようとする時にぶつかる悩みとして、
- そもそもどう練習すればいいんだろう
- どのぐらいのレベルを目指せば仕事にできるんだろう
- おすすめの課題、サイトはどれだろう？
といったものがあります。
実際コーディングの練習課題を検索して探してみると、数多くのものがヒットしますよね。
そこで今回は、「HTML/CSSコーディング練習におすすめのサイトを精選して紹介」します。
これらをこなすだけで、実務レベルのコーディング力を手に入れることができます。
これを話している私自身はフリーランスエンジニア歴8年でコーディング案件を200件以上納品している実績があり、現役でWeb制作のスクールメンターも行っています。
今回の記事を見ていただくことで、「どのHTML/CSS練習サイト・コーディング課題を選べばいいのか分かるようになる」ので、是非最後まで御覧ください。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。2024年からは外資のWeb系企業でディレクター業も兼務。月数万PVのブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
2025年には「8日以内提出」という納期と「修正10箇所以内」という品質項目が課された、模擬案件編も追加
コーディングに自信をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
HTML/CSSコーディング練習の前提
Progateと基礎学習は終わらせておこう
他のサイトではコーディング練習にProgateをおすすめサイトに上げていたりしますが、今回はあえてそこは終えている前提で話していきます。
Progateは「HTML/CSSのFlexbox編」までを終わらせましょう。道場編はやらなくていいです。
このあたりは以下の記事を参考にしてください。
また、Progate後に基礎学習として、1冊ですべて身につくHTML & CSSとWebデザイン入門講座などの基礎学習を本で行っておくといいです。
このあたりの基礎学習に関しては以下の記事が参考になるはずです。
なぜこれらの基礎学習が必要なのでしょうか？
これから紹介する学習サイトの課題は、基本的に基礎学習を終えていることを前提にしているからですね。
学習サイトでは、「デザインカンプからのコーディング」を練習していくので、基礎力がないと厳しいです。
デザインカンプからのコーディングとはなんぞやに関しては、以下の記事を御覧ください👇
コーディング練習におすすめのサイトの選定基準
コーディング練習ができるサイトは無数にありますが、ここでは次の4つを満たすものだけを選びました。
- 国内のサービスであること（日本語の解説と、日本の商習慣に沿った案件想定があるもの）
- 基礎学習を終えた「次」に使えること（タグとプロパティを覚える段階の教材ではなく、実際に1つのサイトを組み上げる練習ができるもの）
- 無料で試せる範囲があること（いきなり有料でしか中身がわからないものは除外）
- 答え合わせの手段が用意されていること（作りっぱなしで終わらないこと）
逆に、あえて外したものもあります。Progateのように、タグとプロパティを穴埋め形式で覚える段階の教材はこの記事の対象外です。これらは「練習サイト」ではなく「練習を始める前に終わらせておくもの」だからです。
まだタグとプロパティに自信がない方は、先にプログラミング学習を始めるならProgateからがおすすめを読んでから戻ってきてください。海外サービスも、解説が英語で挫折率が上がるため除外しています。
コーディング練習におすすめのサイト7選
まずは7サイトの全体像です。見てほしいのは「答え合わせの方法」の列で、ここが各サービスの性格を一番はっきり分けています。
| サービス | 料金 | 課題数／難易度 | デザインカンプ | 答え合わせの方法 | 向いている人 |
|---|---|---|---|---|---|
| Codejump （旧 Codestep） | 無料 実践編（仮想案件）のみ有料 | 33課題／入門〜応用 HTML/CSS 18・番外編 10・WordPress 5＋実践編 | ◎ XD・Figma を28点無料配布 | デモサイト＋レイアウト構成図＋コーディング例のソースコード（自己比較） | とにかく数をこなしたい人／WordPressとサーバー公開まで一気に触れたい人 |
| 無料コーディング練習所 | 完全無料 | 7課題／準備〜上級 入門カフェ1P〜上級 企業サイト8P | ◎ Figma・XD＋完成版コード | 完成版コーディングデータ＋1課題2万字級の解説（自己比較） | 解説を読み込んで、理屈から理解して進めたい人 |
| 模写修行 | 完全無料 LINE登録でアクセスパス取得 | 9教材／初級〜上級 初級3・中級3・上級3 | ○ XD＋スタイルガイド＋書き出しデザイン | パーツ単位のサンプルコード＋Web解説（中級以上はSCSS）（自己比較） | 1サイト丸ごとで力尽きる人。区切りごとに答え合わせしたい人 |
| mosya （Progateプロプランに統合） | プロプラン 月2,490円 年額29,880円／2026年5月に単体プラン廃止 | 「模写」式ドリル3コース／入門〜実践 CSSアニメーション・Web制作で使えるJS・サイト模写実践 | △ ブラウザ内で見本と比較（Figma実践あり） | 自動採点（マークアップ採点＋ビジュアル採点）／AI質問 1日40回 | 環境構築でつまずきたくない人。その場でフィードバックが欲しい人 |
| ドットインストール | 無料レッスンあり プレミアム 月1,480円（12ヶ月一括で月1,080円） | 577レッスン／動画8,634本／入門〜中級 | × なし | 動画どおりに書けたかを確認（プレミアムはソースコードの閲覧・比較可） | 手を動かしながら全体の流れを掴みたい人 |
| 忍者CODE | 問題集は無料 独学プラン 98,000円〜（買い切り） | 無料問題集416問／入門〜中級 | × 無料問題集にはなし（有料コースは制作課題あり） | 問題集は正誤判定／有料プランは実践課題のフィードバック（独学プランは課題チェックなし） | すきま時間に知識の穴を潰したい人 |
| しょーごログ コーディング練習課題 | 入門編は無料 以降は買い切り（セット割あり） | 10教材／入門〜実務レベル 入門・初級×3・中級・中級Ex・上級(WP7ページ)・模擬案件・JS特訓・Photoshop編 | ◎ Figma中心（上級はXD、Photoshop編はPSD） | 現役プロによるレビュー（複数回・期限なし）＋表示確認 | 「これで合っているのか」を人に判定してほしい人／実績として出せる制作物が欲しい人 |
❶Codejump（コードジャンプ）｜旧Codestep・無料の課題数は国内最多
| HTML/CSS 練習サイト | 18サイト（入門編6・初級編5・中級編1・上級編3・応用編3） |
|---|---|
| 番外編 | 10課題（疑似要素・position・ドロップダウン／jQueryのアコーディオン・slick・Datepicker など） |
| WordPress 練習サイト | 5サイト（入門編2・初級編2・中級編1） |
| 実践編 | 実案件をモデルにした仮想案件（有料） |
Codejump（コードジャンプ）は、以前「Codestep（コードステップ）」という名前で運営されていた練習サイトです。名称変更後も更新が続いていて、無料で公開されている課題数は国内で最多クラスです。
デザインカンプの配布からサーバー公開の解説まで揃っていて、独学でWeb制作を一周できる構成になっています。
多彩な課題が用意されている
CodeJumpの特徴は、とにかく大量の課題が掲載されていて、コーディング練習に困ることがない！ということでしょう。
入門編だけでこんなに数がありますし、
実案件をモデルにした高難易度の実務編もたくさん揃っています（こちらは有料）
各課題には答えのソースコードが記載されているのも丁寧だと思いますね。初学者の頃は
いきなりデザインからコーディング難しい・・・手が進まない・・・
ということも多いと思います。その場合に答えがあれば「写経」することもでき、挫折率を低くすることができますね。これは大きいと思います。
また、実案件に限りなく近い「Codejump Pro」というものもあり、こちらは仮想案件にチャレンジしていくものになります（月額課金のサブスク形式）
とにかく初心者から中級者まで幅広く網羅していますね！
メリット
- XD・Figmaのデザインカンプを28点、無料で配布している。デモサイトの模写だけでなく、実務と同じ「カンプを開いて数値を拾う」練習ができる
- 各課題に想定の設定単価が書かれていて、この規模のサイトがいくらの仕事なのかという感覚も掴める
- レイアウト構成図（ヒント）→ コーディング例のソースコード、と段階的に用意されているので手が止まりにくい
- レンタルサーバーの契約・ドメイン取得・FTPアップロードまで解説があり、公開まで無料で完走できる
- 制作したサイトはポートフォリオへの掲載OK
注意点
解答コードはあるが、自分の書き方が実務で通用するかは判定されない。見た目は同じになったけれど、この書き方で合っているのか——という疑問は残る
CodeJumpはコーディング練習本も出していたりするので、こちらも参考になるはずです。
❷ 無料コーディング練習所｜解説の厚さが段違い
上位の比較記事がほぼ全て掲載している定番教材です。全7課題が完全無料。「このプロパティをこう書く」ではなく「なぜこの組み方にするのか」まで踏み込んで書かれています。
| レベル | 題材 |
|---|---|
| 準備編 | コーディングの基礎・環境設定 |
| 入門編 | カフェサイト（1ページ） |
| 初級編 | 企業サイト（下層2ページ含む） |
| 中級編1〜3 | セミナーサイト（縦長1ページ）／ジムサイト／ゲームサイト |
| 上級編 | 企業サイト（8ページ） |
メリット
- 入門編1ページだけで2万字を超える解説。理屈から理解したい人に向く
- デザインデータはFigmaとXDの両方を用意。完成版のコーディングデータも配布
- 上級編は8ページ構成。下層ページの共通パーツをどう使い回すかという設計の練習になる
注意点
- 解説が長いぶん読んだだけで学習した気になりやすい。必ず自分のエディタで手を動かしてから解説を開くこと
- 課題数は7つと少なめ。量が必要な段階ではCodejumpと併用したい
写経で終わらせず、なぜそう書くのかを理解しながら進めたい人におすすめです。
❸ 模写修行｜パーツごとに答え合わせできる
| レベル | 教材 |
|---|---|
| 初級（3） | ハンバーガーショップ／サービスサイト／山頂ジャーナル |
| 中級（3） | インテリアショップ／写真家／シャンプーEC |
| 上級（3） | ペルシャ絨毯／技術メディア／カフェ |
模写修行は、駆け出しエンジニアやプログラミング初心者をサポートするための情報を提供するウェブサイトで、初級から上級まで9つの教材を完全無料で公開しているコーディング教材サイトです。
LINE登録でアクセスパスを受け取ると、すべての教材が使えます。
パーツ毎に実装→答え合わせがしていける快適感
模写修行の素晴らしいところは、学習を「パーツ毎に進めていける」点だと思います。
いきなりデザインカンプを一から実装する→挫折❌🙅♂
パーツ毎に実装→挫折しない⭕🙆♂
元々模写修行自体が優良なWebメディアなので、解説も丁寧で分かりやすいですね。
メリット
- セクション単位でサンプルコードと解説が用意されている。1サイト丸ごと作り切ってから答えを見る形式と違い、ズレを引きずらずに進められる
- 中級以上はSCSSのコードも公開。CSS設計を意識した書き方に触れられる
- デザインデータに加えて、実務さながらのスタイルガイドと指示書が付く。ルールを守りながら組む流れを体験できる
注意点
XD前提。実務のカンプはFigmaへの移行が進んでいるので、Figmaを配布している教材と組み合わせて両方に慣れておきたい
独学で学習を進めている人には強力な味方になるはずです。
❹ mosya｜ブラウザ完結・自動採点つき
エディタもプレビューもサイト内に用意されているので、環境構築でつまずくことがありません。書いたコードをその場で採点してくれるのが最大の特徴です。
- 2024年7月にProgateとサービス統合
- 2026年5月からmosya単体のサブスクリプションは廃止され、Progateの「プロプラン」（月2,490円／年額29,880円）に統合
- 現在は「模写」式ドリルという名称で、CSSアニメーション入門／Web制作で使えるJavaScript／サイト模写実践の3コースを提供
- mosya TC（TypeScript問題集）は無料で利用可能
古い比較記事は単体プラン前提のまま書かれていることが多いので、料金を調べる際は注意してください。
メリット
- タグの使い方の誤りや、必要な属性の抜け漏れまでチェックされる
- 実践編では見本とデザインを比較して採点
- AIへの質問が1日40回まで使える
- 「見た目は同じだけどHTMLの書き方が雑」という独学で最も起きやすい状態を、その場で潰せる
注意点
採点はあくまで見本と一致するかの判定。クラス名の付け方やCSS設計が実務として妥当かまでは見てくれない
環境構築でつまずきたくない人、その場でフィードバックが欲しい人におすすめです。
❺ ドットインストール｜動画で作業の段取りを掴む
ドットインストールは、3分程度の動画で学ぶ学習サイトです。厳密にはインプット型の教材ですが、「手を動かす順番」そのものを学べる点が他にないので、この記事では唯一残しています。
577レッスン・8,634本の動画が公開されていて、HTML/CSSからjQuery、PHP、WordPressまでカバーしています。
メリット
- 「ファイルをどこに置いて、どの順でCSSを書き始めるのか」という作業の段取りが映像で追える
- プレミアム会員（月1,480円／12ヶ月一括なら月1,080円）なら講師のソースコードを自分のコードと比較できる
- jQueryやWordPressの導入部分など、テキストだと環境まわりでつまずきやすい箇所を確認しやすい
注意点
- 写経で終わりやすい。動画と同じものを同じ順番で作っている限り、自分で設計する工程は発生しない
- 「動画を見ながらなら書けるが、閉じると書けない」と感じたら、カンプからのコーディングに移る合図
読むより見るほうが頭に入るタイプの人におすすめです。
❻ 忍者CODE｜416問の問題集が無料
プログラミングスクールですが、416問の問題集を全て無料で公開しているのが特徴です。HTML/CSSを中心に、選択・穴埋め形式で知識を確認できます。
メリット
- スマホでも進められるので、すきま時間に知識の穴を潰す用途に向く
- 「この余白はmarginとpaddingのどちらで取るか」「positionの基準はどこか」といった曖昧な判断を一度洗い出しておくと、実際のコーディング速度が変わる
- 有料の買い切り講座「挫折させない独学プラン」は98,000円から。無期限のチャットサポート付き
注意点
- 無料部分はあくまで問題集。1サイトを最後まで作り切る経験にはならないので、他の教材との併用が前提
- 独学プランには課題チェックが含まれない。実践課題へのフィードバックが必要なら上位プランになる
コーディングが進まない原因が実装力ではなく知識の抜けだった、という人におすすめです。
❼ しょーごログ コーディング練習課題｜書いたコードをプロがレビュー
しょーごログのコーディング練習課題とは、私の出している課題になります。
入門編から上級・Photoshop編まで揃えており、最終的に即戦力コーダーを目指します。
| 教材 | 内容 | レビュー |
|---|---|---|
| 入門編（無料） | 超基礎のHTML/CSS・1ページ | — |
| 初級編・初級その2 | 基礎のHTML/CSS、レスポンシブに慣れる | — |
| 初級Ex | 複雑なレイアウトの総復習 | 複数回 |
| 中級編 | JavaScript・jQueryの導入 | 複数回 |
| 中級Ex | 実案件レベル・4ページ | 複数回 |
| 上級編 | WordPress実案件レベル・7ページ | 複数回 |
| 模擬案件編 | サービスLP・カンプ7枚 | 複数回 |
| JS・jQuery特訓編 | よく使うパーツ7種の実装 | — |
| Photoshop編 | PSDからのコーディング・アニメーション | 複数回 |
先に紹介したサービスと違い、基本的に各課題にレビューをつけています。
レビューを受けることがとても重要
各課題にレビューをつけているのは理由があります。それは
コーダーの責務はデザインを再現することなのに、「まあこれで合ってるだろ」が多すぎる、プロにレビューを受ける機会がなさすぎる
と感じていたからです。
私が一人ひとりの課題のレビューを行っている都合、どうしても無料とはいきませんが、
入門編に関しては無料で出しているので、そちらから挑戦していただくのもいいかなと思います。
またこの入門編を使ったライブコーディング動画も出していますので、一緒に手を動かして進めていただくことも可能です。
ロードマップとレビューを活用しつつ実務レベルを目指す
このコーディング課題はどうやって進めればいいのかな。
という方向けに、このブログでは以前より学習ロードマップを公開しています。
基本的に私の出しているロードマップ内にしょーごログのコーディング練習課題が組み込まれているので、ロードマップに沿うだけで転職も案件獲得も可能です。
最近も独学で転職成功された方にインタビューを行いました。
月100万を超えた方もいます。
しょーごログのコーディング練習課題ではとにかく、
- ポートフォリオとして評価されて
- プロのレビューを受けられる
という点を重視しているので、是非活用してください！
実務レベルのレビューを受けつつ、ポートフォリオも準備したい人におすすめです！
＼プロのレビューを受けられるコーディング課題／
コーディング練習で作ったサイトはポートフォリオに使える？
コーディング練習をする目的が「仕事にすること」なら、作ったサイトをそのまま実績として出せるかどうかは重要な判断材料です。ここは教材によって条件がかなり違うので、先に整理しておきます。
各サービスのポートフォリオ掲載可否
以下は2026年9月時点で、各サービスの利用規約とFAQを直接確認した内容です。
| サービス | 掲載可否 | 条件・注意点 |
|---|---|---|
| Codejump | ○ | 「練習で制作したサイトは、自由にポートフォリオへ掲載していただいてOK」と公式に明記。条件の記載なし |
| 無料コーディング練習所 | ○ | 掲載時は「無料コーディング練習所」へのリンクが必要。デザインデータを改変してオリジナル化した掲載もOK。デザインを変えずに再配布・販売するのは禁止 |
| 模写修行 | ○ 条件が4つ | 利用規約 第6条。①模写修行の教材をもとに制作した旨を明記 ②模写修行へのリンクを掲載 ③サンプルコードをそのままポートフォリオにしない ④自分のサーバーにアップする場合は必ずnoindexを設定 |
| mosya | △ | Progateの規約上、就職活動やポートフォリオ目的の利用は認められている。ただしブラウザ内で完結するため、公開URLを持つ制作物としては残りにくい |
| ドットインストール | — | 利用規約にポートフォリオ利用の定めなし。動画どおりに作る教材の性質上、実績としては扱いにくい |
| 忍者CODE | ○ | 「制作物は転職や案件獲得の際に重要となるポートフォリオとしても掲載する事ができます」と公式に明記。有料コースの制作課題が対象 |
| しょーごログ コーディング練習課題 | ○ | セット購入特典として実績利用OK。2024年以降デザインを順次刷新しているため、他の学習者と被りにくい |
無料教材のポートフォリオが評価されにくい理由
規約上は問題なくても、採用や案件獲得の場面で評価されるかどうかは別の話です。
無料教材はどれも同じ課題を大量の学習者が提出しています。制作会社の採用担当や発注者から見ると、同じデザインのサイトを何度も見ていることになります。「この教材をやったんだな」で終わってしまい、そこから先の判断材料になりません。
そして実際に見られているのは、作ったという事実ではありません。
- デザインカンプをどこまで正確に再現できているか
- HTMLの構造とクラス名の付け方が整理されているか
- レスポンシブで崩れていないか、実機で確認しているか
つまり「何を作ったか」ではなく「どう作ったか」しか見られていないということです。ここを自己判断のまま提出すると、本人が気づいていない粗がそのまま伝わります。
ポートフォリオとして通用する3つの条件
- デザインカンプから作っていること
- 公開まで終わっていること
- コードを第三者にレビューされていること
1. デザインカンプから作っていること
デモサイトを見ながらの模写ではなく、Figmaなどのカンプを開いて数値を拾って組む。実務と同じ工程を踏んでいるかどうかは、余白の精度を見れば分かります。
2. 公開まで終わっていること
ローカルのスクリーンショットだけでは判断されません。サーバーにアップして、実際に開けるURLがある状態にしてください。ここまでやると、サーバー契約やFTPアップロードといった実務の手順も一緒に身につきます。
3. 制作物を第三者にレビューされていること
これが一番抜けやすく、一番差が出ます。自分では正しく書いたつもりでも、クラス名の付け方や余白の取り方が実務の基準から外れていることはよくあります。見た目が同じでも、コードを開かれた瞬間に分かってしまいます。
この記事で紹介した7サイトのうち、1と2は複数のサービスが満たしています。
満たしにくいのは3です。比較表の「答え合わせの方法」の列をもう一度見てもらうと分かりますが、無料教材はサンプルコードとの自己比較か、見本と一致するかの自動採点までです。人が制作物を直接見て、指摘するところまでやっているものは限られます。
しょーごログのコーディング練習課題では、初級Ex以上の課題で現役のプロによるレビューを複数回、期限なしで受けられます。カンプはFigma、サーバー公開の手順も解説しているので、3つの条件をまとめて満たせます。
＼爆速レビューが強み！／
良質なHTML/CSSコーディング練習サイトで回り道せずにスキルアップしよう
今回は7つのコーディング練習サイトを紹介してきました。
- まず数をこなしたいなら：Codejump（無料33課題＋XD/Figmaカンプ28点）
- 1サイト丸ごとで挫折しやすいなら：模写修行（パーツ単位で答え合わせ）
- 理屈から理解したいなら：無料コーディング練習所（1課題2万字の解説）
- 環境構築でつまずきたくないなら：mosya（ブラウザ完結・自動採点）
- 知識の抜けを埋めたいなら：忍者CODE（無料416問）
- 動画で作業の流れを掴みたいなら：ドットインストール
- 実務レベルかどうかを判定してほしいなら：しょーごログのコーディング練習課題（プロのレビュー付き）
無料の教材だけでも、手を動かす量は十分に確保できます。ただしどれも答え合わせは「サンプルコードと自分で見比べる」か「見本と一致するかの自動採点」までです。
自分の書いたコードが実務で通用するかどうかは、人が見ないと判定できません。まずは無料の教材でコーディングの適性を確かめて、本気で仕事にすると決めたらレビューのある課題に進む、という順番をおすすめします。
「しょーごログのコーディング練習課題」はレビュー付きの本格課題なので、もし本気でコーディング学習に力を入れると決断したなら、こちらを取り組んでいただくのもいいと思います。
レビューを受けて自信と実力を付けていってもらえればと思います。
完全無料でコーディング練習をしたい場合
今回の記事では一部コーディング練習課題が有料でした。
こちらの記事では無料のデザインカンプのみに絞った解説を行っています。
どうしてもコーディング練習にお金はかけたくない。。。
こんな方向けです。
その他：コーディングの独学方法
このサイトでは独学でWeb制作コーディングを学ぶ人が実務レベルを目指す上で有用な記事をいくつも出しています。
以下の記事ではWeb制作の独学について述べています。
Web制作の案件獲得方法についても書いているので、是非学習終了後の姿をイメージするのに参考にしてください。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。2026年も案件獲得や転職に成功した人が多数出ています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2025年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
しょーごログのコーディング課題後に、ニートから最大月収100万を稼げる用になった方のインタビュー記事も参考になるはずです。
筆者の考えとして、無料のものでまずは自分にコーディングの適性があるかを確かめるのが良いと考えています。
しかし本気でコーディングを学ぶなら、有料で品質が高くレビューのあるものを選ぶべきだと思います。