Web制作を学んでいる方向けに、HTML・CSS・JavaScript・PHPなどの基礎知識を問題形式で確認できる「Web制作 基礎テスト」を公開しました
現在は、次の基礎テストを用意しています。
- HTML基礎テスト
- CSS基礎テスト
- JavaScript基礎テスト
- PHP基礎テスト
- WordPress基礎テスト
- SQL基礎テスト
- Git実務テスト
登録やログインは必要なく、パソコンやスマートフォンのブラウザから利用できます。
授業や書籍で学習した内容の復習、苦手分野の確認、試験前の理解度チェックなどにご活用ください。
テストサイトを作った理由
Web制作の学習では、HTMLやCSSのコードを書きながら、実際にWebページを作る練習をすることが多いと思います。
最近では、AIに指示を出すことで、Webページのデザインやコードを短時間で作成できるようになりました。AIをうまく活用すれば、制作時間を短縮したり、自分では思いつかなかった実装方法を知ったりすることもできます。
一方で、AIが作成したコードをそのまま使用するだけでは、表示を思いどおりに変更したいときや、変更したあとエラーが発生したときに、どこを修正すればよいのか判断できないことがあります。AIが作ったコードを読み、必要な部分を修正し、安全性や適切な記述になっているかを判断するためにも、Web制作の基礎知識は大切です。
コードを見ながら入力できることと、その内容を理解し、自分で判断して使えることは少し違います。
- HTMLタグをどのように使い分けるのか
- CSSのプロパティがどのような役割を持つのか
- JavaScriptの処理がどの順番で実行されるのか
- PHPの変数や条件分岐がどのように動くのか
- Gitのコマンドをどの場面で使用するのか
私自身、Web制作講座で受講生の方を指導する中で、「制作課題は完成しているけれど、基本的な用語やコードの意味が十分に定着していない」という場面を見てきました。
特にHTMLやCSSは、ブラウザに目的の内容が表示されると、その記述方法が適切かどうかまで確認せずに学習を進めてしまうことがあります。
これからは、すべてのコードを一から暗記して書くことよりも、AIを活用しながら、生成されたコードを読み解き、目的に合わせて修正できる力が、ますます重要になると考えています。そのためには、HTMLやCSS、JavaScriptなどの基本的な仕組みを理解しておく必要があります。
そこで、制作を始める前や学習を終えたあとに、基礎知識を問題形式で確認できる場所があるとよいのではないかと考え、今回のテストサイトを作成しました。
ステップごとに少しずつ確認できます
HTMLやCSSを一度にすべて覚えようとすると、確認する内容が多くなってしまいます。
このテストサイトでは、基礎的な内容をステップごとに分けて学習できるようにしています。
最初から難しい問題に挑戦するのではなく、まずは基本的なタグやプロパティから始め、学習の進み具合に合わせて少しずつ取り組めます。
「今日はここまで学習した」というときは、該当するステップだけを利用して復習することもできます。
分からなかった問題があった場合は、正解だけを覚えるのではなく、使用している教科書や授業資料、実際に作成したコードなどに戻って確認してみてください。
問題を解くことが目的ではなく、自分がまだ理解できていない部分を見つけるためのテストとして活用していただければと思います。
HTML・CSSの基礎を確認
HTML基礎テストでは、Webページを構成するタグや属性、文書構造などを確認できます。
例えば、見出し、段落、画像、リンク、リスト、表、フォームなど、Webページ制作でよく使用する要素が中心です。
CSS基礎テストでは、文字や背景の指定、余白、ボックスモデル、Flexbox、Grid、レスポンシブ対応などを確認できます。
HTMLとCSSはWeb制作の土台となる技術です。
コードを暗記する必要はありませんが、「この表示にするためには、どの要素やプロパティを使うのか」を考えられるようになることが大切です。
制作課題で思うようなレイアウトにならない場合も、基礎的な仕組みを理解していると、原因を探しやすくなります。
JavaScript・PHP・WordPress・SQLの確認にも対応
HTMLとCSSの学習後は、JavaScriptやPHPなどのプログラミングに進む方も多いと思います。
JavaScript基礎テストでは、変数、条件分岐、繰り返し処理、関数、DOM操作などの基本を確認できます。
PHP基礎テストでは、PHPの基本文法、配列、条件分岐、フォーム処理などを中心に確認できます。
さらに、WordPress基礎テストとSQL基礎テストも用意しています。
WordPressでは、テーマ制作で使用する基本的な関数やテンプレートの考え方、SQLではデータベースから情報を取得・追加・更新するための基本的な知識を確認できます。
授業でコードを書いているときは分かったつもりでも、少し時間が空くと忘れてしまうことがあります。
一度だけで終わらせず、学習後に何度か取り組むことで、知識が定着しているか確認してみてください。
Git実務テストも追加しました
今回、GitとGitHubの基本操作を確認できる「Git実務テスト」も追加しました。
Gitを初めて使用すると、
git status git add . git commit -m "メッセージ" git push
といったコマンドは入力できても、それぞれのコマンドが何をしているのか分かりにくいことがあります。
また、実際の作業では、
- 現在の変更状況を確認する
- 必要なファイルをステージングする
- 変更内容をコミットする
- GitHubへ送信する
- エラーが発生したときに状況を確認する
といった流れを理解しておく必要があります。
Git実務テストでは、コマンドの暗記だけではなく、「この状況では、次に何を確認すればよいか」という実際の作業に近い内容も確認できるようにしています。
Gitは、最初はエラーの文章も難しく感じられます。
しかし、何度か操作を繰り返していくと、まずはgit statusで現在の状態を確認するなど、少しずつ対応方法が分かるようになります。
GitやGitHubを学び始めた方は、実際にコマンドを操作しながら、Git実務テストにも挑戦してみてください。
最終テスト100点で修了証・コースバッジを取得できます
各コースの最終テストで100点を達成すると、そのコースの修了証とコースバッジを取得できます。
通常のステップテストでは発行されず、各コースの学習内容をまとめた最終テストで100点を取得した場合に発行されます。
修了証には、次の内容が表示されます。
- 受講者名
- 修了したコース名
- 得点
- 達成日
- 証明番号
受講者名は、100点達成後に自分で入力できます。修了証は、PNG画像として保存できるほか、A4横向きで印刷することもできます。
コースバッジはポートフォリオにも掲載できます
コースバッジもPNG画像として保存できます。
HTML・CSS、JavaScript、PHP、WordPressなど、コースの種類によって背景色が異なるデザインになっています。
取得したバッジは、ポートフォリオのSkills欄などへ掲載し、学習した分野や達成した内容を紹介するために利用できます。
例えば、バッジと一緒に次のような説明を添えると、取得内容が伝わりやすくなります。
WebTraining.jpのHTML基礎コース最終テストで100点を達成し、コースを修了しました。
修了証とバッジは学習記録から再表示できます
取得した修了証とコースバッジは、同じブラウザの学習記録ページから再表示できます。
保存し忘れた場合でも、修了記録がブラウザ内に残っていれば、修了証の再保存や印刷、バッジの再保存ができます。
ただし、修了記録は利用しているブラウザ内に保存されます。
別の端末や別のブラウザには自動で引き継がれず、ブラウザの保存データを削除すると、修了証やバッジを再表示できなくなる場合があります。
5コース達成で特別な認定物を取得できます
異なる5つのコースで最終テスト100点を達成すると、通常のコース修了証・バッジに加えて、次の特別な認定物を取得できます。
- 5コース達成証
- 5コース総合バッジ
学習記録ページでは、
取得バッジ 3 / 5
のように、5コース達成までの進み具合を確認できます。
同じコースで何度100点を取得しても、達成数は1コースとして数えます。異なる5コースを修了することで、5コース達成となります。
まずは現在学習している分野の最終テストで100点を目指し、少しずつ取得バッジを増やしてみてください。
学習記録はブラウザ内に保存されます
テストの学習記録は、利用しているブラウザ内に保存されます。
同じブラウザから学習記録を開くことで、これまでに取り組んだテストの結果を確認できます。
ただし、別のパソコンや別のブラウザを使用した場合、ブラウザの履歴や保存データを削除した場合などは、以前の記録を確認できないことがあります。
個人情報を入力せず、気軽に利用できる学習記録としてお使いください。
タイピング練習と組み合わせて利用できます
WebTrainingでは、HTML・CSS・JavaScriptなどのコードを入力して練習できる「プログラミング向けタイピング練習」も公開しています。
タイピングサイトでは、コードを実際に入力しながら、タグ、プロパティ、記号などの入力に慣れることができます。
テストサイトとタイピングサイトでは、学習の目的が少し異なります。
- タイピングサイト：コードを入力して記述に慣れる
- テストサイト：問題を解いて知識の理解度を確認する
次のような流れで利用するのがおすすめです。
- タイピング練習でコードの入力に慣れる
- 基礎テストで内容を理解できているか確認する
- 間違えた分野を教科書やコードで復習する
- もう一度タイピングやテストに挑戦する
コードを何度も入力することと、その意味を考えることを組み合わせると、知識が定着しやすくなります。
このような方におすすめです
Web制作 基礎テストは、次のような方におすすめです。
- HTML・CSSを学び始めた方
- 職業訓練やWebデザインスクールで学習している方
- JavaScriptやPHPの基礎を復習したい方
- WordPressのオリジナルテーマ制作を学んでいる方
- SQLやデータベースの基本を確認したい方
- Git・GitHubの操作にまだ慣れていない方
- 制作課題やポートフォリオを作成している方
- Web制作の学習をしばらく休んでいて、もう一度復習したい方
点数だけを気にするのではなく、「どの分野をもう一度確認するとよいか」を見つけるために利用してみてください。
まずは得意な分野から挑戦してみてください
最初からすべての問題を解く必要はありません。
現在学習している分野や、得意だと思う分野から挑戦してみてください。
思ったより正解できなかった場合も、それは学習が進んでいないということではありません。今後復習するポイントが見つかったということです。
授業や書籍で学んだあとに問題を解き、分からなかったところをもう一度確認する。この繰り返しが、Web制作の基礎を身につけることにつながります。
問題や機能についても、今後少しずつ追加・改善していく予定です。
Web制作を学んでいる方は、日々の復習や理解度チェックとして、ぜひご活用ください。