初心者のためのWeb開発-カリキュラム

MicrosoftのAzureCloudAdvocatesは、JavaScript、CSS、およびHTMLの基本に関する12週間の24レッスンのカリキュラムを提供できることを嬉しく思います。各レッスンには、レッスン前後のクイズ、レッスンを完了するための書面による指示、解決策、課題などが含まれます。私たちのプロジェクトベースの教育法では、新しいスキルを「定着」させるための実証済みの方法である、構築しながら学習することができます。

著者のJenLooper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees、スケッチノートアーティストのImura Tomomiに心から感謝します！

あなたは学生ですか？

次のリソースから始めましょう。

• Student Hubページこのページには、初心者向けのリソース、学生用パック、さらには無料の証明書バウチャーを入手する方法があります。これは、少なくとも毎月コンテンツを切り替えるため、ブックマークして時々確認したい1つのページです。
• MicrosoftStudentLearnアンバサダー学生アンバサダーのグローバルコミュニティに参加してください。これがMicrosoftへの道かもしれません。

入門

先生方、このカリキュラムの使い方に関するいくつかの提案を含めました。ディスカッションフォーラムでのフィードバックをお待ちしています。

学生は、このカリキュラムを自分で使用するために、レポ全体をフォークして、講義前のクイズから始めて、講義を読み、残りのアクティビティを完了するまで、自分で演習を完了します。ソリューションコードをコピーするのではなく、レッスンを理解してプロジェクトを作成してみてください。ただし、そのコードは、各プロジェクト指向のレッスンの/solutionsフォルダーにあります。もう一つのアイデアは、友達と一緒に研究会を作り、一緒に内容を調べることです。さらに詳しく調べるには、 Microsoft Learnをお勧めします。また、以下のビデオをご覧ください。

MohitJaisalによるGIF

🎥プロジェクトとそれを作成した人々についてのビデオについては、上の画像をクリックしてください！

教育学

このカリキュラムを作成する際に、2つの教育学的信条を選択しました。それは、プロジェクトベースであり、頻繁なクイズが含まれていることを確認することです。このシリーズの終わりまでに、学生はタイピングゲーム、仮想テラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、およびビジネスタイプのバンキングアプリを構築し、JavaScriptの基本を学びます。 、HTML、CSSと、今日のWeb開発者の最新のツールチェーン。

🎓このカリキュラムの最初のいくつかのレッスンは、MicrosoftLearnの学習パスとして受講できます。

コンテンツがプロジェクトと一致するようにすることで、プロセスは学生にとってより魅力的なものになり、概念の保持が強化されます。また、JavaScriptの基本でいくつかのスターターレッスンを作成し、ビデオチュートリアルの「初心者シリーズから：JavaScript」コレクションのビデオと組み合わせて、その作成者の一部がこのカリキュラムに貢献しました。

さらに、クラスの前のローステークスクイズは、トピックを学習することへの学生の意図を設定し、クラスの後の2番目のクイズは、さらなる保持を保証します。このカリキュラムは、柔軟で楽しいものになるように設計されており、全体または一部を受講することができます。プロジェクトは小規模に始まり、12週間のサイクルの終わりまでにますます複雑になります。

フレームワークを採用する前にWeb開発者として必要な基本的なスキルに集中するために、JavaScriptフレームワークの導入を意図的に避けましたが、このカリキュラムを完了するための良い次のステップは、別のビデオコレクションを介してNode.jsについて学ぶことです。宛先：Node.js "。

行動規範、貢献、および翻訳のガイドラインを見つけてください。建設的なフィードバックを歓迎します！

各レッスンには以下が含まれます：

• オプションのスケッチノート
• オプションの補足ビデオ
• レッスン前のウォームアップクイズ
• 書かれたレッスン
• プロジェクトベースのレッスンの場合、プロジェクトの構築方法に関するステップバイステップガイド
• 知識チェック
• 挑戦
• 補足資料
• 割り当て
• レッスン後のクイズ

クイズに関する注意：すべてのクイズがこのアプリに含まれており、それぞれ3つの質問からなる合計48のクイズになります。これらはレッスン内からリンクされていますが、クイズアプリはローカルで実行できます。

quiz-app

フォルダの指示に従ってください。それらは徐々にローカライズされています。

レッスン

	プロジェクト名	教えられた概念	学習目標	リンクレッスン	著者
