お問い合わせ

コース概要

構造とスタイル (HTML & CSS)

導入とWebテクノロジー

  • Webの仕組み:クライアント・サーバーモデルの簡単な解説。
  • ブラウザをコンピュータとして:コードの解釈。
  • HTML:Webの骨格。構造、階層、セマンティックタグ。
  • CSS:Webのスタイリング。色、フォント、ボックスモデル。
  • ラボ1:コンテナ環境のセットアップと、静的な「About Me」プロフィールページの構築。

HTML & CSSの実践(詳細)

  • HTML:リスト、リンク、画像、フォーム(ユーザーインタラクションに不可欠)。
  • CSS:テキストと背景のスタイリング。現代的なレイアウトのためのFlexboxとGridの入門。
  • レスポンシブデザイン:モバイルとデスクトップでサイトが機能するようにする。
  • ラボ2:プロフェッショナルなスタイリングとモバイル対応で静的ページを洗練させる。

DOM(Document Object Model)の操作

  • 概念:コードが視覚的なページとどのように関連するかを理解する。
  • 要素の選択:Webページの特定の部分をターゲットにする方法。
  • 操作:コードを通じてコンテンツと属性を変更する。
  • ラボ3:コードによる静的ページ要素の変更(例:タイトルや画像を動的に変更)。

脳の部分 (JavaScript)

JavaScriptによるプログラミング(基礎)

  • 変数とデータ型:情報の保存(テキスト、数値、真偽値)。
  • ロジック:if/else文(意思決定)。
  • ループ:アクションを効率的に繰り返す。
  • 関数:再利用可能なコードブロックの作成(「レシピ」の概念)。
  • ラボ4:JavaScriptを使用して基本計算機または論理ゲームを作成する。

インタラクティビティとイベント

  • イベントリスナー:クリック、キー入力、ページロードに応答する。
  • フォーム処理:ユーザー入力の検証(例:メールアドレスが実在するか確認)。
  • DOM操作:要素の動的な追加と削除(例:To-Doリスト)。
  • ラボ5:計算機をUIフィードバック付きのインタラクティブなWebアプリケーションに変える。

データの取得(APIs)

  • 概念:Webアプリケーションが他のサーバーとどのように通信するか(例:天気データや株価の取得)。
  • JSON:データ交換の言語。
  • 非同期プログラミング:ブラウザをフリーズさせずに「待ってから実行」ロジックを理解する。
  • ラボ6:公開APIからライブデータを取得してページ上に表示する機能を作成する。

プロフェッショナルのためのツールキット(フレームワークと最終課題)

プログラミングフレームワークの使用

  • なぜフレームワークを使用するのか?(React、Vue、またはSvelteの概念)。
  • コンポーネント:モジュール式で再利用可能なUI部品を構築する。
  • 状態管理:変更されるデータを追跡する。
  • エコシステム:パッケージ、依存関係、およびバージョン管理(Git)を理解する。
  • ラボ7:コンポーネントベースのアプローチを使用して、シンプルな機能を refactor(書き直し)する。

最終課題プロジェクト:Webアプリケーションの構築

  • 要件:参加者は機能的なWebアプリケーション(例:予算管理ツール、商品ダッシュボード、またはポートフォリオサイト)を構築する必要があります。
  • 計画:「ユーザーストーリー」と技術的な範囲を定義する。
  • 実装:HTML/CSSの構造とJavaScriptのロジックを組み合わせる。
  • デバッグ:エラーメッセージの読み方と壊れたロジックの修正方法。
  • 発表:最終アプリケーションをグループに発表する。

結びの挨拶と次のステップ

  • 技術用語:エンジニアとコミュニケーションするためのチートシート(API、バックエンド、フロントエンド、Git、デプロイメント)。
  • リソースガイド:さらに学ぶ場所(ドキュメント、StackOverflow、MDN)。
  • キャリアへの統合:これらのスキルがプロダクトマネジメントやデザイン業務にどのように役立つか。
  • Q&Aおよびコース評価。

要求

  • 基本的なコンピュータ操作スキル
  • 以前のプログラミング経験は必要ありません
 21 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (2)

今後のコース

関連カテゴリー