初級編をやってみた体験談はこちら。
↓↓↓
デイトラWeb制作コース初の級編では、とあるWebサイトを再現するようにコーディング練習をする場面がある。
講義を受けながら実際にコーディングをして、ブラウザでお手本のとおりに表示されているか確認する。
その時に、ブラウザに思ったとおりに表示されると楽しくて達成感がある。
一方、うまく表示されないと、気持ちは穏やかではなくなる。
そこで、「お手本とどう違うのか？」。「原因は何なのか？」を確認する作業に入っていく。
このように、お手本のとおりに再現できないと、スムーズには勉強は進まない。
だが、ブラウザにうまく表示されない時こそ、それは成長できるチャンスとなるのだ。
自分で考えて調べたり、仮説を立てて検証したりする機会ができるので、よりコーディングの理解が深まっていく。
時間はかかってしまうが、その分、自己解決する力がついてくるのだ。
無事に解決できると素直に嬉しいよ！
ちなみに、実際にうまく表示されなかった事案が２つある。
まず１つ目は次のとおりである。
・画像と文章の間の余白が、お手本に比べて異様に大きい。
・調べてみると、HTMLで余計にタグを入力していて、それがCSSに反映されていたのが原因だとわかった。
・本来であれば余白が40pxのところ、余計に入力したタグでさらに40pxが追加されていた。
余計に入力したタグを削除したことで、お手本と同様な余白の大きさになり解決！
続いて２つ目がこちら。
・メイン部分で、画像と文章のセクション３つを縦並びにしたいが、横並びになってしまう。
・調べてみると、ヘッダー部分に対するCSSのコードで「ulは横並びにするように」と入力しており、それが「画像と文章のセクション３つ」の箇所にも影響していたのが原因だとわかった。
・本来であれば、ulではなく「ヘッダー部分に当てたクラス名」に対して横並びにするように入力し、メイン部分のulに影響しないようにするのが最適解である。
ヘッダー部分に対するCSSのコードを、ulから「ヘッダー部分に当てたクラス名」に変更したことで、画像と文章のセクション３つが縦並びになり解決！
このように、トラブルが２回あったのが、どうにか自己解決することができた。
これにより、「コーディングする時に、このようなミス入力をすることがあるのだな。」と、自分のコーディングの際のクセや特徴を客観的に見ることができる。
また、「今後、同様な事案が出たら、今回のような原因があるかどうか調べるようにしよう。」と、過去の失敗した経験が蓄積されて、より迅速に原因究明を行うことができるようになる。
デイトラの勉強がスムーズにいかない時も落ち込まず、むしろ成長のチャンスだと思い、今後も前向きに楽しく学習していきたい！！