HTML Code Play: Learn HTML

コードを変更してその動作を確認することで、Web開発を学びましょう。HTML Code Playは、HTML、CSS、JavaScriptのレッスンとモバイルコードエディタ、実行可能なサンプル、クイズ、コーディングゲームを組み合わせたアプリです。概念を学習し、実際に試してみて、同じデバイスで学習状況を追跡できます。

読む、編集する、実行する

学習カタログを探索し、チュートリアルを開いて、完全なコード例とともに解説を読みましょう。サンプルをエディタに送信し、元のコードを実行した後、タグ、スタイル、式を変更して出力結果を比較します。この実践的なワークフローにより、読んだ構文と、それが作成するページや動作を結びつけることができます。

ワークスペースは、構文ハイライト機能を備えたHTML、CSS、JavaScriptの編集に対応しています。実験中は、元に戻す/やり直し機能、テキスト検索、行へのジャンプ、エディタのフォントサイズ調整が可能です。新しいページを作成したり、既存のテンプレートから開始したりできます。HTMLファイルを開き、作業内容を保存したり、「名前を付けて保存」で別のコピーを作成したり、デバイスの共有オプションを使用してコードファイルを共有したりできます。

ガイド付き学習と実践

このカタログは、ページ構造やスタイリングからスクリプト、ベクターグラフィックス、レスポンシブレイアウト、インタラクティブな例まで、11のWebテクノロジー分野を網羅しています。タイトルまたはセクションでレッスンを検索して、必要な教材にアクセスできます。便利なチュートリアルをピン留めして集中的に復習したり、独自のレッスンノートを追加したり、前へ/次へボタンでチュートリアル間を移動したりできます。

各チュートリアルには、説明、構文、そして動作する例がまとめられています。トピッククイズや練習問題で学習を締めくくりましょう。練習問題では、不足しているコードを完成させるよう求められ、ヒントと解答フィードバックによって、見落とした詳細を確認することができます。クイズの結果は、レッスンに戻る前に理解度を確認するのに役立ちます。

6つの練習方法

異なるスキルを磨くために、コーディングゲームを選びましょう。

- コードビルダー：ブロックを並べ替えて、動作するコードを再構築します。

- 出力探偵：コードスニペットが出力する内容を予測します。

- バグハント：エラーのある行を特定します。

- 穴埋め問題：不足しているコードトークンを選択します。

- マッチラボ：用語とその意味を関連付けます。

- ラピッドファイア：タイマー制限内に正誤問題に解答しましょう。

アクティビティレベルでは結果が記録され、次のステップに進むことができます。利用可能なレベルを繰り返しプレイしてスコアを向上させたり、今後追加される練習用プレイリストを活用したりしましょう。

学習を整理しましょう

進捗画面では、復習したレッスン、クイズ、練習問題を技術別にまとめています。スキルマップと推奨される次の学習プランを確認したり、ホーム画面からレッスンを再開したり、デイリーチャレンジに挑戦したりできます。連続学習記録とチャレンジバッジで、あなたの学習状況が一目でわかります。オプションの学習リマインダーは通知の許可が必要で、オフにすることもできます。

レッスンの進捗状況、メモ、ゲームの結果はデバイスに保存されます。学習画面のコントロールには、フォントサイズの拡大、高コントラスト、モーションの軽減などが含まれます。HTML、CSS、JavaScriptの個別の評価では、アプリ内で達成証明書を取得できます。これらはアプリの学習記録であり、認定資格ではありません。

オンラインコミュニティの投稿は、インターネット接続時に利用できるコードのもう一つの情報源です。ネットワーク接続が必要なコンテンツや外部リソースを読み込むサンプルにはインターネットアクセスが必要です。ローカルの進捗状況保存データはクラウド同期に対応していません。

初心者、学生、フロントエンドの概念を復習する学習者の方は、まず1つの例から始め、小さな変更を加え、実践を通して理解を深めていきましょう。