MicrosoftのAzureCloudAdvocatesは、JavaScript、CSS、およびHTMLの基本に関する12週間の24レッスンのカリキュラムを提供できることを嬉しく思います。各レッスンには、レッスン前後のクイズ、レッスンを完了するための書面による指示、解決策、課題などが含まれます。私たちのプロジェクトベースの教育法では、新しいスキルを「定着」させるための実証済みの方法である、構築しながら学習することができます。
著者のJenLooper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees、スケッチノートアーティストのImura Tomomiに心から感謝します!
次のリソースから始めましょう。
先生方、このカリキュラムの使い方に関するいくつかの提案を含めました。ディスカッションフォーラムでのフィードバックをお待ちしています。
学生は、このカリキュラムを自分で使用するために、レポ全体をフォークして、講義前のクイズから始めて、講義を読み、残りのアクティビティを完了するまで、自分で演習を完了します。ソリューションコードをコピーするのではなく、レッスンを理解してプロジェクトを作成してみてください。ただし、そのコードは、各プロジェクト指向のレッスンの/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はここにあります
私たちのチームは他のカリキュラムを作成しています!チェックアウト: