diff --git a/translations/he/6-space-game/2-drawing-to-canvas/README.md b/translations/he/6-space-game/2-drawing-to-canvas/README.md index e5266e970..d946fd50b 100644 --- a/translations/he/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/he/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![הרשת של הקנבס](../../../../translated_images/canvas_grid.5f209da785ded492.he.png) +![הרשת של הקנבס](../../../../translated_images/he/canvas_grid.5f209da785ded492.png) > תמונה מ-[MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) כדי לצייר על אלמנט הקנבס, תעקבו אחר אותו תהליך בן שלושה שלבים שמרכיב את הבסיס לכל גרפיקת הקנבס. ברגע שתעשו זאת כמה פעמים, זה יהפוך לטבע שני: @@ -329,11 +329,11 @@ flowchart TD - ספינת גיבור - ![ספינת גיבור](../../../../translated_images/player.dd24c1afa8c71e9b.he.png) + ![ספינת גיבור](../../../../translated_images/he/player.dd24c1afa8c71e9b.png) - 5*5 מפלצות - ![ספינת מפלצת](../../../../translated_images/enemyShip.5df2a822c16650c2.he.png) + ![ספינת מפלצת](../../../../translated_images/he/enemyShip.5df2a822c16650c2.png) ### צעדים מומלצים להתחלת הפיתוח @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { התוצאה הסופית צריכה להיראות כך: -![מסך שחור עם גיבור ו-5*5 מפלצות](../../../../translated_images/partI-solution.36c53b48c9ffae2a.he.png) +![מסך שחור עם גיבור ו-5*5 מפלצות](../../../../translated_images/he/partI-solution.36c53b48c9ffae2a.png) ## פתרון diff --git a/translations/he/6-space-game/5-keeping-score/README.md b/translations/he/6-space-game/5-keeping-score/README.md index 390d8db81..119c00abb 100644 --- a/translations/he/6-space-game/5-keeping-score/README.md +++ b/translations/he/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **מערכת ניקוד**: כל ספינת אויב שהושמדה מזכה ב-100 נקודות (מספרים עגולים קלים יותר לחישוב מנטלי עבור השחקנים). הניקוד יוצג בפינה השמאלית התחתונה. -- **מונה חיים**: הגיבור שלכם מתחיל עם שלושה חיים - סטנדרט שנקבע על ידי משחקי ארקייד מוקדמים כדי לאזן בין אתגר לבין יכולת משחק. כל התנגשות עם אויב תעלה בחיים אחד. נציג את מספר החיים הנותרים בפינה הימנית התחתונה באמצעות אייקונים של חלליות ![life image](../../../../translated_images/life.6fb9f50d53ee0413.he.png). +- **מונה חיים**: הגיבור שלכם מתחיל עם שלושה חיים - סטנדרט שנקבע על ידי משחקי ארקייד מוקדמים כדי לאזן בין אתגר לבין יכולת משחק. כל התנגשות עם אויב תעלה בחיים אחד. נציג את מספר החיים הנותרים בפינה הימנית התחתונה באמצעות אייקונים של חלליות ![life image](../../../../translated_images/he/life.6fb9f50d53ee0413.png). ## בואו נתחיל לבנות! diff --git a/translations/he/7-bank-project/2-forms/README.md b/translations/he/7-bank-project/2-forms/README.md index e75895b76..ff9d3312f 100644 --- a/translations/he/7-bank-project/2-forms/README.md +++ b/translations/he/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. שימו לב לשינויים בשורת הכתובת של הדפדפן שלכם 3. שימו לב כיצד הדף נטען מחדש והנתונים מופיעים בכתובת ה-URL -![צילום מסך של שינוי כתובת ה-URL בדפדפן לאחר לחיצה על כפתור הרשמה](../../../../translated_images/click-register.e89a30bf0d4bc9ca.he.png) +![צילום מסך של שינוי כתובת ה-URL בדפדפן לאחר לחיצה על כפתור הרשמה](../../../../translated_images/he/click-register.e89a30bf0d4bc9ca.png) ### השוואת שיטות HTTP @@ -350,7 +350,7 @@ graph TD 2. **לחצו** על כפתור "צור חשבון" 3. **שימו לב** לתגובת השרת בדפדפן שלכם -![חלון דפדפן בכתובת localhost:5000/api/accounts, מציג מחרוזת JSON עם נתוני משתמש](../../../../translated_images/form-post.61de4ca1b964d91a.he.png) +![חלון דפדפן בכתובת localhost:5000/api/accounts, מציג מחרוזת JSON עם נתוני משתמש](../../../../translated_images/he/form-post.61de4ca1b964d91a.png) **מה שאתם אמורים לראות:** - **הדפדפן מפנה** לכתובת ה-URL של נקודת הקצה של ה-API @@ -575,7 +575,7 @@ async function register() { 3. **לחץ** על "צור חשבון" 4. **צפה** בהודעות הקונסולה ובמשוב למשתמש -![צילום מסך המציג הודעת לוג בקונסולת הדפדפן](../../../../translated_images/browser-console.efaf0b51aaaf6778.he.png) +![צילום מסך המציג הודעת לוג בקונסולת הדפדפן](../../../../translated_images/he/browser-console.efaf0b51aaaf6778.png) **מה אתה אמור לראות:** - **מצב טעינה** מופיע על כפתור השליחה @@ -750,7 +750,7 @@ input:focus:invalid { 3. **נסה** תווים מיוחדים בשדה שם המשתמש 4. **הכנס** סכום יתרה שלילי -![צילום מסך המציג שגיאת ולידציה בעת ניסיון לשלוח את הטופס](../../../../translated_images/validation-error.8bd23e98d416c22f.he.png) +![צילום מסך המציג שגיאת ולידציה בעת ניסיון לשלוח את הטופס](../../../../translated_images/he/validation-error.8bd23e98d416c22f.png) **מה תבחין:** - **הדפדפן מציג** הודעות ולידציה מקוריות @@ -892,7 +892,7 @@ timeline הנה דוגמה לאיך עמוד ההתחברות הסופי יכול להיראות לאחר קצת עיצוב: -![צילום מסך של עמוד ההתחברות לאחר הוספת סגנונות CSS](../../../../translated_images/result.96ef01f607bf856a.he.png) +![צילום מסך של עמוד ההתחברות לאחר הוספת סגנונות CSS](../../../../translated_images/he/result.96ef01f607bf856a.png) ## חידון לאחר ההרצאה diff --git a/translations/he/7-bank-project/3-data/README.md b/translations/he/7-bank-project/3-data/README.md index 29610402e..aa34b9d07 100644 --- a/translations/he/7-bank-project/3-data/README.md +++ b/translations/he/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![תהליך עדכון באפליקציה מרובת עמודים](../../../../translated_images/mpa.7f7375a1a2d4aa77.he.png) +![תהליך עדכון באפליקציה מרובת עמודים](../../../../translated_images/he/mpa.7f7375a1a2d4aa77.png) **למה הגישה הזו הרגישה מסורבלת:** - כל לחיצה דרשה בנייה מחדש של כל העמוד מאפס @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![תהליך עדכון באפליקציה עמוד יחיד](../../../../translated_images/spa.268ec73b41f992c2.he.png) +![תהליך עדכון באפליקציה עמוד יחיד](../../../../translated_images/he/spa.268ec73b41f992c2.png) **למה אפליקציות SPA מרגישות כל כך טוב:** - רק החלקים שבאמת השתנו מתעדכנים (חכם, נכון?) @@ -523,7 +523,7 @@ if (data.error) { עכשיו כשאתה בודק עם חשבון לא חוקי, תראה הודעת שגיאה מועילה ממש על הדף! -![צילום מסך שמראה את הודעת השגיאה המוצגת במהלך ההתחברות](../../../../translated_images/login-error.416fe019b36a6327.he.png) +![צילום מסך שמראה את הודעת השגיאה המוצגת במהלך ההתחברות](../../../../translated_images/he/login-error.416fe019b36a6327.png) #### שלב 4: להיות כוללני עם נגישות @@ -764,7 +764,7 @@ timeline כך יכול להיראות לוח בקרה מלוטש: -![צילום מסך של תוצאה לדוגמה של לוח הבקרה לאחר עיצוב](../../../../translated_images/screen2.123c82a831a1d14a.he.png) +![צילום מסך של תוצאה לדוגמה של לוח הבקרה לאחר עיצוב](../../../../translated_images/he/screen2.123c82a831a1d14a.png) אל תרגיש שאתה חייב להתאים בדיוק לזה - השתמש בזה כהשראה ויצר משהו ייחודי משלך! diff --git a/translations/he/7-bank-project/4-state-management/README.md b/translations/he/7-bank-project/4-state-management/README.md index bef64259b..3751ad7a9 100644 --- a/translations/he/7-bank-project/4-state-management/README.md +++ b/translations/he/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap במקום לרדוף אחרי הזנב שלנו, אנחנו הולכים ליצור מערכת **ניהול מצב מרכזית**. תחשוב על זה כמו שיש אדם אחד מאוד מאורגן שאחראי על כל הדברים החשובים: -![סכימה שמראה את זרימת הנתונים בין ה-HTML, פעולות המשתמש והמצב](../../../../translated_images/data-flow.fa2354e0908fecc8.he.png) +![סכימה שמראה את זרימת הנתונים בין ה-HTML, פעולות המשתמש והמצב](../../../../translated_images/he/data-flow.fa2354e0908fecc8.png) ```mermaid flowchart TD @@ -804,7 +804,7 @@ timeline הנה דוגמה לתוצאה לאחר השלמת המשימה: -![צילום מסך המציג דוגמה לדיאלוג "הוסף עסקה"](../../../../translated_images/dialog.93bba104afeb79f1.he.png) +![צילום מסך המציג דוגמה לדיאלוג "הוסף עסקה"](../../../../translated_images/he/dialog.93bba104afeb79f1.png) --- diff --git a/translations/he/7-bank-project/4-state-management/assignment.md b/translations/he/7-bank-project/4-state-management/assignment.md index c2c9b9955..f71db326a 100644 --- a/translations/he/7-bank-project/4-state-management/assignment.md +++ b/translations/he/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **תוצאה צפויה:** לאחר השלמת המשימה, אפליקציית הבנקאות שלכם צריכה לכלול תכונת "הוספת עסקה" פונקציונלית לחלוטין שנראית ומתנהגת באופן מקצועי: -![צילום מסך המציג דוגמה לדיאלוג "הוספת עסקה"](../../../../translated_images/dialog.93bba104afeb79f1.he.png) +![צילום מסך המציג דוגמה לדיאלוג "הוספת עסקה"](../../../../translated_images/he/dialog.93bba104afeb79f1.png) ## בדיקת היישום שלכם diff --git a/translations/he/7-bank-project/README.md b/translations/he/7-bank-project/README.md index 7f8b923c8..d7987b812 100644 --- a/translations/he/7-bank-project/README.md +++ b/translations/he/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: בפרויקט הזה תלמדו איך לבנות בנק פיקטיבי. השיעורים כוללים הוראות על איך לעצב אפליקציית ווב ולספק נתיבים, לבנות טפסים, לנהל מצב, ולמשוך נתונים מ-API שממנו תוכלו לקבל את נתוני הבנק. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.he.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.he.png) | +| ![Screen1](../../../translated_images/he/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/he/screen2.123c82a831a1d14a.png) | |--------------------------------|--------------------------------| ## שיעורים diff --git a/translations/he/8-code-editor/1-using-a-code-editor/README.md b/translations/he/8-code-editor/1-using-a-code-editor/README.md index 93f775e99..4011ceb21 100644 --- a/translations/he/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/he/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev מביא את היכולות הללו לדפדפן שלכם: ברגע שהכל נטען, תראו סביבת עבודה נקייה ומעוצבת שנועדה לשמור אתכם ממוקדים במה שחשוב – הקוד שלכם! -![ממשק ברירת המחדל של VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.he.png) +![ממשק ברירת המחדל של VSCode.dev](../../../../translated_images/he/default-vscode-dev.5d06881d65c1b323.png) **הנה סיור בשכונה:** - **סרגל הפעילות** (הפס בצד שמאל): הניווט הראשי שלכם עם Explorer 📁, חיפוש 🔍, בקרת מקור 🌿, הרחבות 🧩 והגדרות ⚙️ @@ -233,7 +233,7 @@ flowchart TB 1. גשו ל-[vscode.dev](https://vscode.dev) אם אתם לא שם כבר 2. חפשו את כפתור "Open Remote Repository" במסך הפתיחה ולחצו עליו - ![פתיחת מאגר מרחוק](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.he.png) + ![פתיחת מאגר מרחוק](../../../../translated_images/he/open-remote-repository.bd9c2598b8949e7f.png) 3. הדביקו כל כתובת URL של מאגר GitHub (נסו את זו: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. לחצו Enter וצפו בקסם קורה! @@ -242,7 +242,7 @@ flowchart TB רוצים להרגיש כמו קוסמי קוד? נסו את קיצור הדרך הזה במקלדת: Ctrl+Shift+P (או Cmd+Shift+P במק) לפתיחת Command Palette: -![תפריט Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.he.png) +![תפריט Command Palette](../../../../translated_images/he/palette-menu.4946174e07f42622.png) **Command Palette הוא כמו מנוע חיפוש לכל מה שאפשר לעשות:** - הקלידו "open remote" והוא ימצא עבורכם את פותחן המאגרים @@ -304,7 +304,7 @@ flowchart TB 3. הזינו את שם הקובץ כולל הסיומת המתאימה (`style.css`, `script.js`, `index.html`) 4. לחצו Enter כדי ליצור את הקובץ -![יצירת קובץ חדש](../../../../translated_images/create-new-file.2814e609c2af9aeb.he.png) +![יצירת קובץ חדש](../../../../translated_images/he/create-new-file.2814e609c2af9aeb.png) **כללי שמות:** - השתמשו בשמות תיאוריים שמצביעים על מטרת הקובץ @@ -322,7 +322,7 @@ flowchart TB 2. התחילו להקליד וצפו ב-VSCode.dev עוזר לכם עם צבעים, הצעות וזיהוי שגיאות 3. שמרו את העבודה שלכם עם Ctrl+S (Windows/Linux) או Cmd+S (Mac) – למרות שהוא שומר אוטומטית גם! -![עריכת קבצים ב-VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.he.png) +![עריכת קבצים ב-VSCode.dev](../../../../translated_images/he/edit-a-file.52c0ee665ef19f08.png) **הדברים המגניבים שקורים בזמן שאתם מקודדים:** - הקוד שלכם מקבל צבעים יפים כך שקל לקרוא אותו @@ -343,7 +343,7 @@ flowchart TB 2. קבצים ששונו מופיעים בקטע "Changes" 3. קידוד צבעים מציין סוגי שינויים: ירוק לתוספות, אדום למחיקות -![צפייה בשינויים בבקרת מקור](../../../../translated_images/working-tree.c58eec08e6335c79.he.png) +![צפייה בשינויים בבקרת מקור](../../../../translated_images/he/working-tree.c58eec08e6335c79.png) **שמירת העבודה שלכם (זרימת העבודה של commit):** @@ -438,7 +438,7 @@ mindmap 2. חפש או עיין במשהו ספציפי 3. לחץ על כל דבר שנראה מעניין כדי ללמוד עליו יותר -![ממשק שוק ההרחבות](../../../../translated_images/extensions.eca0e0c7f59a10b5.he.png) +![ממשק שוק ההרחבות](../../../../translated_images/he/extensions.eca0e0c7f59a10b5.png) **מה תראה שם:** @@ -491,7 +491,7 @@ mindmap 3. בחר "הגדרות הרחבה" מהתפריט הנפתח 4. התאם דברים עד שהם מרגישים בדיוק נכון לעבודה שלך -![התאמת הגדרות הרחבה](../../../../translated_images/extension-settings.21c752ae4f4cdb78.he.png) +![התאמת הגדרות הרחבה](../../../../translated_images/he/extension-settings.21c752ae4f4cdb78.png) **דברים נפוצים שתרצה להתאים:** - איך הקוד שלך מעוצב (טאבים מול רווחים, אורך שורה וכו') diff --git a/translations/he/8-code-editor/1-using-a-code-editor/assignment.md b/translations/he/8-code-editor/1-using-a-code-editor/assignment.md index bf2c8ccf7..3d7ff6846 100644 --- a/translations/he/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/he/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **כתוב** הודעת commit: "Add initial HTML structure" 5. **לחץ** "Commit new file" כדי לשמור את השינויים שלך -![יצירת קובץ ראשוני ב-GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.he.png) +![יצירת קובץ ראשוני ב-GitHub](../../../../translated_images/he/new-file-github.com.c886796d800e8056.png) **הנה מה שההגדרה הראשונית הזו משיגה:** - **מבססת** מבנה מסמך HTML5 נכון עם אלמנטים סמנטיים @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **אינדיקטור הצלחה**: אתה אמור לראות את קבצי הפרויקט שלך בסרגל הצד של Explorer ואת `index.html` זמין לעריכה באזור העורך הראשי. -![פרויקט נטען ב-VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.he.png) +![פרויקט נטען ב-VSCode.dev](../../../../translated_images/he/project-on-vscode.dev.e79815a9a95ee7fe.png) **מה שתראה בממשק:** - **סרגל הצד של Explorer**: **מציג** את קבצי המאגר שלך ומבנה התיקיות @@ -448,7 +448,7 @@ li:before { **תוצאות מיידיות לאחר ההתקנה:** לאחר התקנת CodeSwing, תראה תצוגה מקדימה חיה של אתר הקורות חיים שלך מופיעה בעורך. זה מאפשר לך לראות בדיוק איך האתר שלך נראה בזמן שאתה מבצע שינויים. -![תוסף CodeSwing מציג תצוגה מקדימה חיה](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.he.png) +![תוסף CodeSwing מציג תצוגה מקדימה חיה](../../../../translated_images/he/after-codeswing-extension-pb.0ebddddcf73b5509.png) **הבנת הממשק המשופר:** - **תצוגה מפוצלת**: **מציגה** את הקוד שלך בצד אחד ואת התצוגה המקדימה בצד השני diff --git a/translations/he/9-chat-project/README.md b/translations/he/9-chat-project/README.md index 81a54c6b5..4284fe896 100644 --- a/translations/he/9-chat-project/README.md +++ b/translations/he/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) כך ייראה הפרויקט המוגמר שלכם: -![ממשק אפליקציית צ'אט המציג שיחה בין משתמש לעוזר AI](../../../translated_images/screenshot.0a1ee0d123df681b.he.png) +![ממשק אפליקציית צ'אט המציג שיחה בין משתמש לעוזר AI](../../../translated_images/he/screenshot.0a1ee0d123df681b.png) ## 🗺️ מסע הלמידה שלכם בפיתוח אפליקציות AI @@ -194,7 +194,7 @@ mindmap **עיקרון מרכזי**: פיתוח אפליקציות AI משלב כישורי פיתוח אינטרנט מסורתיים עם אינטגרציית שירותי AI, ליצירת אפליקציות חכמות שמרגישות טבעיות ומגיבות למשתמשים. -![ממשק GitHub Models AI Playground עם בחירת מודלים ואזור בדיקה](../../../translated_images/playground.d2b927122224ff8f.he.png) +![ממשק GitHub Models AI Playground עם בחירת מודלים ואזור בדיקה](../../../translated_images/he/playground.d2b927122224ff8f.png) **מה הופך את ה-Playground לכל כך שימושי:** - **נסו** מודלים שונים של AI כמו GPT-4o-mini, Claude ואחרים (כולם חינמיים!) @@ -204,7 +204,7 @@ mindmap אחרי שתשחקו קצת, פשוט לחצו על לשונית "Code" ובחרו את שפת התכנות שלכם כדי לקבל את קוד היישום שתצטרכו. -![בחירת Playground המציגה אפשרויות יצירת קוד לשפות תכנות שונות](../../../translated_images/playground-choice.1d23ba7d407f4758.he.png) +![בחירת Playground המציגה אפשרויות יצירת קוד לשפות תכנות שונות](../../../translated_images/he/playground-choice.1d23ba7d407f4758.png) ## הגדרת אינטגרציה בצד השרת עם Python @@ -2333,14 +2333,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.he.png) +![ממשק יצירה מתבנית המציג את כפתור "Use this template" הירוק](../../../translated_images/he/template.67ad477109d29a2b.png) **שלב 2: הפעלת Codespaces** - **פתח** את המאגר החדש שיצרת - **לחץ** על כפתור "Code" הירוק ובחר "Codespaces" - **בחר** "Create codespace on main" כדי להתחיל את סביבת הפיתוח שלך -![ממשק יצירת Codespace עם אפשרויות להפעלת סביבת פיתוח בענן](../../../translated_images/codespace.bcecbdf5d2747d3d.he.png) +![ממשק יצירת Codespace עם אפשרויות להפעלת סביבת פיתוח בענן](../../../translated_images/he/codespace.bcecbdf5d2747d3d.png) **שלב 3: הגדרת הסביבה** ברגע ש-Codespace נטען, תהיה לך גישה ל: diff --git a/translations/he/README.md b/translations/he/README.md index 553d3961e..ee4cac308 100644 --- a/translations/he/README.md +++ b/translations/he/README.md @@ -52,13 +52,13 @@ CO_OP_TRANSLATOR_METADATA: בקרו ב-[https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) כדי להתחיל! -![Background](../../translated_images/background.148a8d43afde5730.he.png) +![Background](../../translated_images/he/background.148a8d43afde5730.png) - שיעורים המכסים הכל מהבסיס ועד RAG. - אינטראקציה עם דמויות היסטוריות באמצעות GenAI והאפליקציה המלווית שלנו. - נרטיב מהנה ומרתק, שבו תטיילו בזמן! -![character](../../translated_images/character.5c0dd8e067ffd693.he.png) +![character](../../translated_images/he/character.5c0dd8e067ffd693.png) כל שיעור כולל משימה להשלמה, בדיקת ידע ואתגר להנחות אתכם בנושאים כמו: - הוראות והנדסת הוראות @@ -94,7 +94,7 @@ CO_OP_TRANSLATOR_METADATA: בעותק שלכם של מאגר זה שיצרתם, לחצו על כפתור **Code** ובחרו **Open with Codespaces**. פעולה זו תיצור Codespace חדש עבור עבודה בו. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.he.png) +![Codespace](../../translated_images/he/createcodespace.0238bbf4d7a8d955.png) #### הרצת התוכנית מקומית במחשב diff --git a/translations/he/for-teachers.md b/translations/he/for-teachers.md index f89473fda..5098d4ed2 100644 --- a/translations/he/for-teachers.md +++ b/translations/he/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - ל-Moodle Cloud יש תמיכה מוגבלת ב-Common Cartridge. העדיפו את קובץ Moodle לעיל, שניתן גם להעלות ל-Canvas. - לאחר הייבוא, בדקו מודולים, תאריכי יעד והגדרות מבחנים כדי להתאים ללוח הזמנים של הסמסטר שלכם. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.he.png) +![Moodle](../../translated_images/he/moodle.94eb93d714a50cb2.png) > תוכנית הלימודים בכיתה של Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.he.png) +![Canvas](../../translated_images/he/canvas.fbd605ff8e5b8aff.png) > תוכנית הלימודים ב-Canvas ### שימוש במאגר ישירות (ללא Classroom) diff --git a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 8f8061e8d..732bba9ab 100644 --- a/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hi/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: आज, हम उन अद्भुत उपकरणों का अन्वेषण करने वाले हैं जो आधुनिक वेब विकास को न केवल संभव बनाते हैं, बल्कि अत्यधिक मजेदार भी। मैं बात कर रहा हूँ बिलकुल उन्हीं संपादकों, ब्राउज़रों, और वर्कफ़्लोज़ की जो नेटफ्लिक्स, स्पॉटिफाई, और आपके पसंदीदा इंडी ऐप स्टूडियो के डेवलपर हर दिन उपयोग करते हैं। और यहाँ वह हिस्सा है जो आपको खुश नाचने पर मजबूर कर देगा: इनमें से अधिकांश पेशेवर-ग्रेड, उद्योग-मानक उपकरण पूरी तरह से मुफ्त हैं! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.hi.png) +![Intro Programming](../../../../translated_images/hi/webdev101-programming.d6e3f98e61ac4bff.png) > स्केचक नोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hi/1-getting-started-lessons/2-github-basics/README.md b/translations/hi/1-getting-started-lessons/2-github-basics/README.md index cf4884a33..e982e2925 100644 --- a/translations/hi/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/hi/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: हम इस यात्रा को साथ-साथ कदम दर कदम तय करेंगे। कोई जल्दी नहीं, कोई दबाव नहीं – सिर्फ आप, मैं, और कुछ बहुत ही बढ़िया टूल्स जो आपके नए सबसे अच्छे दोस्त बनने वाले हैं! -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.hi.png) +![Intro to GitHub](../../../../translated_images/hi/webdev101-github.8846d7971abef6f9.png) > स्केचनोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ```mermaid @@ -606,7 +606,7 @@ flowchart TD ✅ 'beginner-friendly' रिपॉजिटरी खोजने का एक अच्छा तरीका है [‘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.hi.png) +![Copy a repo locally](../../../../translated_images/hi/clone_repo.5085c48d666ead57.png) कोड कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी के कंटेंट को "क्लोन" करना, HTTPS, SSH, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करके। diff --git a/translations/hi/1-getting-started-lessons/3-accessibility/README.md b/translations/hi/1-getting-started-lessons/3-accessibility/README.md index 415816495..2f583ffb1 100644 --- a/translations/hi/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/hi/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # सुलभ वेबपेज बनाना -![सभी के लिए सुलभता](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.hi.png) +![सभी के लिए सुलभता](../../../../translated_images/hi/webdev101-a11y.8ef3025c858d897a.png) > स्केचनोट: [टोमोमी इमुरा](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ pie title "सामान्य ARIA उपयोग पैटर्न" **सूचनात्मक छवियाँ** - महत्वपूर्ण जानकारी प्रदान करती हैं: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **सजावटी छवियाँ** - केवल दृश्यात्मक होती हैं, जिनमें कोई सूचना नहीं होती: ```html - + ``` **कार्यात्मक छवियाँ** - बटन या नियंत्रण के रूप में काम करती हैं: @@ -1066,7 +1066,7 @@ pie title "सामान्य ARIA उपयोग पैटर्न" **जटिल छवियाँ** - चार्ट, आरेख, इन्फोग्राफिक्स: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ pie title "सामान्य ARIA उपयोग पैटर्न" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/hi/2-js-basics/1-data-types/README.md b/translations/hi/2-js-basics/1-data-types/README.md index 9a53492db..510ace50a 100644 --- a/translations/hi/2-js-basics/1-data-types/README.md +++ b/translations/hi/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript मूल बातें: डेटा प्रकार -![JavaScript मूल बातें - डेटा प्रकार](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.hi.png) +![JavaScript मूल बातें - डेटा प्रकार](../../../../translated_images/hi/webdev101-js-datatypes.4cc470179730702c.png) > स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hi/2-js-basics/2-functions-methods/README.md b/translations/hi/2-js-basics/2-functions-methods/README.md index a6f821c63..c41ce09bf 100644 --- a/translations/hi/2-js-basics/2-functions-methods/README.md +++ b/translations/hi/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript बेसिक्स: मेथड्स और फंक्शन्स -![JavaScript बेसिक्स - फंक्शन्स](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.hi.png) +![JavaScript बेसिक्स - फंक्शन्स](../../../../translated_images/hi/webdev101-js-functions.be049c4726e94f8b.png) > स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hi/2-js-basics/3-making-decisions/README.md b/translations/hi/2-js-basics/3-making-decisions/README.md index 54c2571d7..d11c4bbaf 100644 --- a/translations/hi/2-js-basics/3-making-decisions/README.md +++ b/translations/hi/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript बुनियादी बातें: निर्णय लेना -![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.hi.png) +![JavaScript Basics - Making decisions](../../../../translated_images/hi/webdev101-js-decisions.69e1b20f272dd1f0.png) > स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/hi/2-js-basics/4-arrays-loops/README.md b/translations/hi/2-js-basics/4-arrays-loops/README.md index 6d016d484..d66f07269 100644 --- a/translations/hi/2-js-basics/4-arrays-loops/README.md +++ b/translations/hi/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript मूल बातें: Arrays और Loops -![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.hi.png) +![JavaScript Basics - Arrays](../../../../translated_images/hi/webdev101-js-arrays.439d7528b8a29455.png) > स्केचनोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ```mermaid diff --git a/translations/hi/3-terrarium/1-intro-to-html/README.md b/translations/hi/3-terrarium/1-intro-to-html/README.md index 27fa7081d..520814f14 100644 --- a/translations/hi/3-terrarium/1-intro-to-html/README.md +++ b/translations/hi/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![HTML का परिचय](../../../../translated_images/webdev101-html.4389c2067af68e98.hi.png) +![HTML का परिचय](../../../../translated_images/hi/webdev101-html.4389c2067af68e98.png) > स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) HTML, या हाइपरटेक्स्ट मार्कअप भाषा, हर उस वेबसाइट की नींव है जिसे आपने कभी देखा है। HTML को ऐसे समझें जैसे कंकाल जो वेब पेजों को संरचना देता है – यह निर्धारित करता है कि सामग्री कहाँ जाती है, यह कैसे संगठित है, और प्रत्येक भाग क्या दर्शाता है। जबकि बाद में CSS आपके HTML को रंग और लेआउट से "सजाएगा", और जावास्क्रिप्ट इसे इंटरैक्टिविटी के साथ जीवन में लाएगा, HTML वह मूल संरचना प्रदान करता है जो सब कुछ संभव बनाती है। @@ -86,7 +86,7 @@ HTML कोड में जाने से पहले, आइए अपन 4. एक्सप्लोरर पैन में, "New File" आइकन पर क्लिक करें 5. अपनी फ़ाइल का नाम `index.html` रखें -![VS Code एक्सप्लोरर नई फ़ाइल बनाने को दिखा रहा है](../../../../translated_images/vs-code-index.e2986cf919471eb9.hi.png) +![VS Code एक्सप्लोरर नई फ़ाइल बनाने को दिखा रहा है](../../../../translated_images/hi/vs-code-index.e2986cf919471eb9.png) **विकल्प 2: टर्मिनल कमांड का उपयोग करना** ```bash @@ -236,48 +236,48 @@ HTML में चित्र जोड़ने से पहले, आपक
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/hi/3-terrarium/2-intro-to-css/README.md b/translations/hi/3-terrarium/2-intro-to-css/README.md index 1a0352576..ebe877366 100644 --- a/translations/hi/3-terrarium/2-intro-to-css/README.md +++ b/translations/hi/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey उत्तरदायी डिजाइन: 5: Student ग्लास परावर्तक: 5: Student ``` -![CSS का परिचय](../../../../translated_images/webdev101-css.3f7af5991bf53a20.hi.png) +![CSS का परिचय](../../../../translated_images/hi/webdev101-css.3f7af5991bf53a20.png) > स्केचनोट द्वारा [टोमोमी इमुरा](https://twitter.com/girlie_mac) याद है आपका HTML टेरारियम कितना साधारण दिखता था? CSS वह जगह है जहाँ हम उस सादे ढांचे को कुछ और आकर्षक रूप में बदलते हैं। @@ -202,7 +202,7 @@ body { अपने ब्राउज़र के डेवलपर टूल्स (F12) खोलें, Elements टैब में जाएं, और अपने `

