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

pull/1670/head
localizeflow[bot] 1 week ago
parent 321bc700d3
commit a34e22f80c

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
In questo progetto, imparerai come costruire una banca fittizia. Queste lezioni includono istruzioni su come strutturare un'app web e fornire percorsi, creare moduli, gestire lo stato e recuperare dati da un'API da cui puoi ottenere i dati della banca.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.it.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.it.png) |
| ![Screen1](../../../translated_images/it/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/it/screen2.123c82a831a1d14a.png) |
|--------------------------------|--------------------------------|
## Lezioni

@ -185,7 +185,7 @@ Proprio come il telefono di Alexander Graham Bell collegava luoghi distanti, col
Una volta caricato tutto, vedrai uno spazio di lavoro pulito e progettato per mantenerti concentrato su ciò che conta il tuo codice!
![Interfaccia predefinita di VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.it.png)
![Interfaccia predefinita di VSCode.dev](../../../../translated_images/it/default-vscode-dev.5d06881d65c1b323.png)
**Ecco il tuo tour del quartiere:**
- **Barra delle attività** (quella striscia a sinistra): La tua navigazione principale con Esplora 📁, Cerca 🔍, Controllo sorgente 🌿, Estensioni 🧩 e Impostazioni ⚙️
@ -233,7 +233,7 @@ Questo è perfetto quando inizi da zero in VSCode.dev e vuoi aprire un repositor
1. Vai su [vscode.dev](https://vscode.dev) se non ci sei già
2. Cerca il pulsante "Apri repository remoto" nella schermata di benvenuto e cliccaci sopra
![Apri repository remoto](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.it.png)
![Apri repository remoto](../../../../translated_images/it/open-remote-repository.bd9c2598b8949e7f.png)
3. Incolla l'URL di un repository GitHub (prova questo: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Premi Invio e guarda la magia accadere!
@ -242,7 +242,7 @@ Questo è perfetto quando inizi da zero in VSCode.dev e vuoi aprire un repositor
Vuoi sentirti un mago della programmazione? Prova questa scorciatoia da tastiera: Ctrl+Shift+P (o Cmd+Shift+P su Mac) per aprire il Command Palette:
![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.it.png)
![Command Palette](../../../../translated_images/it/palette-menu.4946174e07f42622.png)
**Il Command Palette è come avere un motore di ricerca per tutto ciò che puoi fare:**
- Digita "open remote" e troverà l'apertura del repository per te
@ -304,7 +304,7 @@ Proprio come organizzare i progetti in uno studio di architettura, la creazione
3. Inserisci il nome del file incluso l'estensione appropriata (`style.css`, `script.js`, `index.html`)
4. Premi Invio per creare il file
![Creare un nuovo file](../../../../translated_images/create-new-file.2814e609c2af9aeb.it.png)
![Creare un nuovo file](../../../../translated_images/it/create-new-file.2814e609c2af9aeb.png)
**Convenzioni di denominazione:**
- Usa nomi descrittivi che indicano lo scopo del file
@ -322,7 +322,7 @@ Qui inizia il vero divertimento! L'editor di VSCode.dev è ricco di funzionalit
2. Inizia a digitare e osserva VSCode.dev aiutarti con colori, suggerimenti e rilevamento degli errori
3. Salva il tuo lavoro con Ctrl+S (Windows/Linux) o Cmd+S (Mac) anche se salva automaticamente!
![Modificare file in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.it.png)
![Modificare file in VSCode.dev](../../../../translated_images/it/edit-a-file.52c0ee665ef19f08.png)
**Le cose interessanti che accadono mentre programmi:**
- Il tuo codice viene evidenziato con colori bellissimi, rendendolo facile da leggere
@ -343,7 +343,7 @@ Proprio come gli archeologi creano registri dettagliati degli strati di scavo, G
2. I file modificati appaiono nella sezione "Modifiche"
3. La codifica a colori indica i tipi di modifica: verde per le aggiunte, rosso per le eliminazioni
![Visualizzare le modifiche nel controllo della sorgente](../../../../translated_images/working-tree.c58eec08e6335c79.it.png)
![Visualizzare le modifiche nel controllo della sorgente](../../../../translated_images/it/working-tree.c58eec08e6335c79.png)
**Salvare il tuo lavoro (il flusso di lavoro di commit):**
@ -438,7 +438,7 @@ Il marketplace delle estensioni è davvero ben organizzato, quindi non ti perder
2. Sfoglia o cerca qualcosa di specifico
3. Clicca su ciò che ti sembra interessante per saperne di più
![Interfaccia del marketplace delle estensioni](../../../../translated_images/extensions.eca0e0c7f59a10b5.it.png)
![Interfaccia del marketplace delle estensioni](../../../../translated_images/it/extensions.eca0e0c7f59a10b5.png)
**Cosa troverai lì dentro:**
@ -491,7 +491,7 @@ La maggior parte delle estensioni ha impostazioni che puoi modificare per farle
3. Scegli "Impostazioni Estensione" dal menu a tendina
4. Regola le impostazioni finché non si adattano perfettamente al tuo workflow
![Personalizzare le impostazioni delle estensioni](../../../../translated_images/extension-settings.21c752ae4f4cdb78.it.png)
![Personalizzare le impostazioni delle estensioni](../../../../translated_images/it/extension-settings.21c752ae4f4cdb78.png)
**Cose comuni che potresti voler modificare:**
- Come viene formattato il codice (tab vs spazi, lunghezza delle righe, ecc.)

@ -78,7 +78,7 @@ Poiché VSCode.dev richiede almeno un file per aprire un repository, creeremo il
4. **Scrivi** un messaggio di commit: "Aggiungi struttura HTML iniziale"
5. **Clicca** su "Commit new file" per salvare le modifiche
![Creazione del file iniziale su GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.it.png)
![Creazione del file iniziale su GitHub](../../../../translated_images/it/new-file-github.com.c886796d800e8056.png)
**Ecco cosa realizza questa configurazione iniziale:**
- **Stabilisce** una corretta struttura del documento HTML5 con elementi semantici
@ -104,7 +104,7 @@ Ora che le basi del tuo repository sono state stabilite, passiamo a VSCode.dev p
**Indicatore di successo**: Dovresti vedere i file del tuo progetto nella barra laterale Explorer e `index.html` disponibile per la modifica nell'area principale dell'editor.
![Progetto caricato su VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.it.png)
![Progetto caricato su VSCode.dev](../../../../translated_images/it/project-on-vscode.dev.e79815a9a95ee7fe.png)
**Cosa vedrai nell'interfaccia:**
- **Barra laterale Explorer**: **Mostra** i file e la struttura delle cartelle del tuo repository
@ -448,7 +448,7 @@ Le estensioni migliorano la tua esperienza di sviluppo fornendo funzionalità di
**Risultati immediati dopo l'installazione:**
Una volta installato CodeSwing, vedrai un'anteprima live del tuo sito web per il curriculum apparire nell'editor. Questo ti permette di vedere esattamente come appare il tuo sito mentre apporti modifiche.
![Estensione CodeSwing che mostra l'anteprima live](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.it.png)
![Estensione CodeSwing che mostra l'anteprima live](../../../../translated_images/it/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**Comprensione dell'interfaccia migliorata:**
- **Vista divisa**: **Mostra** il tuo codice da un lato e l'anteprima live dall'altro

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
Ecco come apparirà il tuo progetto finito:
![Interfaccia dell'app di chat che mostra una conversazione tra utente e assistente AI](../../../translated_images/screenshot.0a1ee0d123df681b.it.png)
![Interfaccia dell'app di chat che mostra una conversazione tra utente e assistente AI](../../../translated_images/it/screenshot.0a1ee0d123df681b.png)
## 🗺️ Il Tuo Percorso di Apprendimento nello Sviluppo di Applicazioni AI
@ -194,7 +194,7 @@ mindmap
**Principio Fondamentale**: Lo sviluppo di applicazioni AI combina competenze tradizionali di sviluppo web con l'integrazione di servizi AI, creando applicazioni intelligenti che sembrano naturali e reattive per gli utenti.
![Interfaccia del GitHub Models AI Playground con selezione del modello e area di test](../../../translated_images/playground.d2b927122224ff8f.it.png)
![Interfaccia del GitHub Models AI Playground con selezione del modello e area di test](../../../translated_images/it/playground.d2b927122224ff8f.png)
**Ecco cosa rende il playground così utile:**
- **Prova** diversi modelli AI come GPT-4o-mini, Claude e altri (tutti gratuiti!)
@ -204,7 +204,7 @@ mindmap
Una volta che hai sperimentato un po', basta cliccare sulla scheda "Code" e scegliere il tuo linguaggio di programmazione per ottenere il codice di implementazione di cui hai bisogno.
![Scelta del playground che mostra opzioni di generazione del codice per diversi linguaggi di programmazione](../../../translated_images/playground-choice.1d23ba7d407f4758.it.png)
![Scelta del playground che mostra opzioni di generazione del codice per diversi linguaggi di programmazione](../../../translated_images/it/playground-choice.1d23ba7d407f4758.png)
## Configurare l'Integrazione Backend Python
@ -2364,14 +2364,14 @@ Vuoi provare questo progetto in un ambiente di sviluppo cloud? GitHub Codespaces
- **Vai** al [repository Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Clicca** su "Use this template" nell'angolo in alto a destra (assicurati di essere loggato su GitHub)
![Interfaccia per creare dal template che mostra il pulsante verde "Use this template"](../../../translated_images/template.67ad477109d29a2b.it.png)
![Interfaccia per creare dal template che mostra il pulsante verde "Use this template"](../../../translated_images/it/template.67ad477109d29a2b.png)
**Passo 2: Avvia Codespaces**
- **Apri** il tuo repository appena creato
- **Clicca** sul pulsante verde "Code" e seleziona "Codespaces"
- **Scegli** "Create codespace on main" per avviare il tuo ambiente di sviluppo
![Interfaccia per creare codespace con opzioni per avviare l'ambiente di sviluppo cloud](../../../translated_images/codespace.bcecbdf5d2747d3d.it.png)
![Interfaccia per creare codespace con opzioni per avviare l'ambiente di sviluppo cloud](../../../translated_images/it/codespace.bcecbdf5d2747d3d.png)
**Passo 3: Configurazione dell'Ambiente**
Una volta caricato il tuo Codespace, avrai accesso a:

@ -56,13 +56,13 @@ Non perdere il nostro nuovo curriculum su AI Generativa!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) per iniziare!
![Background](../../translated_images/background.148a8d43afde5730.it.png)
![Background](../../translated_images/it/background.148a8d43afde5730.png)
- Lezioni che coprono tutto, dalle basi a RAG.
- Interagisci con personaggi storici usando GenAI e la nostra app companion.
- Narrazione divertente e coinvolgente, faremo viaggi nel tempo!
![character](../../translated_images/character.5c0dd8e067ffd693.it.png)
![character](../../translated_images/it/character.5c0dd8e067ffd693.png)
Ogni lezione include un compito da completare, un controllo della conoscenza e una sfida per guidarti nellapprendimento di argomenti come:
- Prompt e ingegneria del prompt
@ -96,7 +96,7 @@ Segui questi passaggi:
Nella tua copia del repository creata, clicca il pulsante **Code** e seleziona **Open with Codespaces**. Questo creerà un nuovo Codespace per lavorare.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.it.png)
![Codespace](../../translated_images/it/createcodespace.0238bbf4d7a8d955.png)
#### Eseguire il curriculum localmente sul tuo computer

@ -42,10 +42,10 @@ Questo curriculum include pacchetti importabili per flussi di lavoro comuni su L
- Moodle Cloud ha un supporto limitato per Common Cartridge. Preferite il file Moodle sopra, che può anche essere caricato in Canvas.
- Dopo l'importazione, rivedete i moduli, le date di scadenza e le impostazioni dei quiz per adattarli al vostro calendario.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.it.png)
![Moodle](../../translated_images/it/moodle.94eb93d714a50cb2.png)
> Il curriculum in una classe Moodle
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.it.png)
![Canvas](../../translated_images/it/canvas.fbd605ff8e5b8aff.png)
> Il curriculum in Canvas
### Utilizzo diretto del repository (senza Classroom)

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
今日は、現代のウェブ開発を可能にするだけでなく、夢中にさせる素晴らしいツールを探求します。NetflixやSpotify、そしてお気に入りのインディーアプリスタジオの開発者が毎日使っているエディター、ブラウザ、ワークフローについて話します。そして、これがあなたを踊りたくさせる部分ですこれらのプロ仕様の業界標準ツールのほとんどが完全に無料なんです
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.ja.png)
![Intro Programming](../../../../translated_images/ja/webdev101-programming.d6e3f98e61ac4bff.png)
> スケッチノート提供:[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
一歩ずつ一緒に進んでいきましょう。急がず、プレッシャーもなしで、あなたと私、そしてこれからあなたの新しい親友になる本当にクールなツールたちと一緒に!
![GitHubの紹介](../../../../translated_images/webdev101-github.8846d7971abef6f9.ja.png)
![GitHubの紹介](../../../../translated_images/ja/webdev101-github.8846d7971abef6f9.png)
> スケッチノート提供:[Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -593,7 +593,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.ja.png)
![リポジトリをローカルにコピー](../../../../translated_images/ja/clone_repo.5085c48d666ead57.png)
コードをコピーする方法はいくつかあります。一つの方法は、HTTPS、SSH、またはGitHub CLIコマンドラインインターフェースを使用してリポジトリの内容を「クローン」することです。

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# アクセシブルなウェブページの作成
![アクセシビリティについて](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.ja.png)
![アクセシビリティについて](../../../../translated_images/ja/webdev101-a11y.8ef3025c858d897a.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -936,12 +936,12 @@ pie title "Common ARIA Usage Patterns"
**情報を伝える画像** - 重要な情報を伝える:
```html
<img src="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.ja.png" alt="Sales increased 25% from Q1 to Q2 2024">
<img src="../../../../translated_images/ja/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**装飾的な画像** - 純粋に視覚的で情報価値がない:
```html
<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.ja.png" alt="" role="presentation">
<img src="../../../../translated_images/ja/decorative-border.b2f3c4d6634fb79d57fb6357835906c16938df3d5651c1314c196c3b1c52df98.png" alt="" role="presentation">
```
**機能的な画像** - ボタンやコントロールとして機能する:
@ -953,7 +953,7 @@ pie title "Common ARIA Usage Patterns"
**複雑な画像** - チャート、図、インフォグラフィック:
```html
<img src="../../../../translated_images/complex-chart.c831f461a363b446a688be5ccacde20d011221758c902cb082cfd4293534ef17.ja.png" alt="Quarterly sales data" aria-describedby="chart-description">
<img src="../../../../translated_images/ja/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>
@ -993,7 +993,7 @@ pie title "Common ARIA Usage Patterns"
<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.ja.png" alt="Website traffic increased 40% after accessibility improvements">
<img src="../../../../translated_images/ja/small-chart.c50c7b1bbcce43d8d24fbfbab8f691fe47d8f25fb7c70857c9eae21d5f22862e.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.ja.png)
![JavaScript Basics - Data types](../../../../translated_images/ja/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.ja.png)
![JavaScript Basics - Functions](../../../../translated_images/ja/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.ja.png)
![JavaScript Basics - Making decisions](../../../../translated_images/ja/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.ja.png)
![JavaScript Basics - Arrays](../../../../translated_images/ja/webdev101-js-arrays.439d7528b8a29455.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -26,7 +26,7 @@ journey
Build terrarium: 5: Student
```
![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98.ja.png)
![HTML入門](../../../../translated_images/ja/webdev101-html.4389c2067af68e98.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
HTMLHyperText Markup Languageは、これまで訪れたすべてのウェブサイトの基盤です。HTMLはウェブページの骨格のようなもので、コンテンツの配置、構造、各部分の意味を定義します。後でCSSが色やレイアウトでHTMLを「装飾」し、JavaScriptがインタラクティブ性を加えることで「命を吹き込む」役割を果たしますが、HTMLはすべての基礎を提供します。
@ -88,7 +88,7 @@ HTMLコードに取り掛かる前に、テラリウムプロジェクトの適
4. エクスプローラペインで「新しいファイル」アイコンをクリック
5. ファイル名を`index.html`にする
![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/vs-code-index.e2986cf919471eb9.ja.png)
![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/ja/vs-code-index.e2986cf919471eb9.png)
**オプション2: ターミナルコマンドを使用する場合**
```bash
@ -239,48 +239,48 @@ HTMLファイルを更新して`<body>`要素を含めてください:
<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.ja.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/ja/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.ja.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/ja/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.ja.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/ja/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.ja.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/ja/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.ja.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/ja/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.ja.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/ja/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.ja.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/ja/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.ja.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/ja/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.ja.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/ja/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.ja.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/ja/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.ja.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/ja/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.ja.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/ja/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.ja.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/ja/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.ja.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/ja/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.png" />
</div>
</div>
</div>

@ -30,7 +30,7 @@ journey
Glass reflections: 5: Student
```
![CSS入門](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ja.png)
![CSS入門](../../../../translated_images/ja/webdev101-css.3f7af5991bf53a20.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
HTMLで作ったテラリウムが少しシンプルすぎると感じませんでしたかCSSを使えば、その基本的な構造を視覚的に魅力的なものに変えることができます。
@ -205,7 +205,7 @@ body {
ブラウザの開発者ツールF12を開き、Elementsタブに移動して`<h1>`要素を検査してください。`body`からフォントファミリーを継承していることがわかります:
![継承されたフォント](../../../../translated_images/1.cc07a5cbe114ad1d.ja.png)
![継承されたフォント](../../../../translated_images/ja/1.cc07a5cbe114ad1d.png)
**実験タイム**: `<body>`に`color`、`line-height`、`text-align`などの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるでしょうか?
@ -335,7 +335,7 @@ IDセレクタは`#`記号を使用し、特定の`id`属性を持つ要素を
**各植物のHTML構造:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ja.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/ja/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.png" />
</div>
```
@ -562,7 +562,7 @@ Agentモードを使用して次のチャレンジを完了してください:
ガラス表面に光が反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ルネサンスの画家ヤン・ファン・エイクが光と反射を使って描かれたガラスを三次元的に見せた方法に似ています。目指すべきものは以下の通りです:
![完成したテラリウム](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ja.png)
![完成したテラリウム](../../../../translated_images/ja/terrarium-final.2f07047ffc597d0a.png)
**チャレンジ内容:**
- **作成** ガラスの反射をシミュレートする微妙な白または明るい色の楕円形

@ -26,7 +26,7 @@ journey
Complete terrarium: 5: Student
```
![DOMとクロージャ](../../../../translated_images/webdev101-js.10280393044d7eaa.ja.png)
![DOMとクロージャ](../../../../translated_images/ja/webdev101-js.10280393044d7eaa.png)
> スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac)
ウェブ開発の最も魅力的な側面の一つへようこそインタラクティブな要素を作ることです。Document Object Model (DOM) は、HTMLとJavaScriptをつなぐ橋のようなもので、今日はこれを使ってテラリウムを動かします。ティム・バーナーズリーが最初のウェブブラウザを作ったとき、彼は動的でインタラクティブなドキュメントを想像していました。そのビジョンを可能にするのがDOMです。
@ -105,7 +105,7 @@ flowchart TD
style Q fill:#ffebee
```
![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba92.ja.png)
![DOMツリーの表現](../../../../translated_images/ja/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
> 💡 **クロージャの理解**: クロージャはJavaScriptの重要なトピックであり、多くの開発者が理論的な側面を完全に理解する前に何年も使用します。今日は実践的な応用に焦点を当てます。インタラクティブな機能を構築する中で、自然にその仕組みが見えてくるでしょう。理解は実際の問題を解決する方法を見ることで深まります。
![DOMツリーの表現](../../../../translated_images/dom-tree.7daf0e763cbbba92.ja.png)
![DOMツリーの表現](../../../../translated_images/ja/dom-tree.7daf0e763cbbba92.png)
> DOMとそれを参照するHTMLマークアップの表現。出典: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -589,7 +589,7 @@ function stopElementDrag() {
- **デバイス間の互換性**: デスクトップとモバイルで動作
- **パフォーマンス意識**: メモリリークや冗長な計算なし
![完成したテラリウム](../../../../translated_images/terrarium-final.0920f16e87c13a84.ja.png)
![完成したテラリウム](../../../../translated_images/ja/terrarium-final.0920f16e87c13a84.png)
---

@ -26,7 +26,7 @@ journey
Polish experience: 5: Student
```
![ブラウザのスケッチノート](../../../../translated_images/browser.60317c9be8b7f84a.ja.jpg)
![ブラウザのスケッチノート](../../../../translated_images/ja/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)
## 講義前クイズ
@ -79,7 +79,7 @@ mindmap
**少し歴史を振り返る**: 最初のブラウザは「WorldWideWeb」と呼ばれ、1990年にサー・ティモシー・バーナーズリーによって作成されました。
![初期のブラウザ](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.ja.jpg)
![初期のブラウザ](../../../../translated_images/ja/earlybrowsers.d984b711cdf3a42d.jpg)
> 初期のブラウザのいくつか, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### ブラウザがウェブコンテンツを処理する方法
@ -198,7 +198,7 @@ quadrantChart
拡張機能のインストールプロセスを理解することで、ユーザーが拡張機能をインストールする際の体験を予測できます。インストールプロセスは、モダンブラウザ間で標準化されていますが、インターフェースデザインに若干の違いがあります。
![Edgeブラウザのスクリーンショット: edge://extensions ページと設定メニューが開いている](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ja.png)
![Edgeブラウザのスクリーンショット: edge://extensions ページと設定メニューが開いている](../../../../translated_images/ja/install-on-edge.d68781acaf0b3d3d.png)
> **重要**: 開発者モードをオンにし、自分の拡張機能をテストする際には他のストアからの拡張機能を許可してください。
@ -313,10 +313,10 @@ project-root/
### 拡張機能ビューの概要
**設定ビュー** - 初回ユーザー設定:
![完成した拡張機能がブラウザで開かれ、地域名とAPIキーの入力フォームを表示しているスクリーンショット](../../../../translated_images/1.b6da8c1394b07491.ja.png)
![完成した拡張機能がブラウザで開かれ、地域名とAPIキーの入力フォームを表示しているスクリーンショット](../../../../translated_images/ja/1.b6da8c1394b07491.png)
**結果ビュー** - カーボンフットプリントデータの表示:
![完成した拡張機能がUS-NEISO地域のカーボン使用量と化石燃料割合の値を表示しているスクリーンショット](../../../../translated_images/2.1dae52ff08042246.ja.png)
![完成した拡張機能がUS-NEISO地域のカーボン使用量と化石燃料割合の値を表示しているスクリーンショット](../../../../translated_images/ja/2.1dae52ff08042246.png)
### 設定フォームの構築

@ -268,7 +268,7 @@ stateDiagram-v2
ClearStorage --> FirstTime: Back to setup
```
![ローカルストレージペイン](../../../../translated_images/localstorage.472f8147b6a3f8d1.ja.png)
![ローカルストレージペイン](../../../../translated_images/ja/localstorage.472f8147b6a3f8d1.png)
> ⚠️ **セキュリティ上の考慮事項**: 実際のアプリケーションでは、LocalStorageにAPIキーを保存することはセキュリティリスクを伴います。JavaScriptがこのデータにアクセスできるためです。学習目的ではこの方法で問題ありませんが、実際のアプリケーションでは機密資格情報を安全なサーバー側ストレージに保存する必要があります。

@ -126,7 +126,7 @@ Edgeで開発者ツールを開くには、右上の3つのドットをクリッ
これを試してみましょう。ウェブサイトMicrosoft.comが適していますを開き、「記録」ボタンをクリックします。次にページをリフレッシュして、プロファイラーが何が起きているかをキャプチャする様子を観察します。記録を停止すると、ブラウザがサイトを「スクリプト化」、「レンダリング」、「ペイント」する方法の詳細な内訳が表示されます。これは、ロケット打ち上げ中にミッションコントロールがすべてのシステムを監視する方法を思い出させます。リアルタイムで何が起きているか、いつ起きているかのデータを得ることができます。
![Edgeプロファイラー](../../../../translated_images/profiler.5a4a62479c5df01c.ja.png)
![Edgeプロファイラー](../../../../translated_images/ja/profiler.5a4a62479c5df01c.png)
✅ [Microsoftのドキュメント](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)には、さらに詳しい情報がたくさんあります。
@ -136,11 +136,11 @@ Edgeで開発者ツールを開くには、右上の3つのドットをクリッ
プロファイルタイムラインの一部を選択して、概要ペインでページのパフォーマンスのスナップショットを取得します:
![Edgeプロファイラースナップショット](../../../../translated_images/snapshot.97750180ebcad737.ja.png)
![Edgeプロファイラースナップショット](../../../../translated_images/ja/snapshot.97750180ebcad737.png)
イベントログペインを確認して、15ms以上かかったイベントがあるかどうかを確認します:
![Edgeイベントログ](../../../../translated_images/log.804026979f3707e0.ja.png)
![Edgeイベントログ](../../../../translated_images/ja/log.804026979f3707e0.png)
✅ プロファイラーを使いこなしてください!このサイトで開発者ツールを開き、ボトルネックがあるかどうかを確認してください。最も遅く読み込まれるアセットは何ですか?最も速いものは?

@ -108,7 +108,7 @@ quadrantChart
UI Elements: [0.9, 0.1]
```
![キャンバスのグリッド](../../../../translated_images/canvas_grid.5f209da785ded492.ja.png)
![キャンバスのグリッド](../../../../translated_images/ja/canvas_grid.5f209da785ded492.png)
> 画像提供: [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
キャンバス要素に描画するには、キャンバスグラフィックの基礎を形成する同じ3ステップのプロセスに従います。このプロセスを数回行うと、自然に身につきます。
@ -329,11 +329,11 @@ Canvas要素を含むウェブページを作成します。黒い画面 `1024*7
- ヒーローの船
![ヒーローの船](../../../../translated_images/player.dd24c1afa8c71e9b.ja.png)
![ヒーローの船](../../../../translated_images/ja/player.dd24c1afa8c71e9b.png)
- 5×5のモンスター
![モンスターの船](../../../../translated_images/enemyShip.5df2a822c16650c2.ja.png)
![モンスターの船](../../../../translated_images/ja/enemyShip.5df2a822c16650c2.png)
### 開発を始めるための推奨ステップ
@ -468,7 +468,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
完成した結果は以下のようになります:
![黒い画面にヒーローと5*5のモンスター](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ja.png)
![黒い画面にヒーローと5*5のモンスター](../../../../translated_images/ja/partI-solution.36c53b48c9ffae2a.png)
## 解答

@ -160,7 +160,7 @@ sequenceDiagram
```
- **スコアリングシステム**: 敵の船を破壊するたびに100ポイントが与えられます丸い数字はプレイヤーが頭の中で計算しやすいです。スコアは画面左下に表示されます。
- **ライフカウンター**: ヒーローは3つのライフでスタートします。これは初期のアーケードゲームが挑戦と遊びやすさのバランスを取るために確立した標準です。敵との衝突ごとにライフが1つ減ります。残りのライフは画面右下に船のアイコンで表示されます ![life image](../../../../translated_images/life.6fb9f50d53ee0413.ja.png)。
- **ライフカウンター**: ヒーローは3つのライフでスタートします。これは初期のアーケードゲームが挑戦と遊びやすさのバランスを取るために確立した標準です。敵との衝突ごとにライフが1つ減ります。残りのライフは画面右下に船のアイコンで表示されます ![life image](../../../../translated_images/ja/life.6fb9f50d53ee0413.png)。
## 作り始めましょう!

@ -635,7 +635,7 @@ sequenceDiagram
`history.pushState`を使用するとブラウザのナビゲーション履歴に新しいエントリが作成されます。ブラウザの*戻るボタン*を押し続けると、次のような履歴が表示されるはずです:
![ナビゲーション履歴のスクリーンショット](../../../../translated_images/history.7fdabbafa521e064.ja.png)
![ナビゲーション履歴のスクリーンショット](../../../../translated_images/ja/history.7fdabbafa521e064.png)
戻るボタンを数回クリックしてみると、現在のURLが変更され履歴が更新されますが、同じテンプレートが表示され続けます。

@ -295,7 +295,7 @@ graph TD
2. ブラウザのアドレスバーの変化を観察
3. ページがリロードされ、データがURLに表示されることに気づく
![登録ボタンをクリックした後のブラウザのURL変化のスクリーンショット](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ja.png)
![登録ボタンをクリックした後のブラウザのURL変化のスクリーンショット](../../../../translated_images/ja/click-register.e89a30bf0d4bc9ca.png)
### HTTPメソッドの比較
@ -350,7 +350,7 @@ graph TD
2. **「アカウント作成」ボタンをクリック**
3. **ブラウザでサーバー応答を確認**
![localhost:5000/api/accountsのアドレスでブラウザウィンドウが表示され、ユーザーデータを含むJSON文字列が表示される](../../../../translated_images/form-post.61de4ca1b964d91a.ja.png)
![localhost:5000/api/accountsのアドレスでブラウザウィンドウが表示され、ユーザーデータを含むJSON文字列が表示される](../../../../translated_images/ja/form-post.61de4ca1b964d91a.png)
**確認すべきこと:**
- **ブラウザがAPIエンドポイントURLにリダイレクト**
@ -565,7 +565,7 @@ async function register() {
3. **「アカウント作成」をクリック**
4. **コンソールメッセージとユーザーフィードバックを確認**
![ブラウザコンソールにログメッセージが表示されているスクリーンショット](../../../../translated_images/browser-console.efaf0b51aaaf6778.ja.png)
![ブラウザコンソールにログメッセージが表示されているスクリーンショット](../../../../translated_images/ja/browser-console.efaf0b51aaaf6778.png)
**期待される結果:**
- **送信ボタンにローディング状態**が表示される
@ -740,7 +740,7 @@ input:focus:invalid {
3. **ユーザー名フィールドに特殊文字を入力**
4. **負の残高額を入力**
![フォーム送信時にバリデーションエラーが表示されるスクリーンショット](../../../../translated_images/validation-error.8bd23e98d416c22f.ja.png)
![フォーム送信時にバリデーションエラーが表示されるスクリーンショット](../../../../translated_images/ja/validation-error.8bd23e98d416c22f.png)
**観察されること:**
- **ブラウザがネイティブのバリデーションメッセージを表示**
@ -871,7 +871,7 @@ timeline
以下は、CSSスタイルを追加した後のログインページの最終的な例です
![CSSスタイルを追加した後のログインページのスクリーンショット](../../../../translated_images/result.96ef01f607bf856a.ja.png)
![CSSスタイルを追加した後のログインページのスクリーンショット](../../../../translated_images/ja/result.96ef01f607bf856a.png)
## 講義後のクイズ

@ -160,7 +160,7 @@ sequenceDiagram
Browser->>User: Displays new page (flash/reload)
```
![マルチページアプリケーションの更新ワークフロー](../../../../translated_images/mpa.7f7375a1a2d4aa77.ja.png)
![マルチページアプリケーションの更新ワークフロー](../../../../translated_images/ja/mpa.7f7375a1a2d4aa77.png)
**このアプローチがぎこちなく感じられた理由:**
- クリックするたびにページ全体を再構築する必要があった
@ -187,7 +187,7 @@ sequenceDiagram
Browser->>User: Shows updated content (no reload)
```
![シングルページアプリケーションの更新ワークフロー](../../../../translated_images/spa.268ec73b41f992c2.ja.png)
![シングルページアプリケーションの更新ワークフロー](../../../../translated_images/ja/spa.268ec73b41f992c2.png)
**SPAがより快適に感じられる理由:**
- 実際に変更された部分だけが更新される(賢いですよね?)
@ -510,7 +510,7 @@ if (data.error) {
無効なアカウントでテストすると、ページ上に役立つエラーメッセージが表示されるようになります!
![ログイン時に表示されるエラーメッセージのスクリーンショット](../../../../translated_images/login-error.416fe019b36a6327.ja.png)
![ログイン時に表示されるエラーメッセージのスクリーンショット](../../../../translated_images/ja/login-error.416fe019b36a6327.png)
#### ステップ4: アクセシビリティを考慮する
@ -904,7 +904,7 @@ Agentモードを使用して以下のチャレンジを完了してください
以下は、スタイリング後のダッシュボードの例のスクリーンショットです:
![スタイリング後のダッシュボードの例のスクリーンショット](../../../../translated_images/screen2.123c82a831a1d14a.ja.png)
![スタイリング後のダッシュボードの例のスクリーンショット](../../../../translated_images/ja/screen2.123c82a831a1d14a.png)
これを完全に再現する必要はありません。インスピレーションとして使用し、自分のスタイルで仕上げてください!

@ -190,7 +190,7 @@ mindmap
無駄な努力をする代わりに、**集中型状態管理**システムを作成します。これは、すべての重要なものを整理する1人の非常に組織的な人がいるようなものです:
![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../../../../translated_images/data-flow.fa2354e0908fecc8.ja.png)
![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../../../../translated_images/ja/data-flow.fa2354e0908fecc8.png)
```mermaid
flowchart TD

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**期待される結果:**
この課題を完了すると、銀行アプリには完全に機能する「取引追加」機能が備わり、プロフェッショナルな外観と動作を持つようになります:
![「取引追加」ダイアログの例を示すスクリーンショット](../../../../translated_images/dialog.93bba104afeb79f1.ja.png)
![「取引追加」ダイアログの例を示すスクリーンショット](../../../../translated_images/ja/dialog.93bba104afeb79f1.png)
## 実装のテスト

@ -185,7 +185,7 @@ VSCode.devはこれらの機能をブラウザに提供します:
すべてが読み込まれると、コードに集中できるように設計された美しくクリーンなワークスペースが表示されます。
![デフォルトのVSCode.devインターフェース](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ja.png)
![デフォルトのVSCode.devインターフェース](../../../../translated_images/ja/default-vscode-dev.5d06881d65c1b323.png)
**ワークスペースのツアー:**
- **アクティビティバー**(左側のストリップ): エクスプローラー📁、検索🔍、ソースコントロール🌿、拡張機能🧩、設定⚙️などのメインナビゲーション
@ -233,7 +233,7 @@ VSCode.devで新しく始める場合や特定のリポジトリを開きたい
1. [vscode.dev](https://vscode.dev)にアクセス(まだアクセスしていない場合)
2. ウェルカム画面で「Open Remote Repository」ボタンを探してクリック
![リモートリポジトリを開く](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ja.png)
![リモートリポジトリを開く](../../../../translated_images/ja/open-remote-repository.bd9c2598b8949e7f.png)
3. 任意のGitHubリポジトリURLを貼り付け例: `https://github.com/microsoft/Web-Dev-For-Beginners`
4. Enterキーを押して魔法を体験
@ -242,7 +242,7 @@ VSCode.devで新しく始める場合や特定のリポジトリを開きたい
コーディングの魔法使いのように感じたいですか?このキーボードショートカットを試してください: Ctrl+Shift+PMacではCmd+Shift+Pでコマンドパレットを開く:
![コマンドパレット](../../../../translated_images/palette-menu.4946174e07f42622.ja.png)
![コマンドパレット](../../../../translated_images/ja/palette-menu.4946174e07f42622.png)
**コマンドパレットは、できることすべての検索エンジンのようなものです:**
- 「open remote」と入力するとリポジトリオープナーを見つけられます
@ -304,7 +304,7 @@ HTTPとHTTPSが異なるプロトコルを使用しながら同じドメイン
3. 適切な拡張子を含むファイル名を入力(例: `style.css`, `script.js`, `index.html`
4. Enterキーを押してファイルを作成
![新しいファイルを作成](../../../../translated_images/create-new-file.2814e609c2af9aeb.ja.png)
![新しいファイルを作成](../../../../translated_images/ja/create-new-file.2814e609c2af9aeb.png)
**命名規則:**
- ファイルの目的を示す説明的な名前を使用
@ -322,7 +322,7 @@ HTTPとHTTPSが異なるプロトコルを使用しながら同じドメイン
2. タイピングを開始すると、VSCode.devが色付け、提案、エラー検出で助けてくれます
3. Ctrl+SWindows/LinuxまたはCmd+SMacで作業を保存 - 自動保存もあります!
![VSCode.devでファイルを編集](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ja.png)
![VSCode.devでファイルを編集](../../../../translated_images/ja/edit-a-file.52c0ee665ef19f08.png)
**コーディング中に起こる素晴らしいこと:**
- コードが美しく色分けされ、読みやすくなる
@ -395,7 +395,7 @@ mindmap
2. 探索するか、特定のものを検索
3. 興味深いものをクリックして詳細を確認
![拡張機能マーケットプレイスのインターフェース](../../../../translated_images/extensions.eca0e0c7f59a10b5.ja.png)
![拡張機能マーケットプレイスのインターフェース](../../../../translated_images/ja/extensions.eca0e0c7f59a10b5.png)
**中にあるもの:**
@ -448,7 +448,7 @@ mindmap
3. ドロップダウンから「拡張機能設定」を選択
4. ワークフローに合うように調整
![拡張機能設定のカスタマイズ](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ja.png)
![拡張機能設定のカスタマイズ](../../../../translated_images/ja/extension-settings.21c752ae4f4cdb78.png)
**調整したい一般的な項目:**
- コードのフォーマット方法(タブ vs スペース、行の長さなど)

@ -78,7 +78,7 @@ VSCode.devではリポジトリを開くために少なくとも1つのファイ
4. コミットメッセージを記入「初期HTML構造を追加」
5. 「Commit new file」をクリックして変更を保存
![GitHubで初期ファイルを作成](../../../../translated_images/new-file-github.com.c886796d800e8056.ja.png)
![GitHubで初期ファイルを作成](../../../../translated_images/ja/new-file-github.com.c886796d800e8056.png)
**この初期設定で達成されること:**
- **HTML5ドキュメント構造**をセマンティック要素で確立
@ -104,7 +104,7 @@ VSCode.devではリポジトリを開くために少なくとも1つのファイ
**成功の指標**: Explorerサイドバーにプロジェクトファイルが表示され、メインエディタエリアで`index.html`が編集可能になります。
![VSCode.devでプロジェクトを読み込む](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ja.png)
![VSCode.devでプロジェクトを読み込む](../../../../translated_images/ja/project-on-vscode.dev.e79815a9a95ee7fe.png)
**インターフェースで見えるもの:**
- **Explorerサイドバー**: リポジトリのファイルとフォルダ構造を表示
@ -448,7 +448,7 @@ li:before {
**インストール後の即時結果:**
CodeSwingがインストールされると、履歴書ウェブサイトのライブプレビューがエディタに表示されます。これにより、変更を加えるたびにサイトの外観を正確に確認できます。
![CodeSwing拡張機能によるライブプレビュー](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ja.png)
![CodeSwing拡張機能によるライブプレビュー](../../../../translated_images/ja/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**強化されたインターフェースの理解:**
- **分割ビュー**: コードとライブプレビューを並べて表示

@ -61,7 +61,7 @@ print(response.choices[0].message.content)
完成したプロジェクトは以下のようになります:
![ユーザーとAIアシスタントの会話を表示するチャットアプリのインターフェース](../../../translated_images/screenshot.0a1ee0d123df681b.ja.png)
![ユーザーとAIアシスタントの会話を表示するチャットアプリのインターフェース](../../../translated_images/ja/screenshot.0a1ee0d123df681b.png)
## 🗺️ AIアプリケーション開発の学習の旅
@ -194,7 +194,7 @@ mindmap
**基本原則**: AIアプリケーション開発は、従来のウェブ開発スキルとAIサービス統合を組み合わせ、自然で応答性の高いインテリジェントなアプリケーションを作成します。
![GitHub Models AI Playgroundのインターフェース。モデル選択とテストエリアを表示](../../../translated_images/playground.d2b927122224ff8f.ja.png)
![GitHub Models AI Playgroundのインターフェース。モデル選択とテストエリアを表示](../../../translated_images/ja/playground.d2b927122224ff8f.png)
**Playgroundが非常に便利な理由:**
- **試す**: GPT-4o-mini、Claudeなどの異なるAIモデルを無料で試せる
@ -204,7 +204,7 @@ mindmap
少し試してみたら、「Code」タブをクリックしてプログラミング言語を選択し、必要な実装コードを取得するだけです。
![Playgroundの選択画面。異なるプログラミング言語のコード生成オプションを表示](../../../translated_images/playground-choice.1d23ba7d407f4758.ja.png)
![Playgroundの選択画面。異なるプログラミング言語のコード生成オプションを表示](../../../translated_images/ja/playground-choice.1d23ba7d407f4758.png)
## Pythonバックエンド統合のセットアップ
@ -2139,14 +2139,14 @@ mindmap
- **[Web Dev For Beginnersリポジトリ](https://github.com/microsoft/Web-Dev-For-Beginners)**に移動
- **右上の「Use this template」**をクリックGitHubにログインしていることを確認
![テンプレート作成インターフェースで緑色の「Use this template」ボタンが表示されている](../../../translated_images/template.67ad477109d29a2b.ja.png)
![テンプレート作成インターフェースで緑色の「Use this template」ボタンが表示されている](../../../translated_images/ja/template.67ad477109d29a2b.png)
**ステップ2: Codespacesを起動**
- **新しく作成したリポジトリを開く**
- **緑色の「Code」ボタンをクリックし、「Codespaces」を選択**
- **「Create codespace on main」を選択して開発環境を開始**
![クラウド開発環境を起動するためのCodespaceインターフェース](../../../translated_images/codespace.bcecbdf5d2747d3d.ja.png)
![クラウド開発環境を起動するためのCodespaceインターフェース](../../../translated_images/ja/codespace.bcecbdf5d2747d3d.png)
**ステップ3: 環境設定**
Codespaceが読み込まれると、以下にアクセスできます

@ -72,13 +72,13 @@ Azure AI Foundry Discordコミュニティに参加
[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)で今すぐ始めましょう!
![Background](../../translated_images/background.148a8d43afde5730.ja.png)
![Background](../../translated_images/ja/background.148a8d43afde5730.png)
- 基礎からRAGまでをカバーするレッスン。
- GenAIと連携アプリで歴史上の人物と対話。
- 楽しく魅力的な物語形式でタイムトラベル体験!
![character](../../translated_images/character.5c0dd8e067ffd693.ja.png)
![character](../../translated_images/ja/character.5c0dd8e067ffd693.png)
各レッスンには課題、知識チェック、チャレンジが含まれており、以下のようなトピックを学びます:
@ -115,7 +115,7 @@ Azure AI Foundry Discordコミュニティに参加
作成したリポジトリのコピーで、**Code**ボタンをクリックし、**Open with Codespaces**を選択すると、新しいCodespaceが作成されます。
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ja.png)
![Codespace](../../translated_images/ja/createcodespace.0238bbf4d7a8d955.png)
#### ご自身のコンピューターでカリキュラムを実行する

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle CloudはCommon Cartridgeのサポートが限定的です。上記のMoodleファイルを使用することを推奨します。このファイルはCanvasにもアップロード可能です。
- インポート後、モジュール、締切日、クイズ設定を学期スケジュールに合わせて確認してください。
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ja.png)
![Moodle](../../translated_images/ja/moodle.94eb93d714a50cb2.png)
> Moodle教室でのカリキュラム
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ja.png)
![Canvas](../../translated_images/ja/canvas.fbd605ff8e5b8aff.png)
> Canvasでのカリキュラム
### リポジトリを直接使用する場合Classroomを使用しない場合

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
ಇಂದಿನ ದಿನದಲ್ಲಿ, ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಸಾಧ್ಯಗೊಳಿಸುವ ಅದ್ಭುತ ಸಾಧನಗಳ ಮೇಲೆ ನಾವು ಪ್ರಯಾಣ ಮಾಡುವೆವು. ನಾನು ನಿಮ್ಮ Netflix, Spotify ಮತ್ತು ನಿಮ್ಮ ಇಷ್ಟದ ಸ್ವತಂತ್ರ ಆಪ್ ಸ್ಟುಡಿಯೋದ ಡೆವಲಪರ್ ಗಳು ಪ್ರತಿದಿನ ಬಳಸುವ ಎಡಿಟರ್ ಗಳು, ಬ್ರೌಸರ ಗಳು ಮತ್ತು ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ತಿಳಿಸುತ್ತಿದ್ದೇನೆ. ಮತ್ತು ಇದು ನಿಮಗೆ ಸಂತೋಷಕ್ಕಾಗುವ ಸಂಗತಿ: ಈ ಪರಿಣಿತಿ-ತರಗತಿಯ, ಉದ್ಯಮ-ಮಟ್ಟದ ಬಹುಮತ ಸಾಧನಗಳು ಬಹುಶಃ ಸಂಪೂರ್ಣ ಉಚಿತವಾಗಿವೆ!
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.kn.png)
![Intro Programming](../../../../translated_images/kn/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.kn.png)
![Intro to GitHub](../../../../translated_images/kn/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.kn.png)
![ನಿಮ್ಮ ಲೊಕಲ್ ಗೆ ರೆಪೊ ನಕಲಿಸಿ](../../../../translated_images/kn/clone_repo.5085c48d666ead57.png)
ಕೋಡ್ ನಕಲಿಸುವ ಹಲವಾರು ವಿಧಾನಗಳಿವೆ. ಒಂದು ವಿಧಾನವೆಂದರೆ “ಕ್ಲೋನ್” ಮಾಡುವುದು, ಅದು https, SSH ಅಥವಾ GitHub CLI (ಕಮಾಂಡ್ ಲೈನ್ ಇಂಟರ್ಫೇಸ್) ಬಳಸಿ ರೆಪೊ ಸಹಿತದ ವಿಷಯವನ್ನು ನಕಲಿಸುವುದು.

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# ಪ್ರವೇಶಿಸಲು ಅನುವುಮಾಡಿದ ವೆಬ್‌ಪೇಜ್‌ಗಳ ಸೃಷ್ಟಿ
![ಎಲ್ಲಾ ಪ್ರವೇಶಾಸಾಧ್ಯತೆಯ ಬಗ್ಗೆ](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.kn.png)
![ಎಲ್ಲಾ ಪ್ರವೇಶಾಸಾಧ್ಯತೆಯ ಬಗ್ಗೆ](../../../../translated_images/kn/webdev101-a11y.8ef3025c858d897a.png)
> ಸ್ಕೆಚ್ನೋಟ್ [ಟೊಮೊಮಿ ಇಮುರಾ](https://twitter.com/girlie_mac) ಅವರಿಂದ
```mermaid
@ -1051,12 +1051,12 @@ pie title "ಸಾಮಾನ್ಯ ARIA ಬಳಕೆ ಮಾದರಿಗಳು"
**ಜ್ಞಾನಾರ್ಜಕ ಚಿತ್ರಗಳು** - ಮಹತ್ವದ ಮಾಹಿತಿಯನ್ನು ಪೂರೈಸುವವು:
```html
<img src="../../../../translated_images/chart.31c7eb0eb5c4450d.kn.png" alt="Sales increased 25% from Q1 to Q2 2024">
<img src="../../../../translated_images/kn/chart.31c7eb0eb5c4450d.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**ಶೈಲಿಯಾದ ಚಿತ್ರಗಳು** - ಸಂಪೂರ್ಣ ದೃಶ್ಯ, ಮಾಹಿತಿ ಇಲ್ಲದವು:
```html
<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d.kn.png" alt="" role="presentation">
<img src="../../../../translated_images/kn/decorative-border.b2f3c4d6634fb79d.png" alt="" role="presentation">
```
**ಕಾರ್ಯಕ್ಷಮ ಚಿತ್ರಗಳು** - ಬಟನ್‌ಗಳು ಅಥವಾ ನಿಯಂತ್ರಣಗಳಾಗಿ ಸೇವೆ ಸಲ್ಲಿಸುವವು:
@ -1068,7 +1068,7 @@ pie title "ಸಾಮಾನ್ಯ ARIA ಬಳಕೆ ಮಾದರಿಗಳು"
**ಸಂಕೀರ್ಣ ಚಿತ್ರಗಳು** - ಚಾರ್ಟ್‌ಗಳು, ಚಿತ್ರರೇಖೆಗಳು, ಮಾಹಿತಿ ಗ್ರಾಫ್‌ಗಳು:
```html
<img src="../../../../translated_images/complex-chart.c831f461a363b446.kn.png" alt="Quarterly sales data" aria-describedby="chart-description">
<img src="../../../../translated_images/kn/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>
@ -1108,7 +1108,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.kn.png" alt="Website traffic increased 40% after accessibility improvements">
<img src="../../../../translated_images/kn/small-chart.c50c7b1bbcce43d8.png" alt="Website traffic increased 40% after accessibility improvements">
</picture>
```

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲತತ್ವಗಳು: ಡೇಟಾ ಪ್ರಕಾರಗಳು
![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.kn.png)
![JavaScript Basics - Data types](../../../../translated_images/kn/webdev101-js-datatypes.4cc470179730702c.png)
> ಪರಿಚಿತ್ರಣ: [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript ಮೂಲಗಳು: ವಿಧಾನಗಳು ಮತ್ತು ಕಾರ್ಯಗಳು
![JavaScript ಮೂಲಗಳು - ಕಾರ್ಯಗಳು](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.kn.png)
![JavaScript ಮೂಲಗಳು - ಕಾರ್ಯಗಳು](../../../../translated_images/kn/webdev101-js-functions.be049c4726e94f8b.png)
> ಸ್ಕೆಚ್ ನೋಟು [Tomomi Imura](https://twitter.com/girlie_mac) ಅವರಿಂದ
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಭूतಗಳು: ನಿರ್ಧಾರಗಳನ್ನು ಕೈಗೊಳ್ಳುವುದು
![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.kn.png)
![JavaScript Basics - Making decisions](../../../../translated_images/kn/webdev101-js-decisions.69e1b20f272dd1f0.png)
> ಸ್ಕೆಚ್‌ನೋಟ್ [Tomomi Imura](https://twitter.com/girlie_mac) ಅವರಿಂದ

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript ಮೂಲಭೂತಗಳು: ಅರೆಗಳು ಮತ್ತು ಲೂಪ್ಗಳು
![JavaScript ಮೂಲಭೂತಗಳು - ಅರೆಗಳು](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.kn.png)
![JavaScript ಮೂಲಭೂತಗಳು - ಅರೆಗಳು](../../../../translated_images/kn/webdev101-js-arrays.439d7528b8a29455.png)
> ಟೊಮೊಮಿ ಇಮುರುವವರಿಂದ ಸ್ಕೆಚ್ ನೋಟ್ [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -29,7 +29,7 @@ journey
Responsive design: 5: Student
Glass reflections: 5: Student
```
![CSS ಗೆ ಪರಿಚಯ](../../../../translated_images/webdev101-css.3f7af5991bf53a20.kn.png)
![CSS ಗೆ ಪರಿಚಯ](../../../../translated_images/kn/webdev101-css.3f7af5991bf53a20.png)
> [ಟೊಮೊми ಇಮುರಾ](https://twitter.com/girlie_mac) ರವರ ಸ್ಕೆಚ್ ನೋಟ
ನಿಮ್ಮ HTML ಟೆರೇರಿಯಂ ಹೌದು ಎಂದಾದರೂ ತುಂಬಾ ಸರಳವಾಗಿ ಕಂಡಿತಾ? CSS ಆ ಸರಳ ರಚನೆಯನ್ನು ದೃಶ್ಯಾತ್ಮಕವಾಗಿ ಆಕರ್ಷಕವಾಗಿಸುವುದೇ ಆಗಿದೆ.
@ -202,7 +202,7 @@ body {
ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳು (F12) ತೆರೆಯಿರಿ, Elements ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ, ಮತ್ತು ನಿಮ್ಮ `<h1>` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಅದು ನೆಲೆಯ `<body>` ಮೂಲಕ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ಪರಂಪರೆಯನ್ನು ಪಡೆಯುತ್ತಿದೆ:
![ಪರಂಪರೆಯಾಗುತ್ತಿರುವ ಫಾಂಟ್](../../../../translated_images/1.cc07a5cbe114ad1d.kn.png)
![ಪರಂಪರೆಯಾಗುತ್ತಿರುವ ಫಾಂಟ್](../../../../translated_images/kn/1.cc07a5cbe114ad1d.png)
**ಪ್ರಯೋಗ ಸಮಯ**: `<body>` ಮೇಲೆ `color`, `line-height`, ಅಥವಾ `text-align` ಮುಂತಾದ ಇತರೆ ಪರಂಪರೆಯಾಗುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿಶ್ಚಯಿಸಿ ನೋಡಿ. ನಿಮ್ಮ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಏನು ಆಗುತ್ತದೆ?
@ -332,7 +332,7 @@ ID ಆಯ್ಕೆದಾರರು `#` ಚಿಹ್ನೆಯನ್ನು ಬಳ
**ಪ್ರತಿ ಸಸ್ಯದ HTML ರಚನೆ:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.kn.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/kn/plant1.d18b18ffe73da18f.png" />
</div>
```

@ -25,7 +25,7 @@ journey
ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ: 5: Student
ಟೆರೇರಿಯಂ ಪೂರ್ಣಗೊಳಿಸಿ: 5: Student
```
![DOM ಮತ್ತು ಒಂದು ಕ್ಲೋಶರ್](../../../../translated_images/webdev101-js.10280393044d7eaa.kn.png)
![DOM ಮತ್ತು ಒಂದು ಕ್ಲೋಶರ್](../../../../translated_images/kn/webdev101-js.10280393044d7eaa.png)
> ಸ್ಪಷ್ಟಚಿತ್ರಣ [ಟೊಮೊಮಿ ಇಮುರು](https://twitter.com/girlie_mac) ಅವರಿಂದ
ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಅತ್ಯಂತ ಆಕರ್ಷಕ ಅಂಶಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಸ್ವಾಗತ - ವಿಷಯಗಳನ್ನು ಸಂವಾದಾತ್ಮಕವಾಗಿ ಮಾಡುವುದಕ್ಕೆ! ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾದರಿ (DOM) ನಿಮ್ಮ HTML ಮತ್ತು JavaScript ನಡುವಿನ ಸೇತುವೆಯಾಗಿದ್ದು, ಇಂದು ನಾವು ಅದನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಟೆರಾರಿಯನ್‌ಗೆ ಜೀವ ತುಂಬಿಸುತ್ತೇವೆ. ಟಿಮ್ ಬರ್ಮರ್ಸ್-ಲೀ ಮೊದಲ ವೆಬ್ ಬ್ರೌಸರ್ ಅನ್ನು ರಚಿಸುವಾಗ, ಅವರು ಡೈನಾಮಿಕ್ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳುಳ್ಳ ಒಂದು ವೆಬ್‌ನ ಕನಸನ್ನು ಕಂಡಿದ್ದರು - DOM ಆ ಕನಸನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ.
@ -104,7 +104,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
![DOM ವೃಕ್ಷ ಪ್ರತಿನಿಧಾನ](../../../../translated_images/dom-tree.7daf0e763cbbba92.kn.png)
![DOM ವೃಕ್ಷ ಪ್ರತಿನಿಧಾನ](../../../../translated_images/kn/dom-tree.7daf0e763cbbba92.png)
> DOM ಹಾಗೂ ಅದಕ್ಕೆ ಉಲ್ಲೇಖಿಸುವ HTML ಮಾರ್ಕ್ಅಪ್‌ನ ಪ್ರತಿನಿಧಾನ. [ಒಲ್ಫಾ ನಾಸ್ರಾವೋಯಿ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ಅವರಿಂದ
@ -148,7 +148,7 @@ flowchart LR
```
> 💡 **ಕ್ಲೋಶರ್‌ಗಳ ಸಾಮಗ್ರಿಯನ್ನು ಅರಿಯುವುದು**: ಕ್ಲೋಶರ್‌ಗಳು JavaScript ನ ಪ್ರಮುಖ ವಿಷಯವಾಗಿದ್ದು, ಹಲವಾರು ಡೆವಲಪರ್‌ಗಳು ಸಾಕಷ್ಟು ಕಾಲಗಳ ಕಾಲ ಅವುಗಳ ತಾತ್ವಿಕ ಅಂಶಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಓಗಿಕೊಳ್ಳುವ ಮೊದಲು ಬಳಕೆ ಮಾಡುತ್ತಾರೆ. ಇಂದು ನಾವು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಕ್ಕೆ ಗಮನವಿಡುತ್ತೇವೆ - ನೀವು ನಮ್ಮ ಸಂವಾದಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಕ್ಲೋಶರ್‌ಗಳು ಸಹಜವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ತಿಳಿದುಕೊಳ್ಳುತ್ತೀರಿ.
![DOM ವೃಕ್ಷ ಪ್ರತಿನಿಧಾನ](../../../../translated_images/dom-tree.7daf0e763cbbba92.kn.png)
![DOM ವೃಕ್ಷ ಪ್ರತಿನಿಧಾನ](../../../../translated_images/kn/dom-tree.7daf0e763cbbba92.png)
> DOM ಹಾಗೂ ಅದಕ್ಕೆ ಉಲ್ಲೇಖಿಸುವ HTML ಮಾರ್ಕ್‌ಅಪ್‌ನ ಪ್ರತಿನಿಧಾನ. [ಒಲ್ಫಾ ನಾಸ್ರಾವೋಯಿ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ಅವರಿಂದ
@ -593,7 +593,7 @@ function stopElementDrag() {
- **ಕ್ರಾಸ್-ಡಿವೈಸ್ ಬೆಂಬಲ**: ಡೆಸ್ಕ್ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಎರಡರಲ್ಲೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
- **ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿವರವಾದ ಶ್ರದ್ಧೆ**: ನೆನಪು ಲೀಕ್ ಅಥವಾ ಅನವಶ್ಯಕ ಲೆಕ್ಕಾಚಾರ ಇಲ್ಲ
![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.kn.png)
![finished terrarium](../../../../translated_images/kn/terrarium-final.0920f16e87c13a84.png)
---

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
ಒಂದು ಸಣ್ಣ ಡ್ರಾಗ್ ಮತ್ತು ಡ್ರೋಪ್ ಕೋಡ್-ಪ್ರಾರ್ಥನೆ. ಸ್ವಲ್ಪ HTML, JS ಮತ್ತು CSS ಜೊತೆಗೆ, ನೀವು ಒಂದು ವೆಬ್ ಇಂಟರ್ಫೇಸ್ ನಿರ್ಮಿಸಿ, ಅಂದ Saj ದಿ ಕೊಟ್ಟು, ಮತ್ತು ಒಂದು ಇಂಟರೆಕ್ಷನ್ ಸೇರಿಸಬಹುದು.
![my terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.kn.png)
![my terrarium](../../../../translated_images/kn/screenshot_gray.0c796099a1f9f25e.png)
## ಕ್ರೆಡಿಟ್ಸ್

@ -25,7 +25,7 @@ journey
ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸಿ: 4: Student
ಅನುಭವವನ್ನು ನಿಖರಗೊಳಿಸಿ: 5: Student
```
![ಬ್ರೌಸರ ಸ್ಕೆಟ್‌ನೋಟ್](../../../../translated_images/browser.60317c9be8b7f84a.kn.jpg)
![ಬ್ರೌಸರ ಸ್ಕೆಟ್‌ನೋಟ್](../../../../translated_images/kn/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.kn.jpg)
![ಪ್ರಾಚೀನ ಬ್ರೌಸರಗಳು](../../../../translated_images/kn/earlybrowsers.d984b711cdf3a42d.jpg)
> ಕೆಲವೊಂದು ಪ್ರಾಚೀನ ಬ್ರೌಸರಗಳು, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ಅವರ ಮೂಲಕ
### ಬ್ರೌಸರ್‌ಗಳು ವೆಬ್ ವಿಷಯವನ್ನು 어떻게 ಪ್ರಕ್ರಿಯೆ ಪಡಿಸುತ್ತವೆ
@ -194,7 +194,7 @@ quadrantChart
ವಿಸ್ತಾರಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಜನರು ನಿಮ್ಮ ವಿಸ್ತಾರವನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವಾಗ ಬಳಕೆದಾರ ಅನುಭವದ ನಿರೀಕ್ಷೆಯನ್ನು ಮಾಡಬಹುದು. ಇನ್‌ಸ್ಟಾಲೇಶನ್ ಪ್ರಕ್ರಿಯೆ ಆಧುನಿಕ ಬ್ರೌಸರ‌ಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿದೆ, ಕೆಲವು ಸಣ್ಣ ವ್ಯತ್ಯಾಸಗಳು ಮಾತ್ರ ಇಂಟರ್‌ಫೇಸ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಇರುತ್ತವೆ.
![ಎಡ್ಜ್ ಬ್ರೌಸರ‌ನ open edge://extensions ಪುಟ ಮತ್ತು open settings ಮೆನು ಸ್ಕೆನ್ಷಾಟ್](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.kn.png)
![ಎಡ್ಜ್ ಬ್ರೌಸರ‌ನ open edge://extensions ಪುಟ ಮತ್ತು open settings ಮೆನು ಸ್ಕೆನ್ಷಾಟ್](../../../../translated_images/kn/install-on-edge.d68781acaf0b3d3d.png)
> **ಮುಖ್ಯವಾದುದು**: ನಿಮ್ಮ ಸ್ವಂತ ವಿಸ್ತಾರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವಾಗ ಡೆವಲಪರ್ ಮೋಡ್ ಅನ್ನು ಟೋಗಲ್ ಆನ್ ಮಾಡಿ ಮತ್ತು ಬೇರೆ ಸ್ಟೋರ್‌ಗಳಿಂದ ವಿಸ್ತಾರಗಳನ್ನು ಅನುಮತಿಸಿ.
@ -308,10 +308,10 @@ project-root/
### ವಿಸ್ತಾರ ವೀಕ್ಷಣೆಗಳ ಸಮೀಕ್ಷೆ
**ಸೆಟಪ್ ವೀಕ್ಷಣೆ** - ಮೊದಲು ಬಳಕೆದಾರ ಸಂರಚನೆ:
![ವಿಸ್ತಾರವನ್ನು ಬ್ರೌಸರಿನಲ್ಲಿ ತೆರೆಯಲಾದ ಸಂದರ್ಭದಲ್ಲಿ, ಪ್ರಾಂತ್ಯ ಹೆಸರು ಮತ್ತು API ಕೀಗಳ ನಮೂದಾಗಿರುವ ಫಾರ್ಮ್ ಭೇಟಿನೋಟ.](../../../../translated_images/1.b6da8c1394b07491.kn.png)
![ವಿಸ್ತಾರವನ್ನು ಬ್ರೌಸರಿನಲ್ಲಿ ತೆರೆಯಲಾದ ಸಂದರ್ಭದಲ್ಲಿ, ಪ್ರಾಂತ್ಯ ಹೆಸರು ಮತ್ತು API ಕೀಗಳ ನಮೂದಾಗಿರುವ ಫಾರ್ಮ್ ಭೇಟಿನೋಟ.](../../../../translated_images/kn/1.b6da8c1394b07491.png)
**ಫಲಿತಾಂಶ ವೀಕ್ಷಣೆ** - ಕಾರ್ಬನ್ ಫೂಟ್‌ಪ್ರಿಂಟ್ ಡೇಟಾ ಪ್ರದರ್ಶನ:
![ಸಂಪೂರ್ಣಗೊಂಡ ವಿಸ್ತಾರವು US-NEISO ಪ್ರಾಂತ್ಯದ ಕಾರ್ಬನ್ ಬಳಕೆ ಮತ್ತು ಜಾಡು ಇಂಧನ ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳನ್ನು ತೋರುತ್ತಿದೆ.](../../../../translated_images/2.1dae52ff08042246.kn.png)
![ಸಂಪೂರ್ಣಗೊಂಡ ವಿಸ್ತಾರವು US-NEISO ಪ್ರಾಂತ್ಯದ ಕಾರ್ಬನ್ ಬಳಕೆ ಮತ್ತು ಜಾಡು ಇಂಧನ ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳನ್ನು ತೋರುತ್ತಿದೆ.](../../../../translated_images/kn/2.1dae52ff08042246.png)
### ಸಂರಚನಾ ಫಾರ್ಮ್ ನಿರ್ಮಿಸುವುದು

@ -265,7 +265,7 @@ stateDiagram-v2
Reset --> ClearStorage: ಸಂಗ್ರಹಿಸಿರುವ ಡೇಟಾ ತೆರವುಗೊಳಿಸಿ
ClearStorage --> FirstTime: ಸೆಟ್ ಅಪ್ ಗೆ ಹಿಂತಿರುಗಿ
```
![ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಫಲಕ](../../../../translated_images/localstorage.472f8147b6a3f8d1.kn.png)
![ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಫಲಕ](../../../../translated_images/kn/localstorage.472f8147b6a3f8d1.png)
> ⚠️ **ಭದ್ರತಾ ಪರಿಗಣನೆ**: ಉತ್ಪಾದನಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, API ಕೀಗಳನ್ನು LocalStorage ನಲ್ಲಿ ಸಂಗ್ರಹಿಸುವುದು ಭದ್ರತಾ ಅಪಾಯವನ್ನು ಉಂಟುಮಾಡಬಹುದು ಏಕೆಂದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗೆ ಈ ಡೇಟಾ ಪ್ರಾಪ್ತಿಯಿದೆ. ಕಲಿಕೆಯ ಉದ್ದೇಶಗಳಿಗೆ, ಈ ವಿಧಾನ ಸರಿಯಾಗಿದೆ, ಆದರೆ ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸಂವೇದನಾಶೀಲ ಪ್ರಮಾಣಪತ್ರಗಳಿಗಾಗಿ ಭದ್ರ ಸರ್ವರ್-ಬದಿಗೆ ಸಂಗ್ರಹಣೆಯನ್ನು ಬಳಸಬೇಕು.

@ -123,7 +123,7 @@ flowchart LR
ಈದು ಪ್ರಯತ್ನಿಸೋಣ. ಒಂದು ವೆಬ್‌ಸೈಟ್ ತೆರೆಯಿರಿ (Microsoft.com ಚೆನ್ನಾಗಿದೆ) ಮತ್ತು 'Record' ಬಟನ್ ಒತ್ತಿ. ಈಗ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ ಮತ್ತು ಪ್ರೊಫೈಲರ್ ಕ್ರಿಯೆಯನ್ನು ಸೆರೆಹಿಡಿಯುವುದನ್ನು ನೋಡಿ. ನೀವು ರೆಕಾರ್ಡ್ ನಿಲ್ಲಿಸಿದಾಗ, ಬ್ರೌಸರ್ 'ಸ್ಕ್ರಿಪ್ಟ್', 'ರೆಂಡರ್', ಮತ್ತು 'ಪೇಂಟ್' ಆಗುವ ವೈಯಕ್ತಿಕ ವಿವರವನ್ನು ನೋಡುತ್ತೀರಿ. ಇದು ರಾಕೆಟ್ ಲಾಂಚ್ ಸಮಯದ ಮಿಷನ್ ಕಂಟ್ರೋಲ್ ನಲ್ಲಿ ಪ್ರತಿ ವ್ಯವಸ್ಥೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ರೀತಿಯಾಗಿದೆ - ನೀವು ನಿಜ ಸಮಯದಲ್ಲಿ ಏನು ಮತ್ತು ಯಾವಾಗ ನಡೆಯುತ್ತಿದೆ ಎಂಬ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತೀರಿ.
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.kn.png)
![Edge profiler](../../../../translated_images/kn/profiler.5a4a62479c5df01c.png)
✅ [Microsoft ಡಾಕ್ಯುಮೆಂಟೇಷನ್](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.kn.png)
![Edge profiler snapshot](../../../../translated_images/kn/snapshot.97750180ebcad737.png)
ಈವೆಂಟ್ ಲಾಗ್ ಪೇನ್ (Event Log pane) ತಪಾಸಿಸಿ ಯಾವುದೇ ಈವೆಂಟ್ 15 ಮಿಲಿಸೆಕೆಂಡ್ ಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಂಡಿದೆಯೇ ಎಂಬುದನ್ನು ನೋಡಿ:
![Edge event log](../../../../translated_images/log.804026979f3707e0.kn.png)
![Edge event log](../../../../translated_images/kn/log.804026979f3707e0.png)
✅ ನಿಮ್ಮ ಪ್ರೊಫೈಲರ್ ಪರಿಚಯಿಸಿದರು! ಈ ಸೈಟ್‌ನಲ್ಲಿ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ತೆರೆಯಿರಿ, ಯಾವುದಾದರೂ ಸಮಸ್ಯೆಗಳಿವೆ ಎಂಬುದನ್ನು ನೋಡಿ. ಏನು ಅತ್ಯಂತ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ? ಏನು ಅತ್ಯಂತ ವೇಗವಾಗಿ?

@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
### ಕ್ರೆಡಿಟ್ಸ್
![ಹಸಿರು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![ಹಸಿರು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್‌ಶನ್](../../../translated_images/kn/extension-screenshot.0e7f5bfa110e92e3.png)
## ಕ್ರೆಡಿಟ್ಸ್

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ರ C02 ಸಿಗ್ನಲ್ API ಯನ್ನು ಬಳಸಿಕೊಂಡು ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಹಿಂಬಾಲಿಸಲು, ನೀವು ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಲ್ಲಿ ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಭಾರೀವಾಗಿದೆ ಎಂಬ ಕುರಿತು ನೆನೆಪೊಡಿಸುವ ವಿಸ್ತರಣೆ ರಚಿಸಿ. ಈ ವಿಸ್ತರಣೆಯನ್ನು ಅಕ್ರಮವಾಗಿ ಬಳಸುವುದು ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ಈ ಮಾಹಿತಿಯನ್ನು ಆಧರಿಸಿ ತೀರ್ಮಾನ ಕೈಗೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
![ವಿಸ್ತರಣೆ ಸ್ಕ್ರೀನ್ಶಾಟ್](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![ವಿಸ್ತರಣೆ ಸ್ಕ್ರೀನ್ಶಾಟ್](../../../../translated_images/kn/extension-screenshot.0e7f5bfa110e92e3.png)
## ಪ್ರಾರಂಭಿಸುವುದು
@ -31,7 +31,7 @@ npm run build
Edge ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಉದ್ದನೆಯ ಬಲ ಕೋನದಲ್ಲಿರುವ 'ಮೂರು ಬಿಂದುಗಳು' ಮೆನು ಬಳಸಿ ವಿಸ್ತರಣೆ ಪ್ಯಾನೆಲಿಗೆ ಹೋಗಿ. ಅಲ್ಲಿ 'Load Unpacked' ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ '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.kn.png)
![ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ](../../../../translated_images/kn/install-on-edge.78634f02842c4828.png)
ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ನಿಮ್ಮ ಭಾಗವನ್ನು ವಿಸ್ತರಣೆ ಇಂಟರ್ಫೇಸಿಗೆ ನಮೂದಿಸಿದ ಮೇಲೆ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಚುಕ್ಕೆ ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ಯಾವ ವಿಧಾನಗಳಲ್ಲಿಯೇ ಹೆಚ್ಚು ವಿದ್ಯುತ್ ಬಳಕೆಯಾಗುತ್ತದೆ ಎಂಬದನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಈ 'ಚುಕ್ಕೆ' ವ್ಯವಸ್ಥೆಯ ಹಿಂದಿನ ಕಲ್ಪನೆಯನ್ನು ನನ್ನಗೆ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/) ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉಸಿರಾಟಗಳಿಗಾಗಿ ನೀಡಿದೆ.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ನ CO2 ಸಿಗ್ನಲ್ API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆ ಟ್ರ್ಯಾಕ್ ಮಾಡಲು, ನಿಮ್ಮ ವಲಯದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಬಗ್ಗೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ರಿಮೈಂಡರ್ ಇರಲು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಿ. ಈ ಅಡ್ಹಾಕ್ ವಿಸ್ತರಣೆ ಬಳಕೆ ಈ ಮಾಹಿತಿಯ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಕುರಿತು ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041.kn.png)
![extension screenshot](../../../../../translated_images/kn/extension-screenshot.352c4c3ba54e4041.png)
## ಪ್ರಾರಂಭಿಸುವುದು
@ -31,7 +31,7 @@ npm run build
Edge ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಮೇಲ್ಭಾಗದ ಎಡಭಾಗದ 'ಮೂರು ಮಿಂಚು' ಮెన್ಯೂ ಬಳಸಿ ವಿಸ್ತರಣೆ ಪ್ಯಾನಲ್ ಹುಡುಕಿ. ಅದರಲ್ಲಿ 'ಅನ್‌ಪ್ಯಾಕ್ಡ್ ಲೋಡ್' ಆಯ್ಕೆಮಾಡಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಕೇಳಿದಾಗ 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ, ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಿಸಲು, CO2 ಸಿಗ್ನಲ್ API ಕೀ ಅಗತ್ಯವಿದೆ ([ಇಮೇಲ್ ಮೂಲಕ ಇಲ್ಲಿ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದ ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ವಿದ್ಯುತ್ ನಕ್ಷೆಗೆ](https://www.electricitymap.org/map) ಹೊಂದಿಕೊಳ್ಳುವ ನಿಮ್ಮ ವಲಯದ [ಕೋಡ್](http://api.electricitymap.org/v3/zones) (ಉದಾಹರಣೆಗೆ ಬಾಸ್ಟನಿಯಲ್ಲಿ 'US-NEISO' ನ್ನು ಬಳಸುತ್ತೇನೆ).
![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c.kn.png)
![installing](../../../../../translated_images/kn/install-on-edge.8bd0ee3ca7dcda1c.png)
API ಕೀ ಮತ್ತು ವಲಯವು ವಿಸ್ತರಣೆ ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ನಮೂದಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನ ಬಣ್ಣದ ಬಿಂದುವು ನಿಮ್ಮ ವಲಯದ انر╔ಳ ನಿದರ್ಶನ ನೀಡಲು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ವಿದ್ಯುತ್ ಬಳಕೆ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ಸೂಚನೆ ನೀಡುತ್ತದೆ. ಈ "ಬಿಂದುಗಳು" ವ್ಯವಸ್ಥೆಯ ಆಲೋಚನೆಯನ್ನು ನನಗೆ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/) ಕೊಟ್ಟಿತು, ಇದು ಕ್ಯಾಲಿಫೋರ್ಮಿಯಾದ ಕಾರ್ಬನ್ ಉಗ್ರಣೆಗಳಿಗಾಗಿ ಇದೆ.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ನ C02 ಸಿಗ್ನಲ್ API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ವೀಕ್ಷಿಸಲು, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಬಗ್ಗೆ ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ ನಲ್ಲಿ ಸೂಚನೆ ನೀಡುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಿ. ಈ ಅನೌಪಚಾರಿಕ ವಿಸ್ತರಣೆ ಬಳಕೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಮೇಲೆ ಈ ಮಾಹಿತಿಯ ಆಧಾರದ ಮೇಲೆ ತೀರ್ಮಾನ ತಗೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
![capture d'extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![capture d'extension](../../../../../translated_images/kn/extension-screenshot.0e7f5bfa110e92e3.png)
## ಪ್ರಾರಂಭಿಸುವುದು
@ -31,7 +31,7 @@ npm run build
Edge ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ಬ್ರೌಸರ್ ನ ಮೇಲ್ಭಾಗದ ಬಲದ ಕಡೆ "ಮೂರು ಚಿಹ್ನೆಗಳು" ಮೆನು ಬಳಸಿ ಎಕ್ಸ್‌ಟೆನ್ಶನ್ ಪ್ಯಾನೆಲ್ ಹುಡುಕಿ. ಅಲ್ಲಿ, "ಅನ್ಜಿಪ್ ಮಾಡಲಾದ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ" ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಆದೇಶದಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ತೆರೆದು ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಬಳಕೆ ಮಾಡಲು, ನೀವು CO2 ಸಿಗ್ನಲ್ API ಗಾಗಿ API ಕೀ ಬೇಕಾಗುತ್ತದೆ ([ಇಲ್ಲಿ ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ವಿದ್ಯುತ್ ನಕ್ಷೆ](https://www.electricitymap.org/map) ಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ನಿಮ್ಮ ಪ್ರಾಂತ್ಯದ [ಕೋಡ್](http://api.electricitymap.org/v3/zones) (ಉದಾಹರಣೆಗೆ ಬೋಸ್ಟನ್ ನಲ್ಲಿ, 'US- NEISO' ಅನ್ನು ಬಳಸುತ್ತೇನೆ).
![installation](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
![installation](../../../../../translated_images/kn/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.kn.png)
![ಎಕ್ಸ್ಟೆಂಶನ್ ಸ್ಕ್ರೀನ್ಶಾಟ್ ](../../../../../translated_images/kn/extension-screenshot.0e7f5bfa110e92e3.png)
## ಪ್ರಾರಂಭಿಸುವುದು
@ -31,7 +31,7 @@ npm run build
ಎಡ್ಜ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ನಿಮ್ಮ ಬ್ರೌಸರ್ ನ ಮೇಲೆ ಬಲ ದಿಕ್ಕಿನಲ್ಲಿ ಇರುವ 'ಮೂರು ಡಾಟ್' ಮೆನು ಬಳಸಿ ಎಕ್ಸ್‌ಟೆಂಶನ್ ಪ್ಯಾನಲ್ ಅನ್ನು ಹುಡುಕಿರಿ. ಅಲ್ಲಿ, ಹೊಸ ಎಕ್ಸ್ಟೆಂಶನ್ ಲೋಡ್ ಮಾಡಲು 'ಲೋಡ್ ಅನ್ಪ್ಯಾಕ್ಡ್' ಆಯ್ಕೆಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ಅನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ಎಕ್ಸ್ಟೆಂಶನ್ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ನಿಮಗೆ CO2 ಸಿಗ್ನಲ್ API ([ಇಮೇಲ್ ಮೂಲಕ ಇಲ್ಲಿ ಪಡೆಯಿರಿ](https://www.co2snal.com/) ಅಥವಾ ಈ ಪುಟದಲ್ಲಿ ಬಾಕ್ಸ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ನಿಮ್ಮ ಪ್ರದೇಶಕ್ಕೆ ಕೋಡ್](http://api.electricitymap.org/v3/zones) [ಎಲೆಕ್ಟ್ರಿಸಿಟಿ ಮ್ಯಾಪ್](https://www.electricitymap.org/map) (ಉದಾಹರಣೆಗೆ, ಬೋಸ್ಟನ್‌ನಲ್ಲಿ ನಾನು 'US-NEISO' ಉಪಯೋಗಿಸುತ್ತೇನೆ) ಅಗತ್ಯವಿದೆ.
![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
![installing](../../../../../translated_images/kn/install-on-edge.78634f02842c4828.png)
ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ಪ್ರದೇಶದ ಎಕ್ಸ್‌ಟೆಂಶನ್ ಇಂಟರ್ಫೇಸ್‌ಗೆ ಇನ್ಪುಟ್ ಆದ ಮೇಲೆ, ಬ್ರೌಸರ್ ಎಕ್ಸ್‌ಟೆಂಶನ್ ಬಾರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಹಣ್ಣು ನಿಮ್ಮ ಪ್ರದೇಶದ انرಜಿಯ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವಂತೆ ಬದಲಾಯಿಸಬೇಕು ಮತ್ತು ನಿಮಗೆ ಸೂಚಕವನ್ನು ನೀಡಬೇಕು ಇಂದ್ರಿಯ ಭಾರವಾದ ಚಟುವಟಿಕೆಗಳು ನಿಮ್ಮ ಪ್ರದರ್ಶನಕ್ಕೆ ಏನು ಸೂಕ್ತವಾಗಿವೆ ಎಂಬುದರ. ಈ 'ಹಣ್ಣು' ವ್ಯವಸ್ಥೆಯ ಹಿಂದಿನ ಆಲೋಚನೆಯನ್ನು ನನಗೆ ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉತ್ಸರ್ಜನೆಗಾಗಿ [ಎನರ್ಜಿ ಲಾಲಿಪೋಪ್ ಎಕ್ಸ್ಟೆಂಶನ್](https://energylollipop.com/) ನೀಡಿತ್ತು.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
ತಮ್ಮ ಪ್ರದೇಶದಲ್ಲಿ ವಿದ್ಯುತ್ ಬಳಕೆಯ ತೂಕ ಎಷ್ಟು ಇದೆ ಎಂಬುದರ ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸ್ಮರಣಿಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ಬ್ರೌಸರಿಗಾಗಿ ವಿಸ್ತರಣೆಯನ್ನು ರಚಿಸಲು tmrow ನ Signal C02 API ಅನ್ನು ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಗಮನಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ವಿಶೇಷ ವಿಸ್ತರಣೆಯ ಬಳಕೆಯಿಂದ ಈ ಮಾಹಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
![ವಿಸ್ತರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![ವಿಸ್ತರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../../translated_images/kn/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.kn.png)
![ಸ್ಥಾಪನೆ](../../../../../translated_images/kn/install-on-edge.78634f02842c4828.png)
ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ಪ್ರದೇಶ ವಿಸ್ತರಣೆಯ ಅಂತರ್ ಮುಖದಲ್ಲಿ ಸೇರಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯ ಬಾರ್ ನಲ್ಲಿ ಬಣ್ಣದ ಬಿಂದು ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ವಿದ್ಯುತ್ ಉಪಯೋಗದ ಚಟುವಟಿಕೆಗಳನ್ನು ನಡಿಸುವುದು ಯೋಗ್ಯವೋ ಎಂಬುದರ ಸೂಚನೆ ನೀಡುತ್ತದೆ. ಈ "ಬಿಂದು" ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಯ ಹಿನ್ನೆಲೆ ಸಂಯೋಜನೆಯು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾದ ಉತ್ಸರ್ಗಗಳಿಗೆ арналған [ಎನೆರ್ಜೀ ಲಾಲಿಪಾಪ್ ವಿಸ್ತರಣೆ](https://energylollipop.com/) ನಿಂದ ಪಡೆದಿದೆ.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrow ನ C02 ಸಿಗ್ನಲ್ API ಬಳಸಿಕೊ೦ಡಿ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಪರಿಶೀಲನೆಗಾಗಿ, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಹೆಚ್ಚು ಆಗಿದೆ ಎಂಬುದನ್ನು ಬ್ರೌಸರ್ ನಲ್ಲಿ ರೀಮೈಂಡರ್ ಆಗಿ ತೋರಿಸುವ ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸುವುದು. ಈ ವಿಸ್ತರಣೆ ಅನ್ನು ಅಡ್ಹಾಕ್ ಆಗಿ ಬಳಸಿಕೊ೦ಡಿ, ಈ ಮಾಹಿತಿಯ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳನ್ನು ನಿರ್ಧರಿಸಬಹುದು.
![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![extension screenshot](../../../../../translated_images/kn/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 ಬಳಕೆ ಮಾಡಲಾಗುತ್ತದೆ).
![installing](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
![installing](../../../../../translated_images/kn/install-on-edge.78634f02842c4828.png)
API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ವಿಸ್ತರಣೆ ಇಂಟರ್‌ಫೇಸಿಗೆ ನಮೂದಿಸಿದಾಗ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನಲ್ಲಿ ಬಣ್ಣದ ಡಾಟ್ ಬದಲಾಗುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಪ್ರದೇಶದ انر್ಜಿ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ಯಾವ ರೀತಿಯ انر್ಜಿ ಅವಶ್ಯಕತೆ ಇರುವ ಚಟುವಟಿಕೆಗಳನ್ನು ಮಾಡುವುದು ಸೂಕ್ತ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಈ "ಡಾಟ್" ವ್ಯವಸ್ಥೆ ಕಲಿಫೋರ್ಮಿಯಾ ರಾಜ್ಯದ ಉಳಿತಾಯದಿಗಾಗಿ ಇರುವ [Energy Lollipop extension](https://energylollipop.com/) ನಿಂದ ನನಗೆ ದೊರೆತ ಸಂಯೋಜನೆ.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
CO2 ಸಿಗ್ನಲ್ tmrow API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪತ್ತೆಹಚ್ಚಲು, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯ ಗಂಭೀರತೆಯ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಮಾಡಿದ್ದಾರೆಚ್ಚುವಿಕೆಗಳನ್ನು ಪಡೆಯಲು ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ನಿರ್ಮಿಸಿ. ಈ ಎಕ್ಸ್ಟೆನ್ಷನ್ ವಿಶೇಷವಾಗಿ ಬಳಸುವುದರಿಂದ ಈ ಮಾಹಿತಿಯನ್ನು ಆಧರಿಸಿ ನಿಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಬಗ್ಗೆ ನೀವು ಸಂವೇದನೆ ಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯವಾಗುತ್ತದೆ.
![ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../../translated_images/kn/extension-screenshot.0e7f5bfa110e92e3.png)
## ಇಲ್ಲಿ ಪ್ರಾರಂಭಿಸಿ
@ -31,7 +31,7 @@ npm run build
Edge ನಲ್ಲಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ಬ್ರೌಸರ್‌ನ ಮೇಲ್ಮೈಯಲ್ಲಿನ 'ಮೂರು ತೆಳ್ಳುವ ಗುಂಡಿಗಳು' ಮೆನುವಿನಲ್ಲಿ Sambungan ಫಲಕವನ್ನು ಹುಡುಕಿ. ಅಲ್ಲಿ, ಹೊಸ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಲೋಡ್ ಮಾಡಲು 'Load Unpacked' ಆಯ್ಕೆಮಾಡಿ. 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯುವ ಮೂಲಕ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, CO2 Signal APIക് ([ಇಲ್ಲಿ ಇಮೇಲ್ ಮೂಲಕ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ನಿಮ್ಮ ಪ್ರದೇಶದ ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಅನ್ನು ಪಡೆಯಬೇಕಾಗುತ್ತದೆ, ಇದು [ElectricityMap](https://www.electricitymap.org/map) ಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ (ಉದಾಹರಣೆಗೆ ಬೋಸ್ಟನ್‌ನಲ್ಲಿ, ನಾನು 'US-NEISO' ಬಳಸುತ್ತೇನೆ).
![ಡೌನ್ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ](../../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
![ಡೌನ್ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ](../../../../../translated_images/kn/install-on-edge.78634f02842c4828.png)
API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ಎಕ್ಸ್ಟೆನ್ಷನ್ ಇಂಟರ್ಫೇಸ್‌ಗೆ ನಮೂದಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್ ಬಾರ್‌ನ ಬಣ್ಣ verandert ಕೂಡ ಆತ್ಮೀಯ ತುಂಡು ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ತಗೊಂಡು ಮಾಡಿದ ಮೇಲೆ ತೂಕದ ಚಟುವಟಿಕೆಗಳಿಗೆ ಸೂಚನೆ ನೀಡುತ್ತದೆ. ಈ 'ಡಾಟ್' ವಿಧಾನದ ಆಶಯವನ್ನು [Lollipop Energy ಬೌಸರ್ ಎಕ್ಸ್ಟೆನ್ಷನ್](https://energylollipop.com/) ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಎಮಿಷನ್‌ಗಳಿಗೆ ನೀಡಿ.

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
tmrowನ CO2 ಸಿಗ್ನಲ್ API ಬಳಸಿ ವಿದ್ಯುತ್ ಬಳಕೆಯನ್ನು ಟ್ರಾಕ್ ಮಾಡಲು, ನಿಮ್ಮ ಪ್ರದೇಶದ ವಿದ್ಯುತ್ ಬಳಕೆ ಎಷ್ಟು ಭಾರವಾಗಿದೆ ಎಂಬ ಬಗ್ಗೆ ಮುನ್ಸೂಚನೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಇರುತ್ತಂತೆ ಗಣನೆ ಮಾಡಲು ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ಮಿಸಿ. ಈ ವಿಸ್ತರಣೆಯನ್ನು ಅದ್ಹಾಕ್ ಬಳಸು ನಮ್ಮ ಚಟುವಟಿಕೆಗಳ ಮೇಲೆ ಈ ಮಾಹಿತಿಯನ್ನು ಆಧಾರಿಸಿ ತೀರ್ಮಾನ ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.kn.png)
![extension screenshot](../../../../translated_images/kn/extension-screenshot.0e7f5bfa110e92e3.png)
## ಪ್ರಾರಂಭಿಸುವುದು
@ -31,7 +31,7 @@ npm run build
Edgeನಲ್ಲಿ ಸ್ಥಾಪಿಸಲು, ಬ್ರೌಸರ್‌ನ ಎಡಮುಖ ಮುಂಭಾಗದ ಮೆನು (ಮೂರು ಹೊಂಡು ಬಿಂದುಗಳು) ಬಳಸಿ 'Extensions' ಪ್ಯಾನಲ್ ಕಂಡುಹಿಡಿಯಿರಿ. ಅಲ್ಲಿ 'Load Unpacked' ಆಯ್ಕೆ ಮಾಡಿ ಹೊಸ ವಿಸ್ತರಣೆಯನ್ನು ಲೋಡ್ ಮಾಡಿ. ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ 'dist' ಫೋಲ್ಡರ್ ತೆರೆಯಿರಿ ಮತ್ತು ವಿಸ್ತರಣೆ ಲೋಡ್ ಆಗುತ್ತದೆ. ಇದನ್ನು ಬಳಸಲು, ನಿಮಗೆ CO2 ಸಿಗ್ನಲ್‌ ಅವರ API ಕೀ ಬೇಕು ([ಇಮೇಲ್ ಮೂಲಕ ಇಲ್ಲಿ ಪಡೆಯಿರಿ](https://www.co2signal.com/) - ಈ ಪುಟದಲ್ಲಿರುವ ಬಾಕ್ಸಿನಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಲ್ ನಮೂದಿಸಿ) ಮತ್ತು [ಈ ಭಾಗಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಕೋಡ್](http://api.electricitymap.org/v3/zones) ಬೇಕಾಗುತ್ತದೆ, ಇದು [Electricity Map](https://www.electricitymap.org/map) ಗೆ ಸಮ್ಮೇಳನವಾಗಿರುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಬೋಸ್ತನ್‌ನಲ್ಲಿ ನಾನು 'US-NEISO' ಅನ್ನು ಬಳಸುತ್ತೇನೆ).
![installing](../../../../translated_images/install-on-edge.78634f02842c4828.kn.png)
![installing](../../../../translated_images/kn/install-on-edge.78634f02842c4828.png)
ಒಮ್ಮೆ API ಕೀ ಮತ್ತು ಪ್ರದೇಶವನ್ನು ವಿಸ್ತರಣೆ ಪರಿಪಡಿಯಲ್ಲಿ ನಮೂದಿಸಿದಾಗ, ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ ಬಾರ್‌ನ ಬಣ್ಣದ ಚುಕ್ಕಿ ನಿಮ್ಮ ಪ್ರದೇಶದ ಇಂಧನ ಬಳಕೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವಂತೆ ಬದಲಾಗಬೇಕು ಮತ್ತು ನೀವು ಎಷ್ಟೊಂದು ಉರಿಯುವ ಚಟುವಟಿಕೆಗಳನ್ನು ಮಾಡಲು ಸೂಕ್ತವಾಗಿರುವುದನ್ನು ಸೂಚಿಸಬೇಕು. ಈ 'ಚುಕ್ಕಿ' ವ್ಯವಸ್ಥೆಯ ಆಲೋಚನೆಯನ್ನು ನನಗೆ [Energy Lollipop ವಿಸ್ತರಣೆ](https://energylollipop.com/) ದಿಂದ ನೀಡಲಾಗಿತ್ತು, ಇದು ಕ್ಯಾಲಿಫೋರ್ನಿಯಾ ಉತ್ಸರ್ಜನೆಗಳಿಗಾಗಿ.

@ -105,7 +105,7 @@ quadrantChart
Power-up: [0.7, 0.6]
UI Elements: [0.9, 0.1]
```
![ಕ್ಯಾನ್‌ವಾಸ್‌ನ ಗ್ರಿಡ್](../../../../translated_images/canvas_grid.5f209da785ded492.kn.png)
![ಕ್ಯಾನ್‌ವಾಸ್‌ನ ಗ್ರಿಡ್](../../../../translated_images/kn/canvas_grid.5f209da785ded492.png)
> ಚಿತ್ರ: [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
ಕ್ಯಾನ್‌ವಾಸ್ ಅಂಶದಲ್ಲಿ ಬಿಡಿಸಲು, ನೀವು ಎಲ್ಲಾ ಕ್ಯಾನ್‌ವಾಸ್ ಗ್ರಾಫಿಕ್ಸ್ ಭಿತ್ತಿಯನ್ನು ರೂಪಿಸುವ ಮೂರು-ಹಂತ ಪ್ರಕ್ರಿಯೆಯನ್ನನುಸರಿಸಬೇಕು. ನೀವು ಇದನ್ನು ಕೆಲವು ಬಾರಿ ಮಾಡಿದರೆ, ಅದು ಸಹಜವಾಗುತ್ತದೆ:
@ -323,11 +323,11 @@ flowchart TD
- ಹೀರೋ ಹಡಗು
![ಹೀರೋ ಹಡಗು](../../../../translated_images/player.dd24c1afa8c71e9b.kn.png)
![ಹೀರೋ ಹಡಗು](../../../../translated_images/kn/player.dd24c1afa8c71e9b.png)
- 5*5 ಮಾನ್ತ್ರಗಳು
![ಮಾನ್ತ್ರ ಹಡಗು](../../../../translated_images/enemyShip.5df2a822c16650c2.kn.png)
![ಮಾನ್ತ್ರ ಹಡಗು](../../../../translated_images/kn/enemyShip.5df2a822c16650c2.png)
### ಅಭಿವೃದ್ಧಿ ಪ್ರಾರಂಭಿಸಲು ಶಿಫಾರಸು ಮಾಡಿದ ಹಂತಗಳು
@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
ಪೂರ್ಣವಾದ ಫಲಿತಾಂಶ ಹೀಗಿರಬೇಕು:
![Black screen with a hero and 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a.kn.png)
![Black screen with a hero and 5*5 monsters](../../../../translated_images/kn/partI-solution.36c53b48c9ffae2a.png)
## ಪರಿಹಾರ

@ -155,7 +155,7 @@ sequenceDiagram
end
```
- **ಅಂಕೆ ವ್ಯವಸ್ಥೆ**: ಪ್ರತಿ ನಷ್ಟಪಡಿಸಿದ ಶತ್ರು ನೌಕೆಗೆ 100 ಅಂಕೆಗಳು (ಮೂರು ಶಾಸಕರ ಸಂಖ್ಯೆಗಳನ್ನು ذهنದಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು ಸುಲಭ). ಅಂಕೆಯನ್ನು ಕೆಳಗಡೆಯ ಎಡಬದಿಯಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ.
- **ಜೀವಗಳ ಗಣಕ**: ನಿಮ್ಮ ಹೀರೋ 3 ಜೀವಗಳಿಂದ ಆರಂಭವಾಗುತ್ತಾನೆ - ಪ್ರಾರಂಭಿಕ ಆರ್ಕೇಡ್ ಆಟಗಳಿಂದ ಸ್ಥಾಪಿತ ಮಾನದಂಡ, ಇದು ಸವಾಲು ಮತ್ತು ಆಡಲು ಅನುಕೂಲ ಎಂಬ ಸಮತೋಲನವನ್ನು ನೀಡುತ್ತದೆ. ಪ್ರತಿ ಶತ್ರು ಜೊತೆ ಸಂಭವಿಸುವ ಅಧಿಕಾರವು ಒಂದು ಜೀವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಬಾಕಿ ಜೀವಗಳನ್ನು ನಾವು ಕೆಳಗಡೆಯ ಬಲಭಾಗದಲ್ಲಿ ನೌಕಾ ಐಕಾನ್‌ಗಳ ಮೂಲಕ ತೋರಿಸುತ್ತೇವೆ ![life image](../../../../translated_images/life.6fb9f50d53ee0413.kn.png).
- **ಜೀವಗಳ ಗಣಕ**: ನಿಮ್ಮ ಹೀರೋ 3 ಜೀವಗಳಿಂದ ಆರಂಭವಾಗುತ್ತಾನೆ - ಪ್ರಾರಂಭಿಕ ಆರ್ಕೇಡ್ ಆಟಗಳಿಂದ ಸ್ಥಾಪಿತ ಮಾನದಂಡ, ಇದು ಸವಾಲು ಮತ್ತು ಆಡಲು ಅನುಕೂಲ ಎಂಬ ಸಮತೋಲನವನ್ನು ನೀಡುತ್ತದೆ. ಪ್ರತಿ ಶತ್ರು ಜೊತೆ ಸಂಭವಿಸುವ ಅಧಿಕಾರವು ಒಂದು ಜೀವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಬಾಕಿ ಜೀವಗಳನ್ನು ನಾವು ಕೆಳಗಡೆಯ ಬಲಭಾಗದಲ್ಲಿ ನೌಕಾ ಐಕಾನ್‌ಗಳ ಮೂಲಕ ತೋರಿಸುತ್ತೇವೆ ![life image](../../../../translated_images/kn/life.6fb9f50d53ee0413.png).
## ನೀವು ನಿರ್ಮಿಸುವುದು ಪ್ರಾರಂಭಿಸೋಣ!

@ -644,7 +644,7 @@ sequenceDiagram
`history.pushState` ಬಳಕೆ ಬ್ರೌಸರ್ ನ ನ್ಯಾವಿಗೇಶನ್ ಇತಿಹಾಸದಲ್ಲಿ ಹೊಸ ದಾಖಲೆಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ಪರೀಕ್ಷಿಸಲು ಬ್ರೌಸರ್‌ನ ಹಿಂಬದಿ ಬಟನ್ ಒತ್ತಿ ಹಿಡಿದುಕೊಳ್ಳಬಹುದು, ಇದರಲ್ಲಿ ಹೀಗೆ ಕಾಣಬಹುದು:
![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e064.kn.png)
![Screenshot of navigation history](../../../../translated_images/kn/history.7fdabbafa521e064.png)
ಹಿಂಬದಿ ಬಟನ್ ಮೇಲೆ ಕೆಲವೊಮ್ಮೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ಪ್ರಸ್ತುತ URL ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಇತಿಹಾಸ ನವೀಕರಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅದೇ ಟೆಂಪ್ಲೇಟ್ ಪ್ರದರ್ಶನವಾಗುತ್ತಿರುತ್ತದೆ.

@ -292,7 +292,7 @@ graph TD
2. ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಳಾಸ ಪಟ್ಟಿಯಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಿ
3. ಪುಟ ಮರುಭರ್ತಿ ಆಗುವುದು ಮತ್ತು URL ನಲ್ಲಿ ಡೇಟಾ ಕಾಣಿಸುವುದು ಗಮನಿಸಿ
![ ನೊಂದಣಿ ಬಟನ್ ಕ್ಲಿಕ್ ನಂತರ ಬ್ರೌಸರ್ URL ಬದಲಾವಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/click-register.e89a30bf0d4bc9ca.kn.png)
![ ನೊಂದಣಿ ಬಟನ್ ಕ್ಲಿಕ್ ನಂತರ ಬ್ರೌಸರ್ URL ಬದಲಾವಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/kn/click-register.e89a30bf0d4bc9ca.png)
### HTTP ವಿಧಾನಗಳ ಹೋಲಿಕೆ
@ -346,7 +346,7 @@ graph TD
2. **"ಖಾತೆ ರಚಿಸಿ" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ**
3. **ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಗಮನಿಸಿ**
![लोकलहोಸ್ಟ್:5000/api/accounts ವಿಳಾಸದಲ್ಲಿರುವ ಬ್ರೌಸರ್ ವಿಂಡೋ, ಬಳಕೆದಾರ ಡೇಟಾ ಹೊಂದಿರುವ JSON ಸರಣಿ ತೋರಿಸುತ್ತಿದೆ](../../../../translated_images/form-post.61de4ca1b964d91a.kn.png)
![लोकलहोಸ್ಟ್:5000/api/accounts ವಿಳಾಸದಲ್ಲಿರುವ ಬ್ರೌಸರ್ ವಿಂಡೋ, ಬಳಕೆದಾರ ಡೇಟಾ ಹೊಂದಿರುವ JSON ಸರಣಿ ತೋರಿಸುತ್ತಿದೆ](../../../../translated_images/kn/form-post.61de4ca1b964d91a.png)
**ನೀವು ಕಂಡುಕೊಳ್ಳಬೇಕಾದುದು:**
- **ಬ್ರೌಸರ್ API ಅಂತಿಮ ಬಿಂದುವಿಗೆ पुनರ್ನಿರ್ದೇಶನ ಮಾಡುತ್ತದೆ**
@ -609,7 +609,7 @@ async function register() {
3. **"ಖಾತೆ ರಚಿಸಿ" ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ**
4. **ಕನ್‍ಸೋಲ್ ಸಂದೇಶಗಳು ಮತ್ತು ಬಳಕೆದಾರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಗಮನಿಸಿ**
![ಬ್ರೌಸರ್ ಕನ್‍ಸೋಲ್‌ನಲ್ಲಿ ಲಾಗ್ ಸಂದೇಶವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/browser-console.efaf0b51aaaf6778.kn.png)
![ಬ್ರೌಸರ್ ಕನ್‍ಸೋಲ್‌ನಲ್ಲಿ ಲಾಗ್ ಸಂದೇಶವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/kn/browser-console.efaf0b51aaaf6778.png)
**ನೀವು ಕಾಣಬೇಕಾದದ್ದು:**
- **ಸಲ್ಲಿಸುವ ಬಟನ್ ಮೇಲೆ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಯನ್ನು ಕಾಣಬಹುದು**
@ -783,7 +783,7 @@ input:focus:invalid {
3. **ಬಳಕೆದಾರನಾಮ ಕ್ಷೇತ್ರದಲ್ಲಿ ವಿಶೇಷ ಅಕ್ಷರಗಳನ್ನು ಬಳಸಿ ಬಾರಿ ಮಾಡಿ**
4. **ಋಣಾತ್ಮಕ ಬ್ಯಾಲೆನ್ಸ್ ಮೊತ್ತ ನಮೂದಿಸಿ**
![ಫಾರ್ಮ್ ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಏರುವ ಮಾನ್ಯತಾ ದೋಷವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/validation-error.8bd23e98d416c22f.kn.png)
![ಫಾರ್ಮ್ ಸಲ್ಲಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಏರುವ ಮಾನ್ಯತಾ ದೋಷವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/kn/validation-error.8bd23e98d416c22f.png)
**ನೀವು ಗಮನಿಸುವುದು:**
- **ಬ್ರೌಸರ್ ಮೂಲ ಮಾನ್ಯತಾ ಸಂದೇಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ**
@ -943,7 +943,7 @@ timeline
ಕೊನೆಗಿನ ಲಾಗಿನ್ ಪುಟವು ಕೆಲವು ಸ್ಟೈಲಿಂಗ್ ನಂತರ ಹೇಗಿರಬಹುದು ಎಂಬ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
![CSS ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿದ ನಂತರ ಲಾಗಿನ್ ಪುಟದ ಸ್ಕ್ರೀನ್ ಶಾಟ್](../../../../translated_images/result.96ef01f607bf856a.kn.png)
![CSS ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಿದ ನಂತರ ಲಾಗಿನ್ ಪುಟದ ಸ್ಕ್ರೀನ್ ಶಾಟ್](../../../../translated_images/kn/result.96ef01f607bf856a.png)
## ಪೋಷ್ಟ್-ಲೆಕ್ಚರ್ ಕ್ವಿಜ್

@ -156,7 +156,7 @@ sequenceDiagram
Server->>Browser: ಸಂಪೂರ್ಣ HTML ಪುಟವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ
Browser->>User: ಹೊಸ ಪುಟವನ್ನು ತೋರಿಸುತ್ತದೆ (ಫ್ಲ್ಯಾಶ್/ರೀಲುಡ್)
```
![ಮಲ್ಟಿ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿವ ನವೀಕರಣ ಕಾರ್ಯವಾಹಿ](../../../../translated_images/mpa.7f7375a1a2d4aa77.kn.png)
![ಮಲ್ಟಿ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿವ ನವೀಕರಣ ಕಾರ್ಯವಾಹಿ](../../../../translated_images/kn/mpa.7f7375a1a2d4aa77.png)
**ಈ ವಿಧಾನವನ್ನು ಅಸಹ್ಯವಾಗಿಸಿದ್ದದ್ದು:**
- ಪ್ರತಿ ಕ್ಲಿಕ್ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಪುನರ್ನirmaಣೆ ಪರಿಚಯಿಸಿತು
@ -182,7 +182,7 @@ sequenceDiagram
JavaScript->>Browser: ನಿರ್ದಿಷ್ಟ ಪುಟದ ಅಂಶಗಳನ್ನು ನವೀಕರಿಸುತ್ತದೆ
Browser->>User: ನವೀಕೃತ ವಿಷಯವನ್ನು ತೋರಿಸುತ್ತದೆ (ಮತ್ತೆ ಲೋಡ್ ಮಾಡದೆ)
```
![ಸಿಂಗಲ್-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನವೀಕರಣ ಕಾರ್ಯವಾಹಿ](../../../../translated_images/spa.268ec73b41f992c2.kn.png)
![ಸಿಂಗಲ್-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನವೀಕರಣ ಕಾರ್ಯವಾಹಿ](../../../../translated_images/kn/spa.268ec73b41f992c2.png)
**SPAs ಇಷ್ಟು ಚೆನ್ನಾಗಿರುವುದಕ್ಕೆ ಕಾರಣಗಳು:**
- ಬದಲಾಯಿಸಿದ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ನವೀಕರಿಸಲಾಗುತ್ತದೆ (ಬುದ್ದಿವಂತಿಕೆ吧)
@ -516,7 +516,7 @@ if (data.error) {
ಈಗ ತಪ್ಪಾದ ಖಾತೆ ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಅಲ್ಲಿ ಸಹಾಯಕ ದೋಷ ಸಂದೇಶವನ್ನು ನೋಡಬಹುದಾಗಿದೆ!
![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a6327.kn.png)
![Screenshot showing the error message displayed during login](../../../../translated_images/kn/login-error.416fe019b36a6327.png)
#### ಹೆಜ್ಜೆ 4: ಪ್ರವೇಶಕಾರ್ಯದಕ್ಷತೆಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದು
@ -951,7 +951,7 @@ timeline
ಇದಲ್ಲದೆ, ಈ ರೀತಿ ಒಳ್ಳೆಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಕಾಣಿಸಬಹುದು:
![ಸ್ಟೈಲಿಂಗ್ ನಂತರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಉದಾಹರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/screen2.123c82a831a1d14a.kn.png)
![ಸ್ಟೈಲಿಂಗ್ ನಂತರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಉದಾಹರಣೆಯ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/kn/screen2.123c82a831a1d14a.png)
ನೀವು ಇದನ್ನು ಖಚಿತವಾಗಿ ಬೀಳ್ತೀರಾ ಎಂದು ಭಾವಿಸಬೇಡಿ - ಇದನ್ನು ಪ್ರೇರಣೆ ರೂಪದಲ್ಲಿ ತೆಗೆದುಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮದೇ ರೀತಿಯಲ್ಲಿ ಮಾಡಿ!

@ -187,7 +187,7 @@ mindmap
ನಾವು ಇಗೋ ಒಂದು **ಕೇಂದ್ರಿತ ಸ್ಟೇಟ್ ನಿರ್ವಹಣೆ** ವ್ಯವಸ್ಥೆಯನ್ನು ಸೃಷ್ಟಿಸುವೆವು. ಇದು ಎಲ್ಲಾ ಮುಖ್ಯ ವಿಷಯಗಳ ನಿಯಂತ್ರಣದಲ್ಲಿ ಒಬ್ಬ ವ್ಯವಸ್ಥಿತ ವ್ಯಕ್ತಿ ಇರುವ ಪ್ರಕಾರ.
![HTML, ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳು ಮತ್ತು ಸ್ಟೇಟ್ ನಡುವಣ ಡೇಟಾ ಪ್ರವಾಹವನ್ನು ತೋರಿಸುವ ಸ್ಕೀಮಾ](../../../../translated_images/data-flow.fa2354e0908fecc8.kn.png)
![HTML, ಬಳಕೆದಾರ ಕ್ರಿಯೆಗಳು ಮತ್ತು ಸ್ಟೇಟ್ ನಡುವಣ ಡೇಟಾ ಪ್ರವಾಹವನ್ನು ತೋರಿಸುವ ಸ್ಕೀಮಾ](../../../../translated_images/kn/data-flow.fa2354e0908fecc8.png)
```mermaid
flowchart TD
@ -799,7 +799,7 @@ timeline
ಹೀಗಿದೆ ನಿಮ್ಮ ಹಾಜರಿ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶ:
![ಉದಾಹರಣೆ "ವಹಿವಾಟು ಸೇರಿಸಿ" ಸಂವಾದವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/dialog.93bba104afeb79f1.kn.png)
![ಉದಾಹರಣೆ "ವಹಿವಾಟು ಸೇರಿಸಿ" ಸಂವಾದವನ್ನು ತೋರಿಸುವ ಸ್ಕ್ರೀನ್‌ಶಾಟ್](../../../../translated_images/kn/dialog.93bba104afeb79f1.png)
---

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**ನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶ:**
ಈ ಅಸೈನ್‌ಮೆಂಟ್ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ನಿಮ್ಮ ಬ್ಯಾಂಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಪರಿಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುವ "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ವೈಶಿಷ್ಟ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ, ವೃತ್ತಿಪರವಾಗಿ ಕಾಣುವುದು ಮತ್ತು ನಡೆದುಕೊಳ್ಳುವುದು:
![ಉದಾಹರಣೆ "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ಡೈಲಾಗ್ ಚಿತ್ರಣ](../../../../translated_images/dialog.93bba104afeb79f1.kn.png)
![ಉದಾಹರಣೆ "ಲೆನದ ಪತ್ರ ಸೇರಿಸಿ" ಡೈಲಾಗ್ ಚಿತ್ರಣ](../../../../translated_images/kn/dialog.93bba104afeb79f1.png)
## ನಿಮ್ಮ ಅನುಷ್ಠಾನವನ್ನು ಪರೀಕ್ಷಿಸುವುದು

@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
ಈ ಯೋಜನೆಯಲ್ಲಿ, ನೀವು ಒಂದು ಕಲ್ಪಿತ ಬ್ಯಾಂಕನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸಬೇಕು ಎಂಬುದನ್ನು ಕಲಿಯೋಿರಿ. ಇವುಗಳಲ್ಲಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ವಿನ್ಯಾಸಗೊಳಿಸುವುದು ಮತ್ತು ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುವುದು, ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು, ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು, ಮತ್ತು ಬ್ಯಾಂಕಿನ ಡೇಟಾವನ್ನು ಪಡೆಯಲು API ಯಿಂದ ಡೇಟಾವನ್ನು ಎങ്ങനെ ಪಡೆಯಬೇಕು ಎಂಬುದು ಸೇರಿವೆ.
| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.kn.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.kn.png) |
| ![Screen1](../../../translated_images/kn/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/kn/screen2.123c82a831a1d14a.png) |
|--------------------------------|--------------------------------|
## ಪಾಠಗಳು

@ -182,7 +182,7 @@ VSCode.dev ಈ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನಿಮ್ಮ ಬ್
ಎಲ್ಲವೂ ಲೋಡ್ ಆದ ಮೇಲೆ, ನೀವು ಅತ್ಯಂತ ಸ್ವಚ್ಛ ಕೆಲಸದ ಜಾಗವನ್ನು ನೋಡುತ್ತೀರಿ, ಅದು ನೀವು ಮಹತ್ವಪೂರ್ಣವಾಗಿ ಕಾಣುವದಕ್ಕೆ — ನಿಮ್ಮ ಕೋಡಿಗೆ — ಗಮನ ಸೆಳೆಯುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ!
![ಪ್ರಾರಂಭಿಕ VSCode.dev ಇಂಟರ್‌ಫೇಸ್](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.kn.png)
![ಪ್ರಾರಂಭಿಕ VSCode.dev ಇಂಟರ್‌ಫೇಸ್](../../../../translated_images/kn/default-vscode-dev.5d06881d65c1b323.png)
**ನಿಮ್ಮ ಹತ್ತಿರದ ಪ್ರದೇಶದ ಪ್ರೇಕ್ಷಣೀಯತೆ:**
- **ಕ್ರಿಯಾಶೀಲತೆ ಬಾರ್** (ಎಡಬದಿಯಲ್ಲಿ ಇರುವ ಪದ್ಧತಿ): Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, Settings ⚙️ ಇದನ್ನು ಹೊಂದಿರುವ ನಿಮ್ಮ ಮುಖ್ಯ ನವಿಗೇಶನ್
@ -229,7 +229,7 @@ flowchart TB
1. ನೀವು ಇಲ್ಲಿಗಾಗಿಲ್ಲವಾದರೆ, [vscode.dev](https://vscode.dev) ಗೆ ಹೋಗಿ
2. ಸ್ವಾಗತ ಪರದೆಯಲ್ಲಿ “Open Remote Repository” ಬಟನ್ ನೋಡಿ클ಿಕ್ ಮಾಡಿ
![ರೆಮೋಟ್ ರೆಪೊ ತೆಗೆಯಿರಿ](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.kn.png)
![ರೆಮೋಟ್ ರೆಪೊ ತೆಗೆಯಿರಿ](../../../../translated_images/kn/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+P (ಮ್ಯಾಕ್‌ನಲ್ಲಿ Cmd+Shift+P) ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ತೆರೆಯಲು:
![ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್](../../../../translated_images/palette-menu.4946174e07f42622.kn.png)
![ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್](../../../../translated_images/kn/palette-menu.4946174e07f42622.png)
**ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ಎಲ್ಲವೂ ಮಾಡಲು ಎಂದು ಹುಡುಕುವ ಇಂಜಿನ್ ಗೆ ಸಮಾನ:**
- "open remote" typed ಮಾಡಿ ಅದು ರೆಪೊ ತೆಗೆಯುವ ಇನ್ಸ್ಟ್ರುಮೆಂಟ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ
@ -300,7 +300,7 @@ HTTP ಮತ್ತು HTTPS ಬೇರೆಯಾದ ಪ್ರೋಟೋಕಾಲ್
3. ಫೈಲ್ ಹೆಸರು ಸೇರಿಸಿ ಮತ್ತು ಸರಿಯಾದ ವಿಸ್ತರಣೆಯನ್ನು (`style.css`, `script.js`, `index.html`) ನಮೂದಿಸಿ
4. ಫೈಲ್ ರಚಿಸಲು Enter ಒತ್ತಿ
![ಹೊಸ ಫೈಲ್ ರಚನೆ](../../../../translated_images/create-new-file.2814e609c2af9aeb.kn.png)
![ಹೊಸ ಫೈಲ್ ರಚನೆ](../../../../translated_images/kn/create-new-file.2814e609c2af9aeb.png)
**ಹೆಸರಿನ ನಿಯಮಗಳು:**
- ಸ್ಪಷ್ಟವಾಗಿರುವ, ಫೈಲ್ ಉದ್ದೇಶ ವಿವರಿಸುವ ಹೆಸರುಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ
@ -318,7 +318,7 @@ HTTP ಮತ್ತು HTTPS ಬೇರೆಯಾದ ಪ್ರೋಟೋಕಾಲ್
2. ಟೈಪ್ ಮಾಡುತ್ತಿರಿರಿ ಮತ್ತು VSCode.dev ನಿಮಗೆ ಬಣ್ಣಗಳು, ಸಲಹೆಗಳು ಮತ್ತು ದೋಷ ಪತ್ತೆ ಹಂಚುತ್ತದೆ
3. Ctrl+S (Windows/Linux) ಅಥವಾ Cmd+S (Mac) ಒತ್ತಿ ನಿಮ್ಮ ಕೆಲಸ ಉಳಿಸಿ ಆದರೆ ಸ್ವಯಂ-ಉಳಿಸಲು ಕೂಡ ಇದೆ!
![VSCode.dev ನಲ್ಲಿ ಫೈಲ್ ಸಂಪಾದನೆ](../../../../translated_images/edit-a-file.52c0ee665ef19f08.kn.png)
![VSCode.dev ನಲ್ಲಿ ಫೈಲ್ ಸಂಪಾದನೆ](../../../../translated_images/kn/edit-a-file.52c0ee665ef19f08.png)
**ನೀವು ಕೋಡಿಂಗ್ ವೇಳೆ ಸಂಭವಿಸುವವನ್ನು ನೋಡಿ:**
- ನಿಮ್ಮ ಕೋಡ್ ಸುಂದರವಾಗಿ ಬಣ್ಣಪೂರಿತವಾಗಿರುತ್ತದೆ, ಓದಲು ಸುಲಭವಾಗಿದೆ
@ -339,7 +339,7 @@ HTTP ಮತ್ತು HTTPS ಬೇರೆಯಾದ ಪ್ರೋಟೋಕಾಲ್
2. ಬದಲಾಯಿಸಿದ ಫೈಲ್‌ಗಳು "Changes" ವಿಭಾಗದಲ್ಲಿ ಕಾಣಿಸುತ್ತವೆ
3. ಬಣ್ಣ ಐಕಾನಗಳು ಬದಲಾವಣೆಯ ವಿಧವನ್ನು ಸೂಚಿಸುತ್ತವೆ: ಹಸಿರು ಸೇರಿಸುವಿಕೆಗೆ, ಕೆಂಪು ತೆಗೆದುಹಾಕಲು
![ಸೋರ್ಸ್ ಕಂಟ್ರೋಲ್‌ನಲ್ಲಿ ಬದಲಾವಣೆಗಳ ವೀಕ್ಷಣೆ](../../../../translated_images/working-tree.c58eec08e6335c79.kn.png)
![ಸೋರ್ಸ್ ಕಂಟ್ರೋಲ್‌ನಲ್ಲಿ ಬದಲಾವಣೆಗಳ ವೀಕ್ಷಣೆ](../../../../translated_images/kn/working-tree.c58eec08e6335c79.png)
**ನಿಮ್ಮ ಕೆಲಸ ಉಳಿಸುವಿಕೆ (ಕಮಿಟ್ ಕಾರ್ಯವಿಧಾನ):**
@ -431,7 +431,7 @@ mindmap
2. ಸುತ್ತಾಟ ಮಾಡಿ ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಸ್ತುವನ್ನು ಹುಡುಕಿ
3. ಹೆಚ್ಚು ಮಾಹಿತಿ ತಿಳಿಯಲು ಆಸಕ್ತಿಗೊಳಿಸುವ ಯಾವುದೇ ವಿಷಯವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ
![ವಿಸ್ತಾರ ಮಾರುಕಟ್ಟೆ ಇಂಟರ್ಫೇಸ್](../../../../translated_images/extensions.eca0e0c7f59a10b5.kn.png)
![ವಿಸ್ತಾರ ಮಾರುಕಟ್ಟೆ ಇಂಟರ್ಫೇಸ್](../../../../translated_images/kn/extensions.eca0e0c7f59a10b5.png)
**ನೀವು ಅನ್ವೇಷಿಸುವುದು:**
@ -484,7 +484,7 @@ mindmap
3. ಡ್ರಾಪ್‌ಡೌನ್‌ನಲ್ಲಿ "Extension Settings" ಆಯ್ಕೆಮಾಡಿ
4. ನಿಮ್ಮ ಕಾರ್ಯಪ್ರವಾಹಕ್ಕೆ ಸರಿಹೊಂದುತ್ತದೆವರೆಗೆ ಮೇಲಾಗಿಸಿಕೊಂಡು ಹೋಗಿ
![ವಿಸ್ತಾರ ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು](../../../../translated_images/extension-settings.21c752ae4f4cdb78.kn.png)
![ವಿಸ್ತಾರ ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು](../../../../translated_images/kn/extension-settings.21c752ae4f4cdb78.png)
**ನೀವು ನವೀಕರಿಸಲು ಇಚ್ಛಿಸಬಹುದಾದ ಸಾಮಾನ್ಯ ವಸ್ತುಗಳು:**
- ನಿಮ್ಮ ಕೋಡ್ ಹೇಗೆ ಫಾರ್ಮ್ಯಾಟ್ ಆಗುತ್ತದೆ (ಟ್ಯಾಬ್‌ಗಳು ಅಥವಾ ಜಾಗಗಳು, ಸಾಲು ಉದ್ದ, ಇತ್ಯಾದಿ)

@ -78,7 +78,7 @@ VSCode.dev ಕಡಿಮೆಸ್‌ಮ್ಮುಖವಾಗಿ ಕಡಾ ಫೈ
4. "Add initial HTML structure" ಎಂಬ ಕಮಿಟ್ ಸಂದೇಶವನ್ನು ಬರೆಯಿರಿ
5. ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸಲು "Commit new file" ಕ್ಲಿಕ್ ಮಾಡಿ
![GitHub ನಲ್ಲಿ ಪ್ರಾಥಮಿಕ ಫೈಲ್ ರಚನೆ](../../../../translated_images/new-file-github.com.c886796d800e8056.kn.png)
![GitHub ನಲ್ಲಿ ಪ್ರಾಥಮಿಕ ಫೈಲ್ ರಚನೆ](../../../../translated_images/kn/new-file-github.com.c886796d800e8056.png)
**ಈ ಆರಂಭಿಕ ಸೆಟಪ್ ಏನನ್ನು ಸಾಧಿಸುತ್ತದೆ:**
- ಸಮಾಸ್ಯಪೂರ್ಣ HTML5 ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆ ಉಂಟುಮಾಡುತ್ತದೆ
@ -104,7 +104,7 @@ VSCode.dev ಕಡಿಮೆಸ್‌ಮ್ಮುಖವಾಗಿ ಕಡಾ ಫೈ
**ಯಶಸ್ಸಿನ ಸೂಚನೆ**: ಎಕ್ಸ್ಪ್ಲೋರರ್ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲುಗಳು ಮತ್ತು `index.html` ಮುಖ್ಯ ಸಂಪಾದಕ ಪ್ರದೇಶದಲ್ಲಿ ತೋರಬೇಕು.
![VSCode.dev ನಲ್ಲಿ ಪ್ರಾಜೆಕ್ಟ್ ಲೋಡ್](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.kn.png)
![VSCode.dev ನಲ್ಲಿ ಪ್ರಾಜೆಕ್ಟ್ ಲೋಡ್](../../../../translated_images/kn/project-on-vscode.dev.e79815a9a95ee7fe.png)
**ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ನೀವು ಕಾಣುವವು:**
- **ಎಕ್ಸ್ಪ್ಲೋರರ್ ಸೈಡ್‌ಬಾರ್**: ರೆಪೊ ಫೈಲುಗಳು ಮತ್ತು ಫೋಲ್ಡರ್ ರಚನೆಯನ್ನು ತೋರಿಸುತ್ತದೆ
@ -448,7 +448,7 @@ li:before {
**ಸ್ಥಾಪನೆಯಾದ ನಂತರ ತಕ್ಷಣದ ಫಲಿತಾಂಶಗಳು:**
CodeSwing ಸ್ಥಾಪಿತವಾದ ಮೇಲೆ, ನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ನಿಮಗೆ ನಿಮ್ಮ ರೆಜ್ಯೂಮ್ ವೆಬ್‌ಸೈಟಿನ ಲೈವ್ ಪ್ರಿವ್ಯೂ ತೋರಿಸಲಾಗುತ್ತದೆ. ಇದು ನೀವು ಮಾಡಿದ ಬದಲಾವಣೆಗಳನ್ನು ತಕ್ಷಣ ಹೇಗಿರುವುದೆಂದು ನೋಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
![CodeSwing ಲೈವ್ ಪ್ರಿವ್ಯೂ ತೋರಣೆ](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.kn.png)
![CodeSwing ಲೈವ್ ಪ್ರಿವ್ಯೂ ತೋರಣೆ](../../../../translated_images/kn/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**ಮೇಲ್ನೋಟ ಹೊಂದಿದ ಇಂಟರ್ಫೇಸ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ:**
- ** ಸ್ಪ್ಲಿಟ್ ವೀಕ್ಷಣೆ**: ಒಂದೊಂದರ ಬದಿಯಲ್ಲಿ ನಿಮ್ಮ ಕೋಡ್ ಮತ್ತು ಮತ್ತೊಂದರ ಬದಿಯಲ್ಲಿ ಲೈವ್ ಪ್ರಿವ್ಯೂ

@ -60,7 +60,7 @@ print(response.choices[0].message.content)
ನಿಮ್ಮ ಪೂರ್ಣಗೊಂಡ ಯೋಜನೆ ಹೀಗಿರಬಹುದು:
![ವ್ಯವಸ್ಥಾಪಕರ ಮತ್ತು AI ಸಹಾಯಕರ ನಡುವೆ ಸಂಭಾಷಣೆಯನ್ನು ತೋರizingಾಗುವ ಚಾಟ್ ಅಪ್ಲಿಕೇಶನ್ ಇಂಟರ್ಫೇಸ್](../../../translated_images/screenshot.0a1ee0d123df681b.kn.png)
![ವ್ಯವಸ್ಥಾಪಕರ ಮತ್ತು AI ಸಹಾಯಕರ ನಡುವೆ ಸಂಭಾಷಣೆಯನ್ನು ತೋರizingಾಗುವ ಚಾಟ್ ಅಪ್ಲಿಕೇಶನ್ ಇಂಟರ್ಫೇಸ್](../../../translated_images/kn/screenshot.0a1ee0d123df681b.png)
## 🗺️ AI ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿಯ ಮೂಲಕ ನಿಮ್ಮ ಕಲಿಕೆಯ ಪ್ರಯಾಣ
@ -189,7 +189,7 @@ mindmap
```
**ಮೂಲತತ್ವ**: AI ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿ ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು AI ಸೇವೆಗಳ ಇಂಟಿಗ್ರೇಶನ್ ಜೊತೆಗೆ ಸಂಯೋಜಿಸಿ ಬಳಕೆದಾರರಿಗೆ ಸಹಜ ಮತ್ತು ಸ್ಪಂದನಶೀಲ ಬಗೆಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.
![GitHub Models AI Playground ಇಂಟರ್ಫೇಸ್ ಮಾದರಿ ಆಯ್ಕೆ ಮತ್ತು ಪರೀಕ್ಷಾ ಪ್ರದೇಶವನ್ನು ತೋರಿಸುವುದು](../../../translated_images/playground.d2b927122224ff8f.kn.png)
![GitHub Models AI Playground ಇಂಟರ್ಫೇಸ್ ಮಾದರಿ ಆಯ್ಕೆ ಮತ್ತು ಪರೀಕ್ಷಾ ಪ್ರದೇಶವನ್ನು ತೋರಿಸುವುದು](../../../translated_images/kn/playground.d2b927122224ff8f.png)
**ಪ್ಲೇಗ್ರೌಂಡ್ ಉಪಕಾರ ಮಾಡುವ ಕೆಲವು ಅಂಶಗಳು:**
- GPT-4o-mini, Claude ಮತ್ತು ಇತರ ವಿವಿಧ AI ಮಾದರಿಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ (ಎಲ್ಲವೂ ಉಚಿತ!)
@ -199,7 +199,7 @@ mindmap
ಸ್ವಲ್ಪ ಪ್ರಯೋಗಮಾಡಿದ ಮೇಲೆ "Code" ಟ್ಯಾಬ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಯನ್ನು ಆಯ್ಕೆಮಾಡಿ ಅವಶ್ಯವಾದ ಜಾರಿಗೆ ಕೋಡ್ ಪಡೆಯಿರಿ.
![ಪ್ಲೇಗ್ರೌಂಡ್ ಆಯ್ಕೆ ವಿವಿಧ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಿಗಾಗಿ ಕೋಡ್ ತಯಾರಿಕೆಯ ಆಯ್ಕೆಯೊಂದಿಗೆ](../../../translated_images/playground-choice.1d23ba7d407f4758.kn.png)
![ಪ್ಲೇಗ್ರೌಂಡ್ ಆಯ್ಕೆ ವಿವಿಧ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಿಗಾಗಿ ಕೋಡ್ ತಯಾರಿಕೆಯ ಆಯ್ಕೆಯೊಂದಿಗೆ](../../../translated_images/kn/playground-choice.1d23ba7d407f4758.png)
## ಪೈಥಾನ್ ಬ್ಯಾಕ್‌ಎಂಡ್ ಇಂಟಿಗ್ರೇಶನ್ ವ್ಯವಸ್ಥೆಗೊಳಿಸುವುದು
@ -1559,14 +1559,14 @@ mindmap
- [Web Dev For Beginners repository](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.kn.png)
![Create from template interface showing the green "Use this template" button](../../../translated_images/kn/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.kn.png)
![Create codespace interface with options for launching cloud development environment](../../../translated_images/kn/codespace.bcecbdf5d2747d3d.png)
**ಹೆಜ್ಜೆ 3: ಪರಿಸರ ಕಾನ್ಫಿಗರೇಶನ್**
ನೀವು Codespace ತೆರೆಯುತ್ತಿದ್ದಂತೆ, ನಿಮಗೆ ಲಭ್ಯವಾಗಲಿದೆ:

@ -72,13 +72,13 @@ Azure AI Foundry Discord ಸಮುದಾಯವನ್ನು ಸೇರಿ
ಪ್ರಾರಂಭಿಸಲು [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ಗೆ ಭೇಟಿ ನೀಡಿ!
![Background](../../translated_images/background.148a8d43afde5730.kn.png)
![Background](../../translated_images/kn/background.148a8d43afde5730.png)
- ಮೂಲಭೂತದಿಂದ RAG ವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಆವರಿಸುವ ಪಾಠಗಳು.
- ಜನರೇಟಿವ್ AI ಮತ್ತು ನಮ್ಮ ಸಹಯೋಗಿ ಅಪ್ಲಿಕೇಶನ್ ಮೂಲಕ ಐತಿಹಾಸಿಕ ಪಾತ್ರಗಳೊಂದಿಗೆ ಸಂವಾದ.
- ಮನರಂಜನೆ ಮತ್ತು ಆಕರ್ಷಕ ಕಥನ, ನೀವು ಕಾಲ ಯಾತ್ರೆಯಲ್ಲಿ ಹೋಗುತ್ತೀರಿ!
![character](../../translated_images/character.5c0dd8e067ffd693.kn.png)
![character](../../translated_images/kn/character.5c0dd8e067ffd693.png)
ಪ್ರತಿಪಾಠದಲ್ಲಿ ಪೂರ್ಣಗೊಳಿಸುವ ಅಸೈನ್ಮೆಂಟ್, ಜ್ಞಾನ ಪರಿಶೀಲನೆ ಮತ್ತು ಸವಾಲು ಇರುತ್ತದೆ, ಇವುಡಿ ಕಲಿಕೆಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತವೆ ಹೀಗೆ:
- ಪ್ರಾಂಪ್ಟ್ ಮತ್ತು ಪ್ರಾಂಪ್ಟ್ ಇಂಜಿನಿಯರಿಂಗ್
@ -114,7 +114,7 @@ Azure AI Foundry Discord ಸಮುದಾಯವನ್ನು ಸೇರಿ
ನೀವು ಸೃಷ್ಟಿಸಿದ ರೆಪೊಸಿಟರಿಯಲ್ಲಿ, **Code** ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು **Open with Codespaces** ಆಯ್ಕೆಮಾಡಿ. ಇದು ನಿಮಗಾಗಿ ಹೊಸ Codespace ಸೃಷ್ಟಿಸುವುದು.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.kn.png)
![Codespace](../../translated_images/kn/createcodespace.0238bbf4d7a8d955.png)
#### ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಸ್ಥಳೀಯವಾಗಿ ಪಠ್ಯಕ್ರಮವನ್ನು ಓಡಿಸುವುದು

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle ಕ್ಲೌಡ್‌ಗೆ Common Cartridge ಬೆಂಬಲ ಸೀಮಿತವಾಗಿದೆ. ಮೇಲಿನ Moodle ಫೈಲ್‌ನ್ನು ವಿಷಯಪ್ರಕಾರ Canvas ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಬಹುದು.
- ಆಮದು ನಂತರ, ನೀವು ಉಪನ್ಯಾಸ ಸಮಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಮೊಡ್ಯೂಲ್‌ಗಳು, ದಿನಾಂಕಗಳು ಮತ್ತು ಕ್ವಿಜ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.kn.png)
![Moodle](../../translated_images/kn/moodle.94eb93d714a50cb2.png)
> Moodle ತರಗತಿಯಲ್ಲಿ ಪಠ್ಯಕ್ರಮ
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.kn.png)
![Canvas](../../translated_images/kn/canvas.fbd605ff8e5b8aff.png)
> Canvas ನಲ್ಲಿ ಪಠ್ಯಕ್ರಮ
### ರಿಪೊ ಅನ್ನು ನೇರವಾಗಿ ಬಳಸಿ (Classroom ಇಲ್ಲದೆ)

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
오늘은 최신 웹 개발을 가능하게 할 뿐 아니라 정말 중독성 강한 놀라운 도구들을 탐험할 거예요. 넷플릭스, 스포티파이, 좋아하는 인디 앱 스튜디오의 개발자들이 매일 같이 쓰는 똑같은 편집기, 브라우저, 작업 흐름들을 말이죠. 그리고 여러분이 춤추게 만들 부분: 이 전문적인 수준의 산업 표준 도구들 대부분이 완전 무료라는 사실이에요!
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.ko.png)
![Intro Programming](../../../../translated_images/ko/webdev101-programming.d6e3f98e61ac4bff.png)
> 스케치노트 by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
함께 한 걸음씩 천천히 배워 나가 보겠습니다. 서두르지 않고, 압박감 없이 여러분과 저, 그리고 여러분의 새 친구가 될 몇 가지 멋진 도구들만 있을 거예요!
![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.ko.png)
![Intro to GitHub](../../../../translated_images/ko/webdev101-github.8846d7971abef6f9.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ flowchart TD
✅ '초보자 친화적인' 저장소를 찾는 좋은 방법은 [good-first-issue 태그로 검색하기](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)입니다.
![Copy a repo locally](../../../../translated_images/clone_repo.5085c48d666ead57.ko.png)
![Copy a repo locally](../../../../translated_images/ko/clone_repo.5085c48d666ead57.png)
코드를 복사하는 방법은 여러 가지가 있습니다. 한 가지 방법은 저장소 내용을 HTTPS, SSH, 또는 GitHub CLI(명령줄 인터페이스)를 사용하여 "clone"하는 것입니다.

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# 접근성 높은 웹페이지 만들기
![접근성에 관한 모든 것](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.ko.png)
![접근성에 관한 모든 것](../../../../translated_images/ko/webdev101-a11y.8ef3025c858d897a.png)
> 스케치노트 by [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1049,12 +1049,12 @@ pie title "일반적인 ARIA 사용 패턴"
**정보 전달 이미지** - 중요한 정보를 전달함:
```html
<img src="../../../../translated_images/chart.31c7eb0eb5c4450d.ko.png" alt="Sales increased 25% from Q1 to Q2 2024">
<img src="../../../../translated_images/ko/chart.31c7eb0eb5c4450d.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**장식용 이미지** - 정보 가치 없는 순수 시각 이미지:
```html
<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d.ko.png" alt="" role="presentation">
<img src="../../../../translated_images/ko/decorative-border.b2f3c4d6634fb79d.png" alt="" role="presentation">
```
**기능적 이미지** - 버튼이나 컨트롤 역할:
@ -1066,7 +1066,7 @@ pie title "일반적인 ARIA 사용 패턴"
**복잡한 이미지** - 차트, 다이어그램, 인포그래픽:
```html
<img src="../../../../translated_images/complex-chart.c831f461a363b446.ko.png" alt="Quarterly sales data" aria-describedby="chart-description">
<img src="../../../../translated_images/ko/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.ko.png" alt="Website traffic increased 40% after accessibility improvements">
<img src="../../../../translated_images/ko/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.ko.png)
![JavaScript Basics - Data types](../../../../translated_images/ko/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.ko.png)
![JavaScript Basics - Functions](../../../../translated_images/ko/webdev101-js-functions.be049c4726e94f8b.png)
> 스케치노트 by [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.ko.png)
![JavaScript Basics - Making decisions](../../../../translated_images/ko/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.ko.png)
![JavaScript Basics - Arrays](../../../../translated_images/ko/webdev101-js-arrays.439d7528b8a29455.png)
> 스케치노트 작성자 [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -25,7 +25,7 @@ journey
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.ko.png)
![Introduction to HTML](../../../../translated_images/ko/webdev101-html.4389c2067af68e98.png)
> 스케치노트 작성자 [Tomomi Imura](https://twitter.com/girlie_mac)
HTML 또는 하이퍼텍스트 마크업 언어는 여러분이 방문한 모든 웹사이트의 기반입니다. HTML을 웹 페이지에 구조를 부여하는 골격으로 생각해보세요. 어떤 콘텐츠가 어디에 배치되고, 어떻게 조직되며, 각 부분이 무엇을 의미하는지 정의합니다. CSS는 나중에 HTML에 색상과 레이아웃을 입히고, JavaScript는 상호작용을 통해 생명을 불어넣지만, HTML은 모든 것을 가능하게 하는 필수적인 구조를 제공합니다.
@ -86,7 +86,7 @@ HTML 코드를 작성하기 전에 테라리움 프로젝트를 위한 적절한
4. 탐색기 창에서 "새 파일" 아이콘을 클릭합니다.
5. 파일명을 `index.html`로 지정합니다.
![VS Code 탐색기에서 새 파일 생성 모습](../../../../translated_images/vs-code-index.e2986cf919471eb9.ko.png)
![VS Code 탐색기에서 새 파일 생성 모습](../../../../translated_images/ko/vs-code-index.e2986cf919471eb9.png)
**옵션 2: 터미널 명령어 사용하기**
```bash
@ -236,48 +236,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.d87946a2ca70cc43.ko.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/ko/plant1.d87946a2ca70cc43.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.ko.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/ko/plant2.8daa1606c9c1ad89.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.ko.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/ko/plant3.8b0d484381a2a2a7.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.ko.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/ko/plant4.656e16ae1df37be2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.ko.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/ko/plant5.2b41b9355f11ebcc.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.ko.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/ko/plant6.3d1827d03b656994.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.ko.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/ko/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.ko.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/ko/plant8.38d6428174ffa850.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.ko.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/ko/plant9.f0e38d3327c37fc2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.ko.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/ko/plant10.b159d6d6e985595f.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.ko.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/ko/plant11.2a03a1c2ec8ea84e.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.ko.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/ko/plant12.60e9b53e538fbaf3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.ko.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/ko/plant13.07a51543c820bcf5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.ko.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/ko/plant14.6e486371ba7d36ba.png" />
</div>
</div>
</div>

@ -29,7 +29,7 @@ journey
Responsive design: 5: Student
Glass reflections: 5: Student
```
![CSS 소개](../../../../translated_images/webdev101-css.3f7af5991bf53a20.ko.png)
![CSS 소개](../../../../translated_images/ko/webdev101-css.3f7af5991bf53a20.png)
> 스케치노트 작성자: [Tomomi Imura](https://twitter.com/girlie_mac)
기억하시나요, HTML 테라리움이 꽤 기본적으로 보였던 것을? CSS는 그 단순한 구조를 시각적으로 매력적으로 변신시키는 부분입니다.
@ -202,7 +202,7 @@ body {
브라우저 개발자 도구(F12)를 열고 요소 탭에서 `<h1>` 요소를 검사해 보세요. `body`로부터 폰트 패밀리를 상속받는 것을 확인할 수 있습니다:
![상속된 폰트](../../../../translated_images/1.cc07a5cbe114ad1d.ko.png)
![상속된 폰트](../../../../translated_images/ko/1.cc07a5cbe114ad1d.png)
**실험 시간**: `<body>``color`, `line-height`, 또는 `text-align` 같은 다른 상속 속성을 설정해 보세요. 제목과 다른 요소들은 어떻게 변하나요?
@ -332,7 +332,7 @@ ID 선택자는 `#` 심볼을 쓰며 특정 `id` 속성을 가진 요소를 타
**각 식물의 HTML 구조는 다음과 같습니다:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.ko.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/ko/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
빛이 유리 표면에 반사되는 미묘한 하이라이트를 만듭니다. 이는 르네상스 화가 얀 반 에이크가 빛과 반사를 사용해 유리를 3차원처럼 보이게 한 방법과 비슷합니다. 목표는 다음과 같습니다:
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.ko.png)
![finished terrarium](../../../../translated_images/ko/terrarium-final.2f07047ffc597d0a.png)
**당신의 도전:**
- 유리 반사를 위한 미묘한 흰색 또는 밝은 색의 타원형 모양 만들기

@ -25,7 +25,7 @@ journey
Test functionality: 5: Student
Complete terrarium: 5: Student
```
![DOM과 클로저](../../../../translated_images/webdev101-js.10280393044d7eaa.ko.png)
![DOM과 클로저](../../../../translated_images/ko/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.ko.png)
![DOM 트리 표현](../../../../translated_images/ko/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.ko.png)
![DOM 트리 표현](../../../../translated_images/ko/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() {
- **기기별 호환:** 데스크톱과 모바일 모두 지원
- **성능 고려:** 메모리 누수 및 불필요한 계산 없음
![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.ko.png)
![finished terrarium](../../../../translated_images/ko/terrarium-final.0920f16e87c13a84.png)
---

@ -25,7 +25,7 @@ journey
문제 디버깅하기: 4: Student
사용자 경험 다듬기: 5: Student
```
![브라우저 스케치노트](../../../../translated_images/browser.60317c9be8b7f84a.ko.jpg)
![브라우저 스케치노트](../../../../translated_images/ko/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.ko.jpg)
![초기 브라우저들](../../../../translated_images/ko/earlybrowsers.d984b711cdf3a42d.jpg)
> 초기 몇몇 브라우저, 출처: [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### 브라우저가 웹 콘텐츠를 처리하는 방식
@ -194,7 +194,7 @@ quadrantChart
확장 설치 과정을 이해하면 사용자가 확장 설치 시 경험을 예측할 수 있습니다. 설치 과정은 현대 브라우저 전반에 걸쳐 표준화되어 있으나 UI 디자인에 약간의 차이가 있습니다.
![엣지 브라우저에서 edge://extensions 페이지와 설정 메뉴를 보여주는 스크린샷](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.ko.png)
![엣지 브라우저에서 edge://extensions 페이지와 설정 메뉴를 보여주는 스크린샷](../../../../translated_images/ko/install-on-edge.d68781acaf0b3d3d.png)
> **중요**: 직접 개발한 확장 프로그램을 테스트할 때는 개발자 모드를 활성화하고 다른 스토어의 확장 허용을 꼭 켜두세요.
@ -308,10 +308,10 @@ project-root/
### 확장 뷰 개요
**설정 뷰** - 처음 사용자 설정 표시:
![브라우저에서 확장 프로그램이 열려 지역명과 API 키 입력 폼을 표시하는 완성된 화면의 스크린샷](../../../../translated_images/1.b6da8c1394b07491.ko.png)
![브라우저에서 확장 프로그램이 열려 지역명과 API 키 입력 폼을 표시하는 완성된 화면의 스크린샷](../../../../translated_images/ko/1.b6da8c1394b07491.png)
**결과 뷰** - 탄소 발자국 데이터 표시:
![US-NEISO 지역의 탄소 사용량과 화석연료 비율 값을 표시하는 완성된 확장 프로그램의 스크린샷](../../../../translated_images/2.1dae52ff08042246.ko.png)
![US-NEISO 지역의 탄소 사용량과 화석연료 비율 값을 표시하는 완성된 확장 프로그램의 스크린샷](../../../../translated_images/ko/2.1dae52ff08042246.png)
### 설정 폼 만들기

@ -263,7 +263,7 @@ stateDiagram-v2
Reset --> ClearStorage: 저장된 데이터 삭제
ClearStorage --> FirstTime: 설정으로 돌아가기
```
![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.ko.png)
![Local storage pane](../../../../translated_images/ko/localstorage.472f8147b6a3f8d1.png)
> ⚠️ **보안 고려사항**: 실제 애플리케이션에서는 로컬 스토리지에 API 키를 저장하는 것이 위험할 수 있습니다. JavaScript가 이 데이터를 접근할 수 있기 때문입니다. 학습 목적에는 적합하지만 실제 앱은 민감한 자격 증명을 서버 측 안전 저장소에 보관해야 합니다.

@ -123,7 +123,7 @@ Edge에서 개발자 도구를 열려면, 오른쪽 상단의 점 세 개를 클
해봅시다. 웹사이트(예: Microsoft.com)를 열고 'Record' 버튼을 클릭하세요. 이제 페이지를 새로 고침하고 프로파일러가 발생하는 모든 작업을 캡처하는 것을 지켜보세요. 녹화를 중단하면 브라우저가 사이트를 '스크립트', '렌더링', '페인팅' 하는 세부 분석 결과를 볼 수 있습니다. 이는 우주선 발사 시 미션 컨트롤이 모든 시스템을 모니터링하는 것과 비슷합니다 - 무엇이 언제 어떻게 일어나는지 실시간 데이터를 얻습니다.
![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.ko.png)
![Edge profiler](../../../../translated_images/ko/profiler.5a4a62479c5df01c.png)
✅ 더 깊이 배우고 싶다면 [Microsoft 문서](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)를 참고하세요.
@ -133,11 +133,11 @@ Edge에서 개발자 도구를 열려면, 오른쪽 상단의 점 세 개를 클
프로파일 타임라인의 일부를 선택하고 요약 창을 보면 페이지 성능의 스냅샷을 얻을 수 있습니다:
![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.ko.png)
![Edge profiler snapshot](../../../../translated_images/ko/snapshot.97750180ebcad737.png)
이벤트 로그 창에서 15ms 이상 걸린 이벤트가 있는지 확인하세요:
![Edge event log](../../../../translated_images/log.804026979f3707e0.ko.png)
![Edge event log](../../../../translated_images/ko/log.804026979f3707e0.png)
✅ 프로파일러에 익숙해지세요! 이 사이트에서 개발자 도구를 열어 병목 현상이 있는지 확인해 보세요. 가장 느린 로딩 자원은 무엇인가요? 가장 빠른 것은요?

@ -105,7 +105,7 @@ quadrantChart
Power-up: [0.7, 0.6]
UI Elements: [0.9, 0.1]
```
![the canvas's grid](../../../../translated_images/canvas_grid.5f209da785ded492.ko.png)
![the canvas's grid](../../../../translated_images/ko/canvas_grid.5f209da785ded492.png)
> 이미지 출처 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
캔버스에 그림을 그리려면, 모든 캔버스 그래픽의 토대가 되는 세 단계 과정을 따라야 합니다. 몇 번 해보면 자연스러워집니다:
@ -323,11 +323,11 @@ Canvas 요소가 있는 웹 페이지를 만듭니다. 검은색 배경에 크
- 영웅 우주선
![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b.ko.png)
![Hero ship](../../../../translated_images/ko/player.dd24c1afa8c71e9b.png)
- 5×5 몬스터 편대
![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2.ko.png)
![Monster ship](../../../../translated_images/ko/enemyShip.5df2a822c16650c2.png)
### 개발 시작을 위한 권장 단계
@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
완성된 결과는 다음과 같이 보여야 합니다:
![Black screen with a hero and 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a.ko.png)
![Black screen with a hero and 5*5 monsters](../../../../translated_images/ko/partI-solution.36c53b48c9ffae2a.png)
## 해결책

@ -155,7 +155,7 @@ sequenceDiagram
end
```
- **점수 시스템**: 파괴된 적 우주선마다 100점을 부여합니다 (라운드 숫자가 플레이어가 생각하기에 더 쉽습니다). 점수는 왼쪽 아래 모서리에 표시합니다.
- **생명 카운터**: 주인공은 세 개의 생명으로 시작합니다 - 초기 아케이드 게임이 도전과 플레이 가능성을 균형 맞춘 표준입니다. 적과 충돌할 때마다 한 생명이 줄어듭니다. 남은 생명은 오른쪽 아래 모서리에 우주선 아이콘으로 표시합니다 ![life image](../../../../translated_images/life.6fb9f50d53ee0413.ko.png).
- **생명 카운터**: 주인공은 세 개의 생명으로 시작합니다 - 초기 아케이드 게임이 도전과 플레이 가능성을 균형 맞춘 표준입니다. 적과 충돌할 때마다 한 생명이 줄어듭니다. 남은 생명은 오른쪽 아래 모서리에 우주선 아이콘으로 표시합니다 ![life image](../../../../translated_images/ko/life.6fb9f50d53ee0413.png).
## 시작해 봅시다!

@ -644,7 +644,7 @@ sequenceDiagram
`history.pushState`를 사용하면 브라우저 내비게이션 히스토리에 새 항목이 만들어집니다. 브라우저의 *뒤로 버튼*을 길게 누르면 다음과 같은 내비게이션 히스토리 목록을 볼 수 있습니다:
![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e064.ko.png)
![Screenshot of navigation history](../../../../translated_images/ko/history.7fdabbafa521e064.png)
뒤로 버튼을 몇 번 눌러 보면 현재 URL은 바뀌고 히스토리가 업데이트되지만, 여전히 같은 템플릿만 표시되는 것을 볼 수 있습니다.

@ -292,7 +292,7 @@ graph TD
2. 브라우저 주소창 변화 관찰
3. 페이지가 새로고침 되고 URL에 데이터가 표시됨을 확인
![가입하기 버튼 클릭 후 브라우저 URL 변화 스크린샷](../../../../translated_images/click-register.e89a30bf0d4bc9ca.ko.png)
![가입하기 버튼 클릭 후 브라우저 URL 변화 스크린샷](../../../../translated_images/ko/click-register.e89a30bf0d4bc9ca.png)
### HTTP 메서드 비교
@ -346,7 +346,7 @@ graph TD
2. "계정 생성" 버튼 클릭
3. 브라우저에서 서버 응답 관찰
![localhost:5000/api/accounts 주소의 JSON 문자열이 포함된 브라우저 창](../../../../translated_images/form-post.61de4ca1b964d91a.ko.png)
![localhost:5000/api/accounts 주소의 JSON 문자열이 포함된 브라우저 창](../../../../translated_images/ko/form-post.61de4ca1b964d91a.png)
**확인할 사항:**
- **브라우저가 API 엔드포인트 URL로 리다이렉트 됨**
@ -609,7 +609,7 @@ async function register() {
3. **"계정 만들기" 클릭**
4. **콘솔 메시지 및 사용자 피드백 관찰**
![브라우저 콘솔에 로그 메시지가 표시된 스크린샷](../../../../translated_images/browser-console.efaf0b51aaaf6778.ko.png)
![브라우저 콘솔에 로그 메시지가 표시된 스크린샷](../../../../translated_images/ko/browser-console.efaf0b51aaaf6778.png)
**보여야 할 내용:**
- **제출 버튼에 로딩 상태 표시**
@ -783,7 +783,7 @@ input:focus:invalid {
3. **사용자명에 특수 문자 입력 시도**
4. **음수 잔액 입력**
![폼 제출 시 유효성 검사 오류가 표시된 스크린샷](../../../../translated_images/validation-error.8bd23e98d416c22f.ko.png)
![폼 제출 시 유효성 검사 오류가 표시된 스크린샷](../../../../translated_images/ko/validation-error.8bd23e98d416c22f.png)
**관찰할 점:**
- **브라우저 기본 유효성 검사 메시지 표시**
@ -943,7 +943,7 @@ timeline
약간의 스타일링 후 최종 로그인 페이지가 어떻게 보일 수 있는지에 대한 예시는 다음과 같습니다:
![CSS 스타일을 추가한 후 로그인 페이지 스크린샷](../../../../translated_images/result.96ef01f607bf856a.ko.png)
![CSS 스타일을 추가한 후 로그인 페이지 스크린샷](../../../../translated_images/ko/result.96ef01f607bf856a.png)
## 강의 후 퀴즈

@ -156,7 +156,7 @@ sequenceDiagram
Server->>Browser: 완전한 HTML 페이지 반환
Browser->>User: 새 페이지 표시 (깜박임/새로고침)
```
![다중 페이지 애플리케이션의 업데이트 워크플로우](../../../../translated_images/mpa.7f7375a1a2d4aa77.ko.png)
![다중 페이지 애플리케이션의 업데이트 워크플로우](../../../../translated_images/ko/mpa.7f7375a1a2d4aa77.png)
**이 방식이 답답하게 느껴진 이유:**
- 클릭할 때마다 페이지 전체를 새로 만들어야 했음
@ -182,7 +182,7 @@ sequenceDiagram
JavaScript->>Browser: 특정 페이지 요소 업데이트
Browser->>User: 업데이트된 내용 표시 (새로고침 없음)
```
![단일 페이지 애플리케이션의 업데이트 워크플로우](../../../../translated_images/spa.268ec73b41f992c2.ko.png)
![단일 페이지 애플리케이션의 업데이트 워크플로우](../../../../translated_images/ko/spa.268ec73b41f992c2.png)
**SPA가 훨씬 좋은 이유:**
- 실제로 변경된 부분만 업데이트 (똑똑하죠?)
@ -516,7 +516,7 @@ if (data.error) {
이제 잘못된 계정으로 테스트하면 페이지에 도움 되는 오류 메시지가 바로 보일 것입니다!
![로그인 중 표시되는 오류 메시지 스크린샷](../../../../translated_images/login-error.416fe019b36a6327.ko.png)
![로그인 중 표시되는 오류 메시지 스크린샷](../../../../translated_images/ko/login-error.416fe019b36a6327.png)
#### 4단계: 접근성 포함하기
@ -950,7 +950,7 @@ timeline
다음은 스타일링 후 다듬어진 대시보드 예시입니다:
![스타일링 후 대시보드 결과 예시 스크린샷](../../../../translated_images/screen2.123c82a831a1d14a.ko.png)
![스타일링 후 대시보드 결과 예시 스크린샷](../../../../translated_images/ko/screen2.123c82a831a1d14a.png)
꼭 똑같이 만들 필요는 없습니다 - 영감을 받아 자신만의 스타일로 만드세요!

@ -187,7 +187,7 @@ mindmap
우리가 할 일은 **중앙 집중식 상태 관리** 시스템을 만드는 것입니다. 중요한 모든 것을 단 하나의 매우 조직적인 책임자가 관리한다고 생각하세요:
![HTML, 사용자 동작, 상태 간 데이터 흐름을 보여주는 도식](../../../../translated_images/data-flow.fa2354e0908fecc8.ko.png)
![HTML, 사용자 동작, 상태 간 데이터 흐름을 보여주는 도식](../../../../translated_images/ko/data-flow.fa2354e0908fecc8.png)
```mermaid
flowchart TD
@ -802,7 +802,7 @@ Agent 모드를 사용해 다음 챌린지 수행:
과제 완료 후 예시 결과:
![예시 "거래 추가" 대화상자 스크린샷](../../../../translated_images/dialog.93bba104afeb79f1.ko.png)
![예시 "거래 추가" 대화상자 스크린샷](../../../../translated_images/ko/dialog.93bba104afeb79f1.png)
---

@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
**예상 결과:**
과제를 마치면, 당신의 뱅킹 앱은 전문적인 모양과 동작을 갖춘 완전한 "거래 추가" 기능을 갖추게 됩니다:
!["거래 추가" 대화 상자 예시 스크린샷](../../../../translated_images/dialog.93bba104afeb79f1.ko.png)
!["거래 추가" 대화 상자 예시 스크린샷](../../../../translated_images/ko/dialog.93bba104afeb79f1.png)
## 구현 테스트

@ -182,7 +182,7 @@ VSCode.dev는 이러한 기능을 브라우저에 가져옵니다:
모든 것이 로드되면, 코드에 집중할 수 있도록 깔끔하게 설계된 작업 공간을 보게 됩니다!
![기본 VSCode.dev 인터페이스](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ko.png)
![기본 VSCode.dev 인터페이스](../../../../translated_images/ko/default-vscode-dev.5d06881d65c1b323.png)
**이곳이 여러분의 동네 안내입니다:**
- **활동 표시줄** (왼쪽 줄): 탐색기 📁, 검색 🔍, 소스 제어 🌿, 확장 기능 🧩, 설정 ⚙️의 주요 네비게이션
@ -229,7 +229,7 @@ VSCode.dev를 처음 시작할 때 특정 저장소를 열고자 할 때 완벽
1. 아직 방문하지 않았다면 [vscode.dev](https://vscode.dev)로 이동
2. 환영 화면에서 "Open Remote Repository" 버튼 클릭
![원격 저장소 열기](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ko.png)
![원격 저장소 열기](../../../../translated_images/ko/open-remote-repository.bd9c2598b8949e7f.png)
3. 원하는 GitHub 저장소 URL 붙여넣기 (예: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Enter를 누르고 마법을 지켜보기!
@ -238,7 +238,7 @@ VSCode.dev를 처음 시작할 때 특정 저장소를 열고자 할 때 완벽
코딩 마법사가 되고 싶나요? 키보드 단축키 Ctrl+Shift+P (Mac은 Cmd+Shift+P)로 명령 팔레트를 열어보세요:
![명령 팔레트](../../../../translated_images/palette-menu.4946174e07f42622.ko.png)
![명령 팔레트](../../../../translated_images/ko/palette-menu.4946174e07f42622.png)
**명령 팔레트는 할 수 있는 모든 것의 검색 엔진과 같습니다:**
- "open remote" 입력하면 원격 저장소 열기 기능 찾기
@ -300,7 +300,7 @@ HTTP와 HTTPS가 동일 도메인 구조를 유지하며 다른 프로토콜을
3. 적절한 확장자를 포함한 파일 이름 입력 (`style.css`, `script.js`, `index.html`)
4. Enter 눌러 파일 생성
![새 파일 만들기](../../../../translated_images/create-new-file.2814e609c2af9aeb.ko.png)
![새 파일 만들기](../../../../translated_images/ko/create-new-file.2814e609c2af9aeb.png)
**이름 규칙:**
- 파일 목적을 알 수 있는 설명적 이름 사용
@ -318,7 +318,7 @@ HTTP와 HTTPS가 동일 도메인 구조를 유지하며 다른 프로토콜을
2. 타이핑 시작하면 VSCode.dev가 색, 제안, 오류 감지로 도와줌
3. Ctrl+S(윈도우/리눅스) 또는 Cmd+S(맥)로 저장 (자동 저장도 됨!)
![VSCode.dev에서 파일 편집하기](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ko.png)
![VSCode.dev에서 파일 편집하기](../../../../translated_images/ko/edit-a-file.52c0ee665ef19f08.png)
**코딩하면서 일어나는 멋진 일들:**
- 코드가 보기 쉽게 아름다운 컬러 코딩
@ -339,7 +339,7 @@ HTTP와 HTTPS가 동일 도메인 구조를 유지하며 다른 프로토콜을
2. 수정된 파일이 "변경 사항" 섹션에 표시됨
3. 색상 코딩으로 변경 유형 표시: 초록색은 추가, 빨간색은 삭제
![소스 제어에서 변경 사항 보기](../../../../translated_images/working-tree.c58eec08e6335c79.ko.png)
![소스 제어에서 변경 사항 보기](../../../../translated_images/ko/working-tree.c58eec08e6335c79.png)
**작업 저장 (커밋 워크플로):**
@ -431,7 +431,7 @@ mindmap
2. 둘러보거나 특정 항목을 검색하세요
3. 흥미로운 항목을 클릭해 자세히 알아보세요
![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.ko.png)
![Extension marketplace interface](../../../../translated_images/ko/extensions.eca0e0c7f59a10b5.png)
**내부에서 볼 수 있는 것들:**
@ -484,7 +484,7 @@ mindmap
3. 드롭다운에서 "Extension Settings"를 선택하세요
4. 원하는 만큼 설정을 변경해 작업 흐름에 맞게 맞추세요
![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ko.png)
![Customizing extension settings](../../../../translated_images/ko/extension-settings.21c752ae4f4cdb78.png)
**보통 조정하는 항목들:**
- 코드 포맷팅 방식 (탭 vs 공백, 줄 길이 등)

@ -78,7 +78,7 @@ VSCode.dev는 리포지토리에 최소한 하나의 파일이 있어야 열리
4. 커밋 메시지로 "Add initial HTML structure"를 작성하세요
5. "Commit new file" 버튼을 클릭하여 변경 사항을 저장하세요
![GitHub에서 초기 파일 생성](../../../../translated_images/new-file-github.com.c886796d800e8056.ko.png)
![GitHub에서 초기 파일 생성](../../../../translated_images/ko/new-file-github.com.c886796d800e8056.png)
**이 초기 설정을 통해 달성되는 것:**
- 시맨틱 요소를 활용한 올바른 HTML5 문서 구조 수립
@ -104,7 +104,7 @@ VSCode.dev는 리포지토리에 최소한 하나의 파일이 있어야 열리
**성공 표시**: 탐색기 사이드바에 프로젝트 파일들이 나타나고, `index.html`을 편집할 수 있는 화면이 보입니다.
![VSCode.dev에서 불러온 프로젝트](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ko.png)
![VSCode.dev에서 불러온 프로젝트](../../../../translated_images/ko/project-on-vscode.dev.e79815a9a95ee7fe.png)
**인터페이스에서 볼 수 있는 것:**
- **탐색기 사이드바**: 리포지토리 파일과 폴더 구조 표시
@ -448,7 +448,7 @@ li:before {
**설치 직후 결과:**
CodeSwing 설치 후 편집기에 이력서 웹사이트의 라이브 미리보기가 나타납니다. 변경사항을 실시간으로 바로 볼 수 있습니다.
![CodeSwing 확장 기능 라이브 미리보기](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ko.png)
![CodeSwing 확장 기능 라이브 미리보기](../../../../translated_images/ko/after-codeswing-extension-pb.0ebddddcf73b5509.png)
**강화된 인터페이스 이해:**
- **분할 뷰**: 코드 편집 화면과 라이브 미리보기를 동시에 표시

@ -60,7 +60,7 @@ print(response.choices[0].message.content)
완성된 프로젝트는 다음과 같은 모습입니다:
![Chat app interface showing conversation between user and AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.ko.png)
![Chat app interface showing conversation between user and AI assistant](../../../translated_images/ko/screenshot.0a1ee0d123df681b.png)
## 🗺️ AI 애플리케이션 개발을 통한 학습 여정
@ -189,7 +189,7 @@ mindmap
```
**핵심 원칙**: AI 애플리케이션 개발은 전통적인 웹 개발 기술과 AI 서비스 통합을 결합해 자연스럽고 반응성 높은 지능형 애플리케이션을 만듭니다.
![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/playground.d2b927122224ff8f.ko.png)
![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/ko/playground.d2b927122224ff8f.png)
**플레이그라운드의 유용함 요점:**
- GPT-4o-mini, Claude 등 무료로 다양한 AI 모델 사용해보기
@ -199,7 +199,7 @@ mindmap
조금 놀아본 뒤 “Code” 탭을 클릭하고 구현할 프로그래밍 언어를 선택해 필요한 코드를 얻으세요.
![Playground choice showing code generation options for different programming languages](../../../translated_images/playground-choice.1d23ba7d407f4758.ko.png)
![Playground choice showing code generation options for different programming languages](../../../translated_images/ko/playground-choice.1d23ba7d407f4758.png)
## Python 백엔드 통합 설정하기
@ -2351,14 +2351,14 @@ mindmap
- [Web Dev For Beginners repository](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.ko.png)
![Create from template interface showing the green "Use this template" button](../../../translated_images/ko/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.ko.png)
![Create codespace interface with options for launching cloud development environment](../../../translated_images/ko/codespace.bcecbdf5d2747d3d.png)
**3단계: 환경 구성**
Codespace가 로드되면 다음을 사용할 수 있습니다:

@ -72,13 +72,13 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요.
시작하려면 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 방문!
![Background](../../translated_images/background.148a8d43afde5730.ko.png)
![Background](../../translated_images/ko/background.148a8d43afde5730.png)
- 기본부터 RAG까지 다루는 강의.
- GenAI와 동반 앱을 이용해 역사적 인물과 상호작용하기.
- 재미있고 몰입도 높은 스토리텔링, 시간 여행을 체험하세요!
![character](../../translated_images/character.5c0dd8e067ffd693.ko.png)
![character](../../translated_images/ko/character.5c0dd8e067ffd693.png)
각 강의에는 주제 학습을 돕는 과제, 지식 점검, 챌린지가 포함되어 있습니다:
- 프롬프트 작성 및 프롬프트 엔지니어링
@ -115,7 +115,7 @@ Azure AI Foundry Discord 커뮤니티에 참여하세요.
생성한 저장소 복사본에서 **Code** 버튼을 클릭한 후 **Open with Codespaces**를 선택하세요. 새로운 Codespace가 생성되어 바로 작업할 수 있습니다.
![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ko.png)
![Codespace](../../translated_images/ko/createcodespace.0238bbf4d7a8d955.png)
#### 로컬 컴퓨터에서 커리큘럼 실행

@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
- Moodle Cloud는 Common Cartridge 지원이 제한적입니다. 위의 Moodle 파일을 사용하는 것이 좋으며, 이는 Canvas에도 업로드할 수 있습니다.
- 가져온 후, 모듈, 마감일, 퀴즈 설정을 학기 일정에 맞게 검토하세요.
![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ko.png)
![Moodle](../../translated_images/ko/moodle.94eb93d714a50cb2.png)
> Moodle 교실에서의 커리큘럼
![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ko.png)
![Canvas](../../translated_images/ko/canvas.fbd605ff8e5b8aff.png)
> Canvas에서의 커리큘럼
### 저장소를 직접 사용하기 (GitHub Classroom 없이)

@ -17,7 +17,7 @@ Sveikas, būsimasis kūrėjau! 👋 Ar galiu tau pasakyti kažką, kas vis dar k
Šiandien pažvelgsime į neįtikėtinas priemones, kurios daro šiuolaikinį žiniatinklio kūrimą ne tik įmanomu, bet ir labai priklausomybę sukeliančiu užsiėmimu. Kalbu apie tuos pačius redaktorius, naršykles ir darbo eigas, kuriomis kasdien naudojasi kūrėjai Netflix, Spotify bei tavo mėgstamoje nepriklausomoje programėlių studijoje. Ir štai kas privers tave šokti iš džiaugsmo: dauguma šių profesionalių, pramonės standartų įrankių yra visiškai nemokami!
![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.lt.png)
![Intro Programming](../../../../translated_images/lt/webdev101-programming.d6e3f98e61ac4bff.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -17,7 +17,7 @@ Sveikas, būsimasis programuotojau! 👋 Pasiruošęs prisijungti prie milijonų
Mes šią kelionę eisime kartu, žingsnis po žingsnio. Jokio skubėjimo, jokio spaudimo tik tu, aš ir keli labai šaunūs įrankiai, kurie netrukus taps tavo naujais geriausiais draugais!
![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.lt.png)
![Intro to GitHub](../../../../translated_images/lt/webdev101-github.8846d7971abef6f9.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Pirmiausia raskime GitHub atviro kodo repozitoriją, kuri jus domina ir prie kur
✅ Geras būdas rasti „pradedantiesiems draugiškus“ repozitorijus yra [paieška pagal žymą 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
![Kopijuokite repozitoriją vietoje](../../../../translated_images/clone_repo.5085c48d666ead57.lt.png)
![Kopijuokite repozitoriją vietoje](../../../../translated_images/lt/clone_repo.5085c48d666ead57.png)
Yra keletas būdų, kaip kopijuoti kodą. Vienas būdų yra „klonuoti“ repozitorijos turinį, naudojant HTTPS, SSH ar GitHub CLI (Komandų eilutės sąsają).

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# Prieinamų svetainių kūrimas
![Viskas apie prieinamumą](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.lt.png)
![Viskas apie prieinamumą](../../../../translated_images/lt/webdev101-a11y.8ef3025c858d897a.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -1049,12 +1049,12 @@ Kiekvienas jūsų svetainės vaizdas turi paskirtį. Supratimas apie ją padeda
**Informaciniai vaizdai** perteikia svarbią informaciją:
```html
<img src="../../../../translated_images/chart.31c7eb0eb5c4450d.lt.png" alt="Sales increased 25% from Q1 to Q2 2024">
<img src="../../../../translated_images/lt/chart.31c7eb0eb5c4450d.png" alt="Sales increased 25% from Q1 to Q2 2024">
```
**Dekoratyviniai vaizdai** grynai vizualūs, be informacinės vertės:
```html
<img src="../../../../translated_images/decorative-border.b2f3c4d6634fb79d.lt.png" alt="" role="presentation">
<img src="../../../../translated_images/lt/decorative-border.b2f3c4d6634fb79d.png" alt="" role="presentation">
```
**Funkciniai vaizdai** veikia kaip mygtukai ar valdymo elementai:
@ -1066,7 +1066,7 @@ Kiekvienas jūsų svetainės vaizdas turi paskirtį. Supratimas apie ją padeda
**Sudėtingi vaizdai** grafikai, schemos, infografika:
```html
<img src="../../../../translated_images/complex-chart.c831f461a363b446.lt.png" alt="Quarterly sales data" aria-describedby="chart-description">
<img src="../../../../translated_images/lt/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 @@ Kiekvienas jūsų svetainės vaizdas turi paskirtį. Supratimas apie ją padeda
<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.lt.png" alt="Website traffic increased 40% after accessibility improvements">
<img src="../../../../translated_images/lt/small-chart.c50c7b1bbcce43d8.png" alt="Website traffic increased 40% after accessibility improvements">
</picture>
```

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript pagrindai: duomenų tipai
![JavaScript pagrindai - duomenų tipai](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.lt.png)
![JavaScript pagrindai - duomenų tipai](../../../../translated_images/lt/webdev101-js-datatypes.4cc470179730702c.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript pagrindai: metodai ir funkcijos
![JavaScript pagrindai funkcijos](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.lt.png)
![JavaScript pagrindai funkcijos](../../../../translated_images/lt/webdev101-js-functions.be049c4726e94f8b.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript pagrindai: sprendimų priėmimas
![JavaScript pagrindai - sprendimų priėmimas](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.lt.png)
![JavaScript pagrindai - sprendimų priėmimas](../../../../translated_images/lt/webdev101-js-decisions.69e1b20f272dd1f0.png)
> Sketchnote autoriaus [Tomomi Imura](https://twitter.com/girlie_mac)

@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
-->
# JavaScript pagrindai: masyvai ir ciklai
![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.lt.png)
![JavaScript Basics - Arrays](../../../../translated_images/lt/webdev101-js-arrays.439d7528b8a29455.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid

@ -25,7 +25,7 @@ journey
Pagerinti prieinamumą: 5: Studentas
Sukurti terariumą: 5: Studentas
```
![Įvadas į HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.lt.png)
![Įvadas į HTML](../../../../translated_images/lt/webdev101-html.4389c2067af68e98.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
HTML arba HyperText Markup Language yra kiekvieno jūsų lankyto interneto svetainės pagrindas. Galvokite apie HTML kaip apie skeletą, kuris suteikia struktūrą tinklalapiams jis apibrėžia, kur dedamas turinys, kaip jis organizuotas ir ką kiekvienas elementas reiškia. Nors CSS vėliau „papuoš“ jūsų HTML spalvomis ir išdėstymu, o JavaScript suteiks jam gyvybės su interaktyvumu, HTML suteikia būtiną struktūrą, dėl kurios visa kita tampa įmanoma.
@ -86,7 +86,7 @@ Sukursite atskirą aplanką savo terariumo projektui ir pridėsite pirmąjį HTM
4. „Explorer“ lange spauskite „New File“ ikoną
5. Pavadinkite savo failą `index.html`
![VS Code Explorer rodo naujo failo kūrimą](../../../../translated_images/vs-code-index.e2986cf919471eb9.lt.png)
![VS Code Explorer rodo naujo failo kūrimą](../../../../translated_images/lt/vs-code-index.e2986cf919471eb9.png)
**Variantas 2: Naudojant terminalo komandas**
```bash
@ -236,48 +236,48 @@ Dabar pridėkite augalų paveikslėlius, organizuotus dviejuose stulpeliuose tar
<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.lt.png" />
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/lt/plant1.d87946a2ca70cc43.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad89.lt.png" />
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/lt/plant2.8daa1606c9c1ad89.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a7.lt.png" />
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/lt/plant3.8b0d484381a2a2a7.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2.lt.png" />
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/lt/plant4.656e16ae1df37be2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebcc.lt.png" />
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/lt/plant5.2b41b9355f11ebcc.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b656994.lt.png" />
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/lt/plant6.3d1827d03b656994.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621.lt.png" />
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/lt/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.lt.png" />
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/lt/plant8.38d6428174ffa850.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc2.lt.png" />
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/lt/plant9.f0e38d3327c37fc2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f.lt.png" />
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/lt/plant10.b159d6d6e985595f.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84e.lt.png" />
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/lt/plant11.2a03a1c2ec8ea84e.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3.lt.png" />
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/lt/plant12.60e9b53e538fbaf3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf5.lt.png" />
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/lt/plant13.07a51543c820bcf5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba.lt.png" />
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/lt/plant14.6e486371ba7d36ba.png" />
</div>
</div>
</div>

@ -29,7 +29,7 @@ journey
Reaguojantis dizainas: 5: Studentas
Stiklo atspindžiai: 5: Studentas
```
![Įvadas į CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.lt.png)
![Įvadas į CSS](../../../../translated_images/lt/webdev101-css.3f7af5991bf53a20.png)
> Sketchnote autorius [Tomomi Imura](https://twitter.com/girlie_mac)
Prisimeni, kaip tavo HTML terrariumas atrodė gana paprastai? CSS yra ta vieta, kur mes tą paprastą struktūrą paverčiame vizualiai patrauklia.
@ -202,7 +202,7 @@ body {
Atidaryk naršyklės kūrėjų įrankius (F12), eik į "Elements" skiltį ir apžiūrėk savo `<h1>` elementą. Pamatysi, kad jis paveldi šrifto šeimą iš body:
![paveldėtas šriftas](../../../../translated_images/1.cc07a5cbe114ad1d.lt.png)
![paveldėtas šriftas](../../../../translated_images/lt/1.cc07a5cbe114ad1d.png)
**Eksperimentas**: Išbandyk nustatyti kitas paveldimas savybes ant `<body>`, kaip `color`, `line-height` arba `text-align`. Kas nutinka tavo antraštei ir kitiems elementams?
@ -332,7 +332,7 @@ Mūsų terrariume kiekvienam augalui reikia panašaus stilizavimo, bet kartu kie
**Štai HTML struktūra kiekvienam augalui:**
```html
<div class="plant-holder">
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f.lt.png" />
<img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/lt/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Pasiruošę pagerinti savo terrariumą realistiškais stiklo atspindžiais? Ši
Kursite subtilius šviesos žiburius, imituojančius, kaip šviesa atsispindi nuo stiklo paviršių. Šis būdas panašus į tai, kaip Renesanso tapytojai, pvz., Jan van Eyck, naudojo šviesą ir atspindžius, kad nudažytas stiklas atrodytų trimatis. Štai ko siekiate:
![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.lt.png)
![finished terrarium](../../../../translated_images/lt/terrarium-final.2f07047ffc597d0a.png)
**Jūsų iššūkis:**
- **Sukurkite** subtilias baltas ar šviesias ovalo formos dėmes stiklo atspindžiams

Loading…
Cancel
Save