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 の星

Visual Studio Code で開く

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

マイクロソフトの 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

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

その他のカリキュラム

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

ライセンス

このリポジトリはMITライセンスの下でライセンスされています。詳細については、LICENSE ファイルを参照してください。