` एलिमेंट का निरीक्षण करें। आप देखेंगे कि यह बॉडी से फ़ॉन्ट परिवार विरासत में लेता है: -![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.hi.png) +![inherited font](../../../../translated_images/hi/1.cc07a5cbe114ad1d.png) ✅ **प्रयोग का समय**: बॉडी पर `color`, `line-height`, या `text-align` जैसे अन्य विरासत में मिलने वाले गुण सेट करके देखें। आपके हेडिंग और अन्य एलिमेंट्स पर क्या प्रभाव पड़ता है? @@ -332,7 +332,7 @@ ID सेलेक्टर्स `#` सिंबल का उपयोग क **यहाँ हर पौधे की HTML संरचना है:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ flowchart LR आप सूक्ष्म हाइलाइट बनाएंगे जो दिखाते हैं कि प्रकाश कैसे कांच की सतहों से परावर्तित होता है। यह तरीका पुनर्जागरण चित्रकार जन वैन ऐक की त्रि-आयामी कांच तस्वीरें बनाने के लिए प्रकाश और परावर्तन के उपयोग जैसा है। यह रहा आपका लक्ष्य: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.hi.png) +![finished terrarium](../../../../translated_images/hi/terrarium-final.2f07047ffc597d0a.png) **आपकी चुनौती:** - **बनाएं** कांच के परावर्तन के लिए सूक्ष्म सफेद या हल्के रंग के अंडाकार आकार diff --git a/translations/hi/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/hi/3-terrarium/3-intro-to-DOM-and-closures/README.md index c5d3d2ad2..12f11cdc9 100644 --- a/translations/hi/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/hi/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey कार्यक्षमता जांचें: 5: Student टेरियम पूरा करें: 5: Student ``` -![DOM और एक क्लोज़र](../../../../translated_images/webdev101-js.10280393044d7eaa.hi.png) +![DOM और एक क्लोज़र](../../../../translated_images/hi/webdev101-js.10280393044d7eaa.png) > स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac) वेब विकास के सबसे आकर्षक पहलुओं में से एक में आपका स्वागत है - चीज़ों को इंटरैक्टिव बनाना! डाक्यूमेंट ऑब्जेक्ट मॉडल (DOM) आपके HTML और JavaScript के बीच का पुल है, और आज हम इसका उपयोग आपके टेरियम को जीवन में लाने के लिए करेंगे। जब टिम बर्नर्स-ली ने पहला वेब ब्राउज़र बनाया, तो उन्होंने एक ऐसा वेब कल्पना किया जहाँ दस्तावेज़ गतिशील और इंटरैक्टिव हो सकते हैं - यही DOM उस दृष्टि को संभव बनाता है। @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM ट्री का प्रतिनिधित्व](../../../../translated_images/dom-tree.7daf0e763cbbba92.hi.png) +![DOM ट्री का प्रतिनिधित्व](../../../../translated_images/hi/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 ``` > 💡 **क्लोज़र्स को समझना**: क्लोज़र्स जावास्क्रिप्ट में एक महत्वपूर्ण विषय हैं, और कई डेवलपर्स उन्हें वर्षों तक उपयोग करते हैं इससे पहले कि वे सारे सैद्धांतिक पहलुओं को पूरी तरह समझें। आज, हम व्यावहारिक अनुप्रयोग पर ध्यान केंद्रित करेंगे - आप देखेंगे कि क्लोज़र्स प्राकृतिक रूप से हमारे इंटरैक्टिव फीचर्स बनाते समय उभरते हैं। समझ तब विकसित होगी जब आप देखेंगे कि वे वास्तविक समस्याओं को कैसे हल करते हैं। -![DOM ट्री का प्रतिनिधित्व](../../../../translated_images/dom-tree.7daf0e763cbbba92.hi.png) +![DOM ट्री का प्रतिनिधित्व](../../../../translated_images/hi/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.hi.png) +![finished terrarium](../../../../translated_images/hi/terrarium-final.0920f16e87c13a84.png) --- diff --git a/translations/hi/5-browser-extension/1-about-browsers/README.md b/translations/hi/5-browser-extension/1-about-browsers/README.md index b21f841f5..fa4cf8302 100644 --- a/translations/hi/5-browser-extension/1-about-browsers/README.md +++ b/translations/hi/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey मुद्दों का डिबग करें: 4: Student अनुभव को पॉलिश करें: 5: Student ``` -![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84a.hi.jpg) +![Browser sketchnote](../../../../translated_images/hi/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 में बनाया था। -![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.hi.jpg) +![early browsers](../../../../translated_images/hi/earlybrowsers.d984b711cdf3a42d.jpg) > कुछ शुरुआती ब्राउज़र्स, द्वारा [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### ब्राउज़र्स वेब सामग्री को कैसे प्रोसेस करते हैं @@ -194,7 +194,7 @@ quadrantChart एक्सटेंशन इंस्टॉलेशन प्रक्रिया को समझना आपको यह पूर्वानुमान लगाने में मदद करता है कि उपयोगकर्ता आपके एक्सटेंशन को इंस्टॉल करते समय क्या अनुभव करेंगे। इंस्टॉलेशन प्रक्रिया आधुनिक ब्राउज़रों में मानकीकृत है, इंटरफ़ेस डिज़ाइन में केवल मामूली अंतर होते हैं। -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.hi.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/hi/install-on-edge.d68781acaf0b3d3d.png) > **महत्वपूर्ण**: सुनिश्चित करें कि "डेवलपर मोड" चालू है और जब अपने एक्सटेंशन्स का परीक्षण कर रहे हों तो अन्य स्टोर से एक्सटेंशन्स की अनुमति दें। @@ -308,10 +308,10 @@ project-root/ ### एक्सटेंशन व्यूज़ का अवलोकन **सेटअप व्यू** - पहली बार उपयोगकर्ता की कॉन्फ़िगरेशन: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491.hi.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/hi/1.b6da8c1394b07491.png) **परिणाम व्यू** - कार्बन पदचिह्न डेटा प्रदर्शन: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff08042246.hi.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/hi/2.1dae52ff08042246.png) ### कॉन्फ़िगरेशन फॉर्म बनाना diff --git a/translations/hi/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/hi/5-browser-extension/2-forms-browsers-local-storage/README.md index f6155de50..16d363a59 100644 --- a/translations/hi/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/hi/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: सहेजा गया डेटा हटाएँ ClearStorage --> FirstTime: सेटअप पर वापस जाएं ``` -![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.hi.png) +![Local storage pane](../../../../translated_images/hi/localstorage.472f8147b6a3f8d1.png) > ⚠️ **सुरक्षा विचार**: प्रोडक्शन एप्लिकेशन में API कुंजी लोकलस्टोरेज में रखना सुरक्षा जोखिम पैदा करता है क्योंकि जावास्क्रिप्ट इस डेटा तक पहुँच सकता है। सीखने के लिए यह ठीक है, लेकिन असली एप्लिकेशन संवेदनशील क्रेडेंशियल्स के लिए सुरक्षित सर्वर-साइड स्टोरेज का उपयोग करना चाहिए। diff --git a/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md index d37108985..00bc71b9c 100644 --- a/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/hi/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR आइए इसे आज़माएँ। कोई वेबसाइट खोलें (Microsoft.com अच्छा विकल्प है) और 'रिकॉर्ड' बटन पर क्लिक करें। अब पेज रिफ्रेश करें और प्रोफाइलर को सब कुछ कैप्चर करते देखें। जब आप रिकॉर्डिंग बंद करेंगे, तो आपको ब्राउज़र के 'स्क्रिप्ट', 'रेंडर' और 'पेंट' करने के विस्तृत विवरण दिखाई देंगे। यह मुझे याद दिलाता है कि कैसे मिशन कंट्रोल एक रॉकेट लॉन्च के दौरान हर सिस्टम की निगरानी करता है - आपको वास्तविक समय के डेटा मिलते हैं कि क्या हो रहा है और कब। -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.hi.png) +![Edge profiler](../../../../translated_images/hi/profiler.5a4a62479c5df01c.png) ✅ [Microsoft Documentation](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.hi.png) +![Edge profiler snapshot](../../../../translated_images/hi/snapshot.97750180ebcad737.png) देखें कि ईवेंट लॉग पैनल में कोई घटना 15 मिलीसेकंड से अधिक समय तो नहीं ले रही है: -![Edge event log](../../../../translated_images/log.804026979f3707e0.hi.png) +![Edge event log](../../../../translated_images/hi/log.804026979f3707e0.png) ✅ अपने प्रोफाइलर को जानें! इस साइट पर डेवलपर टूल खोलें और देखें कि क्या कोई बाधा है। सबसे धीमा लोड होने वाला संसाधन कौन सा है? सबसे तेज़? diff --git a/translations/hi/6-space-game/2-drawing-to-canvas/README.md b/translations/hi/6-space-game/2-drawing-to-canvas/README.md index aad1297aa..87ad73da8 100644 --- a/translations/hi/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/hi/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![कैनवास का ग्रिड](../../../../translated_images/canvas_grid.5f209da785ded492.hi.png) +![कैनवास का ग्रिड](../../../../translated_images/hi/canvas_grid.5f209da785ded492.png) > छवि [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से कैनवास तत्व पर ड्रॉ करने के लिए, आप तीन चरणों की प्रक्रिया का पालन करेंगे जो सभी कैनवास ग्राफिक्स की नींव है। जब आप इसे कुछ बार करते हैं, तो यह सहज हो जाता है: @@ -323,11 +323,11 @@ flowchart TD - हीरो जहाज़ - ![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b.hi.png) + ![Hero ship](../../../../translated_images/hi/player.dd24c1afa8c71e9b.png) - 5*5 दानव - ![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2.hi.png) + ![Monster ship](../../../../translated_images/hi/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.hi.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/hi/partI-solution.36c53b48c9ffae2a.png) ## समाधान diff --git a/translations/hi/6-space-game/5-keeping-score/README.md b/translations/hi/6-space-game/5-keeping-score/README.md index 60a9ee5a7..6d5259706 100644 --- a/translations/hi/6-space-game/5-keeping-score/README.md +++ b/translations/hi/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **स्कोरिंग सिस्टम**: हर नष्ट किए गए शत्रु जहाज के लिए 100 अंक मिलते हैं (गोल संख्याएं खिलाड़ियों के लिए मानसिक गणना में आसान होती हैं)। स्कोर स्क्रीन के नीचे बाएं कोने में दिखेगा। -- **जीवन काउंटर**: आपका नायक तीन जीवन के साथ शुरू होता है - यह एक मानक है जो शुरुआती आर्केड गेम्स द्वारा चुनौती और खेल योग्यता के बीच संतुलन बनाने हेतु स्थापित किया गया। हर बार शत्रु से टकराने पर एक जीवन कम हो जाता है। बचा हुआ जीवन नीचे दाएं कोने में जहाज के आइकनों के साथ दर्शाएंगे ![life image](../../../../translated_images/life.6fb9f50d53ee0413.hi.png)। +- **जीवन काउंटर**: आपका नायक तीन जीवन के साथ शुरू होता है - यह एक मानक है जो शुरुआती आर्केड गेम्स द्वारा चुनौती और खेल योग्यता के बीच संतुलन बनाने हेतु स्थापित किया गया। हर बार शत्रु से टकराने पर एक जीवन कम हो जाता है। बचा हुआ जीवन नीचे दाएं कोने में जहाज के आइकनों के साथ दर्शाएंगे ![life image](../../../../translated_images/hi/life.6fb9f50d53ee0413.png)। ## चलिए शुरू करते हैं! diff --git a/translations/hi/7-bank-project/1-template-route/README.md b/translations/hi/7-bank-project/1-template-route/README.md index 557f8fd0b..9ec2dfe00 100644 --- a/translations/hi/7-bank-project/1-template-route/README.md +++ b/translations/hi/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram `history.pushState` का उपयोग ब्राउज़र के नेविगेशन इतिहास में नई प्रविष्टियां बनाता है। आप इसे तब जांच सकते हैं जब आप ब्राउज़र के *बैक बटन* को दबाए रखें, यह आपको कुछ ऐसा दिखाना चाहिए: -![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e064.hi.png) +![Screenshot of navigation history](../../../../translated_images/hi/history.7fdabbafa521e064.png) यदि आप कुछ बार बैक बटन क्लिक करते हैं, तो आप देखेंगे कि वर्तमान URL बदल जाता है और इतिहास अपडेट होता है, लेकिन वही टेम्पलेट प्रदर्शित होता रहता है। diff --git a/translations/hi/7-bank-project/2-forms/README.md b/translations/hi/7-bank-project/2-forms/README.md index 0ee85715c..363bf9747 100644 --- a/translations/hi/7-bank-project/2-forms/README.md +++ b/translations/hi/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. अपने ब्राउज़र के एड्रेस बार में बदलाव देखें 3. देखें कि पेज कैसे रीलोड होता है और डेटा URL में आता है -![Register बटन पर क्लिक करने के बाद ब्राउज़र के URL में बदलाव का स्क्रीनशॉट](../../../../translated_images/click-register.e89a30bf0d4bc9ca.hi.png) +![Register बटन पर क्लिक करने के बाद ब्राउज़र के URL में बदलाव का स्क्रीनशॉट](../../../../translated_images/hi/click-register.e89a30bf0d4bc9ca.png) ### HTTP मेथड्स की तुलना @@ -346,7 +346,7 @@ graph TD 2. "Create Account" बटन पर क्लिक करें 3. अपने ब्राउज़र में सर्वर प्रतिक्रिया देखें -![localhost:5000/api/accounts एड्रेस पर ब्राउज़र विंडो, जिसमें उपयोगकर्ता डेटा के साथ JSON स्ट्रिंग दिखाई दे रही है](../../../../translated_images/form-post.61de4ca1b964d91a.hi.png) +![localhost:5000/api/accounts एड्रेस पर ब्राउज़र विंडो, जिसमें उपयोगकर्ता डेटा के साथ JSON स्ट्रिंग दिखाई दे रही है](../../../../translated_images/hi/form-post.61de4ca1b964d91a.png) **आपको क्या देखना चाहिए:** - ब्राउज़र API एंडपॉइंट URL पर रीडायरेक्ट करता है @@ -609,7 +609,7 @@ async function register() { 3. **"Create Account" क्लिक करें** 4. **कंसोल संदेशों और उपयोगकर्ता प्रतिक्रिया देखें** -![ब्राउज़र कंसोल में लॉग संदेश दिखाते स्क्रीनशॉट](../../../../translated_images/browser-console.efaf0b51aaaf6778.hi.png) +![ब्राउज़र कंसोल में लॉग संदेश दिखाते स्क्रीनशॉट](../../../../translated_images/hi/browser-console.efaf0b51aaaf6778.png) **आपको क्या देखना चाहिए:** - **लोडिंग स्टेट** सबमिट बटन पर दिखाई देता है @@ -783,7 +783,7 @@ input:focus:invalid { 3. **उपयोगकर्ता नाम फ़ील्ड में विशेष वर्ण आज़माएं** 4. **नकारात्मक शेष राशि दर्ज करें** -![फॉर्म सबमिट करने पर सत्यापन त्रुटि दिखाने वाला स्क्रीनशॉट](../../../../translated_images/validation-error.8bd23e98d416c22f.hi.png) +![फॉर्म सबमिट करने पर सत्यापन त्रुटि दिखाने वाला स्क्रीनशॉट](../../../../translated_images/hi/validation-error.8bd23e98d416c22f.png) **आप क्या देखेंगे:** - **ब्राउज़र स्वदेशी सत्यापन संदेश प्रदर्शित करता है** @@ -943,7 +943,7 @@ timeline यहां एक उदाहरण है कि अंतिम लॉगिन पृष्ठ कैसा दिख सकता है कुछ CSS स्टाइलिंग के बाद: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856a.hi.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/hi/result.96ef01f607bf856a.png) ## पोस्ट-लेक्चर क्विज़ diff --git a/translations/hi/7-bank-project/3-data/README.md b/translations/hi/7-bank-project/3-data/README.md index adcc03b38..8e6ee1ff0 100644 --- a/translations/hi/7-bank-project/3-data/README.md +++ b/translations/hi/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: पूर्ण HTML पृष्ठ लौटाता है Browser->>User: नया पृष्ठ दिखाता है (फ्लैश/रिलोड) ``` -![बहु-पृष्ठ एप्लिकेशन में अपडेट वर्कफ़्लो](../../../../translated_images/mpa.7f7375a1a2d4aa77.hi.png) +![बहु-पृष्ठ एप्लिकेशन में अपडेट वर्कफ़्लो](../../../../translated_images/hi/mpa.7f7375a1a2d4aa77.png) **यह तरीका क्यों बोझिल लगता था:** - हर क्लिक का मतलब था पूरा पेज फिर से बनाना @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: विशिष्ट पृष्ठ तत्वों को अपडेट करता है Browser->>User: अपडेट किया गया सामग्री दिखाता है (कोई पुनः लोड नहीं) ``` -![एक-पृष्ठ एप्लिकेशन में अपडेट वर्कफ़्लो](../../../../translated_images/spa.268ec73b41f992c2.hi.png) +![एक-पृष्ठ एप्लिकेशन में अपडेट वर्कफ़्लो](../../../../translated_images/hi/spa.268ec73b41f992c2.png) **SPAs क्यों बेहतर महसूस होते हैं:** - केवल वही भाग अपडेट होते हैं जो वास्तव में परिवर्तित हुए हैं (चतुर, है ना?) @@ -516,7 +516,7 @@ if (data.error) { अब जब आप अमान्य अकाउंट से परीक्षण करेंगे, तो आप पेज पर एक सहायक त्रुटि संदेश देखेंगे! -![लॉगिन के दौरान दिखाए जाने वाले त्रुटि संदेश का स्क्रीनशॉट](../../../../translated_images/login-error.416fe019b36a6327.hi.png) +![लॉगिन के दौरान दिखाए जाने वाले त्रुटि संदेश का स्क्रीनशॉट](../../../../translated_images/hi/login-error.416fe019b36a6327.png) #### चरण 4: पहुँच के लिए समावेशी होना @@ -950,7 +950,7 @@ timeline इस तरह एक सौंदर्यपूर्ण डैशबोर्ड दिख सकता है: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.hi.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/hi/screen2.123c82a831a1d14a.png) आपको इसे बिल्कुल मिलाने की आवश्यकता नहीं है - इसे प्रेरणा के रूप में लें और इसे अपना बनाएं! diff --git a/translations/hi/7-bank-project/4-state-management/README.md b/translations/hi/7-bank-project/4-state-management/README.md index 94afc3a21..8e6df94d7 100644 --- a/translations/hi/7-bank-project/4-state-management/README.md +++ b/translations/hi/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap हम अपनी पूंछ के पीछे दोड़ने के बजाय, एक **केद्रित स्टेट मैनेजमेंट** सिस्टम बनाएंगे। इसे ऐसे सोचिए जैसे एक बहुत ही व्यवस्थित व्यक्ति सभी महत्वपूर्ण चीज़ों का ज़िम्मा संभाल रहा हो: -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.hi.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/hi/data-flow.fa2354e0908fecc8.png) ```mermaid flowchart TD @@ -798,7 +798,7 @@ timeline असाइनमेंट पूरा करने के बाद यहाँ एक उदाहरण परिणाम है: -![“लेन-देन जोड़ें” डायलॉग दिखाने वाला स्क्रीनशॉट](../../../../translated_images/dialog.93bba104afeb79f1.hi.png) +![“लेन-देन जोड़ें” डायलॉग दिखाने वाला स्क्रीनशॉट](../../../../translated_images/hi/dialog.93bba104afeb79f1.png) --- diff --git a/translations/hi/7-bank-project/4-state-management/assignment.md b/translations/hi/7-bank-project/4-state-management/assignment.md index a0293b922..91b1e0903 100644 --- a/translations/hi/7-bank-project/4-state-management/assignment.md +++ b/translations/hi/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **अपेक्षित परिणाम:** इस असाइनमेंट को पूरा करने के बाद, आपका बैंकिंग ऐप पूरी तरह से कार्यात्मक "ट्रांजैक्शन जोड़ें" फीचर के साथ होना चाहिए जो पेशेवर रूप से दिखता और व्यवहार करता है: -![एक उदाहरण "ट्रांजैक्शन जोड़ें" संवाद दिखाते हुए स्क्रीनशॉट](../../../../translated_images/dialog.93bba104afeb79f1.hi.png) +![एक उदाहरण "ट्रांजैक्शन जोड़ें" संवाद दिखाते हुए स्क्रीनशॉट](../../../../translated_images/hi/dialog.93bba104afeb79f1.png) ## अपने कार्यान्वयन का परीक्षण करें diff --git a/translations/hi/8-code-editor/1-using-a-code-editor/README.md b/translations/hi/8-code-editor/1-using-a-code-editor/README.md index af51e86ca..ff05c3153 100644 --- a/translations/hi/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/hi/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev ये क्षमताएँ आपके ब्राउज़र जब सब कुछ लोड हो जाए, तो आप एक खूबसूरती से साफ-सुथरा कार्यस्थान देखेंगे जो आपको अपने कोड पर ध्यान केंद्रित रखने के लिए डिज़ाइन किया गया है! -![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.hi.png) +![Default VSCode.dev interface](../../../../translated_images/hi/default-vscode-dev.5d06881d65c1b323.png) **यहाँ आपके आस-पास का टूर है:** - **गतिविधि पट्टी** (बाएँ पट्टी): आपकी मुख्य नेविगेशन जिसमें एक्सप्लोरर 📁, सर्च 🔍, सोर्स कंट्रोल 🌿, एक्सटेंशन्स 🧩, और सेटिंग्स ⚙️ शामिल हैं @@ -229,7 +229,7 @@ flowchart TB 1. यदि आप पहले से नहीं हैं तो [vscode.dev](https://vscode.dev) पर जाएं 2. स्वागत स्क्रीन पर "Open Remote Repository" बटन देखें और क्लिक करें - ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.hi.png) + ![Open remote repository](../../../../translated_images/hi/open-remote-repository.bd9c2598b8949e7f.png) 3. कोई भी GitHub रिपॉजिटरी URL पेस्ट करें (इसको आज़माएँ: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Enter दबाएं और जादू देखें! @@ -238,7 +238,7 @@ flowchart TB कोडिंग जादूगर जैसा महसूस करना चाहते हैं? यह कीबोर्ड शॉर्टकट आज़माएँ: Ctrl+Shift+P (या Mac पर Cmd+Shift+P) कमांड पॅलेट खोलने के लिए: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.hi.png) +![Command Palette](../../../../translated_images/hi/palette-menu.4946174e07f42622.png) **कमांड पॅलेट ऐसा है जैसे आपके पास हर चीज़ के लिए एक खोज इंजन हो:** - "open remote" टाइप करें और यह आपके लिए रिपॉजिटरी खोलने वाला दिखाएगा @@ -300,7 +300,7 @@ flowchart TB 3. फ़ाइल नाम दर्ज करें जिसमें उचित एक्सटेंशन हो (`style.css`, `script.js`, `index.html`) 4. Enter दबाएं फ़ाइल बनाने के लिए -![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.hi.png) +![Creating a new file](../../../../translated_images/hi/create-new-file.2814e609c2af9aeb.png) **नामकरण नियम:** - वर्णनात्मक नामों का उपयोग करें जो फ़ाइल के उद्देश्य को दर्शाते हों @@ -318,7 +318,7 @@ flowchart TB 2. टाइपिंग शुरू करें और देखें कि VSCode.dev रंग, सुझाव, और त्रुटि पहचान के साथ आपकी मदद करता है 3. Ctrl+S (Windows/Linux) या Cmd+S (Mac) से अपना काम सेव करें – हालांकि यह अपने आप भी सेव करता है! -![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.hi.png) +![Editing files in VSCode.dev](../../../../translated_images/hi/edit-a-file.52c0ee665ef19f08.png) **कोड करते हुए जो बढ़िया होता है:** - आपका कोड खूबसूरती से रंगीन होता है जिससे पढ़ना आसान हो जाता है @@ -339,7 +339,7 @@ flowchart TB 2. संशोधित फ़ाइलें "परिवर्तन" अनुभाग में दिखें 3. रंग कोडिंग परिवर्तन के प्रकार को दर्शाती है: हरे रंग में जोड़ और लाल में हटाना -![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.hi.png) +![Viewing changes in Source Control](../../../../translated_images/hi/working-tree.c58eec08e6335c79.png) **अपने काम को सहेजना (कमिट वर्कफ़्लो):** @@ -431,7 +431,7 @@ mindmap 2. इधर-उधर ब्राउज़ करें या कुछ विशिष्ट खोजें 3. जो कुछ भी दिलचस्प लगे उस पर क्लिक करके अधिक जानें -![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.hi.png) +![Extension marketplace interface](../../../../translated_images/hi/extensions.eca0e0c7f59a10b5.png) **आप वहाँ क्या देखेंगे:** @@ -484,7 +484,7 @@ mindmap 3. ड्रॉपडाउन से "Extension Settings" चुनें 4. जब तक आपकी वर्कफ़्लो के लिए सब बिल्कुल सही न लगे, तब तक बदलाव करें -![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.hi.png) +![Customizing extension settings](../../../../translated_images/hi/extension-settings.21c752ae4f4cdb78.png) **आम चीजें जिन्हें आप समायोजित कर सकते हैं:** - आपका कोड कैसे फॉर्मेट होता है (टैब vs स्पेस, लाइन की लंबाई आदि) diff --git a/translations/hi/8-code-editor/1-using-a-code-editor/assignment.md b/translations/hi/8-code-editor/1-using-a-code-editor/assignment.md index 8f790005d..b38f86227 100644 --- a/translations/hi/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/hi/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. एक कमिट संदेश लिखें: "Add initial HTML structure" 5. अपनी परिवर्तनों को सहेजने के लिए "Commit new file" क्लिक करें -![GitHub पर प्रारंभिक फ़ाइल बनाते हुए](../../../../translated_images/new-file-github.com.c886796d800e8056.hi.png) +![GitHub पर प्रारंभिक फ़ाइल बनाते हुए](../../../../translated_images/hi/new-file-github.com.c886796d800e8056.png) **यह प्रारंभिक सेटअप जो करता है:** - उचित HTML5 दस्तावेज़ संरचना स्थापित करता है सेमांटिक तत्वों के साथ @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **सफलता संकेत:** आपको एक्सप्लोरर साइडबार में अपनी परियोजना फ़ाइलें और मुख्य संपादक क्षेत्र में `index.html` संपादन के लिए दिखाई देगा। -![VSCode.dev में परियोजना लोड हुई](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.hi.png) +![VSCode.dev में परियोजना लोड हुई](../../../../translated_images/hi/project-on-vscode.dev.e79815a9a95ee7fe.png) **इंटरफ़ेस में आप क्या देखेंगे:** - **Explorer साइडबार**: आपकी रिपॉजिटरी फ़ाइलें और फोल्डर संरचना दिखाता है @@ -449,7 +449,7 @@ li:before { **इंस्टॉल के तुरंत बाद परिणाम:** CodeSwing इंस्टॉल होने के बाद, आप अपने रिज्यूम वेबसाइट का लाइव प्रीव्यू संपादक में देखेंगे। इससे आप ठीक वैसे ही देख सकते हैं कि आपकी साइट कैसी दिखती है जैसे आप बदलाव करते हैं। -![CodeSwing एक्सटेंशन live preview दिखा रहा है](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hi.png) +![CodeSwing एक्सटेंशन live preview दिखा रहा है](../../../../translated_images/hi/after-codeswing-extension-pb.0ebddddcf73b5509.png) **बढ़े हुए इंटरफ़ेस को समझना:** - **स्प्लिट व्यू**: एक तरफ आपका कोड और दूसरी तरफ लाइव प्रीव्यू दिखाता है diff --git a/translations/hi/9-chat-project/README.md b/translations/hi/9-chat-project/README.md index 4ba7e1d91..b867c2281 100644 --- a/translations/hi/9-chat-project/README.md +++ b/translations/hi/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) आपका पूरा प्रोजेक्ट ऐसा दिखेगा: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.hi.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/hi/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.hi.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/hi/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.hi.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/hi/playground-choice.1d23ba7d407f4758.png) ## Python बैकएंड इंटीग्रेशन सेट करना @@ -2354,14 +2354,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.hi.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/hi/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.hi.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/hi/codespace.bcecbdf5d2747d3d.png) **चरण 3: पर्यावरण कॉन्फ़िगरेशन** एक बार आपका Codespace लोड हो जाने पर, आपको मिलेगा: diff --git a/translations/hi/README.md b/translations/hi/README.md index ad15c6966..082493c9e 100644 --- a/translations/hi/README.md +++ b/translations/hi/README.md @@ -58,13 +58,13 @@ Azure AI Foundry Discord समुदाय में शामिल हों शुरू करने के लिए [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) पर जाएं! -![Background](../../translated_images/background.148a8d43afde5730.hi.png) +![Background](../../translated_images/hi/background.148a8d43afde5730.png) - बुनियादी से लेकर RAG तक सब कुछ कवर करने वाले पाठ। - GenAI और हमारे सहायता ऐप का उपयोग करके ऐतिहासिक पात्रों के साथ बातचीत करें। - मजेदार और आकर्षक कहानी, आप समय यात्रा कर रहे होंगे! -![character](../../translated_images/character.5c0dd8e067ffd693.hi.png) +![character](../../translated_images/hi/character.5c0dd8e067ffd693.png) प्रत्येक पाठ में एक असाइनमेंट, एक ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्नलिखित विषयों पर गाइड करती है: - प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग @@ -100,7 +100,7 @@ Azure AI Foundry Discord समुदाय में शामिल हों आपके द्वारा बनाई गई इस रिपॉजिटरी की कॉपी में, **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके लिए काम करने के लिए नया Codespace बनाएगा। -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.hi.png) +![Codespace](../../translated_images/hi/createcodespace.0238bbf4d7a8d955.png) #### अपने कंप्यूटर पर पाठ्यक्रम को स्थानीय रूप से चलाना diff --git a/translations/hi/for-teachers.md b/translations/hi/for-teachers.md index 4d138630d..a1ca02817 100644 --- a/translations/hi/for-teachers.md +++ b/translations/hi/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud में Common Cartridge समर्थन सीमित है। ऊपर दी गई Moodle फ़ाइल को प्राथमिकता दें, जिसे Canvas में भी अपलोड किया जा सकता है। - आयात के बाद, मॉड्यूल, नियत तिथियां, और क्विज़ सेटिंग्स की समीक्षा करें ताकि वे आपके टर्म शेड्यूल से मेल खा सकें। -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.hi.png) +![Moodle](../../translated_images/hi/moodle.94eb93d714a50cb2.png) > Moodle कक्षा में पाठ्यक्रम -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.hi.png) +![Canvas](../../translated_images/hi/canvas.fbd605ff8e5b8aff.png) > Canvas में पाठ्यक्रम ### सीधे रिपॉजिटरी का उपयोग करें (कोई Classroom नहीं) diff --git a/translations/hk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hk/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 1e9fc1e31..8460c23a3 100644 --- a/translations/hk/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hk/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: 今天，我們將探索現代網頁開發令人驚嘆的工具，讓它不僅僅是可行，而是讓人嚴重上癮。我說的就是 Netflix、Spotify 和你喜歡的獨立應用工作室每天使用的同一套編輯器、瀏覽器和工作流程。最棒的是：這些專業級、業界標準的工具大多數都是完全免費的！ -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.hk.png) +![Intro Programming](../../../../translated_images/hk/webdev101-programming.d6e3f98e61ac4bff.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hk/1-getting-started-lessons/2-github-basics/README.md b/translations/hk/1-getting-started-lessons/2-github-basics/README.md index 701b6fd3c..4d34bacaa 100644 --- a/translations/hk/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/hk/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: 我們會一步步一起走這趟旅程，沒有急躁，沒有壓力——只有你我和一些超酷的工具，它們將成為你新的好朋友！ -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.hk.png) +![Intro to GitHub](../../../../translated_images/hk/webdev101-github.8846d7971abef6f9.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ flowchart TD ✅ 找到「新手友好」的 repo 一個好方法是[使用 '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.hk.png) +![Copy a repo locally](../../../../translated_images/hk/clone_repo.5085c48d666ead57.png) 複製代碼有好幾種方式。最常見的是使用 HTTPS、SSH 或 GitHub CLI（命令列工具）「克隆」該儲存庫內容。 diff --git a/translations/hk/1-getting-started-lessons/3-accessibility/README.md b/translations/hk/1-getting-started-lessons/3-accessibility/README.md index 069633207..3f1ebd70a 100644 --- a/translations/hk/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/hk/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # 建立無障礙網頁 -![All About Accessibility](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.hk.png) +![All About Accessibility](../../../../translated_images/hk/webdev101-a11y.8ef3025c858d897a.png) > 筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ pie title "常用 ARIA 使用模式" **資訊型圖片** - 傳達重要訊息： ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **裝飾型圖片** - 純視覺效果，無資訊價值： ```html - + ``` **功能型圖片** - 擔任按鈕或控制元件： @@ -1066,7 +1066,7 @@ pie title "常用 ARIA 使用模式" **複雜圖片** - 圖表、圖解、資訊圖： ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ pie title "常用 ARIA 使用模式" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/hk/2-js-basics/1-data-types/README.md b/translations/hk/2-js-basics/1-data-types/README.md index 045b2babe..b0964733a 100644 --- a/translations/hk/2-js-basics/1-data-types/README.md +++ b/translations/hk/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：資料類型 -![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.hk.png) +![JavaScript Basics - Data types](../../../../translated_images/hk/webdev101-js-datatypes.4cc470179730702c.png) > 筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hk/2-js-basics/2-functions-methods/README.md b/translations/hk/2-js-basics/2-functions-methods/README.md index ee1918cbb..2d06c7c2e 100644 --- a/translations/hk/2-js-basics/2-functions-methods/README.md +++ b/translations/hk/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：方法與函數 -![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.hk.png) +![JavaScript Basics - Functions](../../../../translated_images/hk/webdev101-js-functions.be049c4726e94f8b.png) > 繪圖筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid diff --git a/translations/hk/2-js-basics/3-making-decisions/README.md b/translations/hk/2-js-basics/3-making-decisions/README.md index e4d2ecbac..12b9d7605 100644 --- a/translations/hk/2-js-basics/3-making-decisions/README.md +++ b/translations/hk/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：作出決策 -![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.hk.png) +![JavaScript Basics - Making decisions](../../../../translated_images/hk/webdev101-js-decisions.69e1b20f272dd1f0.png) > Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 diff --git a/translations/hk/2-js-basics/4-arrays-loops/README.md b/translations/hk/2-js-basics/4-arrays-loops/README.md index 0e819c7de..1f1e994cc 100644 --- a/translations/hk/2-js-basics/4-arrays-loops/README.md +++ b/translations/hk/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：陣列與迴圈 -![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.hk.png) +![JavaScript Basics - Arrays](../../../../translated_images/hk/webdev101-js-arrays.439d7528b8a29455.png) > 筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hk/3-terrarium/1-intro-to-html/README.md b/translations/hk/3-terrarium/1-intro-to-html/README.md index 2b75caf5a..ae405419f 100644 --- a/translations/hk/3-terrarium/1-intro-to-html/README.md +++ b/translations/hk/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.hk.png) +![Introduction to HTML](../../../../translated_images/hk/webdev101-html.4389c2067af68e98.png) > Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 HTML，或稱超文字標記語言，是你曾造訪過的每個網站的基礎。將 HTML 想像成提供網頁結構的骨架——它定義內容的位置、組織方式以及每個部分的意義。雖然稍後 CSS 會為你的 HTML 加上顏色與版面配置，JavaScript 則會讓它具有互動性，但 HTML 提供了讓一切成為可能的必要結構。 @@ -86,7 +86,7 @@ mindmap 4. 在檔案總管側邊欄，點擊「新增檔案」圖示 5. 將檔案命名為 `index.html` -![VS Code Explorer showing new file creation](../../../../translated_images/vs-code-index.e2986cf919471eb9.hk.png) +![VS Code Explorer showing new file creation](../../../../translated_images/hk/vs-code-index.e2986cf919471eb9.png) **方案二：使用終端機指令** ```bash @@ -236,48 +236,48 @@ HTML 使用成對標籤來定義元素。大部分標籤有開始標籤例如 `<
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/hk/3-terrarium/2-intro-to-css/README.md b/translations/hk/3-terrarium/2-intro-to-css/README.md index 15b3bfcd2..e7b4238ff 100644 --- a/translations/hk/3-terrarium/2-intro-to-css/README.md +++ b/translations/hk/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey 響應式設計: 5: Student 玻璃反射: 5: Student ``` -![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.hk.png) +![Introduction to CSS](../../../../translated_images/hk/webdev101-css.3f7af5991bf53a20.png) > Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 還記得你的 HTML terrarium 看起來相當簡單嗎？CSS 就是將那個普通結構變得視覺吸引的關鍵。 @@ -202,7 +202,7 @@ body { 打開瀏覽器開發者工具（F12），切換至 Elements，檢查 `

