Bootstrapを使ったウェブサイト制作の定期レッスンを受講されている生徒さんに、「プログレスバーを表示する」課題を出させていただきました。ところが、HTMLもJavaScriptも間違ってないように見えるのに、なぜか画面にはプログレスバーが表示されませんでした。
ウェブサイトのコーディングがうまくいかない場合、まず第一に疑うべきはHTMLの構文が間違っていないかどうかです。これを確認するには、ブラウザの画面の表示を目視するのではなく、ブラウザに内蔵されている開発ツール（ディベロッパーツール）を使います。
ディベロッパーツールは、HTMLやCSSをブラウザがどのように解釈したのかという結果を最も正確に知ることができるツールだからです。
ところが、今回のケースではディベロッパーツールを見てもHTMLやCSSの間違いは見つかりませんでした。
そこで次に疑うべきは、HTMLやCSSのコードの中に、余計なスペース文字が入ってしまっていないかです。
プログラミングの世界では、スペース文字は特別な意味を持ちます。HTMLも例外ではありません。本来、スペース文字が入ってはいけないところに入っていると、ブラウザは正しくHTMLの構造を解釈することができず、表示がおかしくなることがあるのです。
Windowsに付属している「メモ帳」や「ワード」などのエディターではスペースは目に見えないので、HTMLやCSSを書くときは、プログラミング用のエディターを使うべきです。
CODEMYではSublime Text 3や、Atomを推奨していますが、講師は長年使い慣れたNoEditorというエディターを使っています。
プログラミング用のエディターを使うとスペース文字が可視化できるからです。
結局、今回の生徒さんの課題は「HTMLに余計な全角スペース文字が入っていた」ことが原因でした。
CODEMYのマンツーマンレッスンでは、答えを教えるだけでは身に付かない「筋道を立てて論理的に考える力」を身に着けていただくことを重視しています。