マイクロソフトの Azure Cloud Advocates は、JavaScript、CSS、HTML の基本に関する 12 週間、24 レッスンのカリキュラムを提供できることを嬉しく思います。各レッスンには、レッスン前後のクイズ、レッスンを完了するための書面による指示、解決策、課題などが含まれています。私たちのプロジェクトベースの教育法は、新しいスキルを「定着」させるための実証済みの方法を構築しながら学ぶことを可能にします。
著者のジェン・ルーパー、クリス・ノリング、クリストファー・ハリソン、ジャスミン・グリーナウェイ、ヨハン・ラソルサ、フロア・ドリース、スケッチノートアーティストの井村智美に心から感謝します!
訪問 学生ハブ 初心者向けリソース、学生パック、さらには無料の証明書バウチャーを取得する方法を見つけるページ。これは、毎月コンテンツを切り替えるときにブックマークして随時確認するページです。
教師の皆さん、このカリキュラムの使い方に関するいくつかの提案を含めました。ディスカッションフォーラムでフィードバックをお待ちしております。
学生は、このカリキュラムを自分で使用するには、リポジトリ全体をフォークし、講義前のクイズから始めて、講義を読んで残りのアクティビティを完了するなど、自分で演習を完了します。ソリューションコードをコピーするのではなく、レッスンを理解してプロジェクトを作成してみてください。ただし、そのコードは、各プロジェクト指向レッスンの /Solutions フォルダーにあります。別のアイデアは、友達と研究グループを形成し、一緒にコンテンツを確認することです。さらに学習するには、マイクロソフトラーニングと以下のビデオの視聴をお勧めします。
モヒット・ジャイサルによるギフ
🎥 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオが表示されます。
このカリキュラムを構築する際に、プロジェクトベースであることと頻繁なクイズが含まれていることを確認するという2つの教育的信条を選択しました。このシリーズの終わりまでに、学生はタイピングゲーム、仮想テラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、およびビジネスタイプのバンキングアプリを構築し、JavaScript、HTML、およびCSSの基本と今日のWeb開発者の最新のツールチェーン。
🎓 このカリキュラムの最初のいくつかのレッスンは、マイクロソフト ラーンの学習パスとして受講できます。
コンテンツがプロジェクトと一致していることを確認することで、プロセスは学生にとってより魅力的になり、概念の保持が強化されます。また、概念を紹介するためにJavaScriptの基本に関するいくつかのスターターレッスンを作成し、ビデオチュートリアルの「初心者シリーズ:JavaScript」コレクションのビデオと組み合わせて、著者の何人かがこのカリキュラムに貢献しました。
さらに、授業前の低ステークスクイズはトピックの学習に向けた生徒の意図を設定し、授業後の2番目のクイズはさらなる保持を保証します。このカリキュラムは、柔軟で楽しいように設計されており、全体または一部を受講することができます。プロジェクトは小規模に始まり、12週間のサイクルの終わりまでにますます複雑になります。
フレームワークを採用する前にWeb開発者として必要な基本的なスキルに集中するためにJavaScriptフレームワークの導入を意図的に避けてきましたが、このカリキュラムを完了するための良い次のステップは、別のビデオコレクション「初心者シリーズ:Node.js」を介してNode.jsについて学ぶことです。
クイズに関する注意:すべてのクイズがこのアプリに含まれており、それぞれ3つの質問の合計48のクイズがあります。それらはレッスン内からリンクされていますが、クイズアプリはローカルで実行できます。フォルダ内の指示に従います。それらは徐々にローカライズされています。
quiz-app
プロジェクト名 | 教えられる概念 | 学習の目的 | リンクされたレッスン | 著者 | |
---|---|---|---|---|---|
01 | はじめ | 貿易のプログラミングとツールの紹介 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学びます | 貿易のプログラミング言語とツールの概要 | ジャスミン |
02 | はじめ | GitHub の基本 (チームでの作業を含む) | プロジェクトで GitHub を使用する方法、コードベースで他のユーザーと共同作業する方法 | GitHub の紹介 | 床 |
03 | はじめ | アクセシビリティ | ウェブアクセシビリティの基本を学ぶ | アクセシビリティの基礎 | クリストファー |
04 | JS の基本 | ジャバスクリプトのデータ型 | JavaScript データ型の基本 | データ型 | ジャスミン |
05 | JS の基本 | 関数とメソッド | アプリケーションのロジックフローを管理するための関数とメソッドについて学ぶ | 関数とメソッド | ジャスミンとクリストファー |
06 | JS の基本 | JSで意思決定を行う | 意思決定方法を使用してコードに条件を作成する方法を学習する | 意思 決定 | ジャスミン |
07 | JS の基本 | 配列とループ | JavaScript で配列とループを使用してデータを操作する | 配列とループ | ジャスミン |
08 | テラリウム | 実際の HTML | HTMLを構築してオンラインテラリウムを作成し、レイアウトの構築に焦点を当てます | HTML 入門 | ジェン |
09 | テラリウム | CSS の実践 | ページをレスポンシブにするなど、CSSの基本に焦点を当てて、オンラインテラリウムのスタイルを設定するCSSを構築します | CSS の概要 | ジェン |
10 | テラリウム | JavaScript クロージャ、DOM 操作 | JavaScript を構築して、テラリウムをドラッグアンドドロップインターフェイスとして機能させ、クロージャと DOM 操作に焦点を当てます。 | JavaScript クロージャ、DOM 操作 | ジェン |
11 | タイピングゲーム | タイピングゲームを構築する | キーボード イベントを使用して JavaScript アプリのロジックを操作する方法を学ぶ | イベント駆動型プログラミング | クリストファー |
12 | グリーンブラウザ拡張機能 | ブラウザの操作 | ブラウザーの動作、その履歴、およびブラウザー拡張機能の最初の要素をスキャフォールディングする方法について説明します。 | ブラウザについて | ジェン |
13 | グリーンブラウザ拡張機能 | フォームの作成、APIの呼び出し、ローカルストレージへの変数の格納 | ブラウザ拡張機能の JavaScript 要素をビルドし、ローカル ストレージに格納されている変数を使用して API を呼び出す | API、フォーム、およびローカル ストレージ | ジェン |
14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Webパフォーマンス | ブラウザのバックグラウンドプロセスを使用して、拡張機能のアイコンを管理します。Webパフォーマンスと行うべきいくつかの最適化について学ぶ | バックグラウンドタスクとパフォーマンス | ジェン |
15 | 宇宙ゲーム | JavaScript によるより高度なゲーム開発 | ゲームを構築する準備として、クラスとコンポジションの両方を使用した継承と Pub/Sub パターンについて学習します。 | 高度なゲーム開発入門 | クリス |
16 | 宇宙ゲーム | キャンバスへの描画 | 画面に要素を描画するために使用されるキャンバス API について学習する | キャンバスへの描画 | クリス |
17 | 宇宙ゲーム | 画面上で要素を移動する | デカルト座標とキャンバスAPIを使用して要素がどのように動きを得ることができるかを発見する | 要素の移動 | クリス |
18 | 宇宙ゲーム | 衝突検出 | キー押下を使用して要素を衝突させて互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します | 衝突検出 | クリス |
19 | 宇宙ゲーム | スコアの維持 | ゲームのステータスとパフォーマンスに基づいて数学の計算を実行する | スコアの維持 | クリス |
20 | 宇宙ゲーム | ゲームの終了と再起動 | ゲームの終了と再起動 (アセットのクリーンアップや変数値のリセットなど) について説明します。 | 終了条件 | クリス |
21 | バンキングアプリ | Web アプリの HTML テンプレートとルート | ルーティングとHTMLテンプレートを使用して複数ページのWebサイトのアーキテクチャのスキャフォールディングを作成する方法を学ぶ | HTML テンプレートとルート | ヨハン |
22 | バンキングアプリ | ログインおよび登録フォームを作成する | フォームの作成と検証ルーチンの受け渡しについて学ぶ | フォーム | ヨハン |
23 | バンキングアプリ | データの取得と使用の方法 | アプリの内外へのデータの送受信方法、データのフェッチ、保存、破棄の方法 | データ | ヨハン |
24 | バンキングアプリ | 状態管理の概念 | アプリが状態を保持する方法と、プログラムによって状態を管理する方法について説明します | 国営 | ヨハン |
このドキュメントは、Docsify を使用してオフラインで実行できます。このリポジトリをフォークし、ローカル コンピューターに Docsify をインストールしてから、このリポジトリのルート フォルダーに次のように入力します。ウェブサイトはあなたのローカルホストのポート3000で提供されます:。
docsify serve
localhost:3000
すべてのレッスンのPDFはここにあります。
私たちのチームは他のカリキュラムを作成します!チェックアウト:
このリポジトリはMITライセンスの下でライセンスされています。詳細については、LICENSE ファイルを参照してください。