- **מערכת ניקוד**: כל ספינת אויב שהושמדה מזכה ב-100 נקודות (מספרים עגולים קלים יותר לחישוב מנטלי עבור השחקנים). הניקוד יוצג בפינה השמאלית התחתונה.
- **מונה חיים**: הגיבור שלכם מתחיל עם שלושה חיים - סטנדרט שנקבע על ידי משחקי ארקייד מוקדמים כדי לאזן בין אתגר לבין יכולת משחק. כל התנגשות עם אויב תעלה בחיים אחד. נציג את מספר החיים הנותרים בפינה הימנית התחתונה באמצעות אייקונים של חלליות .
- **מונה חיים**: הגיבור שלכם מתחיל עם שלושה חיים - סטנדרט שנקבע על ידי משחקי ארקייד מוקדמים כדי לאזן בין אתגר לבין יכולת משחק. כל התנגשות עם אויב תעלה בחיים אחד. נציג את מספר החיים הנותרים בפינה הימנית התחתונה באמצעות אייקונים של חלליות .
בפרויקט הזה תלמדו איך לבנות בנק פיקטיבי. השיעורים כוללים הוראות על איך לעצב אפליקציית ווב ולספק נתיבים, לבנות טפסים, לנהל מצב, ולמשוך נתונים מ-API שממנו תוכלו לקבל את נתוני הבנק.
## 🗺️ מסע הלמידה שלכם בפיתוח אפליקציות AI
@ -194,7 +194,7 @@ mindmap
**עיקרון מרכזי**: פיתוח אפליקציות AI משלב כישורי פיתוח אינטרנט מסורתיים עם אינטגרציית שירותי AI, ליצירת אפליקציות חכמות שמרגישות טבעיות ומגיבות למשתמשים.
**מה הופך את ה-Playground לכל כך שימושי:**
- **נסו** מודלים שונים של AI כמו GPT-4o-mini, Claude ואחרים (כולם חינמיים!)
@ -204,7 +204,7 @@ mindmap
אחרי שתשחקו קצת, פשוט לחצו על לשונית "Code" ובחרו את שפת התכנות שלכם כדי לקבל את קוד היישום שתצטרכו.
## הגדרת אינטגרציה בצד השרת עם Python
@ -2333,14 +2333,14 @@ mindmap
- **נווט** ל-[מאגר Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **לחץ** על "Use this template" בפינה הימנית העליונה (ודא שאתה מחובר ל-GitHub)
**שלב 2: הפעלת Codespaces**
- **פתח** את המאגר החדש שיצרת
- **לחץ** על כפתור "Code" הירוק ובחר "Codespaces"
- **בחר** "Create codespace on main" כדי להתחיל את סביבת הפיתוח שלך
आज, हम उन अद्भुत उपकरणों का अन्वेषण करने वाले हैं जो आधुनिक वेब विकास को न केवल संभव बनाते हैं, बल्कि अत्यधिक मजेदार भी। मैं बात कर रहा हूँ बिलकुल उन्हीं संपादकों, ब्राउज़रों, और वर्कफ़्लोज़ की जो नेटफ्लिक्स, स्पॉटिफाई, और आपके पसंदीदा इंडी ऐप स्टूडियो के डेवलपर हर दिन उपयोग करते हैं। और यहाँ वह हिस्सा है जो आपको खुश नाचने पर मजबूर कर देगा: इनमें से अधिकांश पेशेवर-ग्रेड, उद्योग-मानक उपकरण पूरी तरह से मुफ्त हैं!
हम इस यात्रा को साथ-साथ कदम दर कदम तय करेंगे। कोई जल्दी नहीं, कोई दबाव नहीं – सिर्फ आप, मैं, और कुछ बहुत ही बढ़िया टूल्स जो आपके नए सबसे अच्छे दोस्त बनने वाले हैं!
> स्केचनोट [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/)।
कोड कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी के कंटेंट को "क्लोन" करना, HTTPS, SSH, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करके।
> स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, या हाइपरटेक्स्ट मार्कअप भाषा, हर उस वेबसाइट की नींव है जिसे आपने कभी देखा है। HTML को ऐसे समझें जैसे कंकाल जो वेब पेजों को संरचना देता है – यह निर्धारित करता है कि सामग्री कहाँ जाती है, यह कैसे संगठित है, और प्रत्येक भाग क्या दर्शाता है। जबकि बाद में CSS आपके HTML को रंग और लेआउट से "सजाएगा", और जावास्क्रिप्ट इसे इंटरैक्टिविटी के साथ जीवन में लाएगा, HTML वह मूल संरचना प्रदान करता है जो सब कुछ संभव बनाती है।
@ -86,7 +86,7 @@ HTML कोड में जाने से पहले, आइए अपन
4. एक्सप्लोरर पैन में, "New File" आइकन पर क्लिक करें
5. अपनी फ़ाइल का नाम `index.html` रखें
**विकल्प 2: टर्मिनल कमांड का उपयोग करना**
```bash
@ -236,48 +236,48 @@ HTML में चित्र जोड़ने से पहले, आपक
> स्केचनोट द्वारा [टोमोमी इमुरा](https://twitter.com/girlie_mac)
याद है आपका HTML टेरारियम कितना साधारण दिखता था? CSS वह जगह है जहाँ हम उस सादे ढांचे को कुछ और आकर्षक रूप में बदलते हैं।
@ -202,7 +202,7 @@ body {
अपने ब्राउज़र के डेवलपर टूल्स (F12) खोलें, Elements टैब में जाएं, और अपने `<h1>` एलिमेंट का निरीक्षण करें। आप देखेंगे कि यह बॉडी से फ़ॉन्ट परिवार विरासत में लेता है:
✅ **प्रयोग का समय**: बॉडी पर `color`, `line-height`, या `text-align` जैसे अन्य विरासत में मिलने वाले गुण सेट करके देखें। आपके हेडिंग और अन्य एलिमेंट्स पर क्या प्रभाव पड़ता है?
@ -332,7 +332,7 @@ ID सेलेक्टर्स `#` सिंबल का उपयोग क
**यहाँ हर पौधे की HTML संरचना है:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.hi.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/hi/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
आप सूक्ष्म हाइलाइट बनाएंगे जो दिखाते हैं कि प्रकाश कैसे कांच की सतहों से परावर्तित होता है। यह तरीका पुनर्जागरण चित्रकार जन वैन ऐक की त्रि-आयामी कांच तस्वीरें बनाने के लिए प्रकाश और परावर्तन के उपयोग जैसा है। यह रहा आपका लक्ष्य:
> स्केचनोट द्वारा [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 और 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 और HTML मार्कअप का एक प्रतिनिधित्व जो इसे संदर्भित करता है। [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) से
@ -591,7 +591,7 @@ function stopElementDrag() {
- **क्रॉस-डिवाइस समर्थन**: डेस्कटॉप और मोबाइल दोनों पर काम करता है
- **प्रदर्शन जागरूकता**: कोई मेमोरी लीक या अनावश्यक गणनाएँ नहीं
> कुछ शुरुआती ब्राउज़र्स, द्वारा [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### ब्राउज़र्स वेब सामग्री को कैसे प्रोसेस करते हैं
@ -194,7 +194,7 @@ quadrantChart
एक्सटेंशन इंस्टॉलेशन प्रक्रिया को समझना आपको यह पूर्वानुमान लगाने में मदद करता है कि उपयोगकर्ता आपके एक्सटेंशन को इंस्टॉल करते समय क्या अनुभव करेंगे। इंस्टॉलेशन प्रक्रिया आधुनिक ब्राउज़रों में मानकीकृत है, इंटरफ़ेस डिज़ाइन में केवल मामूली अंतर होते हैं।
> **महत्वपूर्ण**: सुनिश्चित करें कि "डेवलपर मोड" चालू है और जब अपने एक्सटेंशन्स का परीक्षण कर रहे हों तो अन्य स्टोर से एक्सटेंशन्स की अनुमति दें।
@ -308,10 +308,10 @@ project-root/
### एक्सटेंशन व्यूज़ का अवलोकन
**सेटअप व्यू** - पहली बार उपयोगकर्ता की कॉन्फ़िगरेशन:
**परिणाम व्यू** - कार्बन पदचिह्न डेटा प्रदर्शन:
> ⚠️ **सुरक्षा विचार**: प्रोडक्शन एप्लिकेशन में API कुंजी लोकलस्टोरेज में रखना सुरक्षा जोखिम पैदा करता है क्योंकि जावास्क्रिप्ट इस डेटा तक पहुँच सकता है। सीखने के लिए यह ठीक है, लेकिन असली एप्लिकेशन संवेदनशील क्रेडेंशियल्स के लिए सुरक्षित सर्वर-साइड स्टोरेज का उपयोग करना चाहिए।
आइए इसे आज़माएँ। कोई वेबसाइट खोलें (Microsoft.com अच्छा विकल्प है) और 'रिकॉर्ड' बटन पर क्लिक करें। अब पेज रिफ्रेश करें और प्रोफाइलर को सब कुछ कैप्चर करते देखें। जब आप रिकॉर्डिंग बंद करेंगे, तो आपको ब्राउज़र के 'स्क्रिप्ट', 'रेंडर' और 'पेंट' करने के विस्तृत विवरण दिखाई देंगे। यह मुझे याद दिलाता है कि कैसे मिशन कंट्रोल एक रॉकेट लॉन्च के दौरान हर सिस्टम की निगरानी करता है - आपको वास्तविक समय के डेटा मिलते हैं कि क्या हो रहा है और कब।
✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) में और भी बहुत जानकारी है यदि आप गहराई से जानना चाहते हैं
@ -133,11 +133,11 @@ flowchart LR
प्रोफ़ाइल टाइमलाइन का हिस्सा चुनकर अपने पेज के प्रदर्शन का स्नैपशॉट प्राप्त करें और सारांश पैन देखें:
> छवि [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से
कैनवास तत्व पर ड्रॉ करने के लिए, आप तीन चरणों की प्रक्रिया का पालन करेंगे जो सभी कैनवास ग्राफिक्स की नींव है। जब आप इसे कुछ बार करते हैं, तो यह सहज हो जाता है:
- **स्कोरिंग सिस्टम**: हर नष्ट किए गए शत्रु जहाज के लिए 100 अंक मिलते हैं (गोल संख्याएं खिलाड़ियों के लिए मानसिक गणना में आसान होती हैं)। स्कोर स्क्रीन के नीचे बाएं कोने में दिखेगा।
- **जीवन काउंटर**: आपका नायक तीन जीवन के साथ शुरू होता है - यह एक मानक है जो शुरुआती आर्केड गेम्स द्वारा चुनौती और खेल योग्यता के बीच संतुलन बनाने हेतु स्थापित किया गया। हर बार शत्रु से टकराने पर एक जीवन कम हो जाता है। बचा हुआ जीवन नीचे दाएं कोने में जहाज के आइकनों के साथ दर्शाएंगे ।
- **जीवन काउंटर**: आपका नायक तीन जीवन के साथ शुरू होता है - यह एक मानक है जो शुरुआती आर्केड गेम्स द्वारा चुनौती और खेल योग्यता के बीच संतुलन बनाने हेतु स्थापित किया गया। हर बार शत्रु से टकराने पर एक जीवन कम हो जाता है। बचा हुआ जीवन नीचे दाएं कोने में जहाज के आइकनों के साथ दर्शाएंगे ।
`history.pushState` का उपयोग ब्राउज़र के नेविगेशन इतिहास में नई प्रविष्टियां बनाता है। आप इसे तब जांच सकते हैं जब आप ब्राउज़र के *बैक बटन* को दबाए रखें, यह आपको कुछ ऐसा दिखाना चाहिए:
यदि आप कुछ बार बैक बटन क्लिक करते हैं, तो आप देखेंगे कि वर्तमान URL बदल जाता है और इतिहास अपडेट होता है, लेकिन वही टेम्पलेट प्रदर्शित होता रहता है।
3. देखें कि पेज कैसे रीलोड होता है और डेटा URL में आता है
### HTTP मेथड्स की तुलना
@ -346,7 +346,7 @@ graph TD
2. "Create Account" बटन पर क्लिक करें
3. अपने ब्राउज़र में सर्वर प्रतिक्रिया देखें
**आपको क्या देखना चाहिए:**
- ब्राउज़र API एंडपॉइंट URL पर रीडायरेक्ट करता है
@ -609,7 +609,7 @@ async function register() {
3. **"Create Account" क्लिक करें**
4. **कंसोल संदेशों और उपयोगकर्ता प्रतिक्रिया देखें**
**आपको क्या देखना चाहिए:**
- **लोडिंग स्टेट** सबमिट बटन पर दिखाई देता है
@ -783,7 +783,7 @@ input:focus:invalid {
3. **उपयोगकर्ता नाम फ़ील्ड में विशेष वर्ण आज़माएं**
4. **नकारात्मक शेष राशि दर्ज करें**
**आप क्या देखेंगे:**
- **ब्राउज़र स्वदेशी सत्यापन संदेश प्रदर्शित करता है**
@ -943,7 +943,7 @@ timeline
यहां एक उदाहरण है कि अंतिम लॉगिन पृष्ठ कैसा दिख सकता है कुछ CSS स्टाइलिंग के बाद:
हम अपनी पूंछ के पीछे दोड़ने के बजाय, एक **केद्रित स्टेट मैनेजमेंट** सिस्टम बनाएंगे। इसे ऐसे सोचिए जैसे एक बहुत ही व्यवस्थित व्यक्ति सभी महत्वपूर्ण चीज़ों का ज़िम्मा संभाल रहा हो:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ timeline
असाइनमेंट पूरा करने के बाद यहाँ एक उदाहरण परिणाम है:
इस असाइनमेंट को पूरा करने के बाद, आपका बैंकिंग ऐप पूरी तरह से कार्यात्मक "ट्रांजैक्शन जोड़ें" फीचर के साथ होना चाहिए जो पेशेवर रूप से दिखता और व्यवहार करता है:
4. एक कमिट संदेश लिखें: "Add initial HTML structure"
5. अपनी परिवर्तनों को सहेजने के लिए "Commit new file" क्लिक करें
**यह प्रारंभिक सेटअप जो करता है:**
- उचित HTML5 दस्तावेज़ संरचना स्थापित करता है सेमांटिक तत्वों के साथ
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **सफलता संकेत:** आपको एक्सप्लोरर साइडबार में अपनी परियोजना फ़ाइलें और मुख्य संपादक क्षेत्र में `index.html` संपादन के लिए दिखाई देगा।
**इंटरफ़ेस में आप क्या देखेंगे:**
- **Explorer साइडबार**: आपकी रिपॉजिटरी फ़ाइलें और फोल्डर संरचना दिखाता है
@ -449,7 +449,7 @@ li:before {
**इंस्टॉल के तुरंत बाद परिणाम:**
CodeSwing इंस्टॉल होने के बाद, आप अपने रिज्यूम वेबसाइट का लाइव प्रीव्यू संपादक में देखेंगे। इससे आप ठीक वैसे ही देख सकते हैं कि आपकी साइट कैसी दिखती है जैसे आप बदलाव करते हैं।
**बढ़े हुए इंटरफ़ेस को समझना:**
- **स्प्लिट व्यू**: एक तरफ आपका कोड और दूसरी तरफ लाइव प्रीव्यू दिखाता है
## 🗺️ AI एप्लिकेशन विकास के माध्यम से आपकी सीखने की यात्रा
@ -189,7 +189,7 @@ mindmap
```
**मूल सिद्धांत**: AI एप्लिकेशन विकास पारंपरिक वेब विकास कौशल को AI सेवा इंटीग्रेशन के साथ संयोजित करता है, जिससे उपयोगकर्ताओं के लिए स्वाभाविक और उत्तरदायी बुद्धिमान एप्लिकेशन बनते हैं।
**प्लेग्राउंड को इतना उपयोगी बनाने वाली बातें:**
- GPT-4o-mini, Claude, और अन्य (सभी मुफ़्त!) जैसे विभिन्न AI मॉडल आज़माएं
@ -199,7 +199,7 @@ mindmap
जब आप थोड़ा प्रयोग कर लें, तो बस "Code" टैब पर क्लिक करें और अपनी प्रोग्रामिंग भाषा चुनें ताकि आपको आवश्यक कार्यान्वयन कोड मिल सके।
## Python बैकएंड इंटीग्रेशन सेट करना
@ -2354,14 +2354,14 @@ mindmap
- [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) पर जाएं
- शीर्ष-दाएँ कोने में "Use this template" पर क्लिक करें (सुनिश्चित करें कि आप GitHub में लॉग इन हैं)
**चरण 2: Codespaces लॉन्च करें**
- अपने नए बनाए गए रिपॉजिटरी को खोलें
- हरे "Code" बटन पर क्लिक करें और "Codespaces" चुनें
- "Create codespace on main" चुनें ताकि आपका विकास पर्यावरण शुरू हो सके
**चरण 3: पर्यावरण कॉन्फ़िगरेशन**
एक बार आपका Codespace लोड हो जाने पर, आपको मिलेगा:
प्रत्येक पाठ में एक असाइनमेंट, एक ज्ञान जांच और एक चुनौती शामिल है जो आपको निम्नलिखित विषयों पर गाइड करती है:
- प्रॉम्प्टिंग और प्रॉम्प्ट इंजीनियरिंग
@ -100,7 +100,7 @@ Azure AI Foundry Discord समुदाय में शामिल हों
आपके द्वारा बनाई गई इस रिपॉजिटरी की कॉपी में, **Code** बटन पर क्लिक करें और **Open with Codespaces** चुनें। यह आपके लिए काम करने के लिए नया Codespace बनाएगा।
歡迎來到網頁開發中最吸引人的部分之一——讓事物互動起來！文件物件模型（DOM）就像你的 HTML 與 JavaScript 之間的橋樑，今天我們將利用它讓你的植物箱活起來。當 Tim Berners-Lee 發明第一台網頁瀏覽器時，他就想像了一個文件可以動態且互動的網路，而 DOM 讓這個願景成為可能。
> DOM 與對應 HTML 標記的示意圖。來自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> DOM 與對應 HTML 標記的示意圖。來自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
## 🗺️ 你的 AI 應用開發學習之旅
@ -189,7 +189,7 @@ mindmap
```
**核心原則**：AI 應用開發結合傳統網頁技能與 AI 服務整合，創建智能且自然、回應迅速的應用。
**playground 特別實用的原因：**
- **試用** 不同的 AI 模型，如 GPT-4o-mini、Claude 等（全部免費！）
@ -199,7 +199,7 @@ mindmap
玩過一會兒後，點擊「Code」頁籤，選擇程式語言，即可取得你需要的實作程式碼。
## 設定 Python 後端整合
@ -2353,14 +2353,14 @@ mindmap
- **前往** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **點擊** 右上角的「Use this template」（確保已登入 GitHub）
**步驟 2：啟動 Codespaces**
- **打開** 剛建立的儲存庫
- **點擊** 綠色「Code」按鈕，選擇「Codespaces」
- **選擇** 「Create codespace on main」開始你的開發環境
@ -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!
@ -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!
> 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/).
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).
> 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`
**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
✅ **Vrijeme za eksperiment**: Pokušaj postaviti druga nasljediva svojstva na `<body>` 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
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.hr.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/hr/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -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:
> 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-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-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
> 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.
> **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:
**Zaslon rezultata** - prikaz podataka o ugljičnom otisku:
ClearStorage --> FirstTime: Povratak na postavljanje
```
> ⚠️ **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.
@ -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.
✅ [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:
✅ 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?
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.
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').
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.
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.
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').
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.
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.
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').
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.
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.
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').
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.
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.
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").
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.
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.
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').
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.
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.
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').
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.
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.
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').
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.
> 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
- **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 .
- **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 .
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:
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.
@ -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
### 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
**Š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
**Š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
**Š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:
@ -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:
```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:
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:
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.
- **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
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:
@ -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
**Š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.
@ -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.
**Razumijevanje poboljšanog sučelja:**
- **Podijeljeni prikaz**: **Prikazuje** vaš kod na jednoj strani i pregled uživo na drugoj
## 🗺️ 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.
**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.
## 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)
**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
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.
@ -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!
@ -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!
@ -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/).
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.
localizeflow[bot]
1 week ago