2022年10月6日に、CODE BASE OKINAWA プログラミング講座 第20期生の中間発表会を開催しました！

9月12日からスタートした第20期。
約3週間でWebサイトの骨格をつくるHTMLや装飾を施すCSSを学び、静的なWebサイト(ログイン機能や投稿機能がない、企業やアーティストのホームページのイメージ！)を制作できるようになりました。

中間発表会では、これまでの3週間で学んだことを活かした「オリジナルWebサイト」を制作して他の受講生に発表しました！

その中から、4作品をピックアップしてご紹介していきます！

①ネコの紹介ブログ

ブログ形式のWebサイトで、ネコの習性や飼い方を紹介！

ブログとなると、記事内のテキストと画像、過去記事、メニューなど、様々な役割の要素を規則的に配置する必要がありますが、しっかりとコーディングできていました！
インターネット上に公開されていそうなほどの出来栄えです！

また、マスキングテープで画像を貼り付けたようなデザインを実装していましたが、画像の上に配置され、透過するようにコーディングする技術も素晴らしいです！

SNSでシェアすることができるボタンは、実際にSNSページの投稿画面まで進むようにできていました！

②シークヮーサーのECサイト

指定した要素がどのように配置されているのかを効率よく学習するために、目立つカラーをつけて実装していました。

ワイヤーフレームをしっかりと作って制作に取り掛かったものの、グリッドデザイン(＊)にしたくて途中から変更したのだそう。その変更の際も、要素ごとに付けられたカラーのおかげで学習しやすかったはずです！

(＊)各要素を格子状に配置するデザイン。スマホやPCなど、閲覧するデバイスに合わせて配置を変えるレスポンシブ対応が実装しやすくなるなどのメリットがあります。

デザイン的なクオリティを目指すのも良いですが、考えた通りの配置ができているかを中間発表時点で徹底して学習していると後々に活きてくると思います！

学習の仕方に工夫が見られた発表で、ますます卒業制作の作品が楽しみになりました！

③映画の紹介サイト

年代やジャンルに分けて、おすすめの映画を紹介してくれるWebサイト。

各ジャンルや年代ごとの紹介ページをコーディングするのは大変だったかと思いますが、頑張って制作されていました！

今回は各ページをコーディングしていますが、今後の学習でデータベースやRubyを学んだら、事前に設定したデータをもとに検索や表示ができるようになるので、ぜひチャレンジしてほしいです！

また、映画のタイトルを表示する要素では、CSSでメタリックカラーを表現していました！なんだかバック・トゥ・ザ・フューチャーのデロリアンを彷彿させるデザインが、映画好きにはたまらない工夫だと思います(笑)

④Twitterをトレース

投稿ごとに縦横比が異なるデザインがしっかりと実装されていました！
配置が複雑な部分は、目立つ色をつけて要素の位置を把握しながら実装したのだそうです！

ホバー(マウスを要素に乗せること)で変わったり、ポインターのデザインが変わったりと細かな部分もこだわっていました。

同じクラス名を使ってしまって意図しない要素までCSSが効いてしまったり、勢いで作り始めて配置が崩れてしまったりと、中間発表や卒業制作で誰しも経験するハードルを乗り越えて無事完成まで辿り着いたのだそうです！

たくさんの要素がきっちりと配置された、ハイクオリティな作品でした！

13名の受講生がオリジナルのWebサイトを発表し、無事中間制作発表会が終了。

終わりに

受講生の発表後は、講師から今後の学習についてお話がありました。

挫折してしまう受講生の特徴として、分からない時に質問ができないということが挙げられます。質問するのが恥ずかしい、自力で解決することにこだわるなど理由は様々ですが、挫折せずに学習を継続するためにも、少し考えてみて分からないことは積極的に質問するようにと伝えました！

CODE BASE OKINAWA プログラミング講座の特徴として、経験豊富な講師の他にも、コーチとして学習をサポートする卒業生や一緒に学習する受講生と、分からないことや悩みを共有しながら一緒に頑張れる環境になっています。

積極的に質問をしたり、コミュニケーションを取ったりと、その環境を活かして学習していきましょう！

以上、CODE BASE OKINAWA プログラミング講座 第20期生中間発表会レポートでした！

中間発表会を終えた受講生は、Rubyやデータベースを学んでいます！
卒業制作までには、ログイン機能や投稿などの機能が実装できるようになり、Webアプリケーションが制作できるようになるというカリキュラム。卒業制作発表会もお楽しみに！