Web Dev For Beginners
1.0.0
Microsoft Cloud Advocates による 12 週間の包括的なコースで、Web 開発の基礎を学びましょう。 24 の各レッスンでは、テラリウム、ブラウザ拡張機能、宇宙ゲームなどの実践的なプロジェクトを通じて、JavaScript、CSS、HTML について詳しく学びます。クイズ、ディスカッション、実践的な課題に取り組みます。弊社の効果的なプロジェクトベースの教育法により、スキルを向上させ、知識の保持を最適化します。今すぐコーディングの旅を始めましょう!
Student Hub ページにアクセスすると、初心者用リソース、学生パック、さらには無料の証明書バウチャーを取得する方法が見つかります。毎月コンテンツが切り替わりますので、ブックマークして定期的にチェックしていただきたいページです。
生成 AI に関する新しい 12 レッスン カリキュラムをお見逃しなく!
各レッスンには、完了する課題、知識チェック、次のような学習トピックをガイドするチャレンジが含まれています。
迅速かつ迅速なエンジニアリング
テキストと画像アプリの生成
検索アプリ
まずは https://aka.ms/genai-beginners にアクセスしてください。
教師の皆様、このカリキュラムの使用方法についていくつかの提案を記載しました。ディスカッション フォーラムでフィードバックをお待ちしています。
学習者は、各レッスンで、講義前のクイズから始めて、講義資料を読んでさまざまなアクティビティを完了し、講義後のクイズで理解を確認します。
学習体験を強化するには、仲間とつながり、一緒にプロジェクトに取り組みましょう。ディスカッション フォーラムではディスカッションが奨励されており、モデレーターのチームが質問に答えます。
さらに学習を進めるために、追加の学習教材として Microsoft Learn を探索することを強くお勧めします。
このカリキュラムにはすぐに使える開発環境が備わっています。開始時に、カリキュラムをコードスペース (ブラウザーベースでインストール不要の環境) で実行するか、Visual Studio Code などのテキスト エディターを使用してローカルのコンピューターで実行するかを選択できます。
作業内容を簡単に保存できるように、このリポジトリの独自のコピーを作成することをお勧めします。これを行うには、ページの上部にある[このテンプレートを使用する]ボタンをクリックします。これにより、カリキュラムのコピーを含む新しいリポジトリが GitHub アカウントに作成されます。
次の手順に従います。
リポジトリをフォークする: このページの右上隅にある「フォーク」ボタンをクリックします。
リポジトリのクローンを作成します: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
作成したこのリポジトリのコピーで、 「コード」ボタンをクリックし、 「コードスペースで開く」を選択します。これにより、作業用の新しいコードスペースが作成されます。
このカリキュラムをコンピュータ上でローカルに実行するには、テキスト エディタ、ブラウザ、コマンド ライン ツールが必要です。最初のレッスン「プログラミング言語と市販ツールの紹介」では、各ツールのさまざまなオプションを説明して、自分にとって最適なものを選択できるようにします。
ターミナルが組み込まれている Visual Studio Code をエディターとして使用することをお勧めします。ここから Visual Studio コードをダウンロードできます。
リポジトリのクローンをコンピュータに作成します。これを行うには、 「コード」ボタンをクリックして URL をコピーします。
次に、Visual Studio Code 内でターミナルを開き、次のコマンドを実行します。 <your-repository-url>をコピーした URL に置き換えます。
git clone <リポジトリの URL>
Visual Studio Code でフォルダーを開きます。これを行うには、 [ファイル] > [フォルダーを開く]をクリックし、クローンを作成したばかりのフォルダーを選択します。
推奨される Visual Studio Code 拡張機能:
ライブ サーバー - Visual Studio Code 内で HTML ページをプレビューします。
Copilot - コードをより速く書くのに役立ちます
オプションのスケッチノート
オプションの補足ビデオ
レッスン前のウォーミングアップクイズ
筆記レッスン
プロジェクトベースのレッスンの場合、プロジェクトの構築方法に関するステップバイステップのガイド
知識チェック
挑戦
副読本
割り当て
レッスン後のクイズ
クイズに関する注意事項: すべてのクイズはクイズアプリフォルダーに含まれており、各 3 問の合計 48 問が含まれています。これらはレッスン内からリンクされており、クイズ アプリはローカルで実行することも、Azure にデプロイすることもできます。
quiz-appフォルダー内の指示に従ってください。それらは徐々にローカライズされています。
| プロジェクト名 | 教えられる概念 | 学習目標 | 連動レッスン | 著者 | |
|---|---|---|---|---|---|
| 01 | はじめる | プログラミングと貿易ツールの紹介 | ほとんどのプログラミング言語の背後にある基本的な基礎と、プロの開発者の仕事を支援するソフトウェアについて学びます。 | プログラミング言語と貿易ツールの紹介 | ジャスミン |
| 02 | はじめる | GitHub の基本 (チームでの作業を含む) | プロジェクトで GitHub を使用する方法、コード ベースで他のユーザーと共同作業する方法 | GitHub の概要 | 床 |
| 03 | はじめる | アクセシビリティ | ウェブアクセシビリティの基礎を学ぶ | アクセシビリティの基礎 | クリストファー |
| 04 | JSの基本 | JavaScriptのデータ型 | JavaScript データ型の基本 | データ型 | ジャスミン |
| 05 | JSの基本 | 関数とメソッド | アプリケーションのロジック フローを管理するための関数と方法について学びます | 関数とメソッド | ジャスミンとクリストファー |
| 06 | JSの基本 | JS を使用した意思決定 | 意思決定方法を使用してコード内に条件を作成する方法を学習します。 | 意思決定を行う | ジャスミン |
| 07 | JSの基本 | 配列とループ | JavaScript で配列とループを使用してデータを操作する | 配列とループ | ジャスミン |
| 08 | テラリウム | HTML の実践 | レイアウトの構築に重点を置き、オンライン テラリウムを作成するための HTML を構築します | HTML の概要 | ジェン |
| 09 | テラリウム | CSS の実践 | ページのレスポンシブ化などの CSS の基本に重点を置き、オンライン テラリウムのスタイルを設定する CSS を構築します。 | CSS の概要 | ジェン |
| 10 | テラリウム | JavaScript クロージャ、DOM 操作 | JavaScript を構築して、クロージャと DOM 操作に重点を置き、ドラッグ アンド ドロップ インターフェイスとして Terrarium 機能を作成します。 | JavaScript クロージャ、DOM 操作 | ジェン |
| 11 | タイピングゲーム | タイピング ゲームを作成する | キーボード イベントを使用して JavaScript アプリのロジックを駆動する方法を学びます | イベント駆動型プログラミング | クリストファー |
| 12 | グリーンブラウザ拡張機能 | ブラウザの操作 | ブラウザの仕組み、その歴史、ブラウザ拡張機能の最初の要素を足場にする方法を学びます。 | ブラウザについて | ジェン |
| 13 | グリーンブラウザ拡張機能 | フォームの構築、API の呼び出し、ローカル ストレージへの変数の保存 | ローカル ストレージに保存されている変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | API、フォーム、ローカルストレージ | ジェン |
| 14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Webパフォーマンス | ブラウザのバックグラウンド プロセスを使用して拡張機能のアイコンを管理します。 Web パフォーマンスと最適化について学びます | バックグラウンドタスクとパフォーマンス | ジェン |
| 15 | 宇宙ゲーム | JavaScript を使用したより高度なゲーム開発 | ゲームの構築に備えて、クラスと構成の両方を使用した継承と Pub/Sub パターンについて学びます。 | 高度なゲーム開発の概要 | クリス |
| 16 | 宇宙ゲーム | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について学びます | キャンバスへの描画 | クリス |
| 17 | 宇宙ゲーム | 画面上で要素を移動する | デカルト座標と Canvas API を使用して要素がどのように動きを得るかを確認します | 要素を移動する | クリス |
| 18 | 宇宙ゲーム | 衝突検知 | キー入力を使用して要素を衝突させ、相互に反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | 衝突検知 | クリス |
| 19 | 宇宙ゲーム | スコアを記録する | ゲームのステータスとパフォーマンスに基づいて数学的計算を実行します。 | スコアを維持する | クリス |
| 20 | 宇宙ゲーム | ゲームの終了と再起動 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学習します。 | 終了条件 | クリス |
| 21 | バンキングアプリ | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使用して、複数ページの Web サイトのアーキテクチャの足場を作成する方法を学びます。 | HTML テンプレートとルート | ヨハン |
| 22 | バンキングアプリ | ログインおよび登録フォームを作成する | フォームの構築と検証ルーチンの処理について学習します。 | フォーム | ヨハン |
| 23 | バンキングアプリ | データの取得と使用の方法 | アプリにデータがどのように出入りするか、データを取得、保存、破棄する方法 | データ | ヨハン |
| 24 | バンキングアプリ | 状態管理の概念 | アプリが状態を保持する方法と、それをプログラムで管理する方法を学びます。 | 状態管理 | ヨハン |
私たちのカリキュラムは、次の 2 つの重要な教育原則を念頭に置いて設計されています。
プロジェクトベースの学習
頻繁に行われるクイズ
このプログラムでは、JavaScript、HTML、CSS の基礎と、今日の Web 開発者が使用する最新のツールとテクニックを教えます。学生は、タイピング ゲーム、仮想テラリウム、環境に優しいブラウザ拡張機能、スペース インベーダー スタイルのゲーム、企業向けの銀行アプリを構築することで、実践的な経験を積む機会が得られます。このシリーズが終わるまでに、学生は Web 開発についてしっかりと理解できるようになります。
?このカリキュラムの最初の数レッスンは、Microsoft Learn の学習パスとして受講できます。
コンテンツがプロジェクトと確実に一致するようにすることで、プロセスが学生にとってより魅力的なものになり、概念の保持が強化されます。また、概念を紹介するための JavaScript の基本に関するいくつかのスターター レッスンを作成し、ビデオ チュートリアルの「Beginners Series to: JavaScript」コレクションのビデオと組み合わせました。その作成者の一部はこのカリキュラムに貢献しました。
さらに、授業前の低めのクイズでトピックの学習に対する学生の意図を設定し、授業後の 2 回目のクイズでさらに記憶を定着させます。このカリキュラムは柔軟で楽しいように設計されており、全部または一部を受講することができます。プロジェクトは小規模に始まり、12 週間のサイクルが終わるまでにますます複雑になっていきます。
フレームワークを採用する前に Web 開発者として必要な基本スキルに集中するために、JavaScript フレームワークの導入を意図的に避けてきましたが、このカリキュラムを完了するための次のステップとしては、別のビデオ コレクション「初心者シリーズ: Node.js」。
当社の行動規範と貢献ガイドラインをご覧ください。建設的なフィードバックをお待ちしております。
Docsify を使用すると、このドキュメントをオフラインで実行できます。このリポジトリをフォークし、ローカル マシンに Docsify をインストールし、このリポジトリのルート フォルダーにdocsify serveと入力します。 Web サイトは、ローカルホストのポート 3000 ( localhost:3000で提供されます。
すべてのレッスンの PDF はこちらからご覧いただけます。
私たちのチームは他のカリキュラムも作成しています!チェックアウト：
初心者向けAI
初心者のためのデータサイエンス
初心者向けの生成 AI
初心者向けの新しいサイバーセキュリティ
初心者のためのIoT
初心者のための機械学習
初心者向けの XR 開発
AI ペアプログラミングのための GitHub Copilot をマスターする
このリポジトリは、MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。