`，可看到它繼承 body 的字型： -![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.hk.png) +![inherited font](../../../../translated_images/hk/1.cc07a5cbe114ad1d.png) ✅ **實驗時間**：試著在 `` 設定其他可繼承屬性如 `color`、`line-height`、`text-align`。你的標題和其他元素會發生什麼事？ @@ -332,7 +332,7 @@ ID 選擇器使用 `#`，針對具有特定 `id` 屬性的元素。因 ID 在頁 **這是每株植物的 HTML 結構：** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ flowchart LR 你將創建細膩的高光，模擬光線如何在玻璃面反射。這類似文藝復興畫家 Jan van Eyck 利用光影與反射使繪畫中的玻璃呈現立體感。目標如下： -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.hk.png) +![finished terrarium](../../../../translated_images/hk/terrarium-final.2f07047ffc597d0a.png) **你的挑戰：** - **創建**細膩的白色或淺色橢圓形，用於玻璃反光 diff --git a/translations/hk/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/hk/3-terrarium/3-intro-to-DOM-and-closures/README.md index c6dcbc789..cc56e7d9a 100644 --- a/translations/hk/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/hk/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey 測試功能: 5: Student 完成生態箱: 5: Student ``` -![DOM 與閉包](../../../../translated_images/webdev101-js.10280393044d7eaa.hk.png) +![DOM 與閉包](../../../../translated_images/hk/webdev101-js.10280393044d7eaa.png) > Sketchnote 由 [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.hk.png) +![DOM 樹狀結構圖](../../../../translated_images/hk/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.hk.png) +![DOM 樹狀結構圖](../../../../translated_images/hk/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.hk.png) +![finished terrarium](../../../../translated_images/hk/terrarium-final.0920f16e87c13a84.png) --- diff --git a/translations/hk/5-browser-extension/1-about-browsers/README.md b/translations/hk/5-browser-extension/1-about-browsers/README.md index 5fdeeda31..14d1827da 100644 --- a/translations/hk/5-browser-extension/1-about-browsers/README.md +++ b/translations/hk/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey 除錯問題: 4: 學生 精煉體驗: 5: 學生 ``` -![瀏覽器手繪筆記](../../../../translated_images/browser.60317c9be8b7f84a.hk.jpg) +![瀏覽器手繪筆記](../../../../translated_images/hk/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」，由Sir Timothy Berners-Lee於1990年創造。 -![早期瀏覽器](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.hk.jpg) +![早期瀏覽器](../../../../translated_images/hk/earlybrowsers.d984b711cdf3a42d.jpg) > 一些早期瀏覽器，來源：[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### 瀏覽器如何處理網頁內容 @@ -194,7 +194,7 @@ quadrantChart 了解擴充功能安裝流程，能幫助您預見用戶安裝擴充功能時的操作體驗。現代瀏覽器的安裝流程標準化，但介面設計或略有差異。 -![Edge 瀏覽器截圖顯示開啟 edge://extensions 頁面與設定選單](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.hk.png) +![Edge 瀏覽器截圖顯示開啟 edge://extensions 頁面與設定選單](../../../../translated_images/hk/install-on-edge.d68781acaf0b3d3d.png) > **重要**：測試自製擴充功能時，務必切換至開發者模式，並允許來自其他商店的擴充功能。 @@ -308,10 +308,10 @@ project-root/ ### 擴充功能視圖概述 **設定畫面** - 用戶首次配置： -![完成的擴充功能在瀏覽器中顯示含地區名稱及 API 金鑰輸入欄位的表單截圖。](../../../../translated_images/1.b6da8c1394b07491.hk.png) +![完成的擴充功能在瀏覽器中顯示含地區名稱及 API 金鑰輸入欄位的表單截圖。](../../../../translated_images/hk/1.b6da8c1394b07491.png) **結果畫面** - 顯示碳足跡資料： -![完成的擴充功能顯示 US-NEISO 地區碳使用量及化石燃料百分比數值的截圖。](../../../../translated_images/2.1dae52ff08042246.hk.png) +![完成的擴充功能顯示 US-NEISO 地區碳使用量及化石燃料百分比數值的截圖。](../../../../translated_images/hk/2.1dae52ff08042246.png) ### 建構設定表單 diff --git a/translations/hk/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/hk/5-browser-extension/2-forms-browsers-local-storage/README.md index 583d2c7b9..5cdc7eafd 100644 --- a/translations/hk/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/hk/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: 移除已儲存資料 ClearStorage --> FirstTime: 返回設定 ``` -![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d1.hk.png) +![Local storage pane](../../../../translated_images/hk/localstorage.472f8147b6a3f8d1.png) > ⚠️ **安全注意**：在正式應用中，將 API 金鑰儲存在 LocalStorage 有安全風險，因為任何 JavaScript 都能讀取。學習用途可以暫時使用，但實際應用應採用安全的伺服器端儲存敏感憑證。 diff --git a/translations/hk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hk/5-browser-extension/3-background-tasks-and-performance/README.md index 34a06f2a3..dccb22bb0 100644 --- a/translations/hk/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/hk/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR 我們試試看。打開一個網站（Microsoft.com 很適合），點按「錄製」按鈕。現在刷新頁面，並觀看分析器捕捉整個過程。停止錄製後，你會看到詳細的瀏覽器如何「腳本執行」、「渲染」和「繪製」網站的分析報告。這讓我想到任務控制中心在火箭發射時監控每個系統—你會取得實時資料，知道到底發生了什麼、什麼時候發生。 -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.hk.png) +![Edge profiler](../../../../translated_images/hk/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.hk.png) +![Edge profiler snapshot](../../../../translated_images/hk/snapshot.97750180ebcad737.png) 查看事件紀錄面板，看看是否有事件耗時超過 15 毫秒： -![Edge event log](../../../../translated_images/log.804026979f3707e0.hk.png) +![Edge event log](../../../../translated_images/hk/log.804026979f3707e0.png) ✅ 熟悉你的剖析器！打開本網站的開發者工具，看看是否有哪些瓶頸。最慢載入的資源是什麼？最快的是什麼？ diff --git a/translations/hk/6-space-game/2-drawing-to-canvas/README.md b/translations/hk/6-space-game/2-drawing-to-canvas/README.md index 0a13f1e2c..399dbc9b7 100644 --- a/translations/hk/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/hk/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![canvas 的格線](../../../../translated_images/canvas_grid.5f209da785ded492.hk.png) +![canvas 的格線](../../../../translated_images/hk/canvas_grid.5f209da785ded492.png) > 圖片來自 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 在 canvas 元素上繪圖，你會按照以下三個步驟，這是所有 canvas 圖形的基礎。練習幾次之後，你就能輕鬆習慣： @@ -323,11 +323,11 @@ flowchart TD - 英雄飛船 - ![英雄飛船](../../../../translated_images/player.dd24c1afa8c71e9b.hk.png) + ![英雄飛船](../../../../translated_images/hk/player.dd24c1afa8c71e9b.png) - 5×5 隻怪物 - ![怪物飛船](../../../../translated_images/enemyShip.5df2a822c16650c2.hk.png) + ![怪物飛船](../../../../translated_images/hk/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.hk.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/hk/partI-solution.36c53b48c9ffae2a.png) ## 解決方案 diff --git a/translations/hk/6-space-game/5-keeping-score/README.md b/translations/hk/6-space-game/5-keeping-score/README.md index d5f98eee3..e2c511c88 100644 --- a/translations/hk/6-space-game/5-keeping-score/README.md +++ b/translations/hk/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **得分系統**：每摧毀一艘敵機，獲得100分（整數更方便玩家心算）。分數顯示在左下角。 -- **生命計數器**：你的英雄起始有三條命 —— 這是早期街機遊戲定下的標準，平衡挑戰與可玩性。每次與敵機碰撞損失一條命。剩餘生命用飛船圖示顯示在右下角 ![life image](../../../../translated_images/life.6fb9f50d53ee0413.hk.png)。 +- **生命計數器**：你的英雄起始有三條命 —— 這是早期街機遊戲定下的標準，平衡挑戰與可玩性。每次與敵機碰撞損失一條命。剩餘生命用飛船圖示顯示在右下角 ![life image](../../../../translated_images/hk/life.6fb9f50d53ee0413.png)。 ## 開始動手吧！ diff --git a/translations/hk/7-bank-project/1-template-route/README.md b/translations/hk/7-bank-project/1-template-route/README.md index ec73afb63..d1ebf66cb 100644 --- a/translations/hk/7-bank-project/1-template-route/README.md +++ b/translations/hk/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram 使用 `history.pushState` 會在瀏覽器導航歷史中新增條目。你可按住瀏覽器「返回按鈕」，會看到類似這樣的視窗： -![截圖：導航歷史](../../../../translated_images/history.7fdabbafa521e064.hk.png) +![截圖：導航歷史](../../../../translated_images/hk/history.7fdabbafa521e064.png) 若連按幾次返回按鈕，你會發現目前 URL 改變、歷史更新，但模板不斷顯示相同內容。 diff --git a/translations/hk/7-bank-project/2-forms/README.md b/translations/hk/7-bank-project/2-forms/README.md index 3d8943a26..11efa09b5 100644 --- a/translations/hk/7-bank-project/2-forms/README.md +++ b/translations/hk/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. 觀察瀏覽器網址列的變化 3. 注意頁面重新載入且資料出現在 URL 中 -![點擊註冊按鈕後瀏覽器網址變化截圖](../../../../translated_images/click-register.e89a30bf0d4bc9ca.hk.png) +![點擊註冊按鈕後瀏覽器網址變化截圖](../../../../translated_images/hk/click-register.e89a30bf0d4bc9ca.png) ### HTTP 方法比較 @@ -346,7 +346,7 @@ graph TD 2. **點擊**「建立帳戶」按鈕 3. **觀察**瀏覽器中的伺服器回應 -![瀏覽器視窗顯示 localhost:5000/api/accounts 地址，呈現包含用戶資料的 JSON 字串](../../../../translated_images/form-post.61de4ca1b964d91a.hk.png) +![瀏覽器視窗顯示 localhost:5000/api/accounts 地址，呈現包含用戶資料的 JSON 字串](../../../../translated_images/hk/form-post.61de4ca1b964d91a.png) **你應該看到：** - **瀏覽器跳轉**至 API 端點 URL @@ -609,7 +609,7 @@ async function register() { 3. **點擊**「建立帳戶」 4. **觀察** 控制台訊息及使用者回饋 -![瀏覽器控制台顯示紀錄訊息的截圖](../../../../translated_images/browser-console.efaf0b51aaaf6778.hk.png) +![瀏覽器控制台顯示紀錄訊息的截圖](../../../../translated_images/hk/browser-console.efaf0b51aaaf6778.png) **你應該看到：** - **提交按鈕出現** 加載狀態 @@ -783,7 +783,7 @@ input:focus:invalid { 3. **嘗試** 在使用者名稱內輸入特殊字元 4. **輸入** 負數餘額金額 -![嘗試送出表單時顯示驗證錯誤的截圖](../../../../translated_images/validation-error.8bd23e98d416c22f.hk.png) +![嘗試送出表單時顯示驗證錯誤的截圖](../../../../translated_images/hk/validation-error.8bd23e98d416c22f.png) **你會觀察到：** - **瀏覽器呈現** 原生驗證訊息 @@ -943,7 +943,7 @@ timeline 以下是簡單美化後的最終登入頁面範例： -![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856a.hk.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/hk/result.96ef01f607bf856a.png) ## 課後小測驗 diff --git a/translations/hk/7-bank-project/3-data/README.md b/translations/hk/7-bank-project/3-data/README.md index 8718fd7a1..32b7c3312 100644 --- a/translations/hk/7-bank-project/3-data/README.md +++ b/translations/hk/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: 返回完整的 HTML 頁面 Browser->>User: 顯示新頁面（閃爍/重載） ``` -![多頁面應用的更新流程](../../../../translated_images/mpa.7f7375a1a2d4aa77.hk.png) +![多頁面應用的更新流程](../../../../translated_images/hk/mpa.7f7375a1a2d4aa77.png) **這方法令人覺得笨拙的原因：** - 每次點擊都重建整個頁面 @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: 更新指定的頁面元素 Browser->>User: 顯示更新內容（無需重新載入） ``` -![單頁應用的更新流程](../../../../translated_images/spa.268ec73b41f992c2.hk.png) +![單頁應用的更新流程](../../../../translated_images/hk/spa.268ec73b41f992c2.png) **SPA 感覺更好的原因：** - 只更新實際改變的部分（很聰明吧？） @@ -516,7 +516,7 @@ if (data.error) { 以後測試錯誤帳號，你會立刻在頁面看到有幫助的錯誤訊息！ -![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a6327.hk.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/hk/login-error.416fe019b36a6327.png) #### 第四步：考慮無障礙使用 @@ -950,7 +950,7 @@ timeline 呢度係一個經過樣式化嘅儀表板嘅示例： -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.hk.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/hk/screen2.123c82a831a1d14a.png) 唔使死乞白賴要完全一樣，用嚟做靈感，打造屬於你嘅風格！ diff --git a/translations/hk/7-bank-project/4-state-management/README.md b/translations/hk/7-bank-project/4-state-management/README.md index fea8c566a..c8da4d248 100644 --- a/translations/hk/7-bank-project/4-state-management/README.md +++ b/translations/hk/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap 不再蛇行亂撞，而是建立 **集中式狀態管理** 系統。想像有一名非常有組織的專責人員主控所有重要事物： -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.hk.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/hk/data-flow.fa2354e0908fecc8.png) ```mermaid flowchart TD @@ -798,7 +798,7 @@ timeline 以下為完成作業後的示範結果： -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f1.hk.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/hk/dialog.93bba104afeb79f1.png) --- diff --git a/translations/hk/7-bank-project/4-state-management/assignment.md b/translations/hk/7-bank-project/4-state-management/assignment.md index 9ec1688df..8bc016128 100644 --- a/translations/hk/7-bank-project/4-state-management/assignment.md +++ b/translations/hk/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **預期結果：** 完成作業後，你的銀行應用應具備完整且專業的「新增交易」功能： -![顯示「新增交易」對話框範例的截圖](../../../../translated_images/dialog.93bba104afeb79f1.hk.png) +![顯示「新增交易」對話框範例的截圖](../../../../translated_images/hk/dialog.93bba104afeb79f1.png) ## 測試你的實作 diff --git a/translations/hk/8-code-editor/1-using-a-code-editor/README.md b/translations/hk/8-code-editor/1-using-a-code-editor/README.md index 8738308a9..a3267054a 100644 --- a/translations/hk/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/hk/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev 將這些功能帶入瀏覽器： 一切載入後，你將看到一個簡潔美觀的工作區，設計來幫助你專注於重要的事——你的程式碼！ -![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.hk.png) +![Default VSCode.dev interface](../../../../translated_images/hk/default-vscode-dev.5d06881d65c1b323.png) **這是你的區域導覽：** - **活動欄**（左側條）：主導航含資源管理器 📁、搜尋 🔍、原始碼控制 🌿、擴充功能 🧩、設定 ⚙️ @@ -229,7 +229,7 @@ flowchart TB 1. 如果還沒在，先前往 [vscode.dev](https://vscode.dev) 2. 在歡迎頁尋找「Open Remote Repository」按鈕並點擊 - ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.hk.png) + ![Open remote repository](../../../../translated_images/hk/open-remote-repository.bd9c2598b8949e7f.png) 3. 貼上任何 GitHub 倉庫網址（試試這個：`https://github.com/microsoft/Web-Dev-For-Beginners`） 4. 按 Enter，見證魔法發生！ @@ -238,7 +238,7 @@ flowchart TB 想感受成為編碼魔法師的感覺？試試這個鍵盤快捷鍵：Ctrl+Shift+P（Mac 上為 Cmd+Shift+P），開啟指令面板： -![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.hk.png) +![Command Palette](../../../../translated_images/hk/palette-menu.4946174e07f42622.png) **指令面板就像你所有操作的搜尋引擎：** - 輸入「open remote」立刻找到開啟遠端倉庫功能 @@ -300,7 +300,7 @@ flowchart TB 3. 輸入包含正確副檔名的檔名（如 `style.css`、`script.js`、`index.html`） 4. 按 Enter 建立檔案 -![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.hk.png) +![Creating a new file](../../../../translated_images/hk/create-new-file.2814e609c2af9aeb.png) **命名規範：** - 使用描述性名稱以表明檔案用途 @@ -318,7 +318,7 @@ flowchart TB 2. 開始輸入，觀看 VSCode.dev 為你提供顏色標示、建議及錯誤提示 3. 用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存工作——但它也會自動保存！ -![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.hk.png) +![Editing files in VSCode.dev](../../../../translated_images/hk/edit-a-file.52c0ee665ef19f08.png) **編碼時有趣的事情：** - 程式碼會被漂亮地著色，閱讀方便 @@ -339,7 +339,7 @@ flowchart TB 2. 已修改檔案會出現在「Changes」區域 3. 顏色標示變更類型：綠色代表新增，紅色代表刪除 -![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.hk.png) +![Viewing changes in Source Control](../../../../translated_images/hk/working-tree.c58eec08e6335c79.png) **保存工作（提交工作流程）：** @@ -431,7 +431,7 @@ mindmap 2. 瀏覽或搜尋特定項目 3. 點擊任何看起來有趣的項目以了解更多 -![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.hk.png) +![Extension marketplace interface](../../../../translated_images/hk/extensions.eca0e0c7f59a10b5.png) **你會看到的內容：** @@ -484,7 +484,7 @@ mindmap 3. 從下拉選單中選「擴充功能設定」 4. 依照工作流程調整到自己喜歡的狀態 -![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.hk.png) +![Customizing extension settings](../../../../translated_images/hk/extension-settings.21c752ae4f4cdb78.png) **常見調整項目：** - 程式碼格式設定（tab 或空白鍵、最大行長等） diff --git a/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md index 0cf74ba8b..380249b44 100644 --- a/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/hk/8-code-editor/1-using-a-code-editor/assignment.md @@ -79,7 +79,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **輸入**提交訊息：「Add initial HTML structure」 5. **點擊**「Commit new file」儲存變更 -![在 GitHub 建立初始檔案](../../../../translated_images/new-file-github.com.c886796d800e8056.hk.png) +![在 GitHub 建立初始檔案](../../../../translated_images/hk/new-file-github.com.c886796d800e8056.png) **這初始設置達成的效果：** - **建立**正確的 HTML5 文件結構，使用語意標籤 @@ -105,7 +105,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **成功指標**：你會看到專案檔案呈現在側邊欄中，且能在主要編輯區編輯 `index.html`。 -![專案載入 VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.hk.png) +![專案載入 VSCode.dev](../../../../translated_images/hk/project-on-vscode.dev.e79815a9a95ee7fe.png) **介面中你將看到：** - **Explorer 側邊欄**：**顯示**版本庫檔案與資料夾結構 @@ -450,7 +450,7 @@ li:before { **安裝後的即時效果：** 安裝完成後，你會在編輯器看到履歷網站的即時預覽，方便你隨時檢視網站外觀。 -![CodeSwing 即時預覽](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hk.png) +![CodeSwing 即時預覽](../../../../translated_images/hk/after-codeswing-extension-pb.0ebddddcf73b5509.png) **強化介面說明：** - **分割檢視**：一側顯示程式碼，一側顯示即時預覽 diff --git a/translations/hk/9-chat-project/README.md b/translations/hk/9-chat-project/README.md index 589798012..c89490f6e 100644 --- a/translations/hk/9-chat-project/README.md +++ b/translations/hk/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) 以下是你完成的專案外觀： -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.hk.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/hk/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.hk.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/hk/playground.d2b927122224ff8f.png) **playground 特別實用的原因：** - **試用** 不同的 AI 模型，如 GPT-4o-mini、Claude 等（全部免費！） @@ -199,7 +199,7 @@ mindmap 玩過一會兒後，點擊「Code」頁籤，選擇程式語言，即可取得你需要的實作程式碼。 -![Playground choice showing code generation options for different programming languages](../../../translated_images/playground-choice.1d23ba7d407f4758.hk.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/hk/playground-choice.1d23ba7d407f4758.png) ## 設定 Python 後端整合 @@ -2353,14 +2353,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.hk.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/hk/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.hk.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/hk/codespace.bcecbdf5d2747d3d.png) **步驟 3：環境配置** 你的 Codespace 載入後，即可使用： diff --git a/translations/hk/README.md b/translations/hk/README.md index 6204fbd69..b4596c1f6 100644 --- a/translations/hk/README.md +++ b/translations/hk/README.md @@ -56,13 +56,13 @@ CO_OP_TRANSLATOR_METADATA: 造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！ -![Background](../../translated_images/background.148a8d43afde5730.hk.png) +![Background](../../translated_images/hk/background.148a8d43afde5730.png) - 涵蓋從基礎到 RAG (Retrieval-Augmented Generation) 的課程 - 使用 GenAI 及我們的夥伴應用程式與歷史人物互動 - 有趣且引人入勝的故事情節，帶你穿越時空！ -![character](../../translated_images/character.5c0dd8e067ffd693.hk.png) +![character](../../translated_images/hk/character.5c0dd8e067ffd693.png) 每堂課都包含作業、知識檢查及挑戰，引導你學習以下主題： - 提示語設計與提示工程 @@ -98,7 +98,7 @@ CO_OP_TRANSLATOR_METADATA: 在您剛建立的倉庫中，點擊 **Code** 按鈕並選擇 **Open with Codespaces**。系統會為您建立一個新的 Codespace 作業環境。 -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.hk.png) +![Codespace](../../translated_images/hk/createcodespace.0238bbf4d7a8d955.png) #### 在您的電腦上本地執行課程 diff --git a/translations/hk/for-teachers.md b/translations/hk/for-teachers.md index 1043f2b9d..37417a2ae 100644 --- a/translations/hk/for-teachers.md +++ b/translations/hk/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud 對 Common Cartridge 的支持有限。建議使用上面的 Moodle 文件，該文件也可以上傳到 Canvas。 - 導入後，請檢查模塊、截止日期和測驗設置，以匹配您的學期安排。 -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.hk.png) +![Moodle](../../translated_images/hk/moodle.94eb93d714a50cb2.png) > Moodle 課堂中的課程內容 -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.hk.png) +![Canvas](../../translated_images/hk/canvas.fbd605ff8e5b8aff.png) > Canvas 課堂中的課程內容 ### 直接使用資源庫（不使用 Classroom） diff --git a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 2f3878166..23ced0180 100644 --- a/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Pogledaj, potpuno razumijem ako ti se programiranje sada čini zastrašujuće. K Danas ćemo istražiti nevjerojatne alate koji čine moderni web razvoj ne samo mogućim, već i ozbiljno zaraznim. Govorim o točno istim uređivačima, preglednicima i radnim procesima koje koriste developeri u Netflixu, Spotifyu i tvom omiljenom indie studiju svaki dan. I evo dijela koji će te natjerati da zaplešeš od sreće: većina ovih profesionalnih, industrijskih alata je potpuno besplatna! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.hr.png) +![Intro Programming](../../../../translated_images/hr/webdev101-programming.d6e3f98e61ac4bff.png) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hr/1-getting-started-lessons/2-github-basics/README.md b/translations/hr/1-getting-started-lessons/2-github-basics/README.md index 950b9a20c..c9724acf4 100644 --- a/translations/hr/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/hr/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Znam da ti to može na početku djelovati previše – sjećam se i sam da sam g Krenut ćemo na ovo putovanje zajedno, korak po korak. Bez žurbe, bez pritiska – samo ti, ja i nekoliko stvarno cool alata koji će ubrzo postati tvoji novi najbolji prijatelji! -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.hr.png) +![Intro to GitHub](../../../../translated_images/hr/webdev101-github.8846d7971abef6f9.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ Prvo, pronađimo repozitorij (ili **repo**) na GitHubu koji vas zanima i u kojem ✅ Dobar način za pronalaženje 'prijateljskih za početnike' repozitorija je [pretraživanje po oznaci 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopirajte repozitorij lokalno](../../../../translated_images/clone_repo.5085c48d666ead57.hr.png) +![Kopirajte repozitorij lokalno](../../../../translated_images/hr/clone_repo.5085c48d666ead57.png) Postoji nekoliko načina za kopiranje koda. Jedan od načina je "kloniranje" sadržaja repozitorija, koristeći HTTPS, SSH, ili GitHub CLI (Command Line Interface). diff --git a/translations/hr/1-getting-started-lessons/3-accessibility/README.md b/translations/hr/1-getting-started-lessons/3-accessibility/README.md index bf8c0fde0..0a6b88ca2 100644 --- a/translations/hr/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/hr/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Izrada pristupačnih web stranica -![Sve o pristupačnosti](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.hr.png) +![Sve o pristupačnosti](../../../../translated_images/hr/webdev101-a11y.8ef3025c858d897a.png) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ Svaka slika na vašoj web stranici ima svrhu. Razumijevanje te svrhe pomaže vam **Informativne slike** - prenose važne informacije: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **Dekorativne slike** - samo vizualne, bez informativne vrijednosti: ```html - + ``` **Funkcionalne slike** - služe kao gumbi ili kontrole: @@ -1066,7 +1066,7 @@ Svaka slika na vašoj web stranici ima svrhu. Razumijevanje te svrhe pomaže vam **Složene slike** - grafikoni, dijagrami, infografike: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ Svaka slika na vašoj web stranici ima svrhu. Razumijevanje te svrhe pomaže vam - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/hr/2-js-basics/1-data-types/README.md b/translations/hr/2-js-basics/1-data-types/README.md index 47b31262e..473dd3ef8 100644 --- a/translations/hr/2-js-basics/1-data-types/README.md +++ b/translations/hr/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScripta: Tipovi podataka -![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.hr.png) +![JavaScript Basics - Data types](../../../../translated_images/hr/webdev101-js-datatypes.4cc470179730702c.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hr/2-js-basics/2-functions-methods/README.md b/translations/hr/2-js-basics/2-functions-methods/README.md index bf9244508..4bbdf9a9b 100644 --- a/translations/hr/2-js-basics/2-functions-methods/README.md +++ b/translations/hr/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScripta: Metode i funkcije -![JavaScript Osnove - Funkcije](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.hr.png) +![JavaScript Osnove - Funkcije](../../../../translated_images/hr/webdev101-js-functions.be049c4726e94f8b.png) > Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hr/2-js-basics/3-making-decisions/README.md b/translations/hr/2-js-basics/3-making-decisions/README.md index 37097e2a7..8e9e6fc7d 100644 --- a/translations/hr/2-js-basics/3-making-decisions/README.md +++ b/translations/hr/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScripta: Donošenje odluka -![Osnove JavaScripta - Donošenje odluka](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.hr.png) +![Osnove JavaScripta - Donošenje odluka](../../../../translated_images/hr/webdev101-js-decisions.69e1b20f272dd1f0.png) > Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/hr/2-js-basics/4-arrays-loops/README.md b/translations/hr/2-js-basics/4-arrays-loops/README.md index 6c2f365f7..8a3308fa4 100644 --- a/translations/hr/2-js-basics/4-arrays-loops/README.md +++ b/translations/hr/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScripta: Nizovi i petlje -![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.hr.png) +![JavaScript Basics - Arrays](../../../../translated_images/hr/webdev101-js-arrays.439d7528b8a29455.png) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hr/3-terrarium/1-intro-to-html/README.md b/translations/hr/3-terrarium/1-intro-to-html/README.md index 73c08a7db..e474dc2d4 100644 --- a/translations/hr/3-terrarium/1-intro-to-html/README.md +++ b/translations/hr/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![Uvod u HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.hr.png) +![Uvod u HTML](../../../../translated_images/hr/webdev101-html.4389c2067af68e98.png) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) HTML, ili HyperText Markup Language, temelj je svake web stranice koju ste ikada posjetili. Zamislite HTML kao kostur koji daje strukturu web stranicama – on definira gdje sadržaj ide, kako je organiziran i što svaki dio predstavlja. Dok će CSS kasnije "ofarbati" vaš HTML bojama i rasporedima, a JavaScript će ga oživjeti interaktivnošću, HTML pruža osnovnu strukturu koja omogućuje sve ostalo. @@ -86,7 +86,7 @@ Napravit ćete posebnu mapu za vaš terarij projekt i dodati prvu HTML datoteku. 4. U Explorer panelu kliknite na ikonu "New File" 5. Nazovite svoju datoteku `index.html` -![VS Code Explorer prikazuje stvaranje nove datoteke](../../../../translated_images/vs-code-index.e2986cf919471eb9.hr.png) +![VS Code Explorer prikazuje stvaranje nove datoteke](../../../../translated_images/hr/vs-code-index.e2986cf919471eb9.png) **Opcija 2: Korištenje naredbi u Terminalu** ```bash @@ -236,48 +236,48 @@ Sada dodajte slikovne prikaze biljaka organiziranih u dva stupca između vaših
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/hr/3-terrarium/2-intro-to-css/README.md b/translations/hr/3-terrarium/2-intro-to-css/README.md index ba37e49cb..cbebccc47 100644 --- a/translations/hr/3-terrarium/2-intro-to-css/README.md +++ b/translations/hr/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Responsivni dizajn: 5: Student Stakleni odrazi: 5: Student ``` -![Uvod u CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.hr.png) +![Uvod u CSS](../../../../translated_images/hr/webdev101-css.3f7af5991bf53a20.png) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) Sjećaš li se kako je tvoj HTML terrarij izgledao prilično osnovno? CSS je mjesto gdje tu običnu strukturu pretvaramo u nešto vizualno privlačno. @@ -202,7 +202,7 @@ body { Otvori alate za razvoj preglednika (F12), idi na tab Elements i pregledaj svoj `

