mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-11 17:24:24 +02:00
Merge branch 'main' into indonesian-translation
This commit is contained in:
hexatester
@@ -6,12 +6,12 @@
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
1. Development environments are unique to each developer
|
||||
2. Development environments are unique to each developer
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
1. What will a developer do to fix buggy code?
|
||||
3. What will a developer do to fix buggy code?
|
||||
|
||||
- [ ] Syntax highlighting
|
||||
- [ ] Debugging
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. A program can be created without the creator writing any code
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
1. Low level languages are a popular choice for:
|
||||
|
||||
- [ ] Websites
|
||||
- [ ] Hardware
|
||||
- [ ] Video game software
|
||||
|
||||
1. Which one of these tools would most most likely be in a web developer's environment?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
- [ ] Operating system documentation
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. A program can be created without the creator writing any code
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
2. Low level languages are a popular choice for:
|
||||
|
||||
- [ ] Websites
|
||||
- [ ] Hardware
|
||||
- [ ] Video game software
|
||||
|
||||
3. Which one of these tools would most likely be in a web developer's environment?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
- [ ] Operating system documentation
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
*択一です。このクイズを解いてみましょう。*
|
||||
|
||||
1. Webサイトを作るときに最もよく使われるプログラミング言語はどれでしょう？
|
||||
|
||||
- [ ] 機械語
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
2. 開発環境は開発者ごとに異なる？
|
||||
|
||||
- [ ] はい
|
||||
- [ ] いいえ
|
||||
|
||||
3. バグだらけのコードを修正するため、開発者は何をしますか？
|
||||
|
||||
- [ ] シンタックスハイライト
|
||||
- [ ] デバッグ
|
||||
- [ ] コードフォーマット
|
||||
@@ -0,0 +1,18 @@
|
||||
*この問題を解いてみよう。*
|
||||
|
||||
1. コードを書かなくてもプログラムを作ることはできる？
|
||||
|
||||
- [ ] はい
|
||||
- [ ] いいえ
|
||||
|
||||
2. 低レベル言語がポピュラーな分野はどこですか？
|
||||
|
||||
- [ ] Webサイト
|
||||
- [ ] ハードウェア
|
||||
- [ ] ゲームソフト
|
||||
|
||||
3. Web開発者と最も関連性の高いツールはどれでしょう？
|
||||
|
||||
- [ ] Raspberry Piのようなハードウェア
|
||||
- [ ] ブラウザ開発者ツール
|
||||
- [ ] OSドキュメント
|
||||
@@ -0,0 +1,247 @@
|
||||
# プログラミング言語と開発ツール入門
|
||||
|
||||
このレッスンでは、まずプログラミング言語の基礎を学びます。
|
||||
ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。
|
||||
次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## 事前クイズ
|
||||
[事前クイズ](.github/pre-lecture-quiz.ja.md)
|
||||
|
||||
## Introduction
|
||||
|
||||
この講座には以下が含まれています。
|
||||
|
||||
- プログラミングとは何か？
|
||||
- プログラミング言語の種類
|
||||
- プログラムの基本要素
|
||||
- 開発ツール
|
||||
|
||||
## プログラミングとは何か？
|
||||
|
||||
プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。
|
||||
命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。
|
||||
この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。
|
||||
|
||||
*プログラム*とは、コードで書かれている何かです。
|
||||
Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。
|
||||
コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。
|
||||
プログラムはコードを実行し、デバイスに命令を出します。
|
||||
あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。
|
||||
|
||||
✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？
|
||||
|
||||
## プログラミング言語
|
||||
|
||||
プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。
|
||||
デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。
|
||||
プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。
|
||||
|
||||
世の中には様々な目的のために様々なプログラミング言語が存在しています。
|
||||
たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。
|
||||
|
||||
*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。
|
||||
高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。
|
||||
JavaScriptは高レベル言語とされています。
|
||||
|
||||
次のコードは、高レベル言語であるJavaScriptと、低レベル言語であるARMアセンブリの違いを表したものです。
|
||||
|
||||
```javascript
|
||||
let number = 10
|
||||
let n1 = 0, n2 = 1, nextTerm;
|
||||
|
||||
for (let i = 1; i <= number; i++) {
|
||||
console.log(n1);
|
||||
nextTerm = n1 + n2;
|
||||
n1 = n2;
|
||||
n2 = nextTerm;
|
||||
}
|
||||
```
|
||||
|
||||
```c
|
||||
area ascen,code,readonly
|
||||
entry
|
||||
code32
|
||||
adr r0,thumb+1
|
||||
bx r0
|
||||
code16
|
||||
thumb
|
||||
mov r0,#00
|
||||
sub r0,r0,#01
|
||||
mov r1,#01
|
||||
mov r4,#10
|
||||
ldr r2,=0x40000000
|
||||
back add r0,r1
|
||||
str r0,[r2]
|
||||
add r2,#04
|
||||
mov r3,r0
|
||||
mov r0,r1
|
||||
mov r1,r3
|
||||
sub r4,#01
|
||||
cmp r4,#00
|
||||
bne back
|
||||
end
|
||||
```
|
||||
|
||||
信じられないかもしれませんが、両者は同じ処理をしています。
|
||||
いずれもフィボナッチ数を順番に10個出力します。
|
||||
|
||||
✅ [フィボナッチ数](https://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。
|
||||
|
||||
## プログラムの基本要素
|
||||
|
||||
プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。
|
||||
プログラムの区切り文字は言語によって異なります。
|
||||
|
||||
多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。
|
||||
データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。
|
||||
そのデータは*変数*と呼ばれています。
|
||||
変数とは、デバイス内のメモリにデータを保存する文のことです。
|
||||
プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。
|
||||
|
||||
プログラムには、実行されない文が現れることがあります。
|
||||
これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。
|
||||
アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。
|
||||
制御は、何らかの条件が満たされたことによって発生することが一般的です。
|
||||
最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。
|
||||
|
||||
✅ これら文については次のレッスンで詳しく学びます。
|
||||
|
||||
## 開発ツール
|
||||
|
||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||
|
||||
このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。
|
||||
|
||||
**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。
|
||||
開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。
|
||||
開発環境は、それを使用する開発者の数と同じくらい千差万別です。
|
||||
|
||||
### エディタ
|
||||
|
||||
ソフトウェア開発において最も重要なツールのひとつが、エディタです。
|
||||
エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。
|
||||
|
||||
開発者がエディタを使う理由は、それ以外にも多々あります。
|
||||
|
||||
- *デバッグ*
|
||||
コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。
|
||||
デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。
|
||||
|
||||
- *シンタックスハイライト*
|
||||
コードに色や書式を設定することで、コードを読みやすくします。
|
||||
多くのエディタはシンタックスハイライトをカスタマイズすることもできます。
|
||||
|
||||
- *拡張機能*
|
||||
デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。
|
||||
例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。
|
||||
ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。
|
||||
|
||||
- *カスタマイズ*
|
||||
ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。
|
||||
さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。
|
||||
|
||||
#### 有名なエディタとWeb開発向けのエクステンション
|
||||
|
||||
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||
- [Atom](https://atom.io/)
|
||||
- [spell-check](https://atom.io/packages/spell-check)
|
||||
- [teletype](https://atom.io/packages/teletype)
|
||||
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||
|
||||
### ブラウザ
|
||||
|
||||
もうひとつの重要なツールはブラウザです。
|
||||
Web開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。
|
||||
|
||||
多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。
|
||||
たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。
|
||||
|
||||
|
||||
#### 有名なブラウザ
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
### コマンドラインツール
|
||||
|
||||
開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。
|
||||
コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。
|
||||
|
||||
多くのタスクはマウスだけでも実行可能です。
|
||||
しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。
|
||||
またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。
|
||||
さらにマシンを新調したときに設定を移動することもできます。
|
||||
|
||||
開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。
|
||||
両方とも使う人も多いでしょう。
|
||||
|
||||
### 有名なコマンドラインオプション
|
||||
|
||||
コマンドラインオプションは、OSによって異なります。
|
||||
|
||||
💻はOSにプリインストールされているものです。
|
||||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
|
||||
|
||||
#### 有名なコマンドラインツール
|
||||
|
||||
- [Git](https://git-scm.com/) (多くのOSで 💻)
|
||||
- [NPM](https://www.npmjs.com/)
|
||||
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||
|
||||
### ドキュメント
|
||||
|
||||
何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。
|
||||
開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。
|
||||
|
||||
#### Web開発者向けの有名なドキュメント
|
||||
|
||||
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
|
||||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
|
||||
✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
いくつかのプログラミング言語について比較してみましょう。
|
||||
JavaScriptとJavaの特徴は？
|
||||
COBOLとGoについては？
|
||||
|
||||
## 事後テスト
|
||||
[事後テスト](.github/post-lecture-quiz.ja.md)
|
||||
|
||||
## レビュー & 自習
|
||||
|
||||
プログラマーが利用できる様々な言語について、少しだけかじってみましょう。
|
||||
ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。
|
||||
なにかわかりましたか？
|
||||
|
||||
## 課題
|
||||
|
||||
[assignment.md](../assignment.md)
|
||||
@@ -82,13 +82,38 @@ Let's say you have a folder locally with some code project and you want to start
|
||||
|
||||
Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist.
|
||||
|
||||
1. **Add files to tracking**
|
||||
1. **Add all files for tracking**
|
||||
This also called as staging files/ adding files to the staging area.
|
||||
|
||||
```bash
|
||||
git add .
|
||||
```
|
||||
|
||||
The `git add` plus `.` argument indicates that all your files & changes for tracking.
|
||||
The `git add` plus `.` argument indicates that all your files & changes for tracking.
|
||||
|
||||
1. **Add selected files for tracking**
|
||||
|
||||
```bash
|
||||
git add [file or folder name]
|
||||
```
|
||||
|
||||
This helps us to add only selected files to the staging area when we don't want to commit all files at once.
|
||||
|
||||
1. **Unstage all files**
|
||||
|
||||
```bash
|
||||
git reset
|
||||
```
|
||||
|
||||
This command helps us to unstage all files at once.
|
||||
|
||||
1. **Unstage a particular file**
|
||||
|
||||
```bash
|
||||
git reset [file or folder name]
|
||||
```
|
||||
|
||||
This command helps us to unstage only a particular file at once that we don't want to include for the next commit.
|
||||
|
||||
1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_:
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@ When a particular phrase needs to be highlighted, use the `<strong>` or `<em>` e
|
||||
|
||||
### Use the correct HTML
|
||||
|
||||
With CSS and JavaScript it's possible to many any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it's baffling to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
|
||||
With CSS and JavaScript it's possible to make any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it's baffling to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
|
||||
|
||||
✅ Go to any web site and see if the designers and developers are using HTML properly. Can you find a button that should be a link? Hint: right click and choose 'View Page Source' in your browser to look at underlying code.
|
||||
|
||||
|
||||
@@ -139,7 +139,7 @@ function displayDone() {
|
||||
console.log('3 seconds has elapsed');
|
||||
}
|
||||
// timer value is in milliseconds
|
||||
setTimeout(3000, displayDone);
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### Anonymous functions
|
||||
@@ -151,9 +151,9 @@ When we are passing a function as a parameter we can bypass creating one in adva
|
||||
Let's rewrite the code above to use an anonymous function:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, function() {
|
||||
setTimeout(function() {
|
||||
console.log('3 seconds has elapsed');
|
||||
});
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
If you run our new code you'll notice we get the same results. We've created a function, but didn't have to give it a name!
|
||||
@@ -165,9 +165,9 @@ One shortcut common in a lot of programming languages (including JavaScript) is
|
||||
Let's rewrite our code one more time to use a fat arrow function:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, () => {
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
});
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### When to use each strategy
|
||||
|
||||
@@ -28,9 +28,9 @@ Operators are used to evaluate conditions by making comparisons that will create
|
||||
|
||||
| Symbol | Description | Example |
|
||||
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| `<` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than the left | `5 < 6 // true` |
|
||||
| `<=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than or equal to the left | `5 <= 6 // true` |
|
||||
| `>` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` |
|
||||
| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` |
|
||||
| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` |
|
||||
| `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` |
|
||||
| `>=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` |
|
||||
| `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` |
|
||||
| `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` |
|
||||
|
||||
@@ -106,7 +106,7 @@ Now, you can start building out your page. Normally, you use `<div>` tags to cre
|
||||
|
||||
One html tag that doesn't need a closing tag is the `<img>` tag, because it has a `src` element that contains all the information the page needs to render the item.
|
||||
|
||||
Create a folder in your app called `images` and in that, add all the images in the [source code folder](../images); (there are 14 images of plants).
|
||||
Create a folder in your app called `images` and in that, add all the images in the [source code folder](../solution/images); (there are 14 images of plants).
|
||||
|
||||
### Task
|
||||
|
||||
|
||||
@@ -173,10 +173,10 @@ const quotes = [
|
||||
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
||||
];
|
||||
// store the list of words and the index of the word the player is currently typing
|
||||
const words = [];
|
||||
let words = [];
|
||||
let wordIndex = 0;
|
||||
// the starting time
|
||||
let startTime = DateTime.getTime();
|
||||
let startTime = Date.now();
|
||||
// page elements
|
||||
const quoteElement = document.getElementById('quote');
|
||||
const messageElement = document.getElementById('message');
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
|
||||
Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.
|
||||
|
||||
> Teachers, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md)
|
||||
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md)
|
||||
|
||||
> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) and by watching the videos mentioned below.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||
|
||||
@@ -64,4 +66,4 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
|
||||
|
||||
## Offline access
|
||||
|
||||
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
|
||||
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
|
||||
|
||||
Reference in New Issue
Block a user