リクエストコーディング基礎授業 #1

リクエストコーディング基礎授業とは

どうも、主催者のしょうみゆです。

『リクエストコーディング基礎授業』とは、その名の通り私が個人的にリクエストをいただいて開催するコーディングの授業です。
私の時間の都合と持っているスキルといただくリクエスト内容を考慮して開催されます。

今回はスクールを卒業し、WEBデザイナーとして入社が決定している方より、実務で困らないコーディングの特訓を受けたいとリクエストをいただき急遽開催しました！

入社を控えている方、これから就職をされる方へこれは知っていたほうが良いコーディングの基礎知識をオフラインで講義していきます。
リクエストした本人はもちろん、それに便乗して授業を受けたい方の参加を受け付けています。笑

いただいたリクエストは下記の通りです。

• 検証ツールの使い方が知りたい
• Mac操作を早くしたい
• バックエンドも考慮したコーディングがしたい
• モバイルファーストを知りたい

長丁場となりますが各々適度に休憩を入れ、勉強合宿と思いご参加ください笑

日時・会場

日時

12/8(日) 10:00 〜 19:00(終わればいいな・・笑)

※当日の状況により変更になる可能性があります。

会場

東京都渋谷区道玄坂2-10-12 新大宗ビル3号館9F
※日本フードデリバリー株式会社様のオフィスをお借りします！

対象

この講義では下記の方を対象とします。

• Macユーザ(バージョンは問いません)
• 何回かゼロからのコーディングをしたことはあるが、実務でコーディングをしたことがない方

ゴール

• ショートカットを駆使して効率よく操作できる
• アクセシビリティやセマンティックな考えを知り、コーディングができる
• 納品後の運用まで考えられたコーディングとは何かわかる
• 検証ツールの使い方を知り、効率良くコーディングを行う
• モバイルファーストの概念を知り、コーディングの方法を知る
• クロスブラウザ対策も視野に入れたコーディングができる

使用ツール・アプリケーション

下記のツール・アプリケーションを使用しますので、まだ導入されていない方は事前にインストールをお願いします。
使い方や設定は当日ご説明します。

• VScode(エディタ)
• Google Chrome(ブラウザ)
• Figma(デザインツール)
• spectacl(画面分割アプリ)
  こちらの記事を参考にインストールしてください
  Spectacle - ウィンドウをキーボードショートカットでリサイズ・移動できるMacユーティリティ
• FinderPath(finder拡張アプリ)
  こちらの記事を参考にインストールしてください
  FinderPath - MacのFinderにアドレスバーを追加する便利なユーティリティ
• MAMP(PHP操作)
  こちらの記事を参考にインストールしてください
  【2019年版】MAMPのインストール方法（Windows & Mac対応）
• しょうみゆのお道具箱

講義内容

第一部

• 導入アプリケーションの説明、セットアップ、操作方法の確認
• VScodeの拡張機能追加、setting.json設定、ショートカット設定、操作方法の説明
• 座学
  • 『WEBサイト制作の一連の流れとリリースに必要な知識とはなんじゃろほい』
  • 『そして長寿サイトに・・・(運用ってなにするの？)』
  • 『CSSよりもJavaScriptよりもHTMLが一番大事なんだァァァア！』
  • 『WEBアクセシビリティで思いやりの鬼になる』
  • 『モバイルファーストでファストコーディング』
  • 『クロスブラウザ対策で万人受けサイトを目指す』

※座学は簡単な概要になります。
WEBサイトはなぜ作るのか？コーディングの本質(主観ですが)への導入となります。

第二部

• フォーム周りのコーディングとバックエンドとの連携で必要な知識の理解(リクエスト)
  MAMPを使用してPHPをちょっとだけいじり、バックエンドとの連携に必要な知識を理解します。

第三部

• 実技
  • コーディング用のデザイン確認、注意点の説明
  • 作業ファイルの準備
  • コーディング開始
  • バリデーションチェック、仕上げ
  • 納品作業

Emmetを使用しながらモバイルファーストで効率よくコーディングしていきます。
実務ではコーディングスピードもとても大事です！

持ち物

• Mac
• お菓子
• 飲み物
• 元気な身体

その他

• 不明点がある場合にはツイッターのDMにてご連絡ください。
• 遅刻・欠席などの場合にはご一報お願いします。
• 途中退場可能です。