01	入門	プログラミングと貿易のツールの紹介	ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学びます	プログラミング言語と業界のツールの紹介	ジャスミン
02	入門	GitHubの基本、チームでの作業が含まれます	プロジェクトでGitHubを使用する方法、コードベースで他のユーザーとコラボレーションする方法	GitHubの紹介	床
03	入門	アクセシビリティ	Webアクセシビリティの基本を学ぶ	アクセシビリティの基礎	クリストファー
04	JSの基本	JavaScriptデータ型	JavaScriptデータ型の基本	データ型	ジャスミン
05	JSの基本	関数とメソッド	アプリケーションのロジックフローを管理するための関数と方法について学ぶ	関数とメソッド	ジャスミンとクリストファー
06	JSの基本	JSで意思決定	意思決定方法を使用してコードに条件を作成する方法を学ぶ	意思決定	ジャスミン
07	JSの基本	配列とループ	JavaScriptで配列とループを使用してデータを操作する	配列とループ	ジャスミン
08	テラリウム	実際のHTML	レイアウトの構築に重点を置いて、HTMLを構築してオンラインテラリウムを作成します	HTMLの紹介	ジェン
09	テラリウム	CSSの実践	ページをレスポンシブにするなど、CSSの基本に焦点を当てて、オンラインテラリウムのスタイルを設定するCSSを構築します	CSSの紹介	ジェン
10	テラリウム	JavaScriptクロージャ、DOM操作	クロージャとDOM操作に焦点を当てて、テラリウムをドラッグアンドドロップインターフェイスとして機能させるJavaScriptを構築します	JavaScriptクロージャ、DOM操作	ジェン
11	タイピングゲーム	タイピングゲームを作成する	キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学ぶ	イベント駆動型プログラミング	クリストファー
12	グリーンブラウザ拡張機能	ブラウザの操作	ブラウザの仕組み、その歴史、およびブラウザ拡張機能の最初の要素を足場にする方法を学びます	ブラウザについて	ジェン
13	グリーンブラウザ拡張機能	フォームの作成、APIの呼び出し、ローカルストレージへの変数の保存	ブラウザ拡張機能のJavaScript要素を構築して、ローカルストレージに保存されている変数を使用してAPIを呼び出します	API、フォーム、ローカルストレージ	ジェン
14	グリーンブラウザ拡張機能	ブラウザのバックグラウンドプロセス、Webパフォーマンス	ブラウザのバックグラウンドプロセスを使用して、拡張機能のアイコンを管理します。Webパフォーマンスといくつかの最適化について学ぶ	バックグラウンドタスクとパフォーマンス	ジェン
15	宇宙ゲーム	JavaScriptを使用したより高度なゲーム開発	ゲームを構築するための準備として、クラスとコンポジションの両方を使用した継承とPub/Subパターンについて学習します	高度なゲーム開発の概要	クリス
16	宇宙ゲーム	キャンバスへの描画	画面に要素を描画するために使用されるCanvasAPIについて学習します	キャンバスへの描画	クリス
17	宇宙ゲーム	画面上で要素を移動する	デカルト座標とCanvasAPIを使用して、要素がどのように動きを得ることができるかをご覧ください	要素を動かす	クリス
18	宇宙ゲーム	衝突検出	キーを押すことで要素を衝突させて相互に反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します	衝突検出	クリス
19	宇宙ゲーム	スコアを維持する	ゲームのステータスとパフォーマンスに基づいて数学計算を実行します	スコアを維持する	クリス
20	宇宙ゲーム	ゲームの終了と再開	アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学習します	終了条件	クリス
21	バンキングアプリ	WebアプリのHTMLテンプレートとルート	ルーティングとHTMLテンプレートを使用して、複数ページのWebサイトのアーキテクチャの足場を作成する方法を学びます	HTMLテンプレートとルート	ヨハン
22	バンキングアプリ	ログインおよび登録フォームを作成する	フォームの作成と検証ルーチンの受け渡しについて学ぶ	フォーム	ヨハン
23	バンキングアプリ	データを取得して使用する方法	アプリにデータが出入りする方法、データを取得、保存、破棄する方法	データ	ヨハン
24	バンキングアプリ	状態管理の概念	アプリが状態を保持する方法と、プログラムでアプリを管理する方法を学びます	状態管理	ヨハン

オフラインアクセス

Docsifyを使用して、このドキュメントをオフラインで実行できます。このレポジトリをフォークし、ローカルマシンにDocsifyをインストールしてから、このレポジトリのルートフォルダに「。」と入力し

docsify serve

ます。Webサイトはローカルホストのポート3000で提供されます：

localhost:3000

。

PDF

すべてのレッスンのPDFはここにあります

その他のカリキュラム

私たちのチームは他のカリキュラムを作成しています！チェックアウト：

• 初心者のための機械学習
• 初心者のためのIoT
• 初心者のためのデータサイエンス
• 初心者のためのAI