Web-Dev-For-Beginners - 24レッスン、12週間、Web開発者として始めましょう

(24 Lessons, 12 Weeks, Get Started as a Web Developer)

Created at: 2020-11-10 10:44:00
Language: JavaScript
License: MIT

GitHubライセンス GitHubの寄稿者 GitHubの問題 GitHubプルリクエスト PRへようこそ

GitHubウォッチャー GitHubフォーク GitHubスター

初心者のための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はここにあります

その他のカリキュラム

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