ほんきでHTMLオンライン開催しました!

お久しぶりです。
学校事業部です。

なかなか対面で講座の運営ができなかったので、オンラインでほんきでHTMLを開催しました。
その時の様子のレポートです。

実施したほんきでHTMLオンラインは、通常のほんきでHTMLの内容より、少し短くし、より集中しでできる内容にしました。
詳しいカリキュラムはこちら

今回参加いただいたのは、学生や、グラフィックをメインでされている方など7名の方々です。
講師は、企業研修でもおせわになっているアツ先生です。

1回目 HTMLの基本のキからスタート!

Webサイトはどのように作られているか、ドメインの話しなどなど。そして早速HTMLの役割や構造の話へ。
基本的なタグを一つづつ学んでいき、先生からもらったあるテキストをHTMLコーディングしていきました。H1はわかっても、どこをH2で区切るか、リストの表現にするのかなど、まだ慣れない中HTMLの構造作りにチャレンジしてもらいました。4時間なんてあっというまで、1回目は終了。

2回目は全体を考えたHTML構造〜

2回目は、1回目に教えられなかったタグや、googleMapのiframの書き方なども学んだあとは、少し踏み込んだHTMLの全体の構造の考えた、<header>、<nav>、<main>、<section>、<footer>などを使った書き方を学びました。
また、相対パス、絶対パス、サイト全体のファイル構造、バリデーションの仕方な、より応用的な内容に入っていき、最後、最終日までに作っていただく作品の企画発表を行いました。
この講座では時間内はしっかり教える時間にするので、課題制作は自宅てやってきてもらいます。

3回目からCSSスタート!

3回目はCSSの内容に入っていきます。
テキストに色をつけ、backgroundでの色を指定をしたり、罫線で囲ったり、文字を大きさや、ウェイトを指定したりと、いろいろなスタイルを、実際に書きながら学んでいきました。
margin、paddingをつかっていろいろな課題にもチャレンジし、感覚をつかんでいきます。

4回目CSS応用編

ここから前回より、よりステップアップしていきます。
色の16進数の意味、ブロック要素、インライン要素の違い、ショートハンドなどなど、細かい部分を解説し、レイアウトで絶対必要になっていく、要素の横並びdisplay:flex、flexの種類、positionなど学んでいきました。躓きやすいところですが、みなさん正確にできていました。

後半は実際に、一緒にwebサイトを制作し、今まで学んだことを実践していきました。
授業以外で、課題を進めて制作してきてもらっているので、質問などにも回答していきました。

5回目最後の授業 課題発表

この日は、最終日。
前半は、課題制作の時間にあて、質問などに答えていきました。
最後の2時間くらいを使い、発表会をしていきました。

初心者の方がほとんどでしたが、みなさん一生懸命頑張っていただき、難しいレイアウトに挑戦されたり、スライダーなどのjQueryにも挑戦され、レベルの高い作品ばかりでした!
今回の授業はすごく短い5回の授業だったんですが、志高く参加されていて素晴らしかったです!