chore(i18n): sync translations with latest source changes (chunk 35/44, 100 files)

pull/1670/head
localizeflow[bot] 4 weeks ago
parent 09ce283102
commit be92567f60

@ -0,0 +1,860 @@
{
"moodle.94eb93d714a50cb2.webp": {
"original_hash": "0d04a6ef1ac524b452d5a0aae3f45bee",
"translation_date": "2026-01-15T10:39:16+00:00",
"source_file": "teaching-files/moodle.png",
"language_code": "ar"
},
"canvas.fbd605ff8e5b8aff.webp": {
"original_hash": "29556305738d345dd023554d788d5477",
"translation_date": "2026-01-15T10:40:08+00:00",
"source_file": "teaching-files/canvas.png",
"language_code": "ar"
},
"install-on-edge.78634f02842c4828.webp": {
"original_hash": "6224aad8f1cd252da83c2808ff5c7a4e",
"translation_date": "2026-01-15T10:40:49+00:00",
"source_file": "5-browser-extension/install-on-edge.png",
"language_code": "ar"
},
"extension-screenshot.0e7f5bfa110e92e3.webp": {
"original_hash": "4fdd1d3fdbc9ac2c2932f83847a5e4b8",
"translation_date": "2026-01-15T10:41:36+00:00",
"source_file": "5-browser-extension/extension-screenshot.png",
"language_code": "ar"
},
"createcodespace.0238bbf4d7a8d955.webp": {
"original_hash": "4f504323085308f4a0e7b5bfb37e16d7",
"translation_date": "2026-01-15T10:41:50+00:00",
"source_file": "images/createcodespace.png",
"language_code": "ar"
},
"favicon.37b561214b36d454.webp": {
"original_hash": "228faa6584f8ba1f7e9a75e3200112e9",
"translation_date": "2026-01-15T10:41:53+00:00",
"source_file": "images/favicon.png",
"language_code": "ar"
},
"character.5c0dd8e067ffd693.webp": {
"original_hash": "076bbb4d25a17982c81973b8dba9d4fa",
"translation_date": "2026-01-15T10:42:03+00:00",
"source_file": "images/character.png",
"language_code": "ar"
},
"clone_repo.6a202fb230ab6bdd.webp": {
"original_hash": "9261d014674312eece91deae958538cf",
"translation_date": "2026-01-15T10:42:15+00:00",
"source_file": "images/clone_repo.png",
"language_code": "ar"
},
"background.148a8d43afde5730.webp": {
"original_hash": "5a50f015fb466782c69063ffebb256de",
"translation_date": "2026-01-15T10:42:32+00:00",
"source_file": "images/background.png",
"language_code": "ar"
},
"screenshot.e7a5ad659e364568.webp": {
"original_hash": "c562c1fdc9d73658456e02b873e4dff9",
"translation_date": "2026-01-15T10:42:45+00:00",
"source_file": "images/screenshot.png",
"language_code": "ar"
},
"browser.60317c9be8b7f84a.webp": {
"original_hash": "aa4461fec006d86899864d991b50cc74",
"translation_date": "2026-01-15T10:43:35+00:00",
"source_file": "sketchnotes/browser.jpg",
"language_code": "ar"
},
"webdev101-html.4389c2067af68e98.webp": {
"original_hash": "23bf24ecb0e72f0c6c835824dec5ee54",
"translation_date": "2026-01-15T10:44:33+00:00",
"source_file": "sketchnotes/webdev101-html.png",
"language_code": "ar"
},
"webdev101-programming.d6e3f98e61ac4bff.webp": {
"original_hash": "adf4dac4d350592773dbdba8ebaaa262",
"translation_date": "2026-01-15T10:45:45+00:00",
"source_file": "sketchnotes/webdev101-programming.png",
"language_code": "ar"
},
"webdev101-github.8846d7971abef6f9.webp": {
"original_hash": "412ec8fc404fead25f314e2fdb564548",
"translation_date": "2026-01-15T10:46:27+00:00",
"source_file": "sketchnotes/webdev101-github.png",
"language_code": "ar"
},
"webdev101-css.3f7af5991bf53a20.webp": {
"original_hash": "9de1dc14864697c82395b02f31a72aec",
"translation_date": "2026-01-15T10:47:21+00:00",
"source_file": "sketchnotes/webdev101-css.png",
"language_code": "ar"
},
"webdev101-js-functions.be049c4726e94f8b.webp": {
"original_hash": "ec4279b1b2191fa07a83e78a97e81f29",
"translation_date": "2026-01-15T10:48:09+00:00",
"source_file": "sketchnotes/webdev101-js-functions.png",
"language_code": "ar"
},
"webdev101-js-decisions.69e1b20f272dd1f0.webp": {
"original_hash": "5e49a0b9b4149f782a4378354ba7fd56",
"translation_date": "2026-01-15T10:48:55+00:00",
"source_file": "sketchnotes/webdev101-js-decisions.png",
"language_code": "ar"
},
"webdev101-a11y.8ef3025c858d897a.webp": {
"original_hash": "3f5220c5d502a906028b8a85245cc6da",
"translation_date": "2026-01-15T10:49:41+00:00",
"source_file": "sketchnotes/webdev101-a11y.png",
"language_code": "ar"
},
"webdev101-js-datatypes.4cc470179730702c.webp": {
"original_hash": "20fda1612cc0e8d20e6be01ffc28e5f7",
"translation_date": "2026-01-15T10:50:25+00:00",
"source_file": "sketchnotes/webdev101-js-datatypes.png",
"language_code": "ar"
},
"webdev101-js.10280393044d7eaa.webp": {
"original_hash": "fe1f154de74b31fdeb9a6df40e7ad5e1",
"translation_date": "2026-01-15T10:51:15+00:00",
"source_file": "sketchnotes/webdev101-js.png",
"language_code": "ar"
},
"webdev101-js-arrays.439d7528b8a29455.webp": {
"original_hash": "564c9e2d7f8e5a3b7e23570df300c732",
"translation_date": "2026-01-15T10:51:59+00:00",
"source_file": "sketchnotes/webdev101-js-arrays.png",
"language_code": "ar"
},
"create-new-file.2814e609c2af9aeb.webp": {
"original_hash": "cf6df76faeac2d92904e5d877b7bdf69",
"translation_date": "2026-01-15T10:52:12+00:00",
"source_file": "8-code-editor/images/create-new-file.png",
"language_code": "ar"
},
"create-new-file-pb.0797800d977ec3eb.webp": {
"original_hash": "c149c42e04132f2409651425d6924ffa",
"translation_date": "2026-01-15T10:52:31+00:00",
"source_file": "8-code-editor/images/create-new-file-pb.png",
"language_code": "ar"
},
"extension-settings.21c752ae4f4cdb78.webp": {
"original_hash": "fd7ebcb5d84c78047026ab3337908306",
"translation_date": "2026-01-15T10:53:01+00:00",
"source_file": "8-code-editor/images/extension-settings.png",
"language_code": "ar"
},
"after-codeswing-extension-pb.0ebddddcf73b5509.webp": {
"original_hash": "861d59ec65a7334c5f3a4c02dfe22ceb",
"translation_date": "2026-01-15T10:54:55+00:00",
"source_file": "8-code-editor/images/after-codeswing-extension-pb.png",
"language_code": "ar"
},
"create-a-fork.297ab42b4bd0af99.webp": {
"original_hash": "10712b80e3dcfa7c44fb8820a6ff3ad3",
"translation_date": "2026-01-15T10:55:22+00:00",
"source_file": "8-code-editor/images/create-a-fork.png",
"language_code": "ar"
},
"open-remote-repository.bd9c2598b8949e7f.webp": {
"original_hash": "777c01a9242da7d5d0e1b037df9c86f9",
"translation_date": "2026-01-15T10:55:28+00:00",
"source_file": "8-code-editor/images/open-remote-repository.png",
"language_code": "ar"
},
"extensions.eca0e0c7f59a10b5.webp": {
"original_hash": "a6c9c8f51d3edd917262e53664f08441",
"translation_date": "2026-01-15T10:55:35+00:00",
"source_file": "8-code-editor/images/extensions.png",
"language_code": "ar"
},
"edit-a-file-pb.263555922c14fc52.webp": {
"original_hash": "5c52723d35259eadd110d0c720a87b04",
"translation_date": "2026-01-15T10:56:25+00:00",
"source_file": "8-code-editor/images/edit-a-file-pb.png",
"language_code": "ar"
},
"palette-menu.4946174e07f42622.webp": {
"original_hash": "7387b91076790084ec8828866e88c6ce",
"translation_date": "2026-01-15T10:56:40+00:00",
"source_file": "8-code-editor/images/palette-menu.png",
"language_code": "ar"
},
"open-palette-menu.46dda01084738da8.webp": {
"original_hash": "1860e80bf0534b9d54ef0fcb7e1a9f9e",
"translation_date": "2026-01-15T10:56:48+00:00",
"source_file": "8-code-editor/images/open-palette-menu.png",
"language_code": "ar"
},
"default-vscode-dev.5d06881d65c1b323.webp": {
"original_hash": "146fecc3a9da37cb1d5c9d628cd94996",
"translation_date": "2026-01-15T10:56:57+00:00",
"source_file": "8-code-editor/images/default-vscode-dev.png",
"language_code": "ar"
},
"project-on-vscode.dev.e79815a9a95ee7fe.webp": {
"original_hash": "35de4bc32ea66a11f919671558e07d52",
"translation_date": "2026-01-15T10:57:05+00:00",
"source_file": "8-code-editor/images/project-on-vscode.dev.png",
"language_code": "ar"
},
"new-file-github.com.c886796d800e8056.webp": {
"original_hash": "2e0ddd0dad4734e3968b70907df9c052",
"translation_date": "2026-01-15T10:57:22+00:00",
"source_file": "8-code-editor/images/new-file-github.com.png",
"language_code": "ar"
},
"working-tree.c58eec08e6335c79.webp": {
"original_hash": "bf2608b4302123a00a8e7b1b6a430b4a",
"translation_date": "2026-01-15T10:57:40+00:00",
"source_file": "8-code-editor/images/working-tree.png",
"language_code": "ar"
},
"working-tree-pb.6cd43e5076f23ba3.webp": {
"original_hash": "f6b14887694745dd143a09bd60b74185",
"translation_date": "2026-01-15T10:58:02+00:00",
"source_file": "8-code-editor/images/working-tree-pb.png",
"language_code": "ar"
},
"extension-details.9f8f1fd4e9eb2de5.webp": {
"original_hash": "f57d2e246e6ba8a58463d7573640d714",
"translation_date": "2026-01-15T10:58:27+00:00",
"source_file": "8-code-editor/images/extension-details.png",
"language_code": "ar"
},
"edit-a-file.52c0ee665ef19f08.webp": {
"original_hash": "c28903236d60be6bba3f3848ea368c63",
"translation_date": "2026-01-15T10:58:39+00:00",
"source_file": "8-code-editor/images/edit-a-file.png",
"language_code": "ar"
},
"canvas_grid.5f209da785ded492.webp": {
"original_hash": "8da354720ffbfd778571aa17402de890",
"translation_date": "2026-01-15T10:58:44+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/canvas_grid.png",
"language_code": "ar"
},
"partI-solution.36c53b48c9ffae2a.webp": {
"original_hash": "fbbd263368f61f8ed3a86c4571e6810b",
"translation_date": "2026-01-15T10:58:49+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/partI-solution.png",
"language_code": "ar"
},
"spritesheet.bec82852290b14ee.webp": {
"original_hash": "d593b0f366e9efd2f2b3ef18e7eb2d0c",
"translation_date": "2026-01-15T10:58:51+00:00",
"source_file": "6-space-game/solution/spritesheet.png",
"language_code": "ar"
},
"laserRed.e86e8fb629c6026e.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:58:52+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.b9626ed228a17a32.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:58:53+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/enemyShip.png",
"language_code": "ar"
},
"player.680ea4c619b54fe1.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:58:54+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/player.png",
"language_code": "ar"
},
"life.466df3b1692a244a.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:58:54+00:00",
"source_file": "6-space-game/4-collision-detection/your-work/assets/life.png",
"language_code": "ar"
},
"laserRed.cae9ab24ea9b18fd.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:58:55+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.add7036e1c3c3014.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:58:56+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/enemyShip.png",
"language_code": "ar"
},
"player.c99c25d54a615ca0.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:58:57+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/player.png",
"language_code": "ar"
},
"life.65a2aaceca875284.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:58:58+00:00",
"source_file": "6-space-game/4-collision-detection/solution/assets/life.png",
"language_code": "ar"
},
"enemyShip.22cbee6ea27a5809.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:58:59+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png",
"language_code": "ar"
},
"player.47bc9de0714c723d.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:00+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/your-work/assets/player.png",
"language_code": "ar"
},
"enemyShip.5df2a822c16650c2.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:01+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/solution/assets/enemyShip.png",
"language_code": "ar"
},
"player.dd24c1afa8c71e9b.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:02+00:00",
"source_file": "6-space-game/2-drawing-to-canvas/solution/assets/player.png",
"language_code": "ar"
},
"laserRed.69730edd76f0b3bd.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:03+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.4fbf2889e6129db4.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:04+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/enemyShip.png",
"language_code": "ar"
},
"player.606f85953e5e564e.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:05+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/player.png",
"language_code": "ar"
},
"life.78b6e96a3003767e.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:59:06+00:00",
"source_file": "6-space-game/6-end-condition/your-work/assets/life.png",
"language_code": "ar"
},
"laserRed.2040e11f55c0a40a.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:07+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.1a1354d7988de290.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:08+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/enemyShip.png",
"language_code": "ar"
},
"player.137ee0e47f895ffc.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:09+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/player.png",
"language_code": "ar"
},
"life.86d843ce9c23289c.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:59:09+00:00",
"source_file": "6-space-game/6-end-condition/solution/assets/life.png",
"language_code": "ar"
},
"laserRed.e58ef8db2585dfbe.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:10+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.321ecb1b4eb21f2c.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:11+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/enemyShip.png",
"language_code": "ar"
},
"player.2887422f6982c3cd.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:12+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/player.png",
"language_code": "ar"
},
"life.2a159298dd98f4ef.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:59:13+00:00",
"source_file": "6-space-game/5-keeping-score/your-work/assets/life.png",
"language_code": "ar"
},
"laserRed.b583dc1728eb8581.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:14+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.035a46787bff658c.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:15+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/enemyShip.png",
"language_code": "ar"
},
"player.391fed427ede24f5.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:16+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/player.png",
"language_code": "ar"
},
"life.6fb9f50d53ee0413.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:59:16+00:00",
"source_file": "6-space-game/5-keeping-score/solution/assets/life.png",
"language_code": "ar"
},
"preview.9215f0a010074476.webp": {
"original_hash": "6eaab6a69de1fa433e822578652c7287",
"translation_date": "2026-01-15T10:59:21+00:00",
"source_file": "6-space-game/solution/spaceArt/preview.jpg",
"language_code": "ar"
},
"meteorBig.1e452b3ad7af50ad.webp": {
"original_hash": "07f37816512f563dd68780fdee2e30a6",
"translation_date": "2026-01-15T10:59:23+00:00",
"source_file": "6-space-game/solution/spaceArt/png/meteorBig.png",
"language_code": "ar"
},
"meteorSmall.0d729bc71c12d41f.webp": {
"original_hash": "ebabf6690cc614f9e33f019c356166fa",
"translation_date": "2026-01-15T10:59:24+00:00",
"source_file": "6-space-game/solution/spaceArt/png/meteorSmall.png",
"language_code": "ar"
},
"laserRed.d81ce4986f87c251.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:25+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserRed.png",
"language_code": "ar"
},
"enemyShip.deb0477a7312f54d.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:26+00:00",
"source_file": "6-space-game/solution/spaceArt/png/enemyShip.png",
"language_code": "ar"
},
"player.57b3107c03012695.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:27+00:00",
"source_file": "6-space-game/solution/spaceArt/png/player.png",
"language_code": "ar"
},
"laserGreenShot.e4fbfc4714c08a5b.webp": {
"original_hash": "cb6ed500c16736a41998e4cd0c467df7",
"translation_date": "2026-01-15T10:59:28+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserGreenShot.png",
"language_code": "ar"
},
"life.27144b6d4bfdea76.webp": {
"original_hash": "9a5d93e699071693b15b7b157f760a90",
"translation_date": "2026-01-15T10:59:28+00:00",
"source_file": "6-space-game/solution/spaceArt/png/life.png",
"language_code": "ar"
},
"laserGreen.89904f0f49945560.webp": {
"original_hash": "ddf7102c86fc3ec46037714c60091851",
"translation_date": "2026-01-15T10:59:29+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserGreen.png",
"language_code": "ar"
},
"laserRedShot.c39d066745996a71.webp": {
"original_hash": "1f1048184aab9d405e9f7d067a57af01",
"translation_date": "2026-01-15T10:59:30+00:00",
"source_file": "6-space-game/solution/spaceArt/png/laserRedShot.png",
"language_code": "ar"
},
"enemyUFO.bf8585e4e8dcdb68.webp": {
"original_hash": "18198bef76e4882928e4092344d0fb98",
"translation_date": "2026-01-15T10:59:31+00:00",
"source_file": "6-space-game/solution/spaceArt/png/enemyUFO.png",
"language_code": "ar"
},
"shield.1b9412b7ca6610ab.webp": {
"original_hash": "a672dc1a5f905918272bb58f1e236340",
"translation_date": "2026-01-15T10:59:33+00:00",
"source_file": "6-space-game/solution/spaceArt/png/shield.png",
"language_code": "ar"
},
"playerDamaged.181703f652fd5176.webp": {
"original_hash": "9d71aebe7303edd536064fb0f5e2ae82",
"translation_date": "2026-01-15T10:59:35+00:00",
"source_file": "6-space-game/solution/spaceArt/png/playerDamaged.png",
"language_code": "ar"
},
"playerRight.e4825f489e29f737.webp": {
"original_hash": "1c7b03f73e1d6ed74955357680cb05cb",
"translation_date": "2026-01-15T10:59:36+00:00",
"source_file": "6-space-game/solution/spaceArt/png/playerRight.png",
"language_code": "ar"
},
"playerLeft.0f928412e66ba5d9.webp": {
"original_hash": "40a42047b8ee49c6dd87c981e98d4d2e",
"translation_date": "2026-01-15T10:59:37+00:00",
"source_file": "6-space-game/solution/spaceArt/png/playerLeft.png",
"language_code": "ar"
},
"backgroundColor.e19c3c60768150c8.webp": {
"original_hash": "b3e10fe033f615ec9d3580cce61eae09",
"translation_date": "2026-01-15T10:59:38+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/backgroundColor.png",
"language_code": "ar"
},
"starBig.72e9c6d0d18f363d.webp": {
"original_hash": "4e8f1abc8b48d75990117ea8b6207842",
"translation_date": "2026-01-15T10:59:38+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/starBig.png",
"language_code": "ar"
},
"starBackground.a897b8acb1b0587d.webp": {
"original_hash": "cca00ba0b9e73859ab5bb928d5ca2fa2",
"translation_date": "2026-01-15T10:59:43+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/starBackground.png",
"language_code": "ar"
},
"starSmall.ed78b961dbcd0898.webp": {
"original_hash": "609bf88a971475818f95816b8cf71508",
"translation_date": "2026-01-15T10:59:44+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/starSmall.png",
"language_code": "ar"
},
"speedLine.5bcabb93f48b5ae1.webp": {
"original_hash": "ef791dbe8ea2e21cf697831e203803d5",
"translation_date": "2026-01-15T10:59:45+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/speedLine.png",
"language_code": "ar"
},
"nebula.55c2933d36d035d3.webp": {
"original_hash": "e0fa4f86653c6fe97bc77271c46241c2",
"translation_date": "2026-01-15T10:59:47+00:00",
"source_file": "6-space-game/solution/spaceArt/png/Background/nebula.png",
"language_code": "ar"
},
"laserRed.381bc5555491ce67.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:48+00:00",
"source_file": "6-space-game/3-moving-elements-around/your-work/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.b39a140287683bf7.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:49+00:00",
"source_file": "6-space-game/3-moving-elements-around/your-work/assets/enemyShip.png",
"language_code": "ar"
},
"player.3c4f50182552a73a.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:50+00:00",
"source_file": "6-space-game/3-moving-elements-around/your-work/assets/player.png",
"language_code": "ar"
},
"laserRed.e66e29ace6666064.webp": {
"original_hash": "6f0626e9839beb9d9a82ff40699aabfd",
"translation_date": "2026-01-15T10:59:51+00:00",
"source_file": "6-space-game/3-moving-elements-around/solution/assets/laserRed.png",
"language_code": "ar"
},
"enemyShip.62983ed4bfb2220f.webp": {
"original_hash": "2a41854e0eaa974e8619298f3b333e11",
"translation_date": "2026-01-15T10:59:52+00:00",
"source_file": "6-space-game/3-moving-elements-around/solution/assets/enemyShip.png",
"language_code": "ar"
},
"player.bfe14f110bddf56d.webp": {
"original_hash": "952e66c2dd458cfd6e82052f7123a97b",
"translation_date": "2026-01-15T10:59:53+00:00",
"source_file": "6-space-game/3-moving-elements-around/solution/assets/player.png",
"language_code": "ar"
},
"localstorage.472f8147b6a3f8d1.webp": {
"original_hash": "7706ccb87a13a08250f315f03140bc61",
"translation_date": "2026-01-15T11:00:07+00:00",
"source_file": "5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png",
"language_code": "ar"
},
"snapshot.97750180ebcad737.webp": {
"original_hash": "9db2fa7afcc1d258ec1a130cef145f94",
"translation_date": "2026-01-15T11:00:17+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/images/snapshot.png",
"language_code": "ar"
},
"profiler.5a4a62479c5df01c.webp": {
"original_hash": "40b8a4d9f47e2f3e18aa2e814a15356c",
"translation_date": "2026-01-15T11:00:58+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/images/profiler.png",
"language_code": "ar"
},
"log.804026979f3707e0.webp": {
"original_hash": "4c5e39f339781db01641b77b6b2d6026",
"translation_date": "2026-01-15T11:01:19+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/images/log.png",
"language_code": "ar"
},
"earlybrowsers.d984b711cdf3a42d.webp": {
"original_hash": "810a4d2348668e25289029c5cfcb67bd",
"translation_date": "2026-01-15T11:01:36+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/earlybrowsers.jpg",
"language_code": "ar"
},
"2.1dae52ff08042246.webp": {
"original_hash": "3995628a6a986308859d0cb6eed8d787",
"translation_date": "2026-01-15T11:01:57+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/2.png",
"language_code": "ar"
},
"install-on-edge.d68781acaf0b3d3d.webp": {
"original_hash": "6224aad8f1cd252da83c2808ff5c7a4e",
"translation_date": "2026-01-15T11:02:29+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/install-on-edge.png",
"language_code": "ar"
},
"1.b6da8c1394b07491.webp": {
"original_hash": "6b12479c2e6a54160867fa8945c04082",
"translation_date": "2026-01-15T11:02:52+00:00",
"source_file": "5-browser-extension/1-about-browsers/images/1.png",
"language_code": "ar"
},
"history.7fdabbafa521e064.webp": {
"original_hash": "445d71bea6a747dfe547df7eea846439",
"translation_date": "2026-01-15T11:03:02+00:00",
"source_file": "7-bank-project/1-template-route/history.png",
"language_code": "ar"
},
"screen1.baccbba0f1f93364.webp": {
"original_hash": "92c8fa2dbe566c4e19c98a9e7de6faa6",
"translation_date": "2026-01-15T11:03:11+00:00",
"source_file": "7-bank-project/images/screen1.png",
"language_code": "ar"
},
"screen2.123c82a831a1d14a.webp": {
"original_hash": "43b7f2857d5f758394e443df8fbc31cf",
"translation_date": "2026-01-15T11:03:25+00:00",
"source_file": "7-bank-project/images/screen2.png",
"language_code": "ar"
},
"click-register.e89a30bf0d4bc9ca.webp": {
"original_hash": "ef9688313524664fad6ab9b0e080c758",
"translation_date": "2026-01-15T11:03:29+00:00",
"source_file": "7-bank-project/2-forms/images/click-register.png",
"language_code": "ar"
},
"form-post.61de4ca1b964d91a.webp": {
"original_hash": "7e95c76a8ea2e82bceea70aae89f2360",
"translation_date": "2026-01-15T11:03:37+00:00",
"source_file": "7-bank-project/2-forms/images/form-post.png",
"language_code": "ar"
},
"validation-error.8bd23e98d416c22f.webp": {
"original_hash": "d614ce6b24e2583901da9038297fe327",
"translation_date": "2026-01-15T11:03:45+00:00",
"source_file": "7-bank-project/2-forms/images/validation-error.png",
"language_code": "ar"
},
"result.96ef01f607bf856a.webp": {
"original_hash": "e83c44a0fcaa7720ce32eb71d53d5250",
"translation_date": "2026-01-15T11:03:54+00:00",
"source_file": "7-bank-project/2-forms/images/result.png",
"language_code": "ar"
},
"browser-console.efaf0b51aaaf6778.webp": {
"original_hash": "8d6c5077d1f133d27c65c0014ef503a9",
"translation_date": "2026-01-15T11:04:03+00:00",
"source_file": "7-bank-project/2-forms/images/browser-console.png",
"language_code": "ar"
},
"login-error.416fe019b36a6327.webp": {
"original_hash": "ea96ed372d7a4c37ee2df3f0352f79d1",
"translation_date": "2026-01-15T11:04:10+00:00",
"source_file": "7-bank-project/3-data/images/login-error.png",
"language_code": "ar"
},
"mpa.7f7375a1a2d4aa77.webp": {
"original_hash": "021255b74f0b79b0c286c163c210ef3d",
"translation_date": "2026-01-15T11:04:17+00:00",
"source_file": "7-bank-project/3-data/images/mpa.png",
"language_code": "ar"
},
"spa.268ec73b41f992c2.webp": {
"original_hash": "3d3d7273070c2ddab04458fbb084ad4a",
"translation_date": "2026-01-15T11:04:25+00:00",
"source_file": "7-bank-project/3-data/images/spa.png",
"language_code": "ar"
},
"dialog.93bba104afeb79f1.webp": {
"original_hash": "c56b5ad7eb8c4df4b3ed8a99bf67e6e2",
"translation_date": "2026-01-15T11:04:39+00:00",
"source_file": "7-bank-project/4-state-management/images/dialog.png",
"language_code": "ar"
},
"data-flow.fa2354e0908fecc8.webp": {
"original_hash": "c9b82b42fa1973b3b7bfad9c7128c24c",
"translation_date": "2026-01-15T11:04:46+00:00",
"source_file": "7-bank-project/4-state-management/images/data-flow.png",
"language_code": "ar"
},
"screenshot_gray.0c796099a1f9f25e.webp": {
"original_hash": "324b7bff7867c38e100d0acad18ed53d",
"translation_date": "2026-01-15T11:04:53+00:00",
"source_file": "3-terrarium/images/screenshot_gray.png",
"language_code": "ar"
},
"vs-code-index.e2986cf919471eb9.webp": {
"original_hash": "ed8437cb2629b95551fff5e5d72ef4f5",
"translation_date": "2026-01-15T11:05:00+00:00",
"source_file": "3-terrarium/1-intro-to-html/images/vs-code-index.png",
"language_code": "ar"
},
"dom-tree.7daf0e763cbbba92.webp": {
"original_hash": "579f4ae298ff15a357def7f442671847",
"translation_date": "2026-01-15T11:05:18+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png",
"language_code": "ar"
},
"terrarium-final.0920f16e87c13a84.webp": {
"original_hash": "324b7bff7867c38e100d0acad18ed53d",
"translation_date": "2026-01-15T11:05:27+00:00",
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png",
"language_code": "ar"
},
"plant7.194d5a42fcf5a88c.webp": {
"original_hash": "b7a1e35f9946cb04440ce620c34f201d",
"translation_date": "2026-01-15T11:05:50+00:00",
"source_file": "3-terrarium/solution/images/plant7.png",
"language_code": "ar"
},
"plant9.8fe614c01ded1b1e.webp": {
"original_hash": "a9655c162938a27c63d48ac675061e2b",
"translation_date": "2026-01-15T11:06:13+00:00",
"source_file": "3-terrarium/solution/images/plant9.png",
"language_code": "ar"
},
"plant8.7b247809ab0eb492.webp": {
"original_hash": "3eb38c747aaf33ce7aa70b58a31b62a8",
"translation_date": "2026-01-15T11:06:52+00:00",
"source_file": "3-terrarium/solution/images/plant8.png",
"language_code": "ar"
},
"plant1.a876180d8659acb9.webp": {
"original_hash": "e08f9b0f46f6d9d7c9949d4c3e590694",
"translation_date": "2026-01-15T11:07:08+00:00",
"source_file": "3-terrarium/solution/images/plant1.png",
"language_code": "ar"
},
"plant14.908791477a46eb7f.webp": {
"original_hash": "349b8e5a33d1221bef4a4ac3bb439bb9",
"translation_date": "2026-01-15T11:07:32+00:00",
"source_file": "3-terrarium/solution/images/plant14.png",
"language_code": "ar"
},
"plant6.ca4ff8372e6676b1.webp": {
"original_hash": "6932fdb455fcae5b324b129367d2f56a",
"translation_date": "2026-01-15T11:07:49+00:00",
"source_file": "3-terrarium/solution/images/plant6.png",
"language_code": "ar"
},
"plant11.0ce0081b0ef17aa1.webp": {
"original_hash": "68346dbd1ae03331b0a87025c3e8e9e2",
"translation_date": "2026-01-15T11:08:13+00:00",
"source_file": "3-terrarium/solution/images/plant11.png",
"language_code": "ar"
},
"plant10.2f2c47804ae52dd3.webp": {
"original_hash": "dba97454882c2796c52a33c403db61f7",
"translation_date": "2026-01-15T11:08:37+00:00",
"source_file": "3-terrarium/solution/images/plant10.png",
"language_code": "ar"
},
"plant13.37d6ab2e2481421f.webp": {
"original_hash": "5cac561d7596ee631c4d02436d8f6998",
"translation_date": "2026-01-15T11:09:01+00:00",
"source_file": "3-terrarium/solution/images/plant13.png",
"language_code": "ar"
},
"plant4.3b78072b427727c6.webp": {
"original_hash": "c523205855d0691a9a0161c6abca983c",
"translation_date": "2026-01-15T11:09:19+00:00",
"source_file": "3-terrarium/solution/images/plant4.png",
"language_code": "ar"
},
"plant3.06efdd0fa0c4b115.webp": {
"original_hash": "7e40e6f14cf52f7d75ed42320817b044",
"translation_date": "2026-01-15T11:09:34+00:00",
"source_file": "3-terrarium/solution/images/plant3.png",
"language_code": "ar"
},
"plant5.8ec58b18ac336fa8.webp": {
"original_hash": "bcf5f2eacd7da3fe6b07c857d7f5a2ce",
"translation_date": "2026-01-15T11:09:48+00:00",
"source_file": "3-terrarium/solution/images/plant5.png",
"language_code": "ar"
},
"plant2.9e45efea224115b0.webp": {
"original_hash": "24beefd3dcca66085b44d3ae5d9758e1",
"translation_date": "2026-01-15T11:10:08+00:00",
"source_file": "3-terrarium/solution/images/plant2.png",
"language_code": "ar"
},
"plant12.6b934c4312a00228.webp": {
"original_hash": "dafacde8e7a0b56c4baaabe88b4f90e2",
"translation_date": "2026-01-15T11:10:21+00:00",
"source_file": "3-terrarium/solution/images/plant12.png",
"language_code": "ar"
},
"terrarium-final.2f07047ffc597d0a.webp": {
"original_hash": "c669f9222e16690bb2015ce86bb4739c",
"translation_date": "2026-01-15T11:10:28+00:00",
"source_file": "3-terrarium/2-intro-to-css/images/terrarium-final.png",
"language_code": "ar"
},
"1.cc07a5cbe114ad1d.webp": {
"original_hash": "fc436b6749801dd90d0558ae92d56b60",
"translation_date": "2026-01-15T11:10:34+00:00",
"source_file": "3-terrarium/2-intro-to-css/images/1.png",
"language_code": "ar"
},
"clone_repo.5085c48d666ead57.webp": {
"original_hash": "28c00f3d5861ab95d188b4f6a2d337df",
"translation_date": "2026-01-15T11:10:43+00:00",
"source_file": "1-getting-started-lessons/2-github-basics/images/clone_repo.png",
"language_code": "ar"
},
"codespace.bcecbdf5d2747d3d.webp": {
"original_hash": "ff86a65511122ddb448e092969566b0a",
"translation_date": "2026-01-15T11:10:52+00:00",
"source_file": "9-chat-project/assets/codespace.png",
"language_code": "ar"
},
"playground.d2b927122224ff8f.webp": {
"original_hash": "4152bb8cd5f23e73d58b3beb52919477",
"translation_date": "2026-01-15T11:11:32+00:00",
"source_file": "9-chat-project/assets/playground.png",
"language_code": "ar"
},
"playground-choice.1d23ba7d407f4758.webp": {
"original_hash": "1c2e88cad7aad10922b4de1e87f1a47f",
"translation_date": "2026-01-15T11:11:47+00:00",
"source_file": "9-chat-project/assets/playground-choice.png",
"language_code": "ar"
},
"template.67ad477109d29a2b.webp": {
"original_hash": "a184e4c012fd4fca9ab3c552df87bd0c",
"translation_date": "2026-01-15T11:11:52+00:00",
"source_file": "9-chat-project/assets/template.png",
"language_code": "ar"
},
"screenshot.0a1ee0d123df681b.webp": {
"original_hash": "f909b463a14ff6542a816470f68bfac3",
"translation_date": "2026-01-15T11:12:20+00:00",
"source_file": "9-chat-project/assets/screenshot.png",
"language_code": "ar"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 498 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![HTML کا تعارف](../../../../translated_images/webdev101-html.4389c2067af68e98.ur.png)
![HTML کا تعارف](../../../../translated_images/ur/webdev101-html.4389c2067af68e98.png)
> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کا ڈھانچہ سمجھیں یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔
@ -88,7 +88,7 @@ HTML کوڈ میں جانے سے پہلے، آئیے آپ کے ٹیریریم پ
4. Explorer پین میں، "New File" آئیکن پر کلک کریں
5. اپنی فائل کا نام `index.html` رکھیں
![VS Code Explorer میں نئی فائل بنانے کا عمل](../../../../translated_images/vs-code-index.e2986cf919471eb9.ur.png)
![VS Code Explorer میں نئی فائل بنانے کا عمل](../../../../translated_images/ur/vs-code-index.e2986cf919471eb9.png)
**آپشن 2: ٹرمینل کمانڈز کا استعمال**
```bash
@ -239,48 +239,48 @@ HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کل
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.ur.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/ur/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.ur.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/ur/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.ur.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/ur/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.ur.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/ur/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.ur.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/ur/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.ur.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/ur/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.ur.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/ur/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.ur.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/ur/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.ur.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/ur/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.ur.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/ur/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.ur.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/ur/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.ur.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/ur/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.ur.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/ur/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.ur.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/ur/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.png" />
</div>
</div>
</div>

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![CSS کا تعارف](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ur.png)
![CSS کا تعارف](../../../../translated_images/ur/webdev101-css.3f7af5991bf53a20.png)
> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
یاد ہے آپ کا HTML ٹیریریم کتنا سادہ نظر آ رہا تھا؟ CSS وہ جگہ ہے جہاں ہم اس سادہ ڈھانچے کو بصری طور پر دلکش چیز میں تبدیل کرتے ہیں۔
@ -205,7 +205,7 @@ body {
اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، ایلیمنٹس ٹیب پر جائیں، اور اپنے `<h1>` عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ باڈی سے فونٹ فیملی وراثت میں لیتا ہے:
![وراثت میں لیا گیا فونٹ](../../../../translated_images/1.cc07a5cbe114ad1d.ur.png)
![وراثت میں لیا گیا فونٹ](../../../../translated_images/ur/1.cc07a5cbe114ad1d.png)
**تجربہ کا وقت**: باڈی پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے `color`, `line-height`, یا `text-align` سیٹ کرنے کی کوشش کریں۔ آپ کے ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟
@ -335,7 +335,7 @@ ID سلیکٹرز `#` علامت کا استعمال کرتے ہیں اور عن
**ہر پودے کے لیے HTML ڈھانچہ یہ ہے:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ur.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/ur/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -561,7 +561,7 @@ Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکم
آپ ہلکے سفید یا ہلکے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کی نقل کرتے ہیں۔ یہ طریقہ اس طرح ہے جیسے Renaissance کے مصور جیسے Jan van Eyck نے روشنی اور عکاسی کا استعمال کرتے ہوئے پینٹ شدہ شیشے کو تین جہتی ظاہر کیا۔ آپ کا مقصد یہ ہے:
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ur.png)
![finished terrarium](../../../../translated_images/ur/terrarium-final.2f07047ffc597d0a.png)
**آپ کا چیلنج:**
- **بنائیں** ہلکے سفید یا روشنی والے بیضوی شکلیں شیشے کی عکاسی کے لیے

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM اور ایک کلوزر](../../../../translated_images/webdev101-js.10280393044d7eaa.ur.png)
![DOM اور ایک کلوزر](../../../../translated_images/ur/webdev101-js.10280393044d7eaa.png)
> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے
ویب ڈیولپمنٹ کے سب سے دلچسپ پہلو میں خوش آمدید - چیزوں کو انٹرایکٹو بنانا! دستاویز آبجیکٹ ماڈل (DOM) آپ کے HTML اور جاوا اسکرپٹ کے درمیان ایک پل کی طرح ہے، اور آج ہم اسے آپ کے ٹیریریم کو زندہ کرنے کے لیے استعمال کریں گے۔ جب ٹم برنرز لی نے پہلا ویب براؤزر بنایا، تو انہوں نے ایک ایسی ویب کا تصور کیا جہاں دستاویزات متحرک اور انٹرایکٹو ہو سکیں - DOM اس تصور کو ممکن بناتا ہے۔
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOM درخت کی نمائندگی](../../../../translated_images/dom-tree.7daf0e763cbbba92.ur.png)
![DOM درخت کی نمائندگی](../../../../translated_images/ur/dom-tree.7daf0e763cbbba92.png)
> DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) کی طرف سے
@ -150,7 +150,7 @@ flowchart LR
> 💡 **کلوزرز کو سمجھنا**: کلوزرز جاوا اسکرپٹ میں ایک اہم موضوع ہیں، اور بہت سے ڈیولپرز انہیں سالوں تک استعمال کرتے ہیں اس سے پہلے کہ وہ تمام نظریاتی پہلوؤں کو مکمل طور پر سمجھ سکیں۔ آج، ہم عملی اطلاق پر توجہ مرکوز کر رہے ہیں - آپ دیکھیں گے کہ کلوزرز قدرتی طور پر ابھرتے ہیں جب ہم اپنی انٹرایکٹو خصوصیات بناتے ہیں۔ سمجھنا اس وقت ترقی کرے گا جب آپ دیکھیں گے کہ وہ حقیقی مسائل کو کیسے حل کرتے ہیں۔
![DOM درخت کی نمائندگی](../../../../translated_images/dom-tree.7daf0e763cbbba92.ur.png)
![DOM درخت کی نمائندگی](../../../../translated_images/ur/dom-tree.7daf0e763cbbba92.png)
> DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) کی طرف سے
@ -554,7 +554,7 @@ function stopElementDrag() {
- **کراس ڈیوائس سپورٹ**: ڈیسک ٹاپ اور موبائل پر کام کرتا ہے
- **پرفارمنس کا خیال**: کوئی میموری لیکس یا غیر ضروری حسابات نہیں
![مکمل شدہ ٹیریریم](../../../../translated_images/terrarium-final.0920f16e87c13a84.ur.png)
![مکمل شدہ ٹیریریم](../../../../translated_images/ur/terrarium-final.0920f16e87c13a84.png)
---

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
ایک چھوٹا سا ڈریگ اینڈ ڈراپ کوڈ-میڈیٹیشن۔ تھوڑے سے HTML، JS اور CSS کے ساتھ، آپ ایک ویب انٹرفیس بنا سکتے ہیں، اسے اسٹائل دے سکتے ہیں، اور اس میں انٹریکشن شامل کر سکتے ہیں۔
![میرا ٹیریریم](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.ur.png)
![میرا ٹیریریم](../../../../translated_images/ur/screenshot_gray.0c796099a1f9f25e.png)
## کریڈٹس

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![براؤزر اسکیچ نوٹ](../../../../translated_images/browser.60317c9be8b7f84a.ur.jpg)
![براؤزر اسکیچ نوٹ](../../../../translated_images/ur/browser.60317c9be8b7f84a.jpg)
> اسکیچ نوٹ از [وسیم چگم](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## لیکچر سے پہلے کا کوئز
@ -79,7 +79,7 @@ mindmap
**تھوڑا سا تاریخ کے بارے میں**: پہلا براؤزر 'ورلڈ وائڈ ویب' کہلاتا تھا اور اسے سر ٹموتھی برنرز لی نے 1990 میں بنایا تھا۔
![ابتدائی براؤزرز](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.ur.jpg)
![ابتدائی براؤزرز](../../../../translated_images/ur/earlybrowsers.d984b711cdf3a42d.jpg)
> کچھ ابتدائی براؤزرز، از [کیرن میکگرین](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### براؤزرز ویب مواد کو کیسے پروسیس کرتے ہیں
@ -198,7 +198,7 @@ quadrantChart
ایکسٹینشن انسٹالیشن کے عمل کو سمجھنا آپ کو صارف کے تجربے کی پیش گوئی کرنے میں مدد دیتا ہے جب لوگ آپ کا ایکسٹینشن انسٹال کرتے ہیں۔ انسٹالیشن کا عمل جدید براؤزرز میں معیاری ہے، انٹرفیس ڈیزائن میں معمولی فرق کے ساتھ۔
![ایج براؤزر کا اسکرین شاٹ جس میں edge://extensions صفحہ اور سیٹنگز مینو کھلا ہوا دکھایا گیا ہے](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ur.png)
![ایج براؤزر کا اسکرین شاٹ جس میں edge://extensions صفحہ اور سیٹنگز مینو کھلا ہوا دکھایا گیا ہے](../../../../translated_images/ur/install-on-edge.d68781acaf0b3d3d.png)
> **اہم**: جب آپ اپنے ایکسٹینشنز کی جانچ کر رہے ہوں تو ڈویلپر موڈ کو آن کریں اور دوسرے اسٹورز سے ایکسٹینشنز کی اجازت دیں۔

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![لوکل اسٹوریج پین](../../../../translated_images/localstorage.472f8147b6a3f8d1.ur.png)
![لوکل اسٹوریج پین](../../../../translated_images/ur/localstorage.472f8147b6a3f8d1.png)
> ⚠️ **سیکیورٹی غور و فکر**: پروڈکشن ایپلیکیشنز میں، لوکل اسٹوریج میں API کلیدوں کو محفوظ کرنا سیکیورٹی خطرات پیدا کرتا ہے کیونکہ جاوا اسکرپٹ اس ڈیٹا تک رسائی حاصل کر سکتا ہے۔ سیکھنے کے مقاصد کے لیے، یہ طریقہ ٹھیک کام کرتا ہے، لیکن حقیقی ایپلیکیشنز کو حساس اسناد کے لیے محفوظ سرور سائیڈ اسٹوریج استعمال کرنا چاہیے۔

@ -126,7 +126,7 @@ flowchart LR
آئیے اسے آزمائیں۔ ایک ویب سائٹ کھولیں (Microsoft.com اس کے لیے اچھی ہے) اور 'ریکارڈ' بٹن پر کلک کریں۔ اب صفحہ کو ریفریش کریں اور پروفائلر کو ہر وہ چیز کیپچر کرتے ہوئے دیکھیں جو ہو رہی ہے۔ جب آپ ریکارڈنگ بند کریں گے، تو آپ کو ایک تفصیلی تجزیہ نظر آئے گا کہ براؤزر سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کیسے کرتا ہے۔ یہ بالکل مشن کنٹرول کی طرح ہے جو راکٹ لانچ کے دوران ہر سسٹم کی نگرانی کرتا ہے - آپ کو بالکل معلوم ہوتا ہے کہ کیا ہو رہا ہے اور کب۔
![ایج پروفائلر](../../../../translated_images/profiler.5a4a62479c5df01c.ur.png)
![ایج پروفائلر](../../../../translated_images/ur/profiler.5a4a62479c5df01c.png)
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) میں مزید تفصیلات موجود ہیں اگر آپ مزید گہرائی میں جانا چاہتے ہیں۔
@ -136,11 +136,11 @@ flowchart LR
پروفائل ٹائم لائن کے ایک حصے کو منتخب کرکے اور خلاصہ پین کو دیکھ کر اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں:
![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/snapshot.97750180ebcad737.ur.png)
![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/ur/snapshot.97750180ebcad737.png)
ایونٹ لاگ پین کو چیک کریں تاکہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے:
![ایج ایونٹ لاگ](../../../../translated_images/log.804026979f3707e0.ur.png)
![ایج ایونٹ لاگ](../../../../translated_images/ur/log.804026979f3707e0.png)
✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ کیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟

@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
### کریڈٹس
![ایک سبز براؤزر ایکسٹینشن](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایک سبز براؤزر ایکسٹینشن](../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## کریڈٹس

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کے C02 Signal API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں یاد دہانی ہو کہ آپ کے علاقے میں بجلی کا استعمال کتنا زیادہ ہے۔ اس ایکسٹینشن کو استعمال کرنے سے آپ کو اپنی سرگرمیوں کے بارے میں بہتر فیصلے کرنے میں مدد ملے گی۔
![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات کرنا
@ -31,7 +31,7 @@ npm run build
Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں موجود 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز پینل تک پہنچ سکیں۔ وہاں سے 'Load Unpacked' کو منتخب کریں تاکہ ایک نیا ایکسٹینشن لوڈ کیا جا سکے۔ جب پرامپٹ آئے تو 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گا۔ اسے استعمال کرنے کے لیے آپ کو CO2 Signal کے API کے لیے ایک API key کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [Electricity Map](https://www.electricitymap.org/map) کے مطابق [کوڈ](http://api.electricitymap.org/v3/zones) کی ضرورت ہوگی (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔
![انسٹال کرنا](../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![انسٹال کرنا](../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
جب API key اور علاقائی کوڈ ایکسٹینشن انٹرفیس میں درج کر دیے جائیں، تو براؤزر ایکسٹینشن بار میں موجود رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کو ظاہر کرے گا اور آپ کو یہ مشورہ دے گا کہ کون سی توانائی سے متعلق سرگرمیاں آپ کے لیے مناسب ہوں گی۔ اس 'نقطہ' سسٹم کا تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا تھا جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کی C02 Signal API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں براہ راست آپ کے علاقے کے بجلی کے استعمال کا یاد دہانی ہو۔ اس ایڈہاک ایکسٹینشن کا استعمال آپ کو اپنی سرگرمیوں کے بارے میں فیصلے کرنے میں مدد دے گا، اس معلومات کی بنیاد پر۔
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.ur.png)
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.png)
## شروع کرنا
@ -31,7 +31,7 @@ npm run build
Edge میں انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز کا پینل تلاش کریں۔ وہاں سے 'غیر پیک شدہ لوڈ کریں' منتخب کریں تاکہ ایک نئی ایکسٹینشن لوڈ کی جا سکے۔ جب آپ سے فولڈر کا انتخاب کرنے کو کہا جائے تو 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کرنے کے لیے، آپ کو CO2 Signal API کے لیے ایک API کلید کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر موجود باکس میں اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [بجلی کے نقشے](https://www.electricitymap.org/map) کے مطابق [زون کوڈ](http://api.electricitymap.org/v3/zones) کی ضرورت ہوگی (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔
![انسٹال کرنا](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.ur.png)
![انسٹال کرنا](../../../../../translated_images/ur/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.png)
جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں درج کیا جائے گا، تو براؤزر کی ایکسٹینشن بار میں رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کی عکاسی کرے گا اور آپ کو یہ اشارہ دے گا کہ کون سی زیادہ توانائی استعمال کرنے والی سرگرمیاں آپ کے لیے مناسب ہوں گی۔ اس "نقطہ" سسٹم کے پیچھے تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا، جو کیلیفورنیا کے اخراجات کے لیے ہے۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کی CO2 Signal API کا استعمال کرتے ہوئے بجلی کی کھپت کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کو اپنے براؤزر میں براہ راست اپنی علاقے کی بجلی کی کھپت کا یاد دہانی مل سکے۔ اس ایڈہاک ایکسٹینشن کا استعمال آپ کو ان معلومات کی بنیاد پر اپنی سرگرمیوں کے بارے میں بہتر فیصلہ کرنے میں مدد دے گا۔
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات
@ -31,7 +31,7 @@ npm run build
Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپری دائیں کونے میں 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز کا پینل تلاش کریں۔ وہاں سے، 'غیر کمپریسڈ ایکسٹینشن لوڈ کریں' کو منتخب کریں تاکہ ایک نئی ایکسٹینشن لوڈ کی جا سکے۔ پرامپٹ پر 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کے لیے، آپ کو CO2 Signal API کے لیے ایک API کلید کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر دیے گئے باکس میں اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [کوڈ](http://api.electricitymap.org/v3/zones) جو [الیکٹریسٹی میپ](https://www.electricitymap.org/map) سے مطابقت رکھتا ہو (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔
![انسٹالیشن](../../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
ایک بار جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں درج ہو جائیں، تو براؤزر کی ایکسٹینشن بار میں رنگین نقطہ آپ کے علاقے کی توانائی کی کھپت کو ظاہر کرنے کے لیے تبدیل ہو جانا چاہیے اور آپ کو توانائی کے زیادہ استعمال والی سرگرمیوں کے بارے میں اشارہ دینا چاہیے جو آپ کے لیے مناسب ہو سکتی ہیں۔ اس 'نقطہ' سسٹم کے پیچھے تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا، جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کے C02 سگنل API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کرنے کے لیے ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں آپ کے علاقے کی بجلی کے استعمال کی شدت کے بارے میں آپ کو یاد دہانی مل سکے۔ اس ایکسٹینشن کا استعمال آپ کو اس معلومات کی بنیاد پر اپنی سرگرمیوں کے بارے میں فیصلے کرنے میں مدد دے گا۔
![ایکسٹینشن اسکرین شاٹ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایکسٹینشن اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات کرنا
@ -31,7 +31,7 @@ npm run build
ایج پر انسٹال کرنے کے لیے، براؤزر کے اوپری دائیں کونے میں 'تین ڈاٹ' مینو کا استعمال کرتے ہوئے ایکسٹینشن پینل تلاش کریں۔ وہاں سے، ایک نیا ایکسٹینشن لوڈ کرنے کے لیے 'لوڈ ان پیکڈ' کا انتخاب کریں۔ پرامپٹ پر 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گا۔ اس کا استعمال کرنے کے لیے، آپ کو CO2 سگنل API ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2snal.com/)) کے لیے ایک API کلید کی ضرورت ہوگی - اس صفحے پر باکس میں اپنا ای میل درج کریں) اور [اپنے علاقے کے لیے کوڈ](http://api.electricitymap.org/v3/zones) [الیکٹریسٹی میپ](https://www.electricitymap.org/map) سے حاصل کریں (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔
![انسٹال کرنا](../../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![انسٹال کرنا](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
ایک بار جب API کلید اور علاقہ ایکسٹینشن انٹرفیس میں درج ہو جائیں، تو براؤزر ایکسٹینشن بار میں رنگین ڈاٹ آپ کے علاقے کی توانائی کے استعمال کی عکاسی کرنے کے لیے تبدیل ہو جانا چاہیے اور آپ کو یہ اشارہ دینا چاہیے کہ توانائی سے بھرپور سرگرمیاں آپ کے لیے کب موزوں ہوں گی۔ اس 'ڈاٹ' سسٹم کے پیچھے کا تصور مجھے کیلیفورنیا کے اخراج کے لیے [انرجی لالی پاپ ایکسٹینشن](https://energylollipop.com/) سے ملا تھا۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
آپ tmrow کی Signal CO2 API کا استعمال کریں گے تاکہ بجلی کے استعمال کی نگرانی کی جا سکے اور ایک براؤزر ایکسٹینشن بنائی جا سکے، جس سے آپ کو اپنے براؤزر میں براہ راست یاد دہانی ملے کہ آپ کے علاقے میں بجلی کا استعمال کتنا زیادہ ہے۔ اس خاص ایکسٹینشن کا استعمال آپ کو اپنی سرگرمیوں کا جائزہ لینے میں مدد دے گا، ان معلومات کی بنیاد پر۔
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات کے لیے
@ -31,7 +31,7 @@ npm run build
Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپری دائیں کونے میں "تین نقطے" والے مینو کا استعمال کریں تاکہ ایکسٹینشنز کا پینل تلاش کیا جا سکے۔ اگر پہلے سے فعال نہیں ہے، تو ڈویلپر موڈ کو فعال کریں (نیچے بائیں جانب)۔ "غیر کمپریسڈ لوڈ کریں" کو منتخب کریں تاکہ ایک نئی ایکسٹینشن لوڈ کی جا سکے۔ پرامپٹ پر "dist" فولڈر کھولیں، اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کے لیے، آپ کو CO2 Signal API کے لیے ایک API کلید کی ضرورت ہوگی (آپ اسے [یہاں ای میل کے ذریعے حاصل کر سکتے ہیں](https://www.co2signal.com/) - اس صفحے پر موجود باکس میں اپنا ای میل درج کریں) اور اپنی [بجلی کی نقشے](https://www.electricitymap.org/map) کے مطابق [علاقے کا کوڈ](http://api.electricitymap.org/v3/zones) (مثال کے طور پر، بوسٹن میں "US-NEISO")۔
![انسٹالیشن](../../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
ایک بار جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں درج کر دیے جائیں، تو براؤزر کی ایکسٹینشن بار میں رنگین نقطہ علاقے کے توانائی کے استعمال کی عکاسی کرنے کے لیے تبدیل ہو جانا چاہیے اور یہ اشارہ فراہم کرے گا کہ کون سی زیادہ توانائی استعمال کرنے والی سرگرمیاں انجام دینے کے لیے موزوں ہوں گی۔ اس "نقطہ" سسٹم کا تصور [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے لیا گیا ہے، جو کیلیفورنیا کی اخراجات کے لیے بنایا گیا تھا۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کے CO2 سگنل API کا استعمال کرتے ہوئے، آپ کے علاقے میں بجلی کے استعمال کی مقدار کو ٹریک کرنے کے لیے ایک براؤزر ایکسٹینشن بنایا گیا ہے جو آپ کے براؤزر پر ایک یاد دہانی کے طور پر ظاہر ہوتا ہے۔ اس ایکسٹینشن کو استعمال کرتے ہوئے، آپ اپنی سرگرمیوں کا فیصلہ اس معلومات کی بنیاد پر کر سکتے ہیں۔
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات کریں
@ -31,7 +31,7 @@ npm run build
Edge میں انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں موجود "تین نقطے" والے مینو سے "ایکسٹینشنز" پینل کو تلاش کریں۔ وہاں سے "Load Unpacked" کو منتخب کریں اور نئی ایکسٹینشن لوڈ کریں۔ جب پرامپٹ آئے تو "dist" فولڈر کو کھولیں، اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کے لیے، آپ کو CO2 سگنل API کی API کلید ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے کے باکس میں اپنا ای میل درج کریں) اور [Electricity Map](https://www.electricitymap.org/map) کے مطابق اپنے علاقے کا [کوڈ](http://api.electricitymap.org/v3/zones) درکار ہوگا (مثال کے طور پر، بوسٹن کے لیے 'US-NEISO' استعمال کیا جاتا ہے)۔
![انسٹالیشن](../../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
جب آپ API کلید اور علاقہ ایکسٹینشن انٹرفیس میں درج کریں گے، تو براؤزر کے ایکسٹینشن بار میں ظاہر ہونے والا رنگین ڈاٹ آپ کے علاقے کی توانائی کے استعمال کی عکاسی کرے گا اور یہ بتائے گا کہ کس قسم کی توانائی کی ضرورت والی سرگرمیاں انجام دینا مناسب ہے۔ اس "ڈاٹ" سسٹم کا تصور مجھے کیلیفورنیا کے اخراجات کے لیے [Energy Lollipop extension](https://energylollipop.com/) سے ملا۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کے CO2 سگنل API کا استعمال کرتے ہوئے بجلی کے استعمال کا پتہ لگائیں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کو اپنے علاقے میں بجلی کے استعمال کی شدت کے بارے میں براؤزر میں الرٹس مل سکیں۔ اس ایکسٹینشن کا استعمال خاص طور پر آپ کو اپنی سرگرمیوں کے بارے میں بہتر فیصلے کرنے میں مدد دے گا۔
![براؤزر ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![براؤزر ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات یہاں سے کریں
@ -31,7 +31,7 @@ npm run build
Edge میں انسٹال کرنے کے لیے، براؤزر کے دائیں اوپری کونے میں 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشن پینل تلاش کریں۔ وہاں سے، 'Load Unpacked' کو منتخب کریں تاکہ نیا ایکسٹینشن لوڈ کیا جا سکے۔ درخواست پر 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ اسے استعمال کرنے کے لیے، آپ کو CO2 سگنل API کے لیے ایک API کلید کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر اپنے ای میل کو باکس میں ڈالیں) اور [اپنے علاقے کے لیے کوڈ](http://api.electricitymap.org/v3/zones) جو [الیکٹریسٹی میپ](https://www.electricitymap.org/map) سے مطابقت رکھتا ہو (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔
![ڈاؤن لوڈ ہو رہا ہے](../../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![ڈاؤن لوڈ ہو رہا ہے](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
ایک بار جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں ڈال دیا جائے، تو براؤزر ایکسٹینشن بار میں رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کی عکاسی کرنے کے لیے بدل جائے گا اور آپ کو یہ مشورہ دے گا کہ کون سی بھاری سرگرمیاں آپ کے لیے مناسب ہیں۔ اس 'ڈاٹ' سسٹم کا تصور مجھے [انرجی لالی پاپ براؤزر ایکسٹینشن](https://energylollipop.com/) سے ملا، جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow کے C02 Signal API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں یاد دہانی ہو کہ آپ کے علاقے میں بجلی کا استعمال کتنا زیادہ ہے۔ اس ایکسٹینشن کو وقتی طور پر استعمال کرنے سے آپ کو اپنی سرگرمیوں کے بارے میں بہتر فیصلے کرنے میں مدد ملے گی۔
![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.ur.png)
![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png)
## شروعات کریں
@ -31,7 +31,7 @@ npm run build
Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں موجود 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز پینل تک پہنچ سکیں۔ وہاں سے 'Load Unpacked' کو منتخب کریں تاکہ نئی ایکسٹینشن لوڈ کی جا سکے۔ جب پرامپٹ آئے تو 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ اسے استعمال کرنے کے لیے، آپ کو CO2 Signal کے API کے لیے ایک API key ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر موجود باکس میں اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [Electricity Map](https://www.electricitymap.org/map) کے مطابق [کوڈ](http://api.electricitymap.org/v3/zones) کی ضرورت ہوگی (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔
![انسٹال کرنا](../../../../translated_images/install-on-edge.78634f02842c4828.ur.png)
![انسٹال کرنا](../../../../translated_images/ur/install-on-edge.78634f02842c4828.png)
جب API key اور علاقائی کوڈ ایکسٹینشن انٹرفیس میں درج کر دیے جائیں، تو براؤزر ایکسٹینشن بار میں موجود رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کو ظاہر کرے گا اور آپ کو یہ مشورہ دے گا کہ کون سی توانائی سے متعلق سرگرمیاں آپ کے لیے مناسب ہوں گی۔ اس 'نقطہ' نظام کا تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا تھا جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![کینوس کا گرڈ](../../../../translated_images/canvas_grid.5f209da785ded492.ur.png)
![کینوس کا گرڈ](../../../../translated_images/ur/canvas_grid.5f209da785ded492.png)
> تصویر [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) سے
کینوس عنصر پر ڈرائنگ کرنے کے لیے، آپ وہی تین قدمی عمل اپنائیں گے جو تمام کینوس گرافکس کی بنیاد بناتا ہے۔ ایک بار جب آپ یہ چند بار کریں گے، تو یہ آپ کے لیے آسان ہو جائے گا:
@ -181,7 +181,7 @@ ctx.fillRect(0, 0, 200, 200); // x, y, width, height
حتمی نتیجہ کچھ اس طرح نظر آنا چاہیے:
![کالا اسکرین جس پر ایک ہیرو اور 5*5 مونسٹرز ہیں](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ur.png)
![کالا اسکرین جس پر ایک ہیرو اور 5*5 مونسٹرز ہیں](../../../../translated_images/ur/partI-solution.36c53b48c9ffae2a.png)
## حل

@ -160,7 +160,7 @@ sequenceDiagram
```
- **اسکورنگ سسٹم**: ہر تباہ شدہ دشمن جہاز 100 پوائنٹس دیتا ہے (گول نمبر کھلاڑیوں کے لیے ذہنی طور پر حساب لگانا آسان بناتے ہیں)۔ اسکور نیچے بائیں کونے میں دکھایا جاتا ہے۔
- **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیوں کے ساتھ شروع ہوتا ہے - ابتدائی آرکیڈ گیمز کے ذریعہ چیلنج اور کھیلنے کی صلاحیت کو متوازن کرنے کے لیے قائم کردہ معیار۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ ہم نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے باقی زندگیوں کو دکھائیں گے ![زندگی کی تصویر](../../../../translated_images/life.6fb9f50d53ee0413.ur.png)۔
- **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیوں کے ساتھ شروع ہوتا ہے - ابتدائی آرکیڈ گیمز کے ذریعہ چیلنج اور کھیلنے کی صلاحیت کو متوازن کرنے کے لیے قائم کردہ معیار۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ ہم نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے باقی زندگیوں کو دکھائیں گے ![زندگی کی تصویر](../../../../translated_images/ur/life.6fb9f50d53ee0413.png)۔
## آئیے تعمیر شروع کریں!

@ -616,7 +616,7 @@ sequenceDiagram
`history.pushState` براؤزر کے نیویگیشن history میں نئے entries بناتا ہے۔ آپ اسے چیک کر سکتے ہیں براؤزر کے *back button* کو دبائے رکھ کر، یہ کچھ اس طرح دکھائے گا:
![نیویگیشن history کا اسکرین شاٹ](../../../../translated_images/history.7fdabbafa521e064.ur.png)
![نیویگیشن history کا اسکرین شاٹ](../../../../translated_images/ur/history.7fdabbafa521e064.png)
اگر آپ back button پر چند بار کلک کرنے کی کوشش کریں، تو آپ دیکھیں گے کہ موجودہ URL تبدیل ہوتا ہے اور history اپ ڈیٹ ہوتی ہے، لیکن وہی template ظاہر ہوتا رہتا ہے۔

@ -295,7 +295,7 @@ graph TD
2. اپنے براؤزر کے ایڈریس بار میں تبدیلیوں کا مشاہدہ کریں
3. دیکھیں کہ صفحہ کیسے ری لوڈ ہوتا ہے اور ڈیٹا URL میں ظاہر ہوتا ہے
![رجسٹر بٹن پر کلک کرنے کے بعد براؤزر کے URL میں تبدیلی کا اسکرین شاٹ](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ur.png)
![رجسٹر بٹن پر کلک کرنے کے بعد براؤزر کے URL میں تبدیلی کا اسکرین شاٹ](../../../../translated_images/ur/click-register.e89a30bf0d4bc9ca.png)
### HTTP طریقوں کا موازنہ
@ -350,7 +350,7 @@ graph TD
2. **"اکاؤنٹ بنائیں" بٹن پر کلک کریں**
3. **اپنے براؤزر میں سرور کے جواب کا مشاہدہ کریں**
![براؤزر ونڈو ایڈریس localhost:5000/api/accounts پر، صارف کے ڈیٹا کے ساتھ JSON اسٹرنگ دکھا رہا ہے](../../../../translated_images/form-post.61de4ca1b964d91a.ur.png)
![براؤزر ونڈو ایڈریس localhost:5000/api/accounts پر، صارف کے ڈیٹا کے ساتھ JSON اسٹرنگ دکھا رہا ہے](../../../../translated_images/ur/form-post.61de4ca1b964d91a.png)
**آپ کو کیا دیکھنا چاہیے:**
- **براؤزر ری ڈائریکٹ** API اینڈ پوائنٹ URL پر
@ -554,7 +554,7 @@ async function register() {
3. **"اکاؤنٹ بنائیں" پر کلک کریں**
4. **کنسول پیغامات اور صارف تاثرات کا مشاہدہ کریں**
![براؤزر کنسول میں لاگ پیغام دکھانے والا اسکرین شاٹ](../../../../translated_images/browser-console.efaf0b51aaaf6778.ur.png)
![براؤزر کنسول میں لاگ پیغام دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/browser-console.efaf0b51aaaf6778.png)
**آپ کو کیا دیکھنا چاہیے:**
- **لوڈنگ اسٹیٹ** جمع کرانے کے بٹن پر ظاہر ہوتا ہے
@ -729,7 +729,7 @@ input:focus:invalid {
3. **صارف نام کے فیلڈ میں خصوصی کردار آزمائیں**
4. **منفی بیلنس کی رقم درج کریں**
![فارم جمع کرانے کی کوشش کرتے وقت توثیق کی خرابی دکھانے والا اسکرین شاٹ](../../../../translated_images/validation-error.8bd23e98d416c22f.ur.png)
![فارم جمع کرانے کی کوشش کرتے وقت توثیق کی خرابی دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/validation-error.8bd23e98d416c22f.png)
**آپ کیا مشاہدہ کریں گے:**
- **براؤزر دکھاتا ہے** مقامی توثیق کے پیغامات
@ -858,7 +858,7 @@ timeline
یہاں ایک مثال ہے کہ CSS اسٹائلز شامل کرنے کے بعد حتمی لاگ ان صفحہ کیسا نظر آ سکتا ہے:
![CSS اسٹائلز شامل کرنے کے بعد لاگ ان صفحہ کا اسکرین شاٹ](../../../../translated_images/result.96ef01f607bf856a.ur.png)
![CSS اسٹائلز شامل کرنے کے بعد لاگ ان صفحہ کا اسکرین شاٹ](../../../../translated_images/ur/result.96ef01f607bf856a.png)
## لیکچر کے بعد کا کوئز

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![ملٹی پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/mpa.7f7375a1a2d4aa77.ur.png)
![ملٹی پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/ur/mpa.7f7375a1a2d4aa77.png)
**یہ طریقہ کیوں بھاری محسوس ہوتا تھا:**
- ہر کلک کا مطلب پورے صفحے کو شروع سے دوبارہ تعمیر کرنا تھا
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![سنگل پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/spa.268ec73b41f992c2.ur.png)
![سنگل پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/ur/spa.268ec73b41f992c2.png)
**SPA کیوں بہتر محسوس ہوتی ہیں:**
- صرف وہ حصے جو واقعی تبدیل ہوئے ہیں اپ ڈیٹ ہوتے ہیں (سمارٹ، ہے نا؟)
@ -508,7 +508,7 @@ if (data.error) {
اب جب آپ کسی غلط اکاؤنٹ کے ساتھ ٹیسٹ کریں گے، تو آپ صفحے پر ایک مددگار غلطی کا پیغام دیکھیں گے!
![لاگ ان کے دوران دکھائے جانے والے غلطی کے پیغام کا اسکرین شاٹ](../../../../translated_images/login-error.416fe019b36a6327.ur.png)
![لاگ ان کے دوران دکھائے جانے والے غلطی کے پیغام کا اسکرین شاٹ](../../../../translated_images/ur/login-error.416fe019b36a6327.png)
#### مرحلہ 4: رسائی کے ساتھ شامل ہونا
@ -891,7 +891,7 @@ Agent موڈ کے بارے میں مزید جانیں [یہاں](https://code.vi
یہاں ایک پالش شدہ ڈیش بورڈ کی مثال کی طرح نظر آ سکتا ہے:
![ڈیش بورڈ کے اسٹائلنگ کے بعد کے نتیجے کی مثال کا اسکرین شاٹ](../../../../translated_images/screen2.123c82a831a1d14a.ur.png)
![ڈیش بورڈ کے اسٹائلنگ کے بعد کے نتیجے کی مثال کا اسکرین شاٹ](../../../../translated_images/ur/screen2.123c82a831a1d14a.png)
ایسا محسوس نہ کریں کہ آپ کو اسے بالکل اسی طرح سے ملانا ہے - اسے بطور تحریک استعمال کریں اور اسے اپنا بنائیں!

@ -190,7 +190,7 @@ mindmap
اپنے دماغ کو الجھانے کے بجائے، ہم ایک **مرکزی اسٹیٹ مینجمنٹ** سسٹم بنائیں گے۔ اسے ایسے سمجھیں جیسے ایک بہت ہی منظم شخص تمام اہم چیزوں کا انچارج ہو:
![HTML، صارف کے اعمال اور اسٹیٹ کے درمیان ڈیٹا کے بہاؤ کو ظاہر کرنے والی اسکیمہ](../../../../translated_images/data-flow.fa2354e0908fecc8.ur.png)
![HTML، صارف کے اعمال اور اسٹیٹ کے درمیان ڈیٹا کے بہاؤ کو ظاہر کرنے والی اسکیمہ](../../../../translated_images/ur/data-flow.fa2354e0908fecc8.png)
```mermaid
flowchart TD

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**متوقع نتیجہ:**
اس اسائنمنٹ کو مکمل کرنے کے بعد، آپ کی بینکنگ ایپ میں ایک مکمل طور پر فعال "ٹرانزیکشن شامل کریں" فیچر ہونا چاہیے جو پیشہ ورانہ نظر آئے اور کام کرے:
![ایک مثال "ٹرانزیکشن شامل کریں" ڈائیلاگ دکھانے والا اسکرین شاٹ](../../../../translated_images/dialog.93bba104afeb79f1.ur.png)
![ایک مثال "ٹرانزیکشن شامل کریں" ڈائیلاگ دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/dialog.93bba104afeb79f1.png)
## اپنی نافذ کردہ چیز کی جانچ

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
اس پروجیکٹ میں، آپ ایک خیالی بینک بنانے کا طریقہ سیکھیں گے۔ یہ اسباق آپ کو ویب ایپ کی ترتیب اور راستے فراہم کرنے، فارم بنانے، اسٹیٹ کو منظم کرنے، اور API سے ڈیٹا حاصل کرنے کے طریقے سکھائیں گے جس سے آپ بینک کا ڈیٹا حاصل کر سکتے ہیں۔
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.ur.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.ur.png) |
| ![Screen1](../../../translated_images/ur/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/ur/screen2.123c82a831a1d14a.png) |
|--------------------------------|--------------------------------|
## اسباق

@ -185,7 +185,7 @@ VSCode.dev یہ صلاحیتیں آپ کے براؤزر میں لاتا ہے:
جب سب کچھ لوڈ ہو جائے، تو آپ ایک خوبصورت صاف ورک اسپیس دیکھیں گے جو آپ کو اس پر مرکوز رکھنے کے لیے ڈیزائن کیا گیا ہے جو اہم ہے آپ کا کوڈ!
![ڈیفالٹ VSCode.dev انٹرفیس](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ur.png)
![ڈیفالٹ VSCode.dev انٹرفیس](../../../../translated_images/ur/default-vscode-dev.5d06881d65c1b323.png)
**یہاں آپ کے علاقے کا دورہ ہے:**
- **ایکٹیویٹی بار** (بائیں طرف کی پٹی): آپ کی مرکزی نیویگیشن جس میں ایکسپلورر 📁، سرچ 🔍، سورس کنٹرول 🌿، ایکسٹینشنز 🧩، اور سیٹنگز ⚙️ شامل ہیں
@ -233,7 +233,7 @@ flowchart TB
1. [vscode.dev](https://vscode.dev) پر جائیں اگر آپ پہلے سے وہاں نہیں ہیں
2. ویلکم اسکرین پر "اوپن ریموٹ ریپوزیٹری" بٹن تلاش کریں اور اس پر کلک کریں
![اوپن ریموٹ ریپوزیٹری](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ur.png)
![اوپن ریموٹ ریپوزیٹری](../../../../translated_images/ur/open-remote-repository.bd9c2598b8949e7f.png)
3. کسی بھی GitHub ریپوزیٹری URL کو پیسٹ کریں (اسے آزمائیں: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. انٹر دبائیں اور جادو دیکھیں!
@ -242,7 +242,7 @@ flowchart TB
کیا آپ کوڈنگ کے جادوگر کی طرح محسوس کرنا چاہتے ہیں؟ یہ کی بورڈ شارٹ کٹ آزمائیں: Ctrl+Shift+P (یا Mac پر Cmd+Shift+P) کمانڈ پیلیٹ کھولنے کے لیے:
![کمانڈ پیلیٹ](../../../../translated_images/palette-menu.4946174e07f42622.ur.png)
![کمانڈ پیلیٹ](../../../../translated_images/ur/palette-menu.4946174e07f42622.png)
**کمانڈ پیلیٹ ایسا ہے جیسے آپ کے پاس ہر چیز کے لیے سرچ انجن ہو:**
- "اوپن ریموٹ" ٹائپ کریں اور یہ آپ کے لیے ریپوزیٹری اوپنر تلاش کرے گا
@ -304,7 +304,7 @@ flowchart TB
3. مناسب ایکسٹینشن سمیت فائل کا نام درج کریں (`style.css`, `script.js`, `index.html`)
4. فائل بنانے کے لیے انٹر دبائیں
![نئی فائل بنانا](../../../../translated_images/create-new-file.2814e609c2af9aeb.ur.png)
![نئی فائل بنانا](../../../../translated_images/ur/create-new-file.2814e609c2af9aeb.png)
**نام رکھنے کے اصول:**
- وضاحتی نام استعمال کریں جو فائل کے مقصد کی نشاندہی کریں
@ -387,7 +387,7 @@ mindmap
2. ارد گرد براؤز کریں یا کسی خاص چیز کی تلاش کریں
3. جو دلچسپ لگے اس پر کلک کریں تاکہ اس کے بارے میں مزید جان سکیں
![ایکسٹینشن مارکیٹ پلیس انٹرفیس](../../../../translated_images/extensions.eca0e0c7f59a10b5.ur.png)
![ایکسٹینشن مارکیٹ پلیس انٹرفیس](../../../../translated_images/ur/extensions.eca0e0c7f59a10b5.png)
**آپ کو وہاں کیا نظر آئے گا:**
@ -440,7 +440,7 @@ mindmap
3. ڈراپ ڈاؤن سے "ایکسٹینشن سیٹنگز" منتخب کریں
4. چیزوں کو ایڈجسٹ کریں جب تک کہ وہ آپ کے ورک فلو کے لیے بالکل صحیح محسوس نہ ہوں
![ایکسٹینشن سیٹنگز کو حسب ضرورت بنانا](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ur.png)
![ایکسٹینشن سیٹنگز کو حسب ضرورت بنانا](../../../../translated_images/ur/extension-settings.21c752ae4f4cdb78.png)
**عام چیزیں جو آپ ایڈجسٹ کرنا چاہیں گے:**
- آپ کا کوڈ کیسے فارمیٹ ہوتا ہے (ٹیبز بمقابلہ اسپیسز، لائن کی لمبائی، وغیرہ)

@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA:
4. ایک کمیٹ میسج لکھیں: "Add initial HTML structure"
5. "Commit new file" پر کلک کریں تاکہ آپ کی تبدیلیاں محفوظ ہو جائیں
![گٹ ہب پر ابتدائی فائل بنانا](../../../../translated_images/new-file-github.com.c886796d800e8056.ur.png)
![گٹ ہب پر ابتدائی فائل بنانا](../../../../translated_images/ur/new-file-github.com.c886796d800e8056.png)
**یہ ابتدائی سیٹ اپ کیا حاصل کرتا ہے:**
- **مناسب ایچ ٹی ایم ایل 5 دستاویز کی ساخت قائم کرتا ہے** سیمینٹک عناصر کے ساتھ
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
**کامیابی کا اشارہ**: آپ کو اپنے پروجیکٹ فائلز ایکسپلورر سائیڈ بار میں اور `index.html` کو مرکزی ایڈیٹر ایریا میں ایڈیٹنگ کے لیے دستیاب دیکھنا چاہیے۔
![وی ایس کوڈ ڈاٹ ڈی وی میں پروجیکٹ لوڈ ہوا](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ur.png)
![وی ایس کوڈ ڈاٹ ڈی وی میں پروجیکٹ لوڈ ہوا](../../../../translated_images/ur/project-on-vscode.dev.e79815a9a95ee7fe.png)
**انٹرفیس میں آپ کیا دیکھیں گے:**
- **ایکسپلورر سائیڈ بار**: **آپ کے ریپوزیٹری فائلز اور فولڈر کی ساخت دکھاتا ہے**
@ -448,7 +448,7 @@ li:before {
**انسٹالیشن کے بعد فوری نتائج:**
ایک بار کوڈ سوئنگ انسٹال ہو جائے، آپ کو اپنے ریزیوم ویب سائٹ کا لائیو پریویو ایڈیٹر میں نظر آئے گا۔ یہ آپ کو بالکل دکھاتا ہے کہ آپ کی سائٹ کیسی لگتی ہے جیسے آپ تبدیلیاں کرتے ہیں۔
![کوڈ سوئنگ ایکسٹینشن لائیو پریویو دکھا رہا ہے](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ur.png)
![کوڈ سوئنگ ایکسٹینشن لائیو پریویو دکھا رہا ہے](../../../../translated_images/ur/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**بہتر انٹرفیس کو سمجھنا:**
- **سپلٹ ویو**: **آپ کے کوڈ کو ایک طرف اور لائیو پریویو کو دوسری طرف دکھاتا ہے**

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
یہ ہے کہ آپ کا مکمل شدہ پروجیکٹ کیسا نظر آئے گا:
![چیٹ ایپ انٹرفیس جو صارف اور AI اسسٹنٹ کے درمیان گفتگو دکھا رہا ہے](../../../translated_images/screenshot.0a1ee0d123df681b.ur.png)
![چیٹ ایپ انٹرفیس جو صارف اور AI اسسٹنٹ کے درمیان گفتگو دکھا رہا ہے](../../../translated_images/ur/screenshot.0a1ee0d123df681b.png)
## 🗺️ AI ایپلیکیشن ڈویلپمنٹ کے ذریعے آپ کا سیکھنے کا سفر
@ -194,7 +194,7 @@ mindmap
**بنیادی اصول**: AI ایپلیکیشن ڈویلپمنٹ روایتی ویب ڈویلپمنٹ کی مہارتوں کو AI سروس انٹیگریشن کے ساتھ جوڑتا ہے، ذہین ایپلیکیشنز تخلیق کرتا ہے جو صارفین کے لیے قدرتی اور جوابدہ محسوس ہوتی ہیں۔
![GitHub Models AI Playground انٹرفیس ماڈل کے انتخاب اور ٹیسٹنگ ایریا کے ساتھ](../../../translated_images/playground.d2b927122224ff8f.ur.png)
![GitHub Models AI Playground انٹرفیس ماڈل کے انتخاب اور ٹیسٹنگ ایریا کے ساتھ](../../../translated_images/ur/playground.d2b927122224ff8f.png)
**یہاں ہے کہ پلے گراؤنڈ کو اتنا مفید کیا بناتا ہے:**
- **مختلف AI ماڈلز آزمائیں** جیسے GPT-4o-mini، Claude، اور دیگر (سب مفت!)
@ -204,7 +204,7 @@ mindmap
جب آپ تھوڑا سا کھیل چکے ہوں، تو بس "کوڈ" ٹیب پر کلک کریں اور اپنی پروگرامنگ زبان منتخب کریں تاکہ آپ کو وہ نفاذی کوڈ ملے جس کی آپ کو ضرورت ہے۔
![پلے گراؤنڈ کا انتخاب مختلف پروگرامنگ زبانوں کے لیے کوڈ جنریشن کے اختیارات دکھا رہا ہے](../../../translated_images/playground-choice.1d23ba7d407f4758.ur.png)
![پلے گراؤنڈ کا انتخاب مختلف پروگرامنگ زبانوں کے لیے کوڈ جنریشن کے اختیارات دکھا رہا ہے](../../../translated_images/ur/playground-choice.1d23ba7d407f4758.png)
## Python بیک اینڈ انٹیگریشن سیٹ اپ کرنا
@ -1930,14 +1930,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) پر جائیں
- اوپر دائیں کونے میں "Use this template" پر کلک کریں (یقینی بنائیں کہ آپ GitHub میں لاگ ان ہیں)
![ٹیمپلیٹ انٹرفیس دکھا رہا ہے جس میں سبز "Use this template" بٹن ہے](../../../translated_images/template.67ad477109d29a2b.ur.png)
![ٹیمپلیٹ انٹرفیس دکھا رہا ہے جس میں سبز "Use this template" بٹن ہے](../../../translated_images/ur/template.67ad477109d29a2b.png)
**مرحلہ 2: Codespaces لانچ کریں**
- اپنی نئی بنائی گئی repository کھولیں
- سبز "Code" بٹن پر کلک کریں اور "Codespaces" منتخب کریں
- "Create codespace on main" منتخب کریں تاکہ آپ کا ڈیولپمنٹ ماحول شروع ہو سکے
![Codespace انٹرفیس دکھا رہا ہے جس میں کلاؤڈ ڈیولپمنٹ ماحول لانچ کرنے کے اختیارات ہیں](../../../translated_images/codespace.bcecbdf5d2747d3d.ur.png)
![Codespace انٹرفیس دکھا رہا ہے جس میں کلاؤڈ ڈیولپمنٹ ماحول لانچ کرنے کے اختیارات ہیں](../../../translated_images/ur/codespace.bcecbdf5d2747d3d.png)
**مرحلہ 3: ماحول کی ترتیب**
جب آپ کا Codespace لوڈ ہو جائے، آپ کو رسائی حاصل ہوگی:

@ -60,13 +60,13 @@ CO_OP_TRANSLATOR_METADATA:
شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)!
![Background](../../translated_images/background.148a8d43afde5730.ur.png)
![Background](../../translated_images/ur/background.148a8d43afde5730.png)
- اسباق بنیادی باتوں سے لے کر RAG تک سب کچھ کور کرتے ہیں۔
- GenAI اور ہمارے معاون ایپ کے ذریعے تاریخی شخصیات سے بات چیت کریں۔
- دلچسپ اور مشغول نگارش، آپ وقت کے سفر پر ہوں گے!
![character](../../translated_images/character.5c0dd8e067ffd693.ur.png)
![character](../../translated_images/ur/character.5c0dd8e067ffd693.png)
ہر سبق میں ایک اسائنمنٹ، نالج چیک اور چیلنج شامل ہے تاکہ آپ اس طرح کے موضوعات پر سیکھنے میں رہنمائی کریں:
@ -103,7 +103,7 @@ CO_OP_TRANSLATOR_METADATA:
اپنی بنائی گئی ریپوزیٹری میں، **Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لیے ایک نیا Codespace بنائے گا جہاں آپ کام کر سکتے ہیں۔
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ur.png)
![Codespace](../../translated_images/ur/createcodespace.0238bbf4d7a8d955.png)
#### اپنے کمپیوٹر پر نصاب لوکل چلانا

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud میں Common Cartridge کی محدود حمایت ہے۔ اوپر دی گئی Moodle فائل کو ترجیح دیں، جسے Canvas میں بھی اپلوڈ کیا جا سکتا ہے۔
- درآمد کے بعد، ماڈیولز، مقررہ تاریخیں، اور کوئز کی ترتیبات کو اپنے ٹرم شیڈول کے مطابق دیکھیں۔
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ur.png)
![Moodle](../../translated_images/ur/moodle.94eb93d714a50cb2.png)
> Moodle کلاس روم میں نصاب
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ur.png)
![Canvas](../../translated_images/ur/canvas.fbd605ff8e5b8aff.png)
> Canvas میں نصاب
### ریپو کو براہ راست استعمال کریں (بغیر Classroom کے)

@ -17,7 +17,7 @@ Nghe này, tôi hoàn toàn hiểu nếu lập trình có vẻ đáng sợ ngay
Hôm nay, chúng ta sẽ khám phá những công cụ tuyệt vời làm cho phát triển web hiện đại không chỉ khả thi mà còn thực sự gây nghiện. Tôi đang nói về chính những trình soạn thảo, trình duyệt và quy trình làm việc mà các nhà phát triển tại Netflix, Spotify, và studio ứng dụng indie yêu thích của bạn sử dụng mỗi ngày. Và đây là phần sẽ khiến bạn nhảy múa vui vẻ: hầu hết các công cụ chuyên nghiệp, tiêu chuẩn ngành này đều hoàn toàn miễn phí!
![Giới thiệu Lập trình](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.vi.png)
![Giới thiệu Lập trình](../../../../translated_images/vi/webdev101-programming.d6e3f98e61ac4bff.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ Mình biết điều này có thể khiến bạn cảm thấy hơi quá tải l
Chúng ta sẽ cùng nhau đi qua hành trình này, từng bước một. Không vội vàng, không áp lực chỉ có bạn, mình, và một số công cụ cực kỳ thú vị sắp trở thành người bạn thân mới của bạn!
![Giới thiệu về GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.vi.png)
![Giới thiệu về GitHub](../../../../translated_images/vi/webdev101-github.8846d7971abef6f9.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -610,7 +610,7 @@ Bạn không chỉ học cách viết mã ở đây bạn đang chuẩn bị
✅ Một cách tốt để tìm các repo 'thân thiện với người mới bắt đầu' là [tìm kiếm theo thẻ 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Sao chép repo về máy](../../../../translated_images/clone_repo.5085c48d666ead57.vi.png)
![Sao chép repo về máy](../../../../translated_images/vi/clone_repo.5085c48d666ead57.png)
Có nhiều cách để sao chép mã. Một cách là "clone" nội dung của repository, sử dụng HTTPS, SSH, hoặc GitHub CLI (Command Line Interface).

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Tạo Trang Web Dễ Tiếp Cận
![Tất cả về khả năng tiếp cận](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.vi.png)
![Tất cả về khả năng tiếp cận](../../../../translated_images/vi/webdev101-a11y.8ef3025c858d897a.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1045,12 +1045,12 @@ Mỗi hình ảnh trên trang web của bạn đều có một mục đích. Hi
**Hình ảnh thông tin** - truyền tải thông tin quan trọng:
```html
<img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.vi.png" alt="Sales increased 25% from Q1 to Q2 2024">
<img src="../../../../translated_images/vi/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Hình ảnh trang trí** - chỉ mang tính trực quan, không có giá trị thông tin:
```html
<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.vi.png" alt="" role="presentation">
<img src="../../../../translated_images/vi/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.png" alt="" role="presentation">
```
**Hình ảnh chức năng** - đóng vai trò như nút hoặc điều khiển:
@ -1062,7 +1062,7 @@ Mỗi hình ảnh trên trang web của bạn đều có một mục đích. Hi
**Hình ảnh phức tạp** - biểu đồ, sơ đồ, đồ họa thông tin:
```html
<img src="../../../../translated_images/complex-chart.c831f461a363b446a688be5ccacde20d011221758c902cb082cfd4293534ef17.vi.png" alt="Quarterly sales data" aria-describedby="chart-description">
<img src="../../../../translated_images/vi/complex-chart.c831f461a363b446a688be5ccacde20d011221758c902cb082cfd4293534ef17.png" alt="Quarterly sales data" aria-describedby="chart-description">
<div id="chart-description">
<p>Detailed description: Sales data shows a steady increase across all quarters...</p>
</div>
@ -1102,7 +1102,7 @@ Mỗi hình ảnh trên trang web của bạn đều có một mục đích. Hi
<picture>
<source media="(min-width: 800px)" srcset="large-chart.png">
<source media="(min-width: 400px)" srcset="medium-chart.png">
<img src="../../../../translated_images/small-chart.c50c7b1bbcce43d8d24fbfbab8f691fe47d8f25fb7c70857c9eae21d5f22862e.vi.png" alt="Website traffic increased 40% after accessibility improvements">
<img src="../../../../translated_images/vi/small-chart.c50c7b1bbcce43d8d24fbfbab8f691fe47d8f25fb7c70857c9eae21d5f22862e.png" alt="Website traffic increased 40% after accessibility improvements">
</picture>
```

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Kiểu dữ liệu
![Cơ bản về JavaScript - Kiểu dữ liệu](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.vi.png)
![Cơ bản về JavaScript - Kiểu dữ liệu](../../../../translated_images/vi/webdev101-js-datatypes.4cc470179730702c.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Phương thức và Hàm
![Cơ bản về JavaScript - Hàm](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.vi.png)
![Cơ bản về JavaScript - Hàm](../../../../translated_images/vi/webdev101-js-functions.be049c4726e94f8b.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Ra quyết định
![Cơ bản về JavaScript - Ra quyết định](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.vi.png)
![Cơ bản về JavaScript - Ra quyết định](../../../../translated_images/vi/webdev101-js-decisions.69e1b20f272dd1f0.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Cơ bản về JavaScript: Mảng và Vòng lặp
![Cơ bản về JavaScript - Mảng](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.vi.png)
![Cơ bản về JavaScript - Mảng](../../../../translated_images/vi/webdev101-js-arrays.439d7528b8a29455.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![Giới thiệu về HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.vi.png)
![Giới thiệu về HTML](../../../../translated_images/vi/webdev101-html.4389c2067af68e98.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, hay HyperText Markup Language, là nền tảng của mọi trang web mà bạn từng truy cập. Hãy nghĩ về HTML như bộ khung xương cung cấp cấu trúc cho các trang web nó xác định nơi nội dung sẽ xuất hiện, cách tổ chức và ý nghĩa của từng phần. Trong khi CSS sẽ "trang trí" HTML của bạn với màu sắc và bố cục, và JavaScript sẽ làm cho nó sống động với tính tương tác, HTML cung cấp cấu trúc cơ bản làm nền tảng cho mọi thứ khác.
@ -88,7 +88,7 @@ Bạn sẽ tạo một thư mục dành riêng cho dự án terrarium và thêm
4. Trong bảng Explorer, nhấp vào biểu tượng "New File"
5. Đặt tên tệp của bạn là `index.html`
![VS Code Explorer hiển thị việc tạo tệp mới](../../../../translated_images/vs-code-index.e2986cf919471eb9.vi.png)
![VS Code Explorer hiển thị việc tạo tệp mới](../../../../translated_images/vi/vs-code-index.e2986cf919471eb9.png)
**Cách 2: Sử dụng Lệnh Terminal**
```bash
@ -239,48 +239,48 @@ Bây giờ hãy thêm hình ảnh cây được tổ chức trong hai cột gi
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.vi.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/vi/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.vi.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/vi/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.vi.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/vi/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.vi.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/vi/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.vi.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/vi/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.vi.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/vi/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.vi.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/vi/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.vi.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/vi/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.vi.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/vi/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.vi.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/vi/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.vi.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/vi/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.vi.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/vi/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.vi.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/vi/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.vi.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/vi/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.png" />
</div>
</div>
</div>

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![Giới thiệu về CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.vi.png)
![Giới thiệu về CSS](../../../../translated_images/vi/webdev101-css.3f7af5991bf53a20.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
Bạn còn nhớ terrarium HTML của mình trông khá đơn giản chứ? CSS chính là nơi chúng ta biến cấu trúc cơ bản đó thành một thứ hấp dẫn về mặt thị giác.
@ -205,7 +205,7 @@ body {
Mở công cụ phát triển của trình duyệt (F12), điều hướng đến tab Elements, và kiểm tra phần tử `<h1>` của bạn. Bạn sẽ thấy rằng nó thừa hưởng font family từ body:
![font thừa hưởng](../../../../translated_images/1.cc07a5cbe114ad1d.vi.png)
![font thừa hưởng](../../../../translated_images/vi/1.cc07a5cbe114ad1d.png)
**Thời gian thử nghiệm**: Hãy thử đặt các thuộc tính có thể thừa hưởng khác trên `<body>` như `color`, `line-height`, hoặc `text-align`. Điều gì xảy ra với tiêu đề và các phần tử khác?
@ -335,7 +335,7 @@ Trong terrarium của chúng ta, mỗi cây cần kiểu tương tự nhưng cũ
**Đây là cấu trúc HTML cho mỗi cây:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.vi.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/vi/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -599,7 +599,7 @@ Sẵn sàng nâng cấp terrarium của bạn với hiệu ứng phản chiếu
Bạn sẽ tạo các điểm sáng tinh tế mô phỏng cách ánh sáng phản chiếu trên bề mặt thủy tinh. Cách tiếp cận này tương tự như cách các họa sĩ thời Phục hưng như Jan van Eyck sử dụng ánh sáng và phản chiếu để làm cho thủy tinh được vẽ trông như ba chiều. Đây là mục tiêu của bạn:
![terrarium hoàn thiện](../../../../translated_images/terrarium-final.2f07047ffc597d0a.vi.png)
![terrarium hoàn thiện](../../../../translated_images/vi/terrarium-final.2f07047ffc597d0a.png)
**Thử thách của bạn:**
- **Tạo** các hình oval màu trắng hoặc sáng để làm hiệu ứng phản chiếu thủy tinh

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOM và một closure](../../../../translated_images/webdev101-js.10280393044d7eaa.vi.png)
![DOM và một closure](../../../../translated_images/vi/webdev101-js.10280393044d7eaa.png)
> Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac)
Chào mừng bạn đến với một trong những khía cạnh thú vị nhất của phát triển web - làm cho mọi thứ trở nên tương tác! Mô hình Đối tượng Tài liệu (DOM) giống như một cây cầu giữa HTML và JavaScript của bạn, và hôm nay chúng ta sẽ sử dụng nó để làm cho terrarium của bạn sống động. Khi Tim Berners-Lee tạo ra trình duyệt web đầu tiên, ông đã hình dung một web nơi các tài liệu có thể động và tương tác - DOM làm cho tầm nhìn đó trở thành hiện thực.
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![Biểu diễn cây DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.vi.png)
![Biểu diễn cây DOM](../../../../translated_images/vi/dom-tree.7daf0e763cbbba92.png)
> Một biểu diễn của DOM và mã HTML tham chiếu nó. Từ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -150,7 +150,7 @@ flowchart LR
> 💡 **Hiểu về Closures**: Closures là một chủ đề quan trọng trong JavaScript, và nhiều nhà phát triển sử dụng chúng trong nhiều năm trước khi hiểu đầy đủ tất cả các khía cạnh lý thuyết. Hôm nay, chúng ta tập trung vào ứng dụng thực tế - bạn sẽ thấy closures xuất hiện tự nhiên khi chúng ta xây dựng các tính năng tương tác. Hiểu biết sẽ phát triển khi bạn thấy cách chúng giải quyết các vấn đề thực tế.
![Biểu diễn cây DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.vi.png)
![Biểu diễn cây DOM](../../../../translated_images/vi/dom-tree.7daf0e763cbbba92.png)
> Một biểu diễn của DOM và mã HTML tham chiếu nó. Từ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -598,7 +598,7 @@ Bây giờ hãy kiểm tra terrarium tương tác của bạn! Mở tệp `index
- **Hỗ trợ đa thiết bị**: Hoạt động trên máy tính và di động
- **Ý thức về hiệu suất**: Không có rò rỉ bộ nhớ hay tính toán dư thừa
![terrarium hoàn chỉnh](../../../../translated_images/terrarium-final.0920f16e87c13a84.vi.png)
![terrarium hoàn chỉnh](../../../../translated_images/vi/terrarium-final.0920f16e87c13a84.png)
---

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Một bài tập nhỏ về kéo và thả. Với một chút HTML, JS và CSS, bạn có thể tạo giao diện web, định kiểu và thêm tương tác.
![terrarium của tôi](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.vi.png)
![terrarium của tôi](../../../../translated_images/vi/screenshot_gray.0c796099a1f9f25e.png)
## Tín dụng

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![Ghi chú hình ảnh về trình duyệt](../../../../translated_images/browser.60317c9be8b7f84a.vi.jpg)
![Ghi chú hình ảnh về trình duyệt](../../../../translated_images/vi/browser.60317c9be8b7f84a.jpg)
> Ghi chú hình ảnh bởi [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Câu hỏi trước bài giảng
@ -79,7 +79,7 @@ Quá trình này giống như cách trình duyệt web đầu tiên, WorldWideWe
**Một chút lịch sử**: Trình duyệt đầu tiên được gọi là 'WorldWideWeb' và được tạo ra bởi Sir Timothy Berners-Lee vào năm 1990.
![trình duyệt đầu tiên](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.vi.jpg)
![trình duyệt đầu tiên](../../../../translated_images/vi/earlybrowsers.d984b711cdf3a42d.jpg)
> Một số trình duyệt đầu tiên, qua [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Cách Trình duyệt Xử lý Nội dung Web
@ -198,7 +198,7 @@ quadrantChart
Hiểu quy trình cài đặt tiện ích mở rộng giúp bạn dự đoán trải nghiệm người dùng khi họ cài đặt tiện ích mở rộng của bạn. Quy trình cài đặt được chuẩn hóa trên các trình duyệt hiện đại, với những biến thể nhỏ trong thiết kế giao diện.
![ảnh chụp màn hình trình duyệt Edge hiển thị trang edge://extensions mở và menu cài đặt mở](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.vi.png)
![ảnh chụp màn hình trình duyệt Edge hiển thị trang edge://extensions mở và menu cài đặt mở](../../../../translated_images/vi/install-on-edge.d68781acaf0b3d3d.png)
> **Quan trọng**: Đảm bảo bật chế độ nhà phát triển và cho phép tiện ích mở rộng từ các cửa hàng khác khi thử nghiệm tiện ích mở rộng của riêng bạn.
@ -313,10 +313,10 @@ Bây giờ chúng ta sẽ xây dựng các thành phần giao diện người d
### Tổng quan về Giao diện Tiện ích Mở rộng
**Màn hình Cấu hình** - Cấu hình người dùng lần đầu:
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh mở trong trình duyệt, hiển thị một biểu mẫu với các trường nhập cho tên vùng và khóa API.](../../../../translated_images/1.b6da8c1394b07491.vi.png)
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh mở trong trình duyệt, hiển thị một biểu mẫu với các trường nhập cho tên vùng và khóa API.](../../../../translated_images/vi/1.b6da8c1394b07491.png)
**Màn hình Kết quả** - Hiển thị dữ liệu dấu chân carbon:
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh hiển thị các giá trị về sử dụng carbon và tỷ lệ nhiên liệu hóa thạch cho vùng US-NEISO.](../../../../translated_images/2.1dae52ff08042246.vi.png)
![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh hiển thị các giá trị về sử dụng carbon và tỷ lệ nhiên liệu hóa thạch cho vùng US-NEISO.](../../../../translated_images/vi/2.1dae52ff08042246.png)
### Xây dựng Biểu mẫu Cấu hình

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![Bảng bộ nhớ cục bộ](../../../../translated_images/localstorage.472f8147b6a3f8d1.vi.png)
![Bảng bộ nhớ cục bộ](../../../../translated_images/vi/localstorage.472f8147b6a3f8d1.png)
> ⚠️ **Cân nhắc về bảo mật**: Trong các ứng dụng sản xuất, việc lưu trữ khóa API trong LocalStorage gây rủi ro bảo mật vì JavaScript có thể truy cập dữ liệu này. Đối với mục đích học tập, cách tiếp cận này hoạt động tốt, nhưng các ứng dụng thực tế nên sử dụng lưu trữ phía máy chủ an toàn cho thông tin đăng nhập nhạy cảm.

@ -126,7 +126,7 @@ flowchart LR
Hãy thử điều này. Mở một trang web (Microsoft.com hoạt động tốt cho việc này) và nhấp vào nút 'Record'. Bây giờ làm mới trang và xem profiler ghi lại mọi thứ xảy ra. Khi bạn dừng ghi, bạn sẽ thấy một phân tích chi tiết về cách trình duyệt 'scripts', 'renders', và 'paints' trang web. Nó làm tôi nhớ đến cách trung tâm điều khiển giám sát mọi hệ thống trong một lần phóng tên lửa - bạn nhận được dữ liệu thời gian thực về chính xác những gì đang xảy ra và khi nào.
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.vi.png)
![Edge profiler](../../../../translated_images/vi/profiler.5a4a62479c5df01c.png)
✅ [Tài liệu Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) có rất nhiều chi tiết nếu bạn muốn tìm hiểu sâu hơn
@ -136,11 +136,11 @@ Chọn các phần của dòng thời gian profile để phóng to các sự ki
Lấy một ảnh chụp nhanh về hiệu suất trang của bạn bằng cách chọn một phần của dòng thời gian profile và nhìn vào bảng tóm tắt:
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.vi.png)
![Edge profiler snapshot](../../../../translated_images/vi/snapshot.97750180ebcad737.png)
Kiểm tra bảng Event Log để xem liệu có sự kiện nào mất hơn 15 ms:
![Edge event log](../../../../translated_images/log.804026979f3707e0.vi.png)
![Edge event log](../../../../translated_images/vi/log.804026979f3707e0.png)
✅ Làm quen với profiler của bạn! Mở công cụ dành cho nhà phát triển trên trang này và xem liệu có bất kỳ nút thắt nào không. Tài nguyên nào tải chậm nhất? Nhanh nhất?

@ -23,7 +23,7 @@ Tiện ích này có thể được người dùng gọi bất kỳ lúc nào sa
### Ghi nhận
![một tiện ích mở rộng trình duyệt màu xanh lá cây](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![một tiện ích mở rộng trình duyệt màu xanh lá cây](../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Ghi nhận

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện, bạn có thể xây dựng một tiện ích mở rộng trình duyệt để nhận nhắc nhở ngay trong trình duyệt về mức độ tiêu thụ điện năng trong khu vực của bạn. Việc sử dụng tiện ích này một cách linh hoạt sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![ảnh chụp tiện ích](../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt Đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện Ích Mở Rộng (Extensions). Từ đó, chọn 'Tải Tiện Ích Không Đóng Gói' (Load Unpacked) để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một khóa API cho API của CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![cài đặt](../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![cài đặt](../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Khi bạn đã nhập khóa API và mã khu vực vào giao diện tiện ích, chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp gợi ý về các hoạt động tiêu tốn năng lượng phù hợp. Ý tưởng đằng sau hệ thống 'chấm màu' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API tín hiệu CO2 của tmrow để theo dõi việc sử dụng điện, hãy tạo một tiện ích mở rộng trình duyệt để bạn có thể nhận được lời nhắc trực tiếp trong trình duyệt về mức tiêu thụ điện năng trong khu vực của mình. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.vi.png)
![extension screenshot](../../../../../translated_images/vi/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện ích mở rộng. Từ đó, chọn 'Tải không đóng gói' để tải một tiện ích mở rộng mới. Mở thư mục 'dist' khi được yêu cầu và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực](http://api.electricitymap.org/v3/zones) tương ứng với [Bản đồ điện](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.vi.png)
![installing](../../../../../translated_images/vi/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.png)
Khi bạn nhập khóa API và khu vực vào giao diện tiện ích mở rộng, điểm màu trên thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức sử dụng năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng cao phù hợp. Ý tưởng đằng sau hệ thống "điểm" này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện năng, hãy tạo một tiện ích mở rộng trình duyệt để bạn có thể nhận được thông báo trực tiếp trong trình duyệt về mức tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![ảnh chụp tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Từ đó, chọn 'Tải tiện ích mở rộng chưa nén' để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Bản đồ điện năng](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![cài đặt](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Sau khi nhập khóa API và khu vực vào giao diện tiện ích mở rộng, điểm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng mà bạn nên thực hiện. Ý tưởng đằng sau hệ thống 'điểm' này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API tín hiệu CO2 của tmrow để theo dõi mức tiêu thụ điện năng, xây dựng một tiện ích mở rộng trình duyệt nhằm nhắc nhở bạn về mức độ tiêu thụ điện năng trong khu vực của bạn ngay trong trình duyệt. Việc sử dụng tiện ích này sẽ giúp bạn đưa ra quyết định dựa trên thông tin đó về các hoạt động của mình.
![Ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![Ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng tiện ích mở rộng. Từ đó, chọn 'Load unpacked' để tải một tiện ích mở rộng mới. Khi được nhắc, mở thư mục 'dist' và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API của CO2 Signal ([nhận qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào hộp trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) từ [Electricity Map](https://www.electricitymap.org/map) (ví dụ: ở Boston, tôi sử dụng 'US-NEISO').
![Cài đặt](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![Cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Sau khi nhập khóa API và mã khu vực vào giao diện tiện ích mở rộng, dấu chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng phù hợp với hiệu suất của bạn. Ý tưởng về hệ thống 'dấu chấm' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Chúng ta sẽ sử dụng API Signal CO2 của tmrow để theo dõi việc sử dụng điện và tạo một tiện ích mở rộng cho trình duyệt, giúp bạn nhận được thông báo trực tiếp trên trình duyệt về mức độ tiêu thụ điện năng trong khu vực của mình. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đánh giá các hoạt động của mình dựa trên thông tin này.
![ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu "ba chấm" ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Nếu chưa được kích hoạt, hãy bật Chế độ nhà phát triển (ở góc dưới bên trái). Chọn "Tải không nén" để tải một tiện ích mở rộng mới. Mở thư mục "dist" khi được nhắc và tiện ích mở rộng sẽ được tải lên. Để sử dụng, bạn sẽ cần một khóa API cho API CO2 Signal (bạn có thể [nhận tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [bản đồ điện](https://www.electricitymap.org/map) (ví dụ, ở Boston, mã là "US-NEISO").
![cài đặt](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Khi bạn đã nhập khóa API và khu vực vào giao diện của tiện ích mở rộng, chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực và cung cấp gợi ý về những hoạt động tiêu tốn nhiều năng lượng nào phù hợp để thực hiện. Ý tưởng đằng sau hệ thống "chấm" này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Xây dựng một tiện ích mở rộng trình duyệt để hiển thị lời nhắc trên trình duyệt về mức độ sử dụng điện trong khu vực của bạn, sử dụng API CO2 Signal của tmrow để theo dõi lượng điện tiêu thụ. Bằng cách sử dụng tiện ích mở rộng này, bạn có thể đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![extension screenshot](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, hãy tìm bảng điều khiển "Tiện ích mở rộng" từ menu "ba chấm" ở góc trên bên phải của trình duyệt. Từ đó, chọn "Load Unpacked" để tải tiện ích mở rộng mới. Khi được nhắc, mở thư mục "dist" và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một API key của CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực tương ứng](http://api.electricitymap.org/v3/zones) từ [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, sử dụng 'US-NEISO').
![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![installing](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Sau khi nhập API key và khu vực vào giao diện tiện ích, một chấm màu sẽ xuất hiện trên thanh tiện ích mở rộng của trình duyệt, thay đổi màu sắc để phản ánh mức độ sử dụng năng lượng trong khu vực của bạn. Điều này giúp bạn biết khi nào là thời điểm thích hợp để thực hiện các hoạt động cần nhiều năng lượng. Ý tưởng về hệ thống "chấm màu" này được lấy cảm hứng từ [Energy Lollipop extension](https://energylollipop.com/) dành cho lượng phát thải ở California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API CO2 Signal của tmrow để theo dõi mức tiêu thụ điện năng, xây dựng tiện ích mở rộng trình duyệt để bạn có thể nhận được cảnh báo trong trình duyệt về mức độ tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích này sẽ giúp bạn cân nhắc các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích mở rộng trình duyệt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![ảnh chụp tiện ích mở rộng trình duyệt](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt Đầu Từ Đây
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện Ích Mở Rộng. Từ đó, chọn 'Load Unpacked' để tải tiện ích mở rộng mới. Mở thư mục 'dist' theo yêu cầu và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Bản Đồ Điện](https://www.electricitymap.org/map) (ở Boston, ví dụ, tôi sử dụng 'US-NEISO').
![đang tải xuống](../../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![đang tải xuống](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Sau khi khóa API và khu vực được nhập vào giao diện tiện ích mở rộng, điểm màu trên thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn gợi ý về các hoạt động phù hợp với mức tiêu thụ đó. Ý tưởng về hệ thống 'điểm màu' này được lấy cảm hứng từ [tiện ích mở rộng trình duyệt Lollipop Năng Lượng](https://energylollipop.com/) dành cho khu vực California.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện, bạn sẽ xây dựng một tiện ích mở rộng trình duyệt để có thể nhận được nhắc nhở ngay trong trình duyệt về mức độ tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích này một cách linh hoạt sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này.
![ảnh chụp tiện ích](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.vi.png)
![ảnh chụp tiện ích](../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png)
## Bắt đầu
@ -31,7 +31,7 @@ npm run build
Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Từ đó, chọn 'Tải không đóng gói' để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một API key cho API của CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO').
![cài đặt](../../../../translated_images/install-on-edge.78634f02842c4828.vi.png)
![cài đặt](../../../../translated_images/vi/install-on-edge.78634f02842c4828.png)
Khi API key và mã khu vực được nhập vào giao diện tiện ích, chấm màu trong thanh tiện ích trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn gợi ý về các hoạt động tiêu tốn năng lượng phù hợp. Ý tưởng đằng sau hệ thống 'chấm' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California.

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![lưới của canvas](../../../../translated_images/canvas_grid.5f209da785ded492.vi.png)
![lưới của canvas](../../../../translated_images/vi/canvas_grid.5f209da785ded492.png)
> Hình ảnh từ [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Để vẽ trên phần tử canvas, bạn sẽ làm theo quy trình ba bước giống nhau, tạo nền tảng cho tất cả đồ họa canvas. Một khi bạn làm điều này vài lần, nó sẽ trở thành bản năng:
@ -329,11 +329,11 @@ Bạn sẽ xây dựng một trang web với một phần tử Canvas. Nó sẽ
- Tàu nhân vật chính
![Tàu nhân vật chính](../../../../translated_images/player.dd24c1afa8c71e9b.vi.png)
![Tàu nhân vật chính](../../../../translated_images/vi/player.dd24c1afa8c71e9b.png)
- 5*5 quái vật
![Tàu quái vật](../../../../translated_images/enemyShip.5df2a822c16650c2.vi.png)
![Tàu quái vật](../../../../translated_images/vi/enemyShip.5df2a822c16650c2.png)
### Các bước được khuyến nghị để bắt đầu phát triển
@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
Kết quả hoàn chỉnh sẽ trông như sau:
![Màn hình đen với một nhân vật chính và 5*5 quái vật](../../../../translated_images/partI-solution.36c53b48c9ffae2a.vi.png)
![Màn hình đen với một nhân vật chính và 5*5 quái vật](../../../../translated_images/vi/partI-solution.36c53b48c9ffae2a.png)
## Giải pháp

@ -34,7 +34,7 @@ Việc hiển thị trực quan rất quan trọng - hiển thị biểu tượn
Bây giờ chúng ta sẽ triển khai các hệ thống phản hồi cốt lõi để giữ người chơi tham gia:
- **Hệ thống điểm số**: Mỗi tàu địch bị tiêu diệt sẽ thưởng 100 điểm (số tròn dễ tính toán hơn cho người chơi). Điểm số sẽ hiển thị ở góc dưới bên trái.
- **Bộ đếm mạng sống**: Nhân vật chính của bạn bắt đầu với ba mạng sống - một tiêu chuẩn được thiết lập bởi các trò chơi arcade đầu tiên để cân bằng giữa thử thách và khả năng chơi. Mỗi lần va chạm với kẻ địch sẽ mất một mạng sống. Chúng ta sẽ hiển thị số mạng sống còn lại ở góc dưới bên phải bằng biểu tượng tàu ![life image](../../../../translated_images/life.6fb9f50d53ee0413.vi.png).
- **Bộ đếm mạng sống**: Nhân vật chính của bạn bắt đầu với ba mạng sống - một tiêu chuẩn được thiết lập bởi các trò chơi arcade đầu tiên để cân bằng giữa thử thách và khả năng chơi. Mỗi lần va chạm với kẻ địch sẽ mất một mạng sống. Chúng ta sẽ hiển thị số mạng sống còn lại ở góc dưới bên phải bằng biểu tượng tàu ![life image](../../../../translated_images/vi/life.6fb9f50d53ee0413.png).
## Bắt đầu xây dựng!

@ -652,7 +652,7 @@ sequenceDiagram
Sử dụng `history.pushState` tạo các mục mới trong lịch sử điều hướng của trình duyệt. Bạn có thể kiểm tra điều đó bằng cách giữ *nút quay lại* của trình duyệt, nó sẽ hiển thị như sau:
![Ảnh chụp màn hình lịch sử điều hướng](../../../../translated_images/history.7fdabbafa521e064.vi.png)
![Ảnh chụp màn hình lịch sử điều hướng](../../../../translated_images/vi/history.7fdabbafa521e064.png)
Nếu bạn thử nhấp vào nút quay lại vài lần, bạn sẽ thấy rằng URL hiện tại thay đổi và lịch sử được cập nhật, nhưng cùng một mẫu vẫn được hiển thị.

@ -295,7 +295,7 @@ Hãy cùng xem điều gì thực sự xảy ra khi ai đó nhấn nút gửi.
2. Quan sát các thay đổi trong thanh địa chỉ của trình duyệt
3. Lưu ý cách trang tải lại và dữ liệu xuất hiện trong URL
![Ảnh chụp màn hình thay đổi URL của trình duyệt sau khi nhấn nút Đăng ký](../../../../translated_images/click-register.e89a30bf0d4bc9ca.vi.png)
![Ảnh chụp màn hình thay đổi URL của trình duyệt sau khi nhấn nút Đăng ký](../../../../translated_images/vi/click-register.e89a30bf0d4bc9ca.png)
### So sánh phương thức HTTP
@ -350,7 +350,7 @@ Hãy cấu hình biểu mẫu đăng ký của bạn để giao tiếp đúng c
2. **Nhấn** nút "Tạo tài khoản"
3. **Quan sát** phản hồi của máy chủ trong trình duyệt của bạn
![Một cửa sổ trình duyệt tại địa chỉ localhost:5000/api/accounts, hiển thị chuỗi JSON với dữ liệu người dùng](../../../../translated_images/form-post.61de4ca1b964d91a.vi.png)
![Một cửa sổ trình duyệt tại địa chỉ localhost:5000/api/accounts, hiển thị chuỗi JSON với dữ liệu người dùng](../../../../translated_images/vi/form-post.61de4ca1b964d91a.png)
**Những gì bạn nên thấy:**
- **Trình duyệt chuyển hướng** đến URL điểm cuối API
@ -615,7 +615,7 @@ async function register() {
3. **Nhấp** vào "Tạo tài khoản"
4. **Quan sát** các thông báo trên bảng điều khiển và phản hồi của người dùng
![Ảnh chụp màn hình hiển thị thông báo nhật ký trong bảng điều khiển trình duyệt](../../../../translated_images/browser-console.efaf0b51aaaf6778.vi.png)
![Ảnh chụp màn hình hiển thị thông báo nhật ký trong bảng điều khiển trình duyệt](../../../../translated_images/vi/browser-console.efaf0b51aaaf6778.png)
**Những gì bạn sẽ thấy:**
- **Trạng thái tải** xuất hiện trên nút gửi
@ -790,7 +790,7 @@ Hãy nâng cao biểu mẫu đăng ký của bạn với xác thực mạnh mẽ
3. **Thử** các ký tự đặc biệt trong trường tên người dùng
4. **Nhập** số dư âm
![Ảnh chụp màn hình hiển thị lỗi xác thực khi cố gắng gửi biểu mẫu](../../../../translated_images/validation-error.8bd23e98d416c22f.vi.png)
![Ảnh chụp màn hình hiển thị lỗi xác thực khi cố gắng gửi biểu mẫu](../../../../translated_images/vi/validation-error.8bd23e98d416c22f.png)
**Những gì bạn sẽ quan sát:**
- **Trình duyệt hiển thị** các thông báo xác thực gốc
@ -940,7 +940,7 @@ Hiển thị thông báo lỗi trong HTML nếu người dùng đã tồn tại.
Dưới đây là một ví dụ về giao diện trang đăng nhập cuối cùng sau khi thêm một chút kiểu dáng:
![Ảnh chụp màn hình của trang đăng nhập sau khi thêm kiểu dáng CSS](../../../../translated_images/result.96ef01f607bf856a.vi.png)
![Ảnh chụp màn hình của trang đăng nhập sau khi thêm kiểu dáng CSS](../../../../translated_images/vi/result.96ef01f607bf856a.png)
## Câu hỏi sau bài giảng

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![Quy trình cập nhật trong ứng dụng nhiều trang](../../../../translated_images/mpa.7f7375a1a2d4aa77.vi.png)
![Quy trình cập nhật trong ứng dụng nhiều trang](../../../../translated_images/vi/mpa.7f7375a1a2d4aa77.png)
**Tại sao cách tiếp cận này cảm thấy cồng kềnh:**
- Mỗi lần nhấp chuột đều yêu cầu xây dựng lại toàn bộ trang từ đầu
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![Quy trình cập nhật trong ứng dụng một trang](../../../../translated_images/spa.268ec73b41f992c2.vi.png)
![Quy trình cập nhật trong ứng dụng một trang](../../../../translated_images/vi/spa.268ec73b41f992c2.png)
**Tại sao SPA cảm thấy tốt hơn:**
- Chỉ những phần thực sự thay đổi mới được cập nhật (thông minh, đúng không?)
@ -523,7 +523,7 @@ if (data.error) {
Bây giờ khi bạn thử với tài khoản không hợp lệ, bạn sẽ thấy một thông báo lỗi hữu ích ngay trên trang!
![Ảnh chụp màn hình hiển thị thông báo lỗi trong quá trình đăng nhập](../../../../translated_images/login-error.416fe019b36a6327.vi.png)
![Ảnh chụp màn hình hiển thị thông báo lỗi trong quá trình đăng nhập](../../../../translated_images/vi/login-error.416fe019b36a6327.png)
#### Bước 4: Tạo Sự Bao Gồm Với Khả Năng Tiếp Cận
@ -958,7 +958,7 @@ Sẵn sàng nâng cấp ứng dụng ngân hàng của bạn lên một tầm ca
Dưới đây là hình ảnh bảng điều khiển được chỉnh sửa:
![Ảnh chụp màn hình ví dụ về kết quả bảng điều khiển sau khi thêm kiểu dáng](../../../../translated_images/screen2.123c82a831a1d14a.vi.png)
![Ảnh chụp màn hình ví dụ về kết quả bảng điều khiển sau khi thêm kiểu dáng](../../../../translated_images/vi/screen2.123c82a831a1d14a.png)
Đừng cảm thấy rằng bạn phải làm giống hệt như vậy - hãy sử dụng nó làm nguồn cảm hứng và tạo dấu ấn riêng của bạn!

@ -190,7 +190,7 @@ Giống như thiết kế ngăn cách của Titanic tưởng chừng như mạnh
Thay vì chạy vòng quanh, chúng ta sẽ tạo một hệ thống **quản lý trạng thái tập trung**. Hãy nghĩ về nó như có một người thực sự tổ chức chịu trách nhiệm về tất cả những thứ quan trọng:
![Sơ đồ hiển thị luồng dữ liệu giữa HTML, hành động người dùng và trạng thái](../../../../translated_images/data-flow.fa2354e0908fecc8.vi.png)
![Sơ đồ hiển thị luồng dữ liệu giữa HTML, hành động người dùng và trạng thái](../../../../translated_images/vi/data-flow.fa2354e0908fecc8.png)
```mermaid
flowchart TD
@ -803,7 +803,7 @@ Thử thách này sẽ giúp bạn suy nghĩ như một nhà phát triển chuy
Dưới đây là kết quả ví dụ sau khi hoàn thành bài tập:
![Ảnh chụp màn hình hiển thị hộp thoại "Thêm giao dịch" ví dụ](../../../../translated_images/dialog.93bba104afeb79f1.vi.png)
![Ảnh chụp màn hình hiển thị hộp thoại "Thêm giao dịch" ví dụ](../../../../translated_images/vi/dialog.93bba104afeb79f1.png)
---

@ -112,7 +112,7 @@ Tham khảo [tài liệu API máy chủ](../api/README.md) để biết:
**Kết quả mong đợi:**
Sau khi hoàn thành bài tập này, ứng dụng ngân hàng của bạn sẽ có tính năng "Thêm giao dịch" hoạt động đầy đủ, trông chuyên nghiệp và hoạt động mượt mà:
![Ảnh chụp màn hình hiển thị ví dụ về hộp thoại "Thêm giao dịch"](../../../../translated_images/dialog.93bba104afeb79f1.vi.png)
![Ảnh chụp màn hình hiển thị ví dụ về hộp thoại "Thêm giao dịch"](../../../../translated_images/vi/dialog.93bba104afeb79f1.png)
## Kiểm tra triển khai của bạn

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
Trong dự án này, bạn sẽ học cách xây dựng một ngân hàng giả tưởng. Những bài học này bao gồm hướng dẫn về cách thiết kế ứng dụng web và cung cấp các tuyến đường, xây dựng biểu mẫu, quản lý trạng thái, và lấy dữ liệu từ API để truy xuất thông tin của ngân hàng.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.vi.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.vi.png) |
| ![Screen1](../../../translated_images/vi/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/vi/screen2.123c82a831a1d14a.png) |
|--------------------------------|--------------------------------|
## Các bài học

@ -185,7 +185,7 @@ Giống như cách điện thoại của Alexander Graham Bell kết nối các
Khi mọi thứ đã tải lên, bạn sẽ thấy một không gian làm việc sạch sẽ được thiết kế để giúp bạn tập trung vào điều quan trọng mã của bạn!
![Giao diện mặc định của VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.vi.png)
![Giao diện mặc định của VSCode.dev](../../../../translated_images/vi/default-vscode-dev.5d06881d65c1b323.png)
**Đây là chuyến tham quan khu vực của bạn:**
- **Thanh Hoạt Động** (dải bên trái): Điều hướng chính của bạn với Explorer 📁, Tìm kiếm 🔍, Source Control 🌿, Tiện ích 🧩, và Cài đặt ⚙️
@ -233,7 +233,7 @@ Khả năng này cho phép truy cập ngay lập tức vào bất kỳ kho công
1. Truy cập [vscode.dev](https://vscode.dev) nếu bạn chưa ở đó
2. Tìm nút "Open Remote Repository" trên màn hình chào mừng và nhấp vào nó
![Mở kho từ xa](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.vi.png)
![Mở kho từ xa](../../../../translated_images/vi/open-remote-repository.bd9c2598b8949e7f.png)
3. Dán vào bất kỳ URL kho GitHub nào (thử cái này: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Nhấn Enter và xem điều kỳ diệu xảy ra!
@ -242,7 +242,7 @@ Khả năng này cho phép truy cập ngay lập tức vào bất kỳ kho công
Muốn cảm thấy như một phù thủy lập trình? Thử phím tắt này: Ctrl+Shift+P (hoặc Cmd+Shift+P trên Mac) để mở Command Palette:
![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.vi.png)
![Command Palette](../../../../translated_images/vi/palette-menu.4946174e07f42622.png)
**Command Palette giống như có một công cụ tìm kiếm cho mọi thứ bạn có thể làm:**
- Gõ "open remote" và nó sẽ tìm trình mở kho cho bạn
@ -304,7 +304,7 @@ Giống như việc tổ chức các bản vẽ trong văn phòng kiến trúc s
3. Nhập tên tệp bao gồm phần mở rộng phù hợp (`style.css`, `script.js`, `index.html`)
4. Nhấn Enter để tạo tệp
![Tạo tệp mới](../../../../translated_images/create-new-file.2814e609c2af9aeb.vi.png)
![Tạo tệp mới](../../../../translated_images/vi/create-new-file.2814e609c2af9aeb.png)
**Quy ước đặt tên:**
- Sử dụng tên mô tả chỉ ra mục đích của tệp
@ -322,7 +322,7 @@ Giống như việc tổ chức các bản vẽ trong văn phòng kiến trúc s
2. Bắt đầu gõ và xem VSCode.dev hỗ trợ bạn với màu sắc, gợi ý và phát hiện lỗi
3. Lưu công việc của bạn bằng Ctrl+S (Windows/Linux) hoặc Cmd+S (Mac) mặc dù nó cũng tự động lưu!
![Chỉnh sửa tệp trong VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.vi.png)
![Chỉnh sửa tệp trong VSCode.dev](../../../../translated_images/vi/edit-a-file.52c0ee665ef19f08.png)
**Những điều thú vị xảy ra khi bạn lập trình:**
- Mã của bạn được tô màu đẹp mắt để dễ đọc
@ -343,7 +343,7 @@ Giống như cách các nhà khảo cổ tạo hồ sơ chi tiết về các l
2. Các tệp đã chỉnh sửa xuất hiện trong phần "Changes"
3. Mã màu chỉ ra loại thay đổi: xanh lá cho bổ sung, đỏ cho xóa
![Xem các thay đổi trong Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.vi.png)
![Xem các thay đổi trong Source Control](../../../../translated_images/vi/working-tree.c58eec08e6335c79.png)
**Lưu công việc của bạn (quy trình commit):**
@ -438,7 +438,7 @@ Marketplace của extensions được tổ chức rất tốt, vì vậy bạn s
2. Duyệt qua hoặc tìm kiếm một thứ gì đó cụ thể
3. Nhấp vào bất kỳ thứ gì trông thú vị để tìm hiểu thêm về nó
![Giao diện marketplace của extensions](../../../../translated_images/extensions.eca0e0c7f59a10b5.vi.png)
![Giao diện marketplace của extensions](../../../../translated_images/vi/extensions.eca0e0c7f59a10b5.png)
**Những gì bạn sẽ thấy ở đó:**
@ -491,7 +491,7 @@ Hầu hết các extensions đi kèm với các cài đặt bạn có thể đi
3. Chọn "Extension Settings" từ menu thả xuống
4. Điều chỉnh mọi thứ cho đến khi cảm thấy phù hợp với quy trình làm việc của bạn
![Tùy chỉnh cài đặt extension](../../../../translated_images/extension-settings.21c752ae4f4cdb78.vi.png)
![Tùy chỉnh cài đặt extension](../../../../translated_images/vi/extension-settings.21c752ae4f4cdb78.png)
**Những điều phổ biến bạn có thể muốn điều chỉnh:**
- Cách mã của bạn được định dạng (tab so với khoảng trắng, độ dài dòng, v.v.)

@ -78,7 +78,7 @@ Vì VSCode.dev yêu cầu ít nhất một tệp để mở kho lưu trữ, chú
4. **Viết** thông điệp commit: "Thêm cấu trúc HTML ban đầu"
5. **Nhấn** "Commit new file" để lưu thay đổi của bạn
![Tạo tệp ban đầu trên GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.vi.png)
![Tạo tệp ban đầu trên GitHub](../../../../translated_images/vi/new-file-github.com.c886796d800e8056.png)
**Những gì thiết lập ban đầu này đạt được:**
- **Thiết lập** cấu trúc tài liệu HTML5 đúng chuẩn với các phần tử ngữ nghĩa
@ -104,7 +104,7 @@ Bây giờ nền tảng kho lưu trữ của bạn đã được thiết lập,
**Chỉ báo thành công**: Bạn sẽ thấy các tệp dự án của mình trong thanh bên Explorer và `index.html` có sẵn để chỉnh sửa trong khu vực chỉnh sửa chính.
![Dự án được tải trong VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.vi.png)
![Dự án được tải trong VSCode.dev](../../../../translated_images/vi/project-on-vscode.dev.e79815a9a95ee7fe.png)
**Những gì bạn sẽ thấy trong giao diện:**
- **Thanh bên Explorer**: **Hiển thị** các tệp và cấu trúc thư mục của kho lưu trữ
@ -448,7 +448,7 @@ Các tiện ích mở rộng cải thiện trải nghiệm phát triển của b
**Kết quả ngay sau khi cài đặt:**
Khi CodeSwing được cài đặt, bạn sẽ thấy một bản xem trước trực tiếp của website sơ yếu lý lịch xuất hiện trong trình chỉnh sửa. Điều này cho phép bạn thấy chính xác cách website của bạn trông như thế nào khi thực hiện các thay đổi.
![Tiện ích CodeSwing hiển thị bản xem trước trực tiếp](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.vi.png)
![Tiện ích CodeSwing hiển thị bản xem trước trực tiếp](../../../../translated_images/vi/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**Hiểu giao diện được cải tiến:**
- **Chế độ xem chia đôi**: **Hiển thị** mã của bạn ở một bên và bản xem trước trực tiếp ở bên kia

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
Dưới đây là hình ảnh dự án hoàn chỉnh của bạn:
![Giao diện ứng dụng chat hiển thị cuộc trò chuyện giữa người dùng và trợ lý AI](../../../translated_images/screenshot.0a1ee0d123df681b.vi.png)
![Giao diện ứng dụng chat hiển thị cuộc trò chuyện giữa người dùng và trợ lý AI](../../../translated_images/vi/screenshot.0a1ee0d123df681b.png)
## 🗺️ Hành trình học tập của bạn qua phát triển ứng dụng AI
@ -194,7 +194,7 @@ mindmap
**Nguyên tắc cốt lõi**: Phát triển ứng dụng AI kết hợp các kỹ năng phát triển web truyền thống với tích hợp dịch vụ AI, tạo ra các ứng dụng thông minh mang lại cảm giác tự nhiên và phản hồi nhanh cho người dùng.
![Giao diện GitHub Models AI Playground với khu vực chọn mô hình và thử nghiệm](../../../translated_images/playground.d2b927122224ff8f.vi.png)
![Giao diện GitHub Models AI Playground với khu vực chọn mô hình và thử nghiệm](../../../translated_images/vi/playground.d2b927122224ff8f.png)
**Dưới đây là những gì làm cho playground trở nên hữu ích:**
- **Thử nghiệm** các mô hình AI khác nhau như GPT-4o-mini, Claude và các mô hình khác (tất cả đều miễn phí!)
@ -204,7 +204,7 @@ mindmap
Sau khi bạn đã thử nghiệm một chút, chỉ cần nhấp vào tab "Code" và chọn ngôn ngữ lập trình của bạn để nhận mã triển khai mà bạn cần.
![Lựa chọn playground hiển thị các tùy chọn tạo mã cho các ngôn ngữ lập trình khác nhau](../../../translated_images/playground-choice.1d23ba7d407f4758.vi.png)
![Lựa chọn playground hiển thị các tùy chọn tạo mã cho các ngôn ngữ lập trình khác nhau](../../../translated_images/vi/playground-choice.1d23ba7d407f4758.png)
## Thiết lập tích hợp backend Python
@ -2352,14 +2352,14 @@ Bạn muốn thử dự án này trong môi trường phát triển trên đám
- **Đi tới** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Nhấn** "Use this template" ở góc trên bên phải (đảm bảo bạn đã đăng nhập vào GitHub)
![Giao diện tạo từ mẫu hiển thị nút "Use this template" màu xanh lá cây](../../../translated_images/template.67ad477109d29a2b.vi.png)
![Giao diện tạo từ mẫu hiển thị nút "Use this template" màu xanh lá cây](../../../translated_images/vi/template.67ad477109d29a2b.png)
**Bước 2: Khởi chạy Codespaces**
- **Mở** repository vừa tạo của bạn
- **Nhấn** nút "Code" màu xanh lá cây và chọn "Codespaces"
- **Chọn** "Create codespace on main" để bắt đầu môi trường phát triển của bạn
![Giao diện tạo codespace với các tùy chọn khởi chạy môi trường phát triển trên đám mây](../../../translated_images/codespace.bcecbdf5d2747d3d.vi.png)
![Giao diện tạo codespace với các tùy chọn khởi chạy môi trường phát triển trên đám mây](../../../translated_images/vi/codespace.bcecbdf5d2747d3d.png)
**Bước 3: Cấu hình môi trường**
Khi Codespace của bạn tải xong, bạn sẽ có quyền truy cập vào:

@ -72,13 +72,13 @@ Dự án Trợ lý AI mới vừa được thêm, xem ngay [dự án](./9-chat-p
Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu!
![Background](../../translated_images/background.148a8d43afde5730.vi.png)
![Background](../../translated_images/vi/background.148a8d43afde5730.png)
- Các bài học bao phủ từ cơ bản đến RAG.
- Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi.
- Câu chuyện thú vị và hấp dẫn, bạn sẽ du hành thời gian!
![character](../../translated_images/character.5c0dd8e067ffd693.vi.png)
![character](../../translated_images/vi/character.5c0dd8e067ffd693.png)
Mỗi bài học bao gồm một bài tập hoàn thành, kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như:
- Lời nhắc và kỹ thuật tạo lời nhắc
@ -114,7 +114,7 @@ Thực hiện theo các bước:
Trong bản sao kho lưu trữ bạn đã tạo, nhấp nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo Codespace mới để bạn làm việc.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.vi.png)
![Codespace](../../translated_images/vi/createcodespace.0238bbf4d7a8d955.png)
#### Chạy chương trình trên máy tính của bạn

@ -42,10 +42,10 @@ Giáo trình này bao gồm các gói có thể nhập vào để phù hợp v
- Moodle Cloud có hỗ trợ hạn chế đối với Common Cartridge. Ưu tiên sử dụng tệp Moodle ở trên, tệp này cũng có thể được tải lên Canvas.
- Sau khi nhập, hãy xem lại các mô-đun, ngày đến hạn và cài đặt bài kiểm tra để phù hợp với lịch học của bạn.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.vi.png)
![Moodle](../../translated_images/vi/moodle.94eb93d714a50cb2.png)
> Giáo trình trong lớp học Moodle
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.vi.png)
![Canvas](../../translated_images/vi/canvas.fbd605ff8e5b8aff.png)
> Giáo trình trong Canvas
### Sử dụng kho lưu trữ trực tiếp (không dùng Classroom)

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
今天,我们将探索那些让现代网页开发不仅可行而且极其上瘾的令人难以置信的工具。我说的是 Netflix、Spotify 和你最喜欢的独立应用工作室每天使用的同样的编辑器、浏览器和工作流程。最棒的是,这些专业级、行业标准的工具大多数是完全免费的!
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.zh.png)
![Intro Programming](../../../../translated_images/zh/webdev101-programming.d6e3f98e61ac4bff.png)
> 速写笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作
```mermaid

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
我们将一步步一起出发。没有急躁,没有压力——只有你我和一些即将成为你新朋友的酷炫工具!
![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.zh.png)
![Intro to GitHub](../../../../translated_images/zh/webdev101-github.8846d7971abef6f9.png)
> 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作
```mermaid
@ -604,7 +604,7 @@ flowchart TD
✅ 一个很好的寻找“初学者友好”仓库的方法是[通过“good-first-issue”标签搜索](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
![在本地复制仓库](../../../../translated_images/clone_repo.5085c48d666ead57.zh.png)
![在本地复制仓库](../../../../translated_images/zh/clone_repo.5085c48d666ead57.png)
有几种方式可以复制代码。一种是使用 HTTPS、SSH或者 GitHub CLI命令行界面“克隆”仓库内容。

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# 创建无障碍网页
![无障碍知识全览](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.zh.png)
![无障碍知识全览](../../../../translated_images/zh/webdev101-a11y.8ef3025c858d897a.png)
> 草图笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作
```mermaid
@ -1049,12 +1049,12 @@ pie title "常见的 ARIA 使用模式"
**信息性图像** - 传递重要信息:
```html
<img src="../../../../translated_images/chart.31c7eb0eb5c4450d.zh.png" alt="Sales increased 25% from Q1 to Q2 2024">
<img src="../../../../translated_images/zh/chart.31c7eb0eb5c4450d.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**装饰性图像** - 纯视觉,无信息价值:
```html
<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d.zh.png" alt="" role="presentation">
<img src="../../../../translated_images/zh/decorative-border.b2f3c4d6634fb79d.png" alt="" role="presentation">
```
**功能性图像** - 作为按钮或控件:
@ -1066,7 +1066,7 @@ pie title "常见的 ARIA 使用模式"
**复杂图像** - 图表、图解、信息图:
```html
<img src="../../../../translated_images/complex-chart.c831f461a363b446.zh.png" alt="Quarterly sales data" aria-describedby="chart-description">
<img src="../../../../translated_images/zh/complex-chart.c831f461a363b446.png" alt="Quarterly sales data" aria-describedby="chart-description">
<div id="chart-description">
<p>Detailed description: Sales data shows a steady increase across all quarters...</p>
</div>
@ -1106,7 +1106,7 @@ pie title "常见的 ARIA 使用模式"
<picture>
<source media="(min-width: 800px)" srcset="large-chart.png">
<source media="(min-width: 400px)" srcset="medium-chart.png">
<img src="../../../../translated_images/small-chart.c50c7b1bbcce43d8.zh.png" alt="Website traffic increased 40% after accessibility improvements">
<img src="../../../../translated_images/zh/small-chart.c50c7b1bbcce43d8.png" alt="Website traffic increased 40% after accessibility improvements">
</picture>
```

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基础:数据类型
![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.zh.png)
![JavaScript Basics - Data types](../../../../translated_images/zh/webdev101-js-datatypes.4cc470179730702c.png)
> 手绘笔记,作者 [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基础:方法与函数
![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.zh.png)
![JavaScript Basics - Functions](../../../../translated_images/zh/webdev101-js-functions.be049c4726e94f8b.png)
> 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript基础做出决策
![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.zh.png)
![JavaScript Basics - Making decisions](../../../../translated_images/zh/webdev101-js-decisions.69e1b20f272dd1f0.png)
> 速写笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript 基础知识:数组和循环
![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.zh.png)
![JavaScript Basics - Arrays](../../../../translated_images/zh/webdev101-js-arrays.439d7528b8a29455.png)
> 速写笔记,作者:[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -25,7 +25,7 @@ journey
提升无障碍性: 5: Student
建造生态瓶: 5: Student
```
![HTML 入门](../../../../translated_images/webdev101-html.4389c2067af68e98.zh.png)
![HTML 入门](../../../../translated_images/zh/webdev101-html.4389c2067af68e98.png)
> 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供
HTML即超文本标记语言是你访问过的每个网站的基础。把 HTML 想象成网页的骨架 —— 它定义了内容的位置、组织方式以及每个部分的含义。虽然 CSS 会在之后用颜色和布局“装饰”你的 HTMLJavaScript 会通过交互让它“活起来”,但 HTML 则提供了实现一切的基本结构。
@ -86,7 +86,7 @@ mindmap
4. 在资源管理器面板点击“新建文件”图标
5. 将你的文件命名为 `index.html`
![VS Code 资源管理器显示新建文件](../../../../translated_images/vs-code-index.e2986cf919471eb9.zh.png)
![VS Code 资源管理器显示新建文件](../../../../translated_images/zh/vs-code-index.e2986cf919471eb9.png)
**选项 2使用终端命令**
```bash
@ -236,48 +236,48 @@ HTML 使用成对标签定义元素。大多数标签有开标签如 `<p>` 和
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc43.zh.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/zh/plant1.d87946a2ca70cc43.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.zh.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/zh/plant2.8daa1606c9c1ad89.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.zh.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/zh/plant3.8b0d484381a2a2a7.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.zh.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/zh/plant4.656e16ae1df37be2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.zh.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/zh/plant5.2b41b9355f11ebcc.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.zh.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/zh/plant6.3d1827d03b656994.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.zh.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/zh/plant7.8152c302ac97f621.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850.zh.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/zh/plant8.38d6428174ffa850.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.zh.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/zh/plant9.f0e38d3327c37fc2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.zh.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/zh/plant10.b159d6d6e985595f.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.zh.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/zh/plant11.2a03a1c2ec8ea84e.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.zh.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/zh/plant12.60e9b53e538fbaf3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.zh.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/zh/plant13.07a51543c820bcf5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.zh.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/zh/plant14.6e486371ba7d36ba.png" />
</div>
</div>
</div>

@ -29,7 +29,7 @@ journey
响应式设计: 5: Student
玻璃反光: 5: Student
```
![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.zh.png)
![Introduction to CSS](../../../../translated_images/zh/webdev101-css.3f7af5991bf53a20.png)
> 速写笔记作者 [Tomomi Imura](https://twitter.com/girlie_mac)
还记得你的 HTML 生态瓶看起来很基础吗CSS 就是把那个普通的结构变成视觉上更吸引人的东西。
@ -202,7 +202,7 @@ body {
打开浏览器开发者工具F12切换到 Elements 面板,检查 `<h1>` 元素,你会看到它继承自 body 的字体:
![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.zh.png)
![inherited font](../../../../translated_images/zh/1.cc07a5cbe114ad1d.png)
**试验时间**:尝试给 `<body>` 设置其他可继承属性如 `color``line-height` 或 `text-align`。你的标题和其他元素会发生什么变化?
@ -332,7 +332,7 @@ ID 选择器用 `#` 符号,定位具有唯一 `id` 属性的元素。ID 在页
**各植物的 HTML 结构如下:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.zh.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/zh/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
你将创建细腻的高光模拟光在玻璃表面的反射。这与文艺复兴画家扬·凡·艾克Jan van Eyck使用光线和反射使绘画玻璃呈现三维感的手法类似。你的目标如下
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.zh.png)
![finished terrarium](../../../../translated_images/zh/terrarium-final.2f07047ffc597d0a.png)
**你的挑战:**
- **创建** 微妙的白色或浅色椭圆形反光

@ -25,7 +25,7 @@ journey
测试功能: 5: Student
完成生态箱: 5: Student
```
![DOM 和闭包](../../../../translated_images/webdev101-js.10280393044d7eaa.zh.png)
![DOM 和闭包](../../../../translated_images/zh/webdev101-js.10280393044d7eaa.png)
> 草图笔记作者:[Tomomi Imura](https://twitter.com/girlie_mac)
欢迎来到网页开发中最具趣味性的部分之一——让页面变得互动文档对象模型DOM就像是你的 HTML 和 JavaScript 之间的一座桥梁,今天我们将用它让你的生态瓶变得栩栩如生。当 Tim Berners-Lee 创建第一款网页浏览器时他设想了一个可以动态交互的网页世界——而DOM让这个设想成为可能。
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
![DOM 树结构表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.zh.png)
![DOM 树结构表示](../../../../translated_images/zh/dom-tree.7daf0e763cbbba92.png)
> DOM 及其关联 HTML 标记的表示。来自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **理解闭包**:闭包是 JavaScript 中的重要话题,许多开发者多年使用后才完全掌握所有理论细节。今天我们专注于实用应用——你将看到闭包在实现交互功能时自然而然出现。理解将随着你观察它们解决实际问题而逐步加深。
![DOM 树结构表示](../../../../translated_images/dom-tree.7daf0e763cbbba92.zh.png)
![DOM 树结构表示](../../../../translated_images/zh/dom-tree.7daf0e763cbbba92.png)
> DOM 及其关联 HTML 标记的表示。来自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ function stopElementDrag() {
- **跨设备支持**:兼容桌面和移动端
- **性能意识**:无内存泄漏或冗余计算
![完成的花园](../../../../translated_images/terrarium-final.0920f16e87c13a84.zh.png)
![完成的花园](../../../../translated_images/zh/terrarium-final.0920f16e87c13a84.png)
---

@ -25,7 +25,7 @@ journey
调试问题: 4: Student
优化体验: 5: Student
```
![浏览器手绘笔记](../../../../translated_images/browser.60317c9be8b7f84a.zh.jpg)
![浏览器手绘笔记](../../../../translated_images/zh/browser.60317c9be8b7f84a.jpg)
> 手绘笔记作者:[Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## 课前测验
@ -77,7 +77,7 @@ mindmap
**一点历史**第一款浏览器名为“WorldWideWeb”由蒂姆·伯纳斯-李爵士于1990年创建。
![早期浏览器](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.zh.jpg)
![早期浏览器](../../../../translated_images/zh/earlybrowsers.d984b711cdf3a42d.jpg)
> 一些早期浏览器,来源:[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### 浏览器如何处理网页内容
@ -194,7 +194,7 @@ quadrantChart
了解扩展安装过程,有助于你预见用户安装你扩展时的体验。现代浏览器的安装流程标准化,界面设计略有差异。
![Edge 浏览器扩展页面打开及设置菜单截图](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.zh.png)
![Edge 浏览器扩展页面打开及设置菜单截图](../../../../translated_images/zh/install-on-edge.d68781acaf0b3d3d.png)
> **重要提示**:测试自己的扩展时,务必开启开发者模式并允许来自其他商店的扩展。
@ -308,10 +308,10 @@ project-root/
### 扩展视图概览
**设置视图** - 首次用户配置:
![扩展完整界面截图,显示包含地区名称和 API 密钥输入的表单](../../../../translated_images/1.b6da8c1394b07491.zh.png)
![扩展完整界面截图,显示包含地区名称和 API 密钥输入的表单](../../../../translated_images/zh/1.b6da8c1394b07491.png)
**结果视图** - 碳足迹数据显示:
![扩展显示 US-NEISO 区域碳使用量和化石燃料百分比的截图](../../../../translated_images/2.1dae52ff08042246.zh.png)
![扩展显示 US-NEISO 区域碳使用量和化石燃料百分比的截图](../../../../translated_images/zh/2.1dae52ff08042246.png)
### 构建配置表单

@ -263,7 +263,7 @@ stateDiagram-v2
Reset --> ClearStorage: 删除保存的数据
ClearStorage --> FirstTime: 返回设置
```
![本地存储面板](../../../../translated_images/localstorage.472f8147b6a3f8d1.zh.png)
![本地存储面板](../../../../translated_images/zh/localstorage.472f8147b6a3f8d1.png)
> ⚠️ **安全注意事项**:在生产环境中,将 API 密钥存储在 LocalStorage 存在安全风险,因为 JavaScript 代码可以访问这些数据。学习用途这样做可以,但实际应用应使用安全的服务器端存储敏感凭证。

@ -123,7 +123,7 @@ flowchart LR
试试吧。打开一个网站(例如 Microsoft.com点击“录制”然后刷新页面查看性能分析器捕捉的一切。当停止录制你会看到浏览器如何“脚本执行”scripts、“渲染”renders和“绘制”paints的详细分解。这让我想起火箭发射时指挥中心监控所有系统——你获取实时且详细的操作数据。
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.zh.png)
![Edge profiler](../../../../translated_images/zh/profiler.5a4a62479c5df01c.png)
✅ 若想深入了解,请查阅 [微软文档](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)
@ -133,11 +133,11 @@ flowchart LR
通过选取时间线片段,查看摘要面板,获得页面性能快照:
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.zh.png)
![Edge profiler snapshot](../../../../translated_images/zh/snapshot.97750180ebcad737.png)
查看事件日志面板是否有事件耗时超过15毫秒
![Edge event log](../../../../translated_images/log.804026979f3707e0.zh.png)
![Edge event log](../../../../translated_images/zh/log.804026979f3707e0.png)
✅ 熟悉你的分析器!在本站打开开发者工具,看看是否存在瓶颈。加载最慢和最快的资源分别是什么?

@ -105,7 +105,7 @@ quadrantChart
Power-up: [0.7, 0.6]
UI Elements: [0.9, 0.1]
```
![canvas 网格](../../../../translated_images/canvas_grid.5f209da785ded492.zh.png)
![canvas 网格](../../../../translated_images/zh/canvas_grid.5f209da785ded492.png)
> 图片来自 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
要在 canvas 元素上绘图,你需要遵循所有画布图形基础的三个步骤。重复几次后,会变得很自然:
@ -323,11 +323,11 @@ flowchart TD
- 英雄飞船
![英雄飞船](../../../../translated_images/player.dd24c1afa8c71e9b.zh.png)
![英雄飞船](../../../../translated_images/zh/player.dd24c1afa8c71e9b.png)
- 5*5 怪物阵型
![怪物飞船](../../../../translated_images/enemyShip.5df2a822c16650c2.zh.png)
![怪物飞船](../../../../translated_images/zh/enemyShip.5df2a822c16650c2.png)
### 推荐开发步骤
@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
完成的结果应如下所示:
![带有英雄和 5*5 怪物的黑屏](../../../../translated_images/partI-solution.36c53b48c9ffae2a.zh.png)
![带有英雄和 5*5 怪物的黑屏](../../../../translated_images/zh/partI-solution.36c53b48c9ffae2a.png)
## 解决方案

@ -155,7 +155,7 @@ sequenceDiagram
end
```
- **计分系统**每摧毁一艘敌舰奖励100分圆整数字更便于玩家心算。分数显示在左下角。
- **生命计数器**:你的英雄从三条命开始——这是早期街机游戏确立的标准,平衡挑战和可玩性。每次与敌人碰撞会损失一条命。我们将在右下用飞船图标显示剩余生命 ![life image](../../../../translated_images/life.6fb9f50d53ee0413.zh.png)。
- **生命计数器**:你的英雄从三条命开始——这是早期街机游戏确立的标准,平衡挑战和可玩性。每次与敌人碰撞会损失一条命。我们将在右下用飞船图标显示剩余生命 ![life image](../../../../translated_images/zh/life.6fb9f50d53ee0413.png)。
## 开始构建吧!

@ -644,7 +644,7 @@ sequenceDiagram
使用 `history.pushState` 创建了新的浏览历史条目。你可以按住浏览器的 *后退按钮* 来查看,如下图所示:
![浏览历史截图](../../../../translated_images/history.7fdabbafa521e064.zh.png)
![浏览历史截图](../../../../translated_images/zh/history.7fdabbafa521e064.png)
如果你尝试点击后退几次,你会发现当前 URL 变化了,历史记录也更新了,但显示的模板却没有变化。

@ -292,7 +292,7 @@ graph TD
2. 观察浏览器地址栏的变化
3. 注意页面如何重新加载,数据出现在 URL 中
![点击注册按钮后浏览器 URL 变化截图](../../../../translated_images/click-register.e89a30bf0d4bc9ca.zh.png)
![点击注册按钮后浏览器 URL 变化截图](../../../../translated_images/zh/click-register.e89a30bf0d4bc9ca.png)
### HTTP 方法对比
@ -346,7 +346,7 @@ graph TD
2. **点击**“创建账户”按钮
3. **观察**浏览器中的服务器响应
![浏览器窗口访问 localhost:5000/api/accounts显示包含用户数据的 JSON 字符串](../../../../translated_images/form-post.61de4ca1b964d91a.zh.png)
![浏览器窗口访问 localhost:5000/api/accounts显示包含用户数据的 JSON 字符串](../../../../translated_images/zh/form-post.61de4ca1b964d91a.png)
**你应该看到:**
- **浏览器跳转到 API 端点 URL**
@ -609,7 +609,7 @@ async function register() {
3. **点击** “创建账户”
4. **观察** 控制台信息和用户反馈
![浏览器控制台日志截图](../../../../translated_images/browser-console.efaf0b51aaaf6778.zh.png)
![浏览器控制台日志截图](../../../../translated_images/zh/browser-console.efaf0b51aaaf6778.png)
**你应该看到:**
- **加载状态** 出现在提交按钮上
@ -783,7 +783,7 @@ input:focus:invalid {
3. **尝试** 在用户名字段使用特殊字符
4. **输入** 负余额数值
![尝试提交表单时显示验证错误截图](../../../../translated_images/validation-error.8bd23e98d416c22f.zh.png)
![尝试提交表单时显示验证错误截图](../../../../translated_images/zh/validation-error.8bd23e98d416c22f.png)
**你会看到:**
- **浏览器显示** 原生验证消息
@ -943,7 +943,7 @@ timeline
下面是经过一些样式调整后最终登录页面的示例:
![添加 CSS 样式后登录页面的截图](../../../../translated_images/result.96ef01f607bf856a.zh.png)
![添加 CSS 样式后登录页面的截图](../../../../translated_images/zh/result.96ef01f607bf856a.png)
## 课后测验

@ -156,7 +156,7 @@ sequenceDiagram
Server->>Browser: 返回完整的HTML页面
Browser->>User: 显示新页面(闪烁/重载)
```
![多页面应用的更新流程](../../../../translated_images/mpa.7f7375a1a2d4aa77.zh.png)
![多页面应用的更新流程](../../../../translated_images/zh/mpa.7f7375a1a2d4aa77.png)
**这种方式为何显得笨重:**
- 每次点击都要重新构建整页
@ -182,7 +182,7 @@ sequenceDiagram
JavaScript->>Browser: 更新特定页面元素
Browser->>User: 显示更新内容(无刷新)
```
![单页面应用的更新流程](../../../../translated_images/spa.268ec73b41f992c2.zh.png)
![单页面应用的更新流程](../../../../translated_images/zh/spa.268ec73b41f992c2.png)
**为何SPA体验更佳**
- 只更新实际变化部分(聪明吧?)
@ -516,7 +516,7 @@ if (data.error) {
现在测试输入无效账号时,页面上会出现有用的错误提示!
![登录时显示错误消息的截图](../../../../translated_images/login-error.416fe019b36a6327.zh.png)
![登录时显示错误消息的截图](../../../../translated_images/zh/login-error.416fe019b36a6327.png)
#### 第四步:兼顾无障碍访问
@ -950,7 +950,7 @@ timeline
这是美化后仪表盘的示例:
![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.zh.png)
![Screenshot of an example result of the dashboard after styling](../../../../translated_images/zh/screen2.123c82a831a1d14a.png)
不必完全照搬——以此为灵感,打造属于你自己的风格!

@ -187,7 +187,7 @@ mindmap
我们将创建一个**集中式状态管理**系统。把它想象成一个非常有条理的人掌管所有重要事务:
![显示HTML、用户操作与状态间数据流的架构图](../../../../translated_images/data-flow.fa2354e0908fecc8.zh.png)
![显示HTML、用户操作与状态间数据流的架构图](../../../../translated_images/zh/data-flow.fa2354e0908fecc8.png)
```mermaid
flowchart TD
@ -799,7 +799,7 @@ timeline
完成作业后的示例效果:
![显示“添加交易”对话框示例的截图](../../../../translated_images/dialog.93bba104afeb79f1.zh.png)
![显示“添加交易”对话框示例的截图](../../../../translated_images/zh/dialog.93bba104afeb79f1.png)
---

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**预期效果:**
完成本作业后,您的银行应用应具备一个功能齐全的“添加交易”功能,外观与行为均专业:
![显示示例“添加交易”对话框的截图](../../../../translated_images/dialog.93bba104afeb79f1.zh.png)
![显示示例“添加交易”对话框的截图](../../../../translated_images/zh/dialog.93bba104afeb79f1.png)
## 测试您的实现

@ -182,7 +182,7 @@ VSCode.dev 将这些能力带入浏览器:
加载完成后,你会看到一个清爽的工作区,设计围绕代码展开,让你专注于核心任务!
![默认 VSCode.dev 界面](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.zh.png)
![默认 VSCode.dev 界面](../../../../translated_images/zh/default-vscode-dev.5d06881d65c1b323.png)
**你的界面导览:**
- **活动栏**(左侧条带):主导航,含资源管理器 📁、搜索 🔍、源代码控制 🌿、扩展 🧩 及设置 ⚙️
@ -229,7 +229,7 @@ flowchart TB
1. 如果没在页面,先访问 [vscode.dev](https://vscode.dev)
2. 在欢迎界面点击“Open Remote Repository”按钮
![打开远程仓库](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.zh.png)
![打开远程仓库](../../../../translated_images/zh/open-remote-repository.bd9c2598b8949e7f.png)
3. 粘贴任意 GitHub 仓库 URL试试这个`https://github.com/microsoft/Web-Dev-For-Beginners`
4. 按回车,见证神奇!
@ -238,7 +238,7 @@ flowchart TB
想更像编码巫师?试试 Ctrl+Shift+PMac 上为 Cmd+Shift+P打开命令面板
![命令面板](../../../../translated_images/palette-menu.4946174e07f42622.zh.png)
![命令面板](../../../../translated_images/zh/palette-menu.4946174e07f42622.png)
**命令面板是你所有操作的搜索引擎:**
- 输入“open remote”即可找到打开远程仓库的功能
@ -300,7 +300,7 @@ flowchart TB
3. 输入文件名并包含适当扩展名(如 `style.css``script.js``index.html`
4. 按回车创建文件
![创建新文件](../../../../translated_images/create-new-file.2814e609c2af9aeb.zh.png)
![创建新文件](../../../../translated_images/zh/create-new-file.2814e609c2af9aeb.png)
**命名规范:**
- 使用描述性名称,体现文件用途
@ -318,7 +318,7 @@ flowchart TB
2. 开始输入,感受 VSCode.dev 用颜色、高亮和错误提示支持你的创作
3. 用 Ctrl+SWindows/Linux或 Cmd+SMac保存——其实它也会自动保存
![编辑文件](../../../../translated_images/edit-a-file.52c0ee665ef19f08.zh.png)
![编辑文件](../../../../translated_images/zh/edit-a-file.52c0ee665ef19f08.png)
**编码时的酷炫特性:**
- 代码色彩丰富,易于阅读
@ -339,7 +339,7 @@ flowchart TB
2. 已修改的文件会出现在“变更”区域
3. 用颜色区分变动类型:绿色表示新增,红色表示删除
![查看源代码变更](../../../../translated_images/working-tree.c58eec08e6335c79.zh.png)
![查看源代码变更](../../../../translated_images/zh/working-tree.c58eec08e6335c79.png)
**保存工作(提交工作流):**
@ -431,7 +431,7 @@ mindmap
2. 浏览或搜索特定内容
3. 点击感兴趣的扩展,了解更多信息
![扩展市场界面](../../../../translated_images/extensions.eca0e0c7f59a10b5.zh.png)
![扩展市场界面](../../../../translated_images/zh/extensions.eca0e0c7f59a10b5.png)
**你会看到内容:**
@ -484,7 +484,7 @@ mindmap
3. 选择“扩展设置”
4. 进行调整,直到感觉顺手
![自定义扩展设置](../../../../translated_images/extension-settings.21c752ae4f4cdb78.zh.png)
![自定义扩展设置](../../../../translated_images/zh/extension-settings.21c752ae4f4cdb78.png)
**你可能想调整的常见项:**
- 代码格式化方式(制表符与空格,行宽等)

@ -79,7 +79,7 @@ CO_OP_TRANSLATOR_METADATA:
4. **填写** 提交信息“Add initial HTML structure”
5. **点击** “Commit new file” 保存更改
![在 GitHub 上创建初始文件](../../../../translated_images/new-file-github.com.c886796d800e8056.zh.png)
![在 GitHub 上创建初始文件](../../../../translated_images/zh/new-file-github.com.c886796d800e8056.png)
**此初始设置功效:**
- **建立** 合适的 HTML5 文档结构及语义元素
@ -105,7 +105,7 @@ CO_OP_TRANSLATOR_METADATA:
**成功标志**:您将在资源管理器侧边栏看到项目文件,并可在主编辑区打开 `index.html` 进行编辑。
![VSCode.dev 中的项目加载界面](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.zh.png)
![VSCode.dev 中的项目加载界面](../../../../translated_images/zh/project-on-vscode.dev.e79815a9a95ee7fe.png)
**界面包含内容:**
- **资源管理器侧边栏**:显示仓库文件及目录结构
@ -450,7 +450,7 @@ li:before {
**安装后即时效果:**
安装完成后,编辑器内会显示简历网站的实时预览,方便您边编辑边查看网站实际效果。
![CodeSwing 扩展实时预览](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.zh.png)
![CodeSwing 扩展实时预览](../../../../translated_images/zh/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**增强界面解析:**
- **分屏视图**:左侧显示代码,右侧实时预览

@ -60,7 +60,7 @@ print(response.choices[0].message.content)
这是你完成项目后的效果:
![聊天应用界面显示用户和 AI 助手之间的对话](../../../translated_images/screenshot.0a1ee0d123df681b.zh.png)
![聊天应用界面显示用户和 AI 助手之间的对话](../../../translated_images/zh/screenshot.0a1ee0d123df681b.png)
## 🗺️ 你的 AI 应用开发学习之旅
@ -189,7 +189,7 @@ mindmap
```
**核心原则**AI 应用开发融合传统网页开发技能与 AI 服务集成,创建感觉自然且响应迅速的智能应用。
![GitHub Models AI Playground 界面,包含模型选择和测试区域](../../../translated_images/playground.d2b927122224ff8f.zh.png)
![GitHub Models AI Playground 界面,包含模型选择和测试区域](../../../translated_images/zh/playground.d2b927122224ff8f.png)
**Playground 超有用的原因:**
- **试用** 不同 AI 模型如 GPT-4o-mini、Claude 等(全都免费!)
@ -199,7 +199,7 @@ mindmap
玩过后直接点“Code”标签选你要的编程语言拿到实现代码。
![Playground 选择界面,展示多编程语言代码生成选项](../../../translated_images/playground-choice.1d23ba7d407f4758.zh.png)
![Playground 选择界面,展示多编程语言代码生成选项](../../../translated_images/zh/playground-choice.1d23ba7d407f4758.png)
## 配置 Python 后端集成
@ -2352,14 +2352,14 @@ mindmap
- **访问** [Web Dev For Beginners 仓库](https://github.com/microsoft/Web-Dev-For-Beginners)
- **点击** 右上角的“Use this template”确保已登录 GitHub
![Create from template interface showing the green "Use this template" button](../../../translated_images/template.67ad477109d29a2b.zh.png)
![Create from template interface showing the green "Use this template" button](../../../translated_images/zh/template.67ad477109d29a2b.png)
**步骤 2启动 Codespaces**
- **打开** 你刚创建的仓库
- **点击** 绿色“Code”按钮选择“Codespaces”
- **选择** “Create codespace on main” 启动开发环境
![Create codespace interface with options for launching cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d.zh.png)
![Create codespace interface with options for launching cloud development environment](../../../translated_images/zh/codespace.bcecbdf5d2747d3d.png)
**步骤 3环境配置**
Codespace 加载完成后,你将获得:

@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA:
访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习!
![背景](../../translated_images/background.148a8d43afde5730.zh.png)
![背景](../../translated_images/zh/background.148a8d43afde5730.png)
- 涵盖从基础到 RAG 的课程。
- 使用生成式 AI 和我们的配套应用与历史人物互动。
- 趣味且引人入胜的叙事,你将体验时空穿越!
![角色](../../translated_images/character.5c0dd8e067ffd693.zh.png)
![角色](../../translated_images/zh/character.5c0dd8e067ffd693.png)
每节课均包含作业、知识检测和挑战,引导你学习以下主题:
- 提示词及提示工程
@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA:
在你创建的仓库副本中,点击 **Code** 按钮,选择 **Open with Codespaces**。这将创建一个新的 Codespace 供你使用。
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.zh.png)
![Codespace](../../translated_images/zh/createcodespace.0238bbf4d7a8d955.png)
#### 在本地计算机上运行课程

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud 对 Common Cartridge 的支持有限。建议优先使用上述 Moodle 文件,该文件也可以上传到 Canvas。
- 导入后,请根据学期安排检查模块、截止日期和测验设置。
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.zh.png)
![Moodle](../../translated_images/zh/moodle.94eb93d714a50cb2.png)
> Moodle 教室中的课程内容
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.zh.png)
![Canvas](../../translated_images/zh/canvas.fbd605ff8e5b8aff.png)
> Canvas 教室中的课程内容
### 直接使用代码库(不使用 Classroom

Loading…
Cancel
Save