4月22日(水)HTML/CSS/JavaScript基礎研修(2日目)

皆様、こんにちは。

 

本日は、昨日に引き続き、「HTML/CSS/JavaScript基礎研修」の2日目。

昨日HTMLで作成した複数のWebページに、CSSを当てて、見栄えをよくしていきます。

 

まず、研修冒頭で、昨日の振り返りを行いました。

バッチリ復習して、本日の最後にあるHTML/CSSについての確認テストに備えました。

そして、コードを打ちながら、画面に装飾を加えていきます。

 

どんどん、ホームページらしくなってきましたね!

 

(before)

f:id:insblog:20200423100347j:plain

 

(after)

f:id:insblog:20200423100431j:plain

 

受講者の方は、変更を保存して反映すれば、

画面上でWebページの見た目が変わったことを確認できるので、

皆さん、これまでの研修の中で、一番ワクワクして受講されている印象です!(笑)

 

 

文字のフォントや、背景色など、色を変えて、自分の好きな色に

塗り替えてもらったりもしています。

各人、手元のPCで作業していて、事務局からは受講者の皆さんの好みを

見られないのは残念ですが、

笑顔で、楽しそうにいろんなことを試している様子が見られました。

 

講師も、工夫してほしいことは、コメントに残して、

試してもらう時間を設けています。

 

f:id:insblog:20200423100621j:plain



お昼休みにも、「どうしてもわからないので、聞いていいですか?」

と何名かが残って質問していました。

 

初心者のうちは、案外簡単なタイプミスをしてしまうことも多いもので、

自分でタイプミスに気づいて、「ここでした!すみません!」と

謝っていることもありました。

 

f:id:insblog:20200423100957j:plain

 

講師からは、

「細かなミスでも、経験していくと財産になります。

「伸びしろ」だとプラスに捉えましょう!」

というアドバイスがありました。

 

すべてうまくいくよりも、間違えてこそ、覚えるのが早くなることもありますので、

うまくいかなくてもめげずに、注意深くコードを見てほしいと思います。

 

研修が進行していて、間違いを見つけるのは難しいときは、

サブ講師が丁寧に解説して、フォローしますのでご安心を。

 

対面形式だと、講師が画面をのぞき込んで指導しておりますが、

オンラインだと、画面を拡大して、コードの細かいところまで見ながら

アドバイスできるので、

対面よりも、実はエラーの発見が早いかもしれない、と実感しております。

 

 

そしていよいよ、午後は入力フォームのあるWebページを作りこんでいきます。

本研修では、Webサイトに「お問い合わせ」の入力フォームを作ります。

「テキストボックス」「プルダウン」「ラジオボタン」「送信ボタン」など

基本的な機能も付け加え、

自社のホームページにあるような画面ができあがっていきます。

 

 

Webページが遷移したときに、URLがどのように変化するかも確認し、

データがどのようにやり取りされているのか実際に見てみました。

 

f:id:insblog:20200423101036j:plain

 

セキュリティややりとりするデータ量を考慮したうえで、

「GET」、「POST」といったデータ送信方法の使い分けが必要なことも

知ってもらいます。

 

この辺りは明日からのJavaScript研修にも直接つながってきますので、

よく覚えておきましょうね。

 

 

さて、確認テストの結果は…

本日も、8割の方が80点以上と、かなり高得点の方が多い結果となりました。

(例年よりも、かなり良い結果となり、運営担当一同驚いております…!)

 

皆さんの努力の成果であることはもちろんですが、

オンラインだからこその、受講者の方のコードを間近で確認できるメリットも

幸いしているのでは、と感じています。

 

なかなかハードな2日間でしたが、お疲れさまでした!

週の後半も、元気に乗り切りましょう!