` element. Vidjet ćeš da nasljeđuje font-family od body: -![naslijeđeni font](../../../../translated_images/1.cc07a5cbe114ad1d.hr.png) +![naslijeđeni font](../../../../translated_images/hr/1.cc07a5cbe114ad1d.png) ✅ **Vrijeme za eksperiment**: Pokušaj postaviti druga nasljediva svojstva na `` kao `color`, `line-height` ili `text-align`. Što se događa s naslovom i ostalim elementima? @@ -332,7 +332,7 @@ U našem terrariju, svaka biljka treba sličnu stilizaciju, ali i individualno p **Ovo je HTML struktura za svaku biljku:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova teh Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.hr.png) +![finished terrarium](../../../../translated_images/hr/terrarium-final.2f07047ffc597d0a.png) **Vaš zadatak:** - **Napravite** suptilne bijele ili svijetle ovalne oblike za odraze stakla diff --git a/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md index 1e4cfd048..620db51dd 100644 --- a/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/hr/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Testirati funkcionalnost: 5: Student Završiti terarij: 5: Student ``` -![DOM i zatvaranje](../../../../translated_images/webdev101-js.10280393044d7eaa.hr.png) +![DOM i zatvaranje](../../../../translated_images/hr/webdev101-js.10280393044d7eaa.png) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) Dobrodošli u jedan od najzanimljivijih aspekata web razvoja - stvaranje interaktivnosti! Document Object Model (DOM) je poput mosta između vašeg HTML-a i JavaScripta, a danas ćemo ga koristiti da oživimo vaš terrarij. Kada je Tim Berners-Lee stvorio prvi web preglednik, zamislio je web na kojem dokumenti mogu biti dinamični i interaktivni - DOM tu viziju čini mogućom. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Reprezentacija DOM stabla](../../../../translated_images/dom-tree.7daf0e763cbbba92.hr.png) +![Reprezentacija DOM stabla](../../../../translated_images/hr/dom-tree.7daf0e763cbbba92.png) > Reprezentacija DOM-a i HTML oznaka koje ga referenciraju. Iz [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Razumijevanje Zatvaranja**: Zatvaranja su važna tema u JavaScriptu, a mnogi programeri ih koriste godinama prije nego što u potpunosti shvate sve teorijske aspekte. Danas se fokusiramo na praktičnu primjenu - vidjet ćete zatvaranja prirodno kako se pojavljuju dok gradimo naše interaktivne značajke. Razumijevanje će se razvijati kako budete vidjeli kako rješavaju stvarne probleme. -![Reprezentacija DOM stabla](../../../../translated_images/dom-tree.7daf0e763cbbba92.hr.png) +![Reprezentacija DOM stabla](../../../../translated_images/hr/dom-tree.7daf0e763cbbba92.png) > Reprezentacija DOM-a i HTML oznaka koje ga referenciraju. Iz [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Sada testirajte svoj interaktivni terarij! Otvorite datoteku `index.html` u web - **Podrška za uređaje**: Radi na desktopu i mobilnim uređajima - **Svijest o izvedbi**: Nema curenja memorije ili suvišnih izračuna -![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.hr.png) +![finished terrarium](../../../../translated_images/hr/terrarium-final.0920f16e87c13a84.png) --- diff --git a/translations/hr/3-terrarium/solution/README.md b/translations/hr/3-terrarium/solution/README.md index 44ae069ce..17e03ae44 100644 --- a/translations/hr/3-terrarium/solution/README.md +++ b/translations/hr/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Mala vježba povuci i ispusti. Uz malo HTML-a, JS-a i CSS-a, možete izgraditi web sučelje, stilizirati ga i dodati interakciju. -![moj terarij](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.hr.png) +![moj terarij](../../../../translated_images/hr/screenshot_gray.0c796099a1f9f25e.png) ## Zasluge diff --git a/translations/hr/5-browser-extension/1-about-browsers/README.md b/translations/hr/5-browser-extension/1-about-browsers/README.md index 2f3c95ddb..8065e24e5 100644 --- a/translations/hr/5-browser-extension/1-about-browsers/README.md +++ b/translations/hr/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Otkloniti probleme: 4: Student Usavršiti iskustvo: 5: Student ``` -![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84a.hr.jpg) +![Browser sketchnote](../../../../translated_images/hr/browser.60317c9be8b7f84a.jpg) > Sketchnote od [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Kviz prije predavanja @@ -77,7 +77,7 @@ Ovaj proces odražava kako je prvi web preglednik, WorldWideWeb, dizajnirao Tim ✅ **Malo povijesti**: Prvi preglednik zvao se ‘WorldWideWeb’ i stvorio ga je sir Timothy Berners-Lee 1990. godine. -![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.hr.jpg) +![early browsers](../../../../translated_images/hr/earlybrowsers.d984b711cdf3a42d.jpg) > Neki rani preglednici, prema [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Kako preglednici obrađuju web sadržaj @@ -194,7 +194,7 @@ quadrantChart Razumijevanje procesa instalacije proširenja pomaže vam predvidjeti iskustvo korisnika kad ljudi instaliraju vaše proširenje. Proces instalacije standardiziran je kod modernih preglednika, s manjim varijacijama u dizajnu sučelja. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.hr.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/hr/install-on-edge.d68781acaf0b3d3d.png) > **Važno**: Provjerite jeste li uključili način za developere te dozvolili instalaciju proširenja iz drugih trgovina prilikom testiranja svojih proširenja. @@ -308,10 +308,10 @@ Ovo slijedi princip progresivnog otkrivanja koji se koristi u dizajnu sučelja j ### Pregled prikaza proširenja **Zaslon postavljanja** - konfiguracija za prvi put korisnika: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491.hr.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/hr/1.b6da8c1394b07491.png) **Zaslon rezultata** - prikaz podataka o ugljičnom otisku: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff08042246.hr.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/hr/2.1dae52ff08042246.png) ### Izrada obrasca za konfiguraciju diff --git a/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md index 15b0d06cb..459de17e4 100644 --- a/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/hr/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Ukloni pohranjene podatke ClearStorage --> FirstTime: Povratak na postavljanje ``` -![Prozor lokalne pohrane](../../../../translated_images/localstorage.472f8147b6a3f8d1.hr.png) +![Prozor lokalne pohrane](../../../../translated_images/hr/localstorage.472f8147b6a3f8d1.png) > ⚠️ **Sigurnosna napomena**: U proizvodnim aplikacijama pohranjivanje API ključeva u LocalStorage predstavlja sigurnosni rizik jer JavaScript može pristupiti tim podacima. Za svrhe učenja je ovaj pristup dobar, ali prave aplikacije trebaju koristiti sigurnu pohranu na strani servera za osjetljive vjerodajnice. diff --git a/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md index 13ddc3cce..300ea8ed5 100644 --- a/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/hr/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Za otvaranje Developer Tools u Edgeu kliknite na tri točkice u gornjem desnom k Isprobajmo ovo. Otvorite neku web stranicu (Microsoft.com dobro funkcionira za to) i kliknite gumb 'Record'. Sada osvježite stranicu i promatrajte kako profiler bilježi sve što se događa. Kad zaustavite snimanje, vidjet ćete detaljan prikaz kako preglednik 'skriptira', 'renderira' i 'crtaju' stranicu. Podsjeća me na to kako misijski kontrolori prate svaki sustav tijekom lansiranja rakete - dobivate podatke u realnom vremenu o tome što se točno događa i kada. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.hr.png) +![Edge profiler](../../../../translated_images/hr/profiler.5a4a62479c5df01c.png) ✅ [Microsoft Dokumentacija](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ima mnogo više detalja ako želite dublje zaroniti @@ -133,11 +133,11 @@ Odaberite elemente vremenske linije profila da zumirate događaje koji se odvija Dobijte snimku performansi vaše stranice odabirom dijela vremenske linije profila i pogledajte sažetak: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.hr.png) +![Edge profiler snapshot](../../../../translated_images/hr/snapshot.97750180ebcad737.png) Provjerite panel Dnevnik događaja (Event Log) da vidite je li neki događaj trajao duže od 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e0.hr.png) +![Edge event log](../../../../translated_images/hr/log.804026979f3707e0.png) ✅ Upoznajte se s profilerom! Otvorite developer tools na ovoj stranici i provjerite postoje li uska grla. Koji je najsporiji resurs za učitavanje? Koji najbrži? diff --git a/translations/hr/5-browser-extension/README.md b/translations/hr/5-browser-extension/README.md index 39dbdfd31..e5d2fa491 100644 --- a/translations/hr/5-browser-extension/README.md +++ b/translations/hr/5-browser-extension/README.md @@ -23,7 +23,7 @@ Ekstenzija se može koristiti ad hoc od strane korisnika nakon što se unesu API ### Zasluge -![zelena ekstenzija za preglednik](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![zelena ekstenzija za preglednik](../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Zasluge diff --git a/translations/hr/5-browser-extension/solution/README.md b/translations/hr/5-browser-extension/solution/README.md index ace4e964f..939d3d252 100644 --- a/translations/hr/5-browser-extension/solution/README.md +++ b/translations/hr/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristeći tmrow-ov C02 Signal API za praćenje potrošnje električne energije, izradite ekstenziju za preglednik kako biste imali podsjetnik u svom pregledniku o tome koliko je velika potrošnja električne energije u vašoj regiji. Povremeno korištenje ove ekstenzije pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija. -![screenshot ekstenzije](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![screenshot ekstenzije](../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edge pregledniku, koristite izbornik s 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Ekstenzije. Odatle odaberite 'Učitaj nepakirano' za učitavanje nove ekstenzije. Na upit otvorite mapu 'dist' i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO'). -![instalacija](../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![instalacija](../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i regiju u sučelje ekstenzije, obojena točka u traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašoj regiji i dala vam smjernice o tome koje aktivnosti s velikom potrošnjom energije bi bile prikladne za vas. Koncept iza ovog sustava 'točke' inspiriran je [Energy Lollipop ekstenzijom](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/solution/translation/README.es.md b/translations/hr/5-browser-extension/solution/translation/README.es.md index 22fa8e8d3..9a20268cc 100644 --- a/translations/hr/5-browser-extension/solution/translation/README.es.md +++ b/translations/hr/5-browser-extension/solution/translation/README.es.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristeći API za CO2 Signal od tmrow za praćenje potrošnje električne energije, izradite ekstenziju za preglednik kako biste imali podsjetnik direktno u svom pregledniku o potrošnji električne energije u vašoj regiji. Korištenje ove ad hoc ekstenzije pomoći će vam donositi odluke o vašim aktivnostima na temelju tih informacija. -![screenshot ekstenzije](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.hr.png) +![screenshot ekstenzije](../../../../../translated_images/hr/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju u Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Ekstenzije. Tamo odaberite 'Učitaj raspakirano' za učitavanje nove ekstenzije. Otvorite mapu 'dist' kada se to zatraži i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Električnom mapu](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO'). -![instalacija](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.hr.png) +![instalacija](../../../../../translated_images/hr/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.png) Kada unesete API ključ i regiju u sučelje ekstenzije, točka boje na traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije vaše regije i dala vam pokazatelj o aktivnostima koje troše puno energije, a koje bi bile prikladne za vas. Koncept iza ovog sustava "točaka" inspiriran je [ekstenzijom Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/solution/translation/README.fr.md b/translations/hr/5-browser-extension/solution/translation/README.fr.md index eec3230b2..57be35100 100644 --- a/translations/hr/5-browser-extension/solution/translation/README.fr.md +++ b/translations/hr/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristeći API C02 Signal od tmrow za praćenje potrošnje električne energije, izradite proširenje preglednika kako biste imali podsjetnik direktno u svom pregledniku o potrošnji električne energije u vašem području. Korištenje ovog prilagođenog proširenja pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija. -![screenshot proširenja](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![screenshot proširenja](../../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Odatle odaberite 'Učitaj nekomprimirano proširenje' za učitavanje novog proširenja. Otvorite mapu 'dist' na upit i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u polje na toj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Karti električne energije](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO'). -![instalacija](../../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![instalacija](../../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka u traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašem području i pružila vam indikator o energetski intenzivnim aktivnostima koje bi bilo prikladno obavljati. Koncept iza ovog sustava 'točaka' inspiriran je [proširenjem Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/solution/translation/README.hi.md b/translations/hr/5-browser-extension/solution/translation/README.hi.md index 0071d874b..55d1f88dd 100644 --- a/translations/hr/5-browser-extension/solution/translation/README.hi.md +++ b/translations/hr/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristeći tmrow-ov C02 Signal API za praćenje potrošnje električne energije, izrađujemo ekstenziju za preglednik koja vas podsjeća koliko je potrošnja električne energije u vašem području trenutno velika. Korištenje ove ekstenzije može vam pomoći da donesete odluke o svojim aktivnostima na temelju tih informacija. -![Snimka ekstenzije](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![Snimka ekstenzije](../../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edge pregledniku, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel za ekstenzije. Tamo odaberite 'Load unpacked' za učitavanje nove ekstenzije. Na upitu otvorite mapu 'dist' i ekstenzija će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal ([dobijte ga putem e-pošte ovdje](https://www.co2signal.com/) - unesite svoju e-mail adresu u okvir na toj stranici) i [kod za vaše područje](http://api.electricitymap.org/v3/zones) s [Electricity Map](https://www.electricitymap.org/map) (na primjer, za Boston koristim 'US-NEISO'). -![instalacija](../../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![instalacija](../../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i kod područja u sučelje ekstenzije, obojena točka u traci ekstenzije preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašem području. To će vam dati indikator o tome koje energetski intenzivne aktivnosti su prikladne za vaše performanse. Koncept ove 'točke' sustava inspiriran je [Energy Lollipop ekstenzijom](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/solution/translation/README.it.md b/translations/hr/5-browser-extension/solution/translation/README.it.md index e01f36dbc..6b7d75923 100644 --- a/translations/hr/5-browser-extension/solution/translation/README.it.md +++ b/translations/hr/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristit ćemo API Signal CO2 od tmrow za praćenje potrošnje električne energije kako bismo stvorili proširenje za preglednik koje će vam omogućiti da imate podsjetnik direktno u svom pregledniku o tome koliko je intenzivna potrošnja električne energije u vašoj regiji. Korištenje ovog prilagođenog proširenja pomoći će vam da procijenite svoje aktivnosti na temelju tih informacija. -![screenshot proširenja](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![screenshot proširenja](../../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Za početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edge, koristite izbornik "tri točke" u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Ako već nije aktiviran, uključite Način za razvojne programere (dolje lijevo). Odaberite "Učitaj raspakirano" kako biste učitali novo proširenje. Otvorite mapu "dist" na upitu i proširenje će biti učitano. Za korištenje, trebat će vam API ključ za CO2 Signal API (možete ga [dobiti ovdje putem e-maila](https://www.co2signal.com/) - unesite svoju e-mail adresu u polje na toj stranici) i [kod za svoju regiju](http://api.electricitymap.org/v3/zones) koji odgovara [električnoj karti](https://www.electricitymap.org/map) (na primjer, za Boston, "US-NEISO"). -![instalacija](../../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![instalacija](../../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka na traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u regiji i pružila smjernice o tome koje aktivnosti s visokim energetskim intenzitetom bi bile prikladne za izvođenje. Koncept iza ovog sustava "točaka" inspiriran je [proširenjem Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/solution/translation/README.ja.md b/translations/hr/5-browser-extension/solution/translation/README.ja.md index 3d58b6d49..b9cb90e06 100644 --- a/translations/hr/5-browser-extension/solution/translation/README.ja.md +++ b/translations/hr/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Izradite proširenje preglednika koje koristi tmrow API za CO2 Signal kako bi pratilo potrošnju električne energije u vašem području i prikazivalo podsjetnik o tome koliko je potrošnja energije visoka. Ovo proširenje možete koristiti ad hoc kako biste donosili odluke o svojim aktivnostima na temelju tih informacija. -![screenshot proširenja](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![screenshot proširenja](../../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edge preglednik, pronađite panel "Proširenja" putem izbornika "tri točke" u gornjem desnom kutu preglednika. Tamo odaberite opciju "Load Unpacked" kako biste učitali novo proširenje. Kada se pojavi upit, otvorite mapu "dist" i proširenje će biti učitano. Za korištenje, trebat će vam API ključ za CO2 Signal ([nabavite ga ovdje putem e-maila](https://www.co2signal.com/) - unesite svoj e-mail u okvir na toj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, za Boston koristite 'US-NEISO'). -![instalacija](../../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![instalacija](../../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka koja se prikazuje na traci proširenja preglednika mijenjat će boju kako bi odražavala potrošnju energije u vašem području. To će vam pomoći da odlučite koje aktivnosti zahtijevaju energiju i kada ih je najbolje obavljati. Koncept ovog sustava "točke" inspiriran je proširenjem [Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/solution/translation/README.ms.md b/translations/hr/5-browser-extension/solution/translation/README.ms.md index 93a750da3..63582dc55 100644 --- a/translations/hr/5-browser-extension/solution/translation/README.ms.md +++ b/translations/hr/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristeći API CO2 Signal od tmrow za praćenje potrošnje električne energije, izradite proširenje preglednika kako biste mogli dobiti obavijesti u svom pregledniku o tome koliko je intenzivna potrošnja električne energije u vašoj regiji. Korištenje ovog proširenja može vam pomoći da donesete odluke o svojim aktivnostima na temelju tih informacija. -![screenshot proširenja preglednika](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![screenshot proširenja preglednika](../../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edgeu, koristite izbornik 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel Proširenja. Tamo odaberite 'Load Unpacked' za učitavanje novog proširenja. Otvorite mapu 'dist' na zahtjev i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u polje na stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (u Bostonu, na primjer, koristim 'US-NEISO'). -![preuzimanje](../../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![preuzimanje](../../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka na traci proširenja preglednika promijenit će se kako bi odražavala potrošnju energije u vašoj regiji i pružila vam smjernice o aktivnostima koje su prikladne za obavljanje. Koncept sustava 'točke' inspiriran je [proširenjem preglednika Energy Lollipop](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/5-browser-extension/start/README.md b/translations/hr/5-browser-extension/start/README.md index e07c6fd00..56b4543f9 100644 --- a/translations/hr/5-browser-extension/start/README.md +++ b/translations/hr/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Koristeći tmrowov C02 Signal API za praćenje potrošnje električne energije, izradite proširenje za preglednik kako biste imali podsjetnik u svom pregledniku o tome koliko je velika potrošnja električne energije u vašoj regiji. Korištenje ovog proširenja ad hoc pomoći će vam da donesete odluke o svojim aktivnostima na temelju tih informacija. -![screenshot proširenja](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.hr.png) +![screenshot proširenja](../../../../translated_images/hr/extension-screenshot.0e7f5bfa110e92e3.png) ## Početak @@ -31,7 +31,7 @@ npm run build Za instalaciju na Edgeu, koristite izbornik s 'tri točke' u gornjem desnom kutu preglednika kako biste pronašli panel za proširenja. Tamo odaberite 'Load Unpacked' za učitavanje novog proširenja. Otvorite mapu 'dist' na upitu i proširenje će se učitati. Za korištenje, trebat će vam API ključ za CO2 Signal API ([nabavite ga ovdje putem e-pošte](https://www.co2signal.com/) - unesite svoju e-poštu u okvir na ovoj stranici) i [kod za vašu regiju](http://api.electricitymap.org/v3/zones) koji odgovara [Electricity Map](https://www.electricitymap.org/map) (na primjer, u Bostonu koristim 'US-NEISO'). -![instalacija](../../../../translated_images/install-on-edge.78634f02842c4828.hr.png) +![instalacija](../../../../translated_images/hr/install-on-edge.78634f02842c4828.png) Nakon što unesete API ključ i regiju u sučelje proširenja, obojena točka u traci proširenja preglednika trebala bi se promijeniti kako bi odražavala potrošnju energije u vašoj regiji i dala vam smjernice o tome koje aktivnosti s velikom potrošnjom energije bi bile prikladne za vas. Koncept iza ovog sustava 'točke' dobio sam od [Energy Lollipop proširenja](https://energylollipop.com/) za emisije u Kaliforniji. diff --git a/translations/hr/6-space-game/2-drawing-to-canvas/README.md b/translations/hr/6-space-game/2-drawing-to-canvas/README.md index dd33cf863..6520392da 100644 --- a/translations/hr/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/hr/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![mreža canvasa](../../../../translated_images/canvas_grid.5f209da785ded492.hr.png) +![mreža canvasa](../../../../translated_images/hr/canvas_grid.5f209da785ded492.png) > Slika s [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Za crtanje na canvas elementu slijedit ćete isti trostupanjski proces koji tvori temelj svih grafika na canvasu. Nakon što to učinite nekoliko puta, postat će vam druga priroda: @@ -323,11 +323,11 @@ Izradit ćete web stranicu s canvas elementom. Trebala bi prikazivati crni ekran - Herojski brod - ![Herojski brod](../../../../translated_images/player.dd24c1afa8c71e9b.hr.png) + ![Herojski brod](../../../../translated_images/hr/player.dd24c1afa8c71e9b.png) - 5*5 čudovišta - ![Čudovište](../../../../translated_images/enemyShip.5df2a822c16650c2.hr.png) + ![Čudovište](../../../../translated_images/hr/enemyShip.5df2a822c16650c2.png) ### Preporučeni koraci za početak razvoja @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Gotovi rezultat trebao bi izgledati ovako: -![Crni zaslon s herojem i 5*5 čudovišta](../../../../translated_images/partI-solution.36c53b48c9ffae2a.hr.png) +![Crni zaslon s herojem i 5*5 čudovišta](../../../../translated_images/hr/partI-solution.36c53b48c9ffae2a.png) ## Rješenje diff --git a/translations/hr/6-space-game/5-keeping-score/README.md b/translations/hr/6-space-game/5-keeping-score/README.md index 45696f443..c867c8e40 100644 --- a/translations/hr/6-space-game/5-keeping-score/README.md +++ b/translations/hr/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Sustav bodovanja**: Svaki uništeni neprijateljski brod donosi 100 bodova (zaokruženi brojevi lakši su igračima za mentalno računanje). Rezultat se prikazuje u donjem lijevom kutu. -- **Brojač života**: Vaš junak počinje s tri života - standard uspostavljen od ranih arkadnih igara za balansiranje izazova i igrivosti. Svaka kolizija s neprijateljem oduzima jedan život. Preostale živote prikazat ćemo u donjem desnom kutu koristeći ikone brodova ![life image](../../../../translated_images/life.6fb9f50d53ee0413.hr.png). +- **Brojač života**: Vaš junak počinje s tri života - standard uspostavljen od ranih arkadnih igara za balansiranje izazova i igrivosti. Svaka kolizija s neprijateljem oduzima jedan život. Preostale živote prikazat ćemo u donjem desnom kutu koristeći ikone brodova ![life image](../../../../translated_images/hr/life.6fb9f50d53ee0413.png). ## Krenimo s izradom! diff --git a/translations/hr/7-bank-project/1-template-route/README.md b/translations/hr/7-bank-project/1-template-route/README.md index 1c632bc7b..9e7ea5609 100644 --- a/translations/hr/7-bank-project/1-template-route/README.md +++ b/translations/hr/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Korištenjem `history.pushState` stvaraju se novi unosi u povijest preglednika. To možete provjeriti držanjem *tipke za povratak* u pregledniku, trebala bi se prikazati povijest poput ovoga: -![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e064.hr.png) +![Screenshot of navigation history](../../../../translated_images/hr/history.7fdabbafa521e064.png) Ako pokušate nekoliko puta kliknuti gumb za povratak, vidjet ćete da se trenutni URL mijenja i povijest se ažurira, ali se prikazuje isti predložak. diff --git a/translations/hr/7-bank-project/2-forms/README.md b/translations/hr/7-bank-project/2-forms/README.md index 3ff5f68d4..c94d4602a 100644 --- a/translations/hr/7-bank-project/2-forms/README.md +++ b/translations/hr/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Prvo, promatrat ćemo što se događa s osnovnim slanjem obrasca: 2. Promatrajte promjene u adresnoj traci vašeg preglednika 3. Primijetite kako se stranica osvježava i podaci pojavljuju u URL-u -![Snimka zaslona promjene URL-a preglednika nakon klika na gumb Registriraj](../../../../translated_images/click-register.e89a30bf0d4bc9ca.hr.png) +![Snimka zaslona promjene URL-a preglednika nakon klika na gumb Registriraj](../../../../translated_images/hr/click-register.e89a30bf0d4bc9ca.png) ### Usporedba HTTP metoda @@ -346,7 +346,7 @@ Konfigurirajmo obrazac za registraciju da pravilno komunicira s backend API-jem 2. **Kliknite** gumb "Kreiraj račun" 3. **Promatrajte** odgovor servera u pregledniku -![Prozor preglednika na adresi localhost:5000/api/accounts, prikazujući JSON niz s podacima korisnika](../../../../translated_images/form-post.61de4ca1b964d91a.hr.png) +![Prozor preglednika na adresi localhost:5000/api/accounts, prikazujući JSON niz s podacima korisnika](../../../../translated_images/hr/form-post.61de4ca1b964d91a.png) **Što biste trebali vidjeti:** - **Preglednik preusmjerava** na URL API endpointa @@ -609,7 +609,7 @@ async function register() { 3. **Kliknite** "Create Account" 4. **Promatrajte** poruke u konzoli i povratne informacije korisniku -![Snimka zaslona koja prikazuje poruku u konzoli preglednika](../../../../translated_images/browser-console.efaf0b51aaaf6778.hr.png) +![Snimka zaslona koja prikazuje poruku u konzoli preglednika](../../../../translated_images/hr/browser-console.efaf0b51aaaf6778.png) **Što biste trebali vidjeti:** - **Stanje učitavanja** pojavljuje se na gumbu za slanje @@ -783,7 +783,7 @@ Unaprijedimo vaš obrazac za registraciju robustnom validacijom koja pruža izvr 3. **Pokušajte** s posebnim znakovima u polju korisničkog imena 4. **Unesite** negativan iznos stanja -![Snimka zaslona koja prikazuje grešku validacije prilikom pokušaja slanja obrasca](../../../../translated_images/validation-error.8bd23e98d416c22f.hr.png) +![Snimka zaslona koja prikazuje grešku validacije prilikom pokušaja slanja obrasca](../../../../translated_images/hr/validation-error.8bd23e98d416c22f.png) **Što ćete primijetiti:** - **Preglednik prikazuje** nativne poruke o grešci validacije @@ -943,7 +943,7 @@ Prikažite poruku o pogrešci u HTML-u ako korisnik već postoji. Evo primjera kako završna stranica za prijavu može izgledati nakon malo stiliziranja: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856a.hr.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/hr/result.96ef01f607bf856a.png) ## Kviz nakon predavanja diff --git a/translations/hr/7-bank-project/3-data/README.md b/translations/hr/7-bank-project/3-data/README.md index 44c55297f..5e80fb9e1 100644 --- a/translations/hr/7-bank-project/3-data/README.md +++ b/translations/hr/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Vraća kompletnu HTML stranicu Browser->>User: Prikazuje novu stranicu (kašalj/ponovno učitavanje) ``` -![Radni tijek ažuriranja u više-straničnoj aplikaciji](../../../../translated_images/mpa.7f7375a1a2d4aa77.hr.png) +![Radni tijek ažuriranja u više-straničnoj aplikaciji](../../../../translated_images/hr/mpa.7f7375a1a2d4aa77.png) **Zašto je taj pristup djelovao nezgrapno:** - Svaki klik značio je potpuno ponovno građenje stranice od nule @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Ažurira određene elemente stranice Browser->>User: Prikazuje ažurirani sadržaj (bez ponovnog učitavanja) ``` -![Radni tijek ažuriranja u jedno-straničnoj aplikaciji](../../../../translated_images/spa.268ec73b41f992c2.hr.png) +![Radni tijek ažuriranja u jedno-straničnoj aplikaciji](../../../../translated_images/hr/spa.268ec73b41f992c2.png) **Zašto SPA aplikacije djeluju puno bolje:** - Ažuriraju samo dijelove koji su stvarno promijenjeni (pametno, zar ne?) @@ -516,7 +516,7 @@ if (data.error) { Sada, kad testirate s nevažećim računom, vidjet ćete korisnu poruku o pogrešci direktno na stranici! -![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a6327.hr.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/hr/login-error.416fe019b36a6327.png) #### Korak 4: Biti Uključiv s Pristupačnošću @@ -950,7 +950,7 @@ Spremni da podignete svoju bankarsku aplikaciju na sljedeću razinu? Učinite da Evo kako bi mogao izgledati dotjerani kontrolni panel: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.hr.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/hr/screen2.123c82a831a1d14a.png) Nemojte osjećati potrebu da točno replicirate – upotrijebite ga kao inspiraciju i prilagodite po svom ukusu! diff --git a/translations/hr/7-bank-project/4-state-management/README.md b/translations/hr/7-bank-project/4-state-management/README.md index 99278c24a..9d7b2a13a 100644 --- a/translations/hr/7-bank-project/4-state-management/README.md +++ b/translations/hr/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Poput dizajna Titanica s dijeljenim pretincima koji se činilo čvrstim dok se n Umjesto da jurnjamo u krug, stvorit ćemo **centralizirani sustav upravljanja stanjem**. Zamislite to kao ako imate jednu stvarno organiziranu osobu koja vodi sve važne stvari: -![Schema prikazuje protoke podataka između HTML-a, korisničkih radnji i stanja](../../../../translated_images/data-flow.fa2354e0908fecc8.hr.png) +![Schema prikazuje protoke podataka između HTML-a, korisničkih radnji i stanja](../../../../translated_images/hr/data-flow.fa2354e0908fecc8.png) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Ovaj izazov pomoći će vam da razmišljate kao profesionalni programer koji uva Evo primjera rezultata nakon završetka zadatka: -![Snimka zaslona koja prikazuje primjer dijaloga "Dodaj transakciju"](../../../../translated_images/dialog.93bba104afeb79f1.hr.png) +![Snimka zaslona koja prikazuje primjer dijaloga "Dodaj transakciju"](../../../../translated_images/hr/dialog.93bba104afeb79f1.png) --- diff --git a/translations/hr/7-bank-project/4-state-management/assignment.md b/translations/hr/7-bank-project/4-state-management/assignment.md index b83eb25b5..903b96a7b 100644 --- a/translations/hr/7-bank-project/4-state-management/assignment.md +++ b/translations/hr/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Pogledajte [dokumentaciju API-ja poslužitelja](../api/README.md) za: **Očekivani rezultat:** Nakon završetka ovog zadatka, vaša aplikacija za bankarstvo trebala bi imati potpuno funkcionalnu značajku "Dodaj transakciju" koja izgleda i ponaša se profesionalno: -![Snimka zaslona koja prikazuje primjer dijaloga "Dodaj transakciju"](../../../../translated_images/dialog.93bba104afeb79f1.hr.png) +![Snimka zaslona koja prikazuje primjer dijaloga "Dodaj transakciju"](../../../../translated_images/hr/dialog.93bba104afeb79f1.png) ## Testiranje implementacije diff --git a/translations/hr/7-bank-project/README.md b/translations/hr/7-bank-project/README.md index 96f810833..661c54884 100644 --- a/translations/hr/7-bank-project/README.md +++ b/translations/hr/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: U ovom projektu naučit ćete kako izgraditi fiktivnu banku. Ove lekcije uključuju upute o tome kako postaviti web aplikaciju i definirati rute, izraditi forme, upravljati stanjem i dohvatiti podatke s API-ja od kojeg možete preuzeti podatke banke. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.hr.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.hr.png) | +| ![Screen1](../../../translated_images/hr/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/hr/screen2.123c82a831a1d14a.png) | |--------------------------------|--------------------------------| ## Lekcije diff --git a/translations/hr/8-code-editor/1-using-a-code-editor/README.md b/translations/hr/8-code-editor/1-using-a-code-editor/README.md index b772ba69b..176ed717b 100644 --- a/translations/hr/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/hr/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Baš kao što je telefon Alexandera Grahama Bella povezivao udaljena mjesta, pov Kad se sve učita, vidjet ćete prelijepo čist radni prostor dizajniran da vas usredotoči na ono najvažnije – vaš kod! -![Zadano sučelje VSCode.dev-a](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.hr.png) +![Zadano sučelje VSCode.dev-a](../../../../translated_images/hr/default-vscode-dev.5d06881d65c1b323.png) **Evo ture po susjedstvu:** - **Traka aktivnosti** (ona traka s lijeve strane): Glavna navigacija s Explorerom 📁, Pretraživanjem 🔍, Kontrolom izvora 🌿, Ekstenzijama 🧩 i Postavkama ⚙️ @@ -229,7 +229,7 @@ Savršena je kada tek započinjete u VSCode.dev-u i želite otvoriti određeni r 1. Otiđite na [vscode.dev](https://vscode.dev) ako već niste tamo 2. Potražite gumb "Open Remote Repository" na početnom zaslonu i kliknite ga - ![Otvaranje udaljenog repozitorija](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.hr.png) + ![Otvaranje udaljenog repozitorija](../../../../translated_images/hr/open-remote-repository.bd9c2598b8949e7f.png) 3. Zalijepite bilo koji URL GitHub repozitorija (probajte ovaj: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Pritisnite Enter i gledajte čaroliju! @@ -238,7 +238,7 @@ Savršena je kada tek započinjete u VSCode.dev-u i želite otvoriti određeni r Želite li se osjećati kao čarobnjak kodiranja? Isprobajte ovaj prečac na tipkovnici: Ctrl+Shift+P (ili Cmd+Shift+P na Macu) za otvaranje Command Palette-a: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.hr.png) +![Command Palette](../../../../translated_images/hr/palette-menu.4946174e07f42622.png) **Command Palette je kao tražilica za sve što možete napraviti:** - Upisite "open remote" i pronaći će otvoritelj repozitorija za vas @@ -300,7 +300,7 @@ Baš kao što se plovila u arhitektovom uredu organiziraju, kreiranje datoteka u 3. Unesite ime datoteke uključujući odgovarajuću ekstenziju (`style.css`, `script.js`, `index.html`) 4. Pritisnite Enter za stvaranje datoteke -![Kreiranje nove datoteke](../../../../translated_images/create-new-file.2814e609c2af9aeb.hr.png) +![Kreiranje nove datoteke](../../../../translated_images/hr/create-new-file.2814e609c2af9aeb.png) **Konvencije imenovanja:** - Koristite opisna imena koja označavaju svrhu datoteke @@ -317,7 +317,7 @@ Evo gdje prava zabava počinje! Uređivač VSCode.dev je prepun korisnih značaj 2. Počnite tipkati i gledajte kako vam VSCode.dev pomaže bojama, sugestijama i pronalaženjem pogrešaka 3. Spremite posao sa Ctrl+S (Windows/Linux) ili Cmd+S (Mac) – iako se automatski sprema! -![Uređivanje datoteka u VSCode.dev-u](../../../../translated_images/edit-a-file.52c0ee665ef19f08.hr.png) +![Uređivanje datoteka u VSCode.dev-u](../../../../translated_images/hr/edit-a-file.52c0ee665ef19f08.png) **Hladne stvari koje se događaju dok kodirate:** - Vaš kod je prekrasno obojen za lakše čitanje @@ -337,7 +337,7 @@ Baš kao što arheolozi stvaraju detaljne zapise slojeva iskapanja, Git prati pr 2. Izmijenjene datoteke pojavljuju se u odjeljku "Promjene" 3. Boje označavaju tip promjene: zeleno za dodan tekst, crveno za izbrisano -![Pregled promjena u Kontroli izvora](../../../../translated_images/working-tree.c58eec08e6335c79.hr.png) +![Pregled promjena u Kontroli izvora](../../../../translated_images/hr/working-tree.c58eec08e6335c79.png) **Spremanje rada (workflow za commit):** @@ -429,7 +429,7 @@ Tržište proširenja je zaista dobro organizirano, pa se nećete izgubiti traž 2. Pregledavajte ili pretražujte nešto specifično 3. Kliknite na bilo što što izgleda zanimljivo da biste saznali više -![Sučelje tržišta proširenja](../../../../translated_images/extensions.eca0e0c7f59a10b5.hr.png) +![Sučelje tržišta proširenja](../../../../translated_images/hr/extensions.eca0e0c7f59a10b5.png) **Što ćete tamo vidjeti:** @@ -482,7 +482,7 @@ Većina proširenja dolazi s postavkama koje možete podesiti kako bi radila to 3. Izaberite "Extension Settings" iz padajućeg izbornika 4. Prilagodite dok vam radni tok ne odgovara savršeno -![Prilagođavanje postavki proširenja](../../../../translated_images/extension-settings.21c752ae4f4cdb78.hr.png) +![Prilagođavanje postavki proširenja](../../../../translated_images/hr/extension-settings.21c752ae4f4cdb78.png) **Česte stvari koje ćete možda htjeti podesiti:** - Kako se vaš kod formatira (tabovi vs razmaci, duljina linije, itd.) diff --git a/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md b/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md index f48e16f8a..d2c036d33 100644 --- a/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/hr/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Budući da VSCode.dev zahtijeva barem jednu datoteku za otvaranje repozitorija, 4. **Napišite** poruku za commit: "Dodaj početnu HTML strukturu" 5. **Kliknite** "Commit new file" za spremanje promjena -![Kreiranje početne datoteke na GitHubu](../../../../translated_images/new-file-github.com.c886796d800e8056.hr.png) +![Kreiranje početne datoteke na GitHubu](../../../../translated_images/hr/new-file-github.com.c886796d800e8056.png) **Što se postiže ovim početnim postavljanjem:** - **Postavlja** pravilnu HTML5 strukturu dokumenta sa semantičkim elementima @@ -104,7 +104,7 @@ Sada kada je temelj vašeg repozitorija postavljen, prebacimo se na VSCode.dev z ✅ **Indikator uspjeha**: Trebali biste vidjeti datoteke svog projekta u bočnoj traci Explorer i `index.html` dostupan za uređivanje u glavnom području uređivača. -![Projekt učitan u VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.hr.png) +![Projekt učitan u VSCode.dev](../../../../translated_images/hr/project-on-vscode.dev.e79815a9a95ee7fe.png) **Što ćete vidjeti u sučelju:** - **Bočna traka Explorer**: **Prikazuje** datoteke i strukturu mapa vašeg repozitorija @@ -448,7 +448,7 @@ Ekstenzije poboljšavaju vaše iskustvo razvoja pružajući mogućnosti za pregl **Rezultati odmah nakon instalacije:** Nakon instalacije CodeSwinga, vidjet ćete pregled uživo vaše web stranice za životopis u uređivaču. To vam omogućuje da vidite kako vaša stranica izgleda dok unosite promjene. -![Ekstenzija CodeSwing prikazuje pregled uživo](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.hr.png) +![Ekstenzija CodeSwing prikazuje pregled uživo](../../../../translated_images/hr/after-codeswing-extension-pb.0ebddddcf73b5509.png) **Razumijevanje poboljšanog sučelja:** - **Podijeljeni prikaz**: **Prikazuje** vaš kod na jednoj strani i pregled uživo na drugoj diff --git a/translations/hr/9-chat-project/README.md b/translations/hr/9-chat-project/README.md index 993ed50e8..a861c006b 100644 --- a/translations/hr/9-chat-project/README.md +++ b/translations/hr/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Evo kako će vaš završeni projekt izgledati: -![Chat aplikacija koja prikazuje razgovor između korisnika i AI asistenta](../../../translated_images/screenshot.0a1ee0d123df681b.hr.png) +![Chat aplikacija koja prikazuje razgovor između korisnika i AI asistenta](../../../translated_images/hr/screenshot.0a1ee0d123df681b.png) ## 🗺️ Vaše putovanje učenjem kroz razvoj AI aplikacija @@ -189,7 +189,7 @@ mindmap ``` **Temeljno načelo**: razvoj AI aplikacija kombinira tradicionalne vještine web razvoja s integracijom AI usluga, stvarajući inteligentne aplikacije koje korisnicima djeluju prirodno i responzivno. -![GitHub Models AI Playground sučelje s odabirom modela i testnim područjem](../../../translated_images/playground.d2b927122224ff8f.hr.png) +![GitHub Models AI Playground sučelje s odabirom modela i testnim područjem](../../../translated_images/hr/playground.d2b927122224ff8f.png) **Evo što čini playground tako korisnim:** - **Isprobajte** različite AI modele poput GPT-4o-mini, Claudea i drugih (svi besplatni!) @@ -199,7 +199,7 @@ mindmap Kad malo eksperimentirate, jednostavno kliknite karticu "Code" i odaberite svoj programski jezik da dobijete kod koji vam treba. -![Izbor u playgroundu koji prikazuje opcije generiranja koda za različite programske jezike](../../../translated_images/playground-choice.1d23ba7d407f4758.hr.png) +![Izbor u playgroundu koji prikazuje opcije generiranja koda za različite programske jezike](../../../translated_images/hr/playground-choice.1d23ba7d407f4758.png) ## Postavljanje Python pozadinske integracije @@ -2353,14 +2353,14 @@ Vještine koje ste razvili u ovoj lekciji direktno su primjenjive u modernim kar - **Idite** na [Web Dev For Beginners spremište](https://github.com/microsoft/Web-Dev-For-Beginners) - **Kliknite** "Use this template" u gornjem desnom kutu (pobrinite se da ste prijavljeni na GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/template.67ad477109d29a2b.hr.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/hr/template.67ad477109d29a2b.png) **Korak 2: Pokrenite Codespaces** - **Otvorite** svoje novo spremište - **Kliknite** zeleni gumb "Code" i odaberite "Codespaces" - **Odaberite** "Create codespace on main" za pokretanje razvojnog okruženja -![Create codespace interface with options for launching cloud development environment](../../../translated_images/codespace.bcecbdf5d2747d3d.hr.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/hr/codespace.bcecbdf5d2747d3d.png) **Korak 3: Konfiguracija okoline** Kada se vaš Codespace učita, imat ćete pristup: diff --git a/translations/hr/README.md b/translations/hr/README.md index bf3972020..2e597afc1 100644 --- a/translations/hr/README.md +++ b/translations/hr/README.md @@ -72,13 +72,13 @@ Ne propustite naš novi nastavni plan o Generativnoj AI! Posjetite [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) i započnite! -![Background](../../translated_images/background.148a8d43afde5730.hr.png) +![Background](../../translated_images/hr/background.148a8d43afde5730.png) - Lekcije pokrivaju sve, od osnova do RAG-a. - Komunicirajte s povijesnim likovima koristeći GenAI i naš prateći app. - Zabavna i zanimljiva naracija, putovat ćete kroz vrijeme! -![character](../../translated_images/character.5c0dd8e067ffd693.hr.png) +![character](../../translated_images/hr/character.5c0dd8e067ffd693.png) Svaka lekcija uključuje zadatak za dovršetak, provjeru znanja i izazov koji vas vodi kroz teme poput: @@ -115,7 +115,7 @@ Slijedite ove korake: U vašoj kopiji ovog spremišta koju ste stvorili, kliknite gumb **Code** i odaberite **Open with Codespaces**. Time će se kreirati novi Codespace u kojem ćete raditi. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.hr.png) +![Codespace](../../translated_images/hr/createcodespace.0238bbf4d7a8d955.png) #### Pokretanje nastavnog plana lokalno na vašem računalu diff --git a/translations/hr/for-teachers.md b/translations/hr/for-teachers.md index 095c9ac08..84a8bf2ea 100644 --- a/translations/hr/for-teachers.md +++ b/translations/hr/for-teachers.md @@ -42,10 +42,10 @@ Ovaj kurikulum uključuje pakete za uvoz koji su kompatibilni s uobičajenim LMS - Moodle Cloud ima ograničenu podršku za Common Cartridge. Preferirajte gore navedenu Moodle datoteku, koja se također može učitati u Canvas. - Nakon uvoza, pregledajte module, datume dospijeća i postavke kvizova kako bi odgovarali vašem rasporedu semestra. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.hr.png) +![Moodle](../../translated_images/hr/moodle.94eb93d714a50cb2.png) > Kurikulum u Moodle učionici -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.hr.png) +![Canvas](../../translated_images/hr/canvas.fbd605ff8e5b8aff.png) > Kurikulum u Canvasu ### Korištenje repozitorija direktno (bez Classrooma) diff --git a/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 998ae79c2..a8245c0ff 100644 --- a/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/hu/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Tudom, hogy a programozás most még ijesztőnek tűnhet. Amikor én kezdtem, t Ma meg fogjuk nézni azokat a hihetetlen eszközöket, amik nemcsak lehetővé teszik, hanem nagyon addiktívvá teszik a modern webfejlesztést. Pont azokat az editorokat, böngészőket és munkafolyamatokat, amelyeket a Netflix, a Spotify és a kedvenc indie app stúdiód fejlesztői használnak minden nap. És most jön a rész, amire majd örülni fogsz: ezeknek a professzionális, iparági szabvány eszközöknek a többsége teljesen ingyenes! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.hu.png) +![Intro Programming](../../../../translated_images/hu/webdev101-programming.d6e3f98e61ac4bff.png) > Sketchnote készítette [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/hu/1-getting-started-lessons/2-github-basics/README.md b/translations/hu/1-getting-started-lessons/2-github-basics/README.md index 52e683e52..133ed0962 100644 --- a/translations/hu/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/hu/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Tudom, hogy kezdetben soknak tűnhet – emlékszem, hogy az első GitHub oldala Ezt az utat együtt tesszük meg, lépésről lépésre. Nem kell sietni, nincs nyomás – csak te, én és néhány igazán klassz eszköz, amelyek a legjobb barátaiddá válnak! -![Bevezetés a GitHubhoz](../../../../translated_images/webdev101-github.8846d7971abef6f9.hu.png) +![Bevezetés a GitHubhoz](../../../../translated_images/hu/webdev101-github.8846d7971abef6f9.png) > Vázlatkép készítette: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ Először találjunk egy tárolót (repo-t) GitHubon, ami érdekel, és amelyhez ✅ Jó módszer kezdőbarát repók megtalálására a [good-first-issue címkével való keresés](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Másolj helyileg egy repót](../../../../translated_images/clone_repo.5085c48d666ead57.hu.png) +![Másolj helyileg egy repót](../../../../translated_images/hu/clone_repo.5085c48d666ead57.png) Több módja is van a kód átmásolásának. Az egyik módszer a repó tartalmának "klónozása" HTTPS, SSH vagy a GitHub CLI (parancssoros felület) használatával.