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

translations/ta/7-bank-project/3-data/assignment.md

@@ -1,29 +1,144 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "a4abf305ede1cfaadd56a8fab4b4c288",
-  "translation_date": "2025-10-11T12:04:47+00:00",
+  "original_hash": "d0a02cb117e91a5b5f24178080068a3d",
+  "translation_date": "2026-01-07T13:33:53+00:00",
   "source_file": "7-bank-project/3-data/assignment.md",
   "language_code": "ta"
 }
 -->
-# உங்கள் கோ드를 மறுசீரமைத்து கருத்துரைகளைச் சேர்க்கவும்
+# குறியீட்டுத் திருத்தம் மற்றும் ஆவணம் பணிகள்
 
-## வழிமுறைகள்
+## கற்றல் நோக்கங்கள்
 
-உங்கள் கோட்படம் வளர்ந்துகொண்டே இருக்கும் போது, அதை வாசிக்க எளிதாகவும் பராமரிக்க எளிதாகவும் இருக்க, உங்கள் கோடுகளை அடிக்கடி மறுசீரமைக்க வேண்டும். உங்கள் `app.js` கோடின் தரத்தை மேம்படுத்த, கருத்துரைகளைச் சேர்த்து மறுசீரமைக்கவும்:
+இந்த பணியை முடிப்பதன் மூலம், நீங்கள் தொழில்முனைவர் சோதனையாளர்கள் தினமும் பயன்படுத்தும் அவசியமான மென்பொருள் மேம்பாட்டுத் திறன்களை பயிற்சி பெறுவீர்கள். நீண்டநேர பயன்பாட்டிற்கு ஏற்ப குறியீட்டை அமைக்க, மறுபடியும் எழுதுதலை குறைக்க உரிய செயற்பாடுகளை கற்றுக்கொள்ளவும், உங்கள் பணி எதிர்கால மேம்பாட்டாளர்களுக்காக (உட்பட உங்கள் தானேயும்!) ஆவணம் உருவாக்கவும் கற்றுக்கொள்வீர்கள்.
 
-- சர்வர் API அடிப்படை URL போன்ற நிலையான மதிப்புகளை பிரிக்கவும்
-- ஒரே மாதிரியான கோடுகளை ஒருங்கிணைக்கவும்: உதாரணமாக, `createAccount()` மற்றும் `getAccount()` இரண்டிலும் பயன்படுத்தப்படும் கோடுகளை ஒருங்கிணைக்க `sendRequest()` என்ற ஒரு செயல்பாட்டை உருவாக்கலாம்
-- கோடுகளை வாசிக்க எளிதாக இருக்க reorganize செய்யவும், மேலும் கருத்துரைகளைச் சேர்க்கவும்
+சுத்தம் செய்யப்பட்ட, நல்ல முறையில் ஆவணம் செய்யப்பட்ட குறியீடு என்பது பல மேம்பாட்டாளர்கள் சேர்ந்து பணியாற்றும் மற்றும் குறியீட்டு தளங்கள் காலப்போக்கில் வளர்க்கப்படும் உண்மைப் புவி வலை பயன்பாட்டு அட்டவணைகளுக்கு மிகவும் அவசியமாகும்.
 
-## மதிப்பீட்டு அளவுகோல்
+## பணியின் கண்ணோட்டம்
 
-| அளவுகோல் | சிறந்தது                                                                                                                                                     | போதுமானது                                                                                          | மேம்பாடு தேவை                                                                     |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|          | கோடு கருத்துரைகள் சேர்க்கப்பட்டு, வெவ்வேறு பிரிவுகளில் நன்றாக ஒழுங்குபடுத்தப்பட்டு, வாசிக்க எளிதாக உள்ளது. நிலையான மதிப்புகள் பிரிக்கப்பட்டு, ஒருங்கிணைக்கப்பட்ட `sendRequest()` செயல்பாடு உருவாக்கப்பட்டுள்ளது. | கோடு சுத்தமாக உள்ளது, ஆனால் மேலும் கருத்துரைகள், நிலையான மதிப்புகளை பிரித்தல் அல்லது ஒருங்கிணைப்பு மூலம் மேம்படுத்தலாம். | கோடு குழப்பமாக உள்ளது, கருத்துரைகள் சேர்க்கப்படவில்லை, நிலையான மதிப்புகள் பிரிக்கப்படவில்லை மற்றும் கோடு ஒருங்கிணைக்கப்படவில்லை. |
+உங்கள் வங்கியாளர்ப்பயன்பாட்டின் `app.js` கோப்பு உள்நுழைவு, பதிவு மற்றும் டாஷ்போர்ட் செயல்பாடுகளுடன் மிகுந்த அளவுக்கு பெரிகிறது. இந்த குறியீட்டை தொழில்முறை மேம்பாட்டு நடைமுறைகளை பயன்படுத்தி திருத்தி வாசிக்க எளிதாகவும் பராமரிக்க சுலபமாகவும் மற்றும் மறுபடியும் எழுதுதலை குறைக்கவும் நேரம்.
+
+## திறனாய்வு
+
+உங்கள் தற்போதைய `app.js` குறியீட்டை கீழ்க்காணும் மூன்று முக்கிய திருத்துதல் தொழில்நுட்பங்களை பயன்படுத்தி மாற்றுக:
+
+### 1. கட்டமைப்பு நிலையானவற்றை பிரித்தெடுக்கவும்
+
+**பணி**: உங்கள் கோப்பு மேல் பகுதியில் மீண்டும் பயன்படுத்தக்கூடிய நிலையானங்களைக் கொண்ட கட்டமைப்பு பிரிவை உருவாக்கவும்.
+
+**நடைமுறை வழிகாட்டுதல்:**
+- சர்வர் API அடிப்படை URL ஐ (இப்போது பல இடங்களில் நேரடியாக உள்ளது) பிரித்தெடுக்கவும்
+- பல செயல்களில் தோன்றும் பிழை செய்திகளுக்கான நிலையானங்களை உருவாக்கவும்
+- மிகவும் பயன்படுத்தப்படும் பாதை வழிகள் மற்றும் கூறு ஐடிகளை பிரித்தெடுக்க பரிசீலனை செய்யவும்
+
+**எடுத்துக்காட்டு அமைப்பு:**
+```javascript
+// கட்டமைப்பு நிரந்தரங்கள்
+const API_BASE_URL = 'http://localhost:5000/api';
+const ROUTES = {
+  LOGIN: '/login',
+  DASHBOARD: '/dashboard'
+};
+```
+
+### 2. ஒன்றுசேர்ந்த கோரிக்கை செயற்கூறை உருவாக்கவும்
+
+**பணி**: `createAccount()` மற்றும் `getAccount()` இடையேயான மறுபடியை நீக்கி மீண்டும் பயன்படுத்தக்கூடிய `sendRequest()` என்ற செயல்பாட்டை உருவாக்கவும்.
+
+**தேவைகள்:**
+- GET மற்றும் POST இரு கோரிக்கைகளையும் கையாளவும்
+- சரியான பிழை கையாளுதலை உட்படுத்தவும்
+- வெவ்வேறு URL இடங்களைக் கையாளவும்
+- விருப்பமான கோரிக்கை உடல் தரவை ஏற்றுக்கொள்ள வேண்டும்
+
+**செயல்பாட்டின் கையெழுத்து வழிகாட்டுதல்:**
+```javascript
+async function sendRequest(endpoint, method = 'GET', data = null) {
+  // உங்கள் நிறைவேற்றல் இங்கே
+}
+```
+
+### 3. தொழில்முறை குறியீட்டு ஆவணத்தை சேர்க்கவும்
+
+**பணி**: உங்கள் குறியீட்டை தெளிவான மற்றும் உதவிகரமான கருத்துக்களுடன் ஆவணப்படுத்தவும், உங்கள் தத்துவத்தின் பின்னணியில் உள்ள "ஏன்" என்பதை விளக்கவும்.
+
+**ஆவணப்படுத்தான் கொள்கைகள்:**
+- செயல்பாட்டின் நோக்கம், அளவுருக்கள் மற்றும் திரும்பும் மதிப்புகளை விளக்கும் ஆவணங்கள் சேர்க்கவும்
+- சிக்கலான தத்துவம் அல்லது வணிக விதிமுறைகளுக்கு உள்ளடக்க கருத்துக்களைச் சேர்க்கவும்
+- சம்பந்தப்பட்ட செயல்பாட்டைத் தொகுத்து பிரிவு தலைப்புகளுடன் பிரிக்கவும்
+- எதுவும் தெளிவாக இல்லாத குறியீட்டு படிமங்கள் அல்லது உலாவி சார்ந்த טרிகர்கள் விளக்கப்பட வேண்டும்
+
+**எடுத்துக்காட்டு ஆவணப்படுத்தல் பாணி:**
+```javascript
+/**
+ * Authenticates user and redirects to dashboard
+ * @param {Event} event - Form submission event
+ * @returns {Promise<void>} - Resolves when login process completes
+ */
+async function login(event) {
+  // ஜாவாச்கிரிப்டுடன் கையாள தொடங்குவதற்கு பிற்போக்கு படிவ சமர்ப்பிப்பை தடுக்கும்
+  event.preventDefault();
+  
+  // உங்கள் செயலாக்கம்...
+}
+```
+
+## வெற்றிமிகு அளவுகோல்கள்
+
+உங்கள் திருத்தப்பட்ட குறியீடு கீழ்க்காணும் தொழில்முறை மேம்பாட்டு நடைமுறைகளை காட்ட வேண்டும்:
+
+### சிறந்த செயல்பாடு
+- ✅ **நிலைகளும் வடிவமைப்பும்**: அனைத்து முக்கியச் சரங்களை மற்றும் URL-களை தெளிவான பெயர்களுடன் நிலையாக பிரித்தெடுக்கப்பட்டுள்ளது
+- ✅ **DRY கொள்கை**: பொது கோரிக்கை தத்துவம் மீண்டும் பயன்படுத்தக்கூடிய `sendRequest()` செயல்பாட்டில் ஒற்றி ஒருங்கிணைக்கப்பட்டுள்ளன
+- ✅ **ஆவணப்படுத்தல்**: செயல்பாடுகள் நோக்கம் மற்றும் அளவுருக்களை விளக்கும் தெளிவான JSDoc கருத்துக்களுடன் உள்ளன
+- ✅ **அமைப்பு**: குறியீடு பகுதி தலைப்புகளுடன் இயக்க வழக்கு முறையில் தொகுக்கப்பட்டுள்ளது மற்றும் ஒருமைத்தன்மை கொண்ட வடிவமைப்பு உள்ளது
+- ✅ **பிழை கையாளுதல்**: புதிய கோரிக்கை செயல்பாட்டை பயன்படுத்தி மேம்பட்ட பிழை கையாளுதல் உள்ளது
+
+### போதுமான செயல்பாடு
+- ✅ **நிலைகள்**: பெரும்பாலான மீண்டும் பயன்படுத்தப்படும் மதிப்புகள் பிரிக்கப்பட்டுள்ளன, சில சிறிய நேரடிப் மதிப்புக்களே உள்ளன
+- ✅ **வகுத்தல்**: அடிப்படை `sendRequest()` செயல்பாடு உருவாக்கப்பட்டுள்ளது, ஆனால் அனைத்து மாறுபாடுகளையும் கையாளக் கூடாது
+- ✅ **கருத்துக்கள்**: முக்கிய செயல்பாடுகள் ஆவணப்படுத்தப்பட்டுள்ளன, சில விளக்கங்கள் இன்னும் முழுமையாக இருக்கலாம்
+- ✅ **வாசிப்புத் தன்மை**: குறியீடு பொதுவாக நன்கு ஒழுங்குபடுத்தப்பட்டுள்ளதுடன் மேம்படுத்த வேண்டிய பகுதிகள் உள்ளன
+
+### மேம்படுத்த வேண்டியது
+- ❌ **நிலைகள்**: கோப்பில் பல முக்கிய சரங்கள் மற்றும் URL-கள் நேரடியாக உள்ளன
+- ❌ **மறு எழுதுதல்**: ஒற்றுமையான செயல்களுக்கு இடையில் அதிகளவிலான குறியீட்டு நகல் உள்ளது
+- ❌ **ஆவணப்படுத்தல்**: குறியீட்டின் நோக்கம் விளக்காத அல்லது போதும் அளவில் இல்லாத கருத்துக்கள்
+- ❌ **அமைப்பு**: குறியீடு தெளிவான அமைப்பு மற்றும் காரணமான குழுவாக்கம் இல்லாமல் உள்ளது
+
+## உங்கள் திருத்தப்பட்ட குறியீட்டை சோதனை செய்யவும்
+
+திருத்தத்திற்குப் பிறகு, உங்கள் வங்கியாளர் பயன்பாடு சரியான முறையில் இயங்குகிறதா என்பதை உறுதிப்படுத்துக:
+
+1. **எல்லா பயனர் ஓட்டுகளும் சோதனை செய்யவும்**: பதிவு, உள்நுழைவு, டாஷ்போர்ட் காட்சி மற்றும் பிழை கையாளுதல்
+2. **API அழைப்புகளை சரிபார்க்கவும்**: உங்கள் `sendRequest()` செயல்பாடு கணக்கு உருவாக்கவும் பெறவும் சரியாக செயல்படுவதை உறுதிப்படுத்த
+3. **பிழை நிலைகள் சோதனை செய்யவும்**: தவறான அங்கீகார விவரங்கள் மற்றும் நெட்வொர்க் பிழைகளுடன் சோதனை செய்யவும்
+4. **கான்சோல் வெளியீட்டை பரிசீலனை செய்யவும்**: திருத்தத்தின் போது புதிய பிழைகள் அறிமுகம் செய்யப்படவில்லை என்பதைக் கண்டறியவும்
+
+## சமர்ப்பிக்க வழிகாட்டல்கள்
+
+உங்கள் திருத்தப்பட்ட `app.js` கோப்பை பின்வருமாறு சமர்ப்பிக்கவும்:
+- வெவ்வேறு செயல்பாடுகளை ஒழுங்குபடுத்தும் தெளிவான பிரிவு தலைப்புகள்
+- ஒருமைத்தன்மையான குறியீடு வடிவமைப்பு மற்றும் இடைவெளிகள்
+- அனைத்து செயல்பாடுகளுக்குமான முழுமையான JSDoc ஆவணங்கள்
+- மேல் பகுதியில் உங்கள் திருத்த முறையை விளக்கும் சுருக்கமான கருத்து
+
+**விரும்பத்தக்க சவால்**: உங்கள் பயன்பாட்டின் கட்டமைப்பையும் வெவ்வேறு செயல்பாடுகள் ஒன்றிணைந்து எப்படி வேலை செய்கின்றன என்பதையும் விளக்கும் எளிய குறியீடு ஆவணத் தொகுப்பை (`CODE_STRUCTURE.md`) உருவாக்கவும்.
+
+## உண்மை உலகின் தொடர்பு
+
+இந்த பணி தொழில்முறை மேம்பாட்டாளர்கள் அடிக்கடி செய்யும் குறியீட்டு பராமரிப்பு வகையை பிரதிபலிக்கிறது. தொழில்துறை சூழலில்:
+- **குறியீடு ஆய்வுகள்** இந்த பணிக்கு ஒத்த வாசிப்புத் திறன் மற்றும் பராமரிப்பு திறனை மதிப்பிடும்
+- **தொழில்நுட்ப கடன்** குறியீடு முறையாக திருத்தப்பட்டு ஆவணம் செய்யப்படாதபோது கூடும்
+- **குழு ஒத்துழைப்பு** தெளிவாக மற்றும் நன்கு ஆவணப்படுத்தப்பட்ட குறியீடுக்கு சார்ந்தது, புதிய குழு உறுப்பினர்கள் அதை புரிந்துகொள்ள முடியும்
+- **பிழை சரிசெய்தல்கள்** தரமான பன்முக குறியீட்டு தளங்களில் உள்ள வெற்றியளவில் எளிதாக இருக்கும்
+
+நீங்கள் இங்கே பயிற்சி பெறும் திறன்கள் - நிலையானவற்றை பிரித்தெடுக்கும், மறுபடியை நீக்கும் மற்றும் தெளிவான ஆவணப்படுத்தலை எழுதுதல் - தொழில்முறை மென்பொருள் மேம்பாட்டிற்கு அடிப்படையாகும்.
 
 ---
 
-**குறிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கிறோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**கவனிப்பு**:  
+இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற ஏ.ஐ. மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சி செய்கிறோம் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். உண்மையான ஆவணத்தின் சொந்த மொழி தான் அதிகாரபூர்வமான ஆதாரமாக கருதி கொள்ளப்பட வேண்டும். முக்கியத் தகவல்களுக்காக, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கின்றோம். இந்த மொழிபெயர்ப்பின் பயன்படுத்தியதனால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்றுக் கொள்ளமாட்டோம்.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/7-bank-project/4-state-management/README.md

@@ -1,73 +1,242 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "b46acf79da8550d76445eed00b06c878",
-  "translation_date": "2025-10-11T12:01:36+00:00",
+  "original_hash": "b807b09df716dc48a2b750835bf8e933",
+  "translation_date": "2026-01-07T13:34:22+00:00",
   "source_file": "7-bank-project/4-state-management/README.md",
   "language_code": "ta"
 }
 -->
-# வங்கி பயன்பாட்டை உருவாக்குதல் பகுதி 4: நிலை மேலாண்மை கருத்துக்கள்
+# வங்கி செயலியை உருவாக்குதல் பகுதி 4: நிலை பராமரிப்புக் கருத்துக்கள்
 
-## முன்-வகுப்பு வினாடி வினா
+## ⚡ அடுத்த 5 நிமிடங்களில் நீங்கள் செய்யக்கூடியவை
 
-[முன்-வகுப்பு வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/47)
+**பிஸியான மேம்படுத்துநர்களுக்கான விரைவு துவக்க பாதை**
 
-### அறிமுகம்
+```mermaid
+flowchart LR
+    A[⚡ 5 நிமிடங்கள்] --> B[நிலையின் பிரச்சனைகளை கண்டறிதல்]
+    B --> C[மைய நிலை பொருளை உருவாக்கு]
+    C --> D[updateState செயல்பாட்டை சேர்க்கவும்]
+    D --> E[உடனடி மேம்பாடுகளை காணவும்]
+```
+- **நிமிடம் 1**: தற்போதைய நிலை பிரச்சனையை சோதிக்கவும் - உள்நுழையவும், பக்கத்தை புதுப்பிக்கவும், வெளியேறுவதை கவனிக்கவும்
+- **நிமிடம் 2**: `let account = null` என்பதை `let state = { account: null }` உடன் மாற்றவும்
+- **நிமிடம் 3**: கட்டுப்படுத்தப்பட்ட புதுப்பிப்புகளுக்கான எளிய `updateState()` செயல்பாட்டை உருவாக்கவும்
+- **நிமிடம் 4**: ஒரு செயல்பாட்டை புதிய முறைக்கு புதுப்பிக்கவும்
+- **நிமிடம் 5**: மேம்பட்ட கணிப்பாய்வு மற்றும் பிழைத்திருத்த செயல்திறனை சோதிக்கவும்
+
+**விரைவு டயக்னோஸ்டிக் சோதனை**:
+```javascript
+// முன்பு: பரபரப்பான நிலை
+let account = null; // புதுப்பிக்கும் போது தொலைந்தது!
+
+// பிறகு: மையமிடப்பட்ட நிலை
+let state = Object.freeze({ account: null }); // கட்டுப்படுத்தப்பட்டதும் கண்காணிக்கக்கூடியதும்!
+```
+
+**இது ஏன் முக்கியம்**: 5 நிமிடங்களில், குழப்பமான நிலை நிருவாகத்திலிருந்து கணிப்பாய்வான, பிழைத்திருத்தக்கூடிய வடிவங்களுக்கு மாற்றம் நிகழ்வதை நீங்கள் அனுபவிப்பீர்கள். இது சிக்கலான செயலிகளைக் காப்பாற்றும் அடித்தளமாகும்.
+
+## 🗺️ நிலை பராமரிப்பு நிபுணத்துவத்தின் உங்கள் கற்றல் பயணம்
+
+```mermaid
+journey
+    title கலப்பு நிலைமையிலிருந்து தொழில்முறை கட்டமைப்புக்கு
+    section பிரச்சனைகளை கண்டறிதல்
+      Identify state loss issues: 3: You
+      Understand scattered updates: 4: You
+      Recognize architecture needs: 6: You
+    section கட்டுப்பாட்டை மையமாக்கல்
+      Create unified state object: 5: You
+      Implement controlled updates: 7: You
+      Add immutable patterns: 8: You
+    section நிலைத்தன்மையை சேர்க்கும்
+      Implement localStorage: 6: You
+      Handle serialization: 7: You
+      Create session continuity: 9: You
+    section تازگیயை சமநிலை படுத்தல்
+      Address data staleness: 5: You
+      Build refresh systems: 8: You
+      Achieve optimal balance: 9: You
+```
+**உங்கள் பயண இலக்கு**: இந்த பாடம் முடிவில், நீங்கள் நிலைத்தன்மை, தரவு تازگی மற்றும் கணிப்பாய்வான புதுப்பிப்புகளை கையாளக்கூடிய தொழில்நுட்ப தரமான நிலை நிர்வாக அமைப்பை கட்டியெழுப்புவீர்கள் - தயாரிப்பு செயலிகளில் பயன்படுத்தப்படும் அதே முறைகள்.
+
+## முன்-பாட பரிசோதனை
+
+[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/47)
+
+## அறிமுகம்
 
-ஒரு வலை பயன்பாடு வளரும்போது, அனைத்து தரவோட்டங்களை கண்காணிப்பது சவாலாக மாறுகிறது. எந்த குறியீடு தரவுகளைப் பெறுகிறது, எந்த பக்கம் அதை பயன்படுத்துகிறது, எங்கு மற்றும் எப்போது அதை புதுப்பிக்க வேண்டும்... இது பராமரிக்க கடினமான குழப்பமான குறியீடாக மாறுவது எளிது. குறிப்பாக, உங்கள் பயன்பாட்டின் பல்வேறு பக்கங்களில் தரவுகளைப் பகிர்ந்து கொள்ள வேண்டிய போது, உதாரணமாக பயனர் தரவுகள். *நிலை மேலாண்மை* என்ற கருத்து அனைத்து வகையான நிரல்களில் எப்போதும் இருந்தது, ஆனால் வலை பயன்பாடுகள் சிக்கலானதாக வளர்ந்ததால், இது தற்போது வளர்ச்சியின் போது கவனிக்க வேண்டிய முக்கிய அம்சமாக மாறியுள்ளது.
+நிலை நிர்வாகம் என்பது வோயேஜர் விண்வெளி கப்பல் ஓட்ட நிர்வாகத்தின்போல் – எல்லாம் நன்றாக இயங்கும் போது, அது அங்கே இருப்பதை நீங்கள் כמעט கவனிக்க மாட்டீர்கள். ஆனால் பிரச்சனைகள் வரும்போது, அது நட்சத்திர இடைவெளி சென்றடைவதற்கு இடையூறு ஆகும். வலை மேம்பாட்டில், நிலை என்பது உங்கள் செயலிக்கு நினைவில் வைக்க வேண்டிய அனைத்து விஷயங்களையும் குறிக்கும்: பயனர் உள்நுழைவு நிலை, படிவ தரவு, வழிசெலுத்தல் வரலாறு மற்றும் தற்காலிக இடைமுக நிலைகள்.
 
-இந்த இறுதி பகுதியில், நாம் உருவாக்கிய பயன்பாட்டை மீண்டும் பரிசீலித்து, நிலை மேலாண்மையை எப்படி மேம்படுத்துவது என்பதைப் பார்ப்போம், இது எந்த நேரத்திலும் உலாவி புதுப்பிக்க ஆதரவு அளிக்கவும், பயனர் அமர்வுகளுக்கு இடையே தரவுகளை நிலைத்திருக்கவும் உதவுகிறது.
+உங்கள் வங்கி செயலி எளிய உள்நுழைவு படிவத்திலிருந்து ஒரு மேல்அடுக்கு செயலியாக வளர்ச்சியடைந்தபோது, சில பொதுவான சவால்களை எதிர்கொண்டிருக்கலாம். பக்கத்தை புதுப்பித்தால் பயனர்கள் திடீரென்று வெளியேறுகிறார்கள். உலாவி மூடியால் அனைத்து முன்னேற்றமும் மறைந்து விடுகிறது. ஒரு பிழையை பிழைத்திருத்தும்போது, பல செயல்பாடுகள் ஒரே தரவின் வெவ்வேறு மாற்றங்களை செய்யவும் வேட்டைபிடிக்கவும் நீங்கள் போதிய நேரம் செலவிடுகிறீர்கள்.
 
-### முன்-தரப்பு
+இவை மோசமான கோடிங் குறியீடுகள் அல்ல – செயலிகள் ஒரு குறிப்பிட்ட சிக்கல்தன்மை எல்லையை எட்டும் போது நிகழ்கின்ற இயல்பான வளர்ச்சிப் பாட்டுக்கள். அனைத்து மேம்படுத்துநர்களும், அவற்றின் செயலிகள் "கருத்துக் குறிப்பில்" இருந்து "தயாரிப்பு தயாராக" மாறும்போது இந்த சவால்களை சந்திக்கின்றனர்.
 
-இந்த பாடத்திற்கான [தரவு பெறுதல்](../3-data/README.md) பகுதியை நீங்கள் முடித்திருக்க வேண்டும். மேலும், [Node.js](https://nodejs.org) நிறுவி, [சர்வர் API](../api/README.md) ஐ உள்ளூர் இயக்க வேண்டும், இதனால் நீங்கள் கணக்கு தரவுகளை நிர்வகிக்க முடியும்.
+இந்த பாடத்தில், உங்கள் வங்கி செயலியை நம்பகமான, தொழில்திறன் வாய்ந்த செயலியாக மாற்றும் மைய நிலை நிர்வாக அமைப்பை செயல்படுத்த போகிறோம். தரவு ஓட்டங்களை கணிப்பாய்வாக, பயனர் அமர்வுகளை தக்கவைத்துக்கொண்டு, நவீன வலை செயலிகளில் தேவையான மென்மையான பயனர் அனுபவத்தைக் உருவாக்க நீங்கள் கற்றுக்கொள்வீர்கள்.
 
-சர்வர் சரியாக இயங்குகிறதா என்பதை நீங்கள் இந்த கட்டளையை ஒரு டெர்மினலில் இயக்கி சோதிக்கலாம்:
+## முன்னுரிமைகள்
+
+நிலை நிர்வாகக் கருத்துக்களில் மூழ்குவதற்கு முன், உங்கள் மேம்பாட்டு சூழல் சரியாக அமைக்கப்பட்டிருப்பதையும் உங்கள் வங்கி செயலியின் அடித்தளம் தயார் இருப்பதையும் உறுதிப்படுத்திக் கொள்ளுங்கள். இந்த பாடம் தொடரின் முந்தைய பகுதிகளின் கொள்கைகளும் குறியீடுகளும் நேரடியாக அடிப்படையாக பயன் படுத்துகிறது.
+
+தொடர்வதற்கு முன் கீழ்க்காணும் கூறுகள் தயார் என்பதை உறுதி செய்யவும்:
+
+**தேவைப்படும் அமைப்பு:**
+- [டேட்டா பெறும் பாடம்](../3-data/README.md) முடித்து உங்கள் செயலி கணக்கு தரவை வெற்றிகரமாக ஏற்றவும் மற்றும் காட்டு வேண்டும்
+- உங்கள் கணினியில் [Node.js](https://nodejs.org) ஐ நிறுவவும், பின்னணி API ஐ இயக்குவதற்காக
+- கணக்கு தரவு செயல்பாடுகளை கையாள [server API](../api/README.md) ஐ உள்ளூர் முறையில் துவக்கவும்
+
+**உங்கள் சூழலை சோதனை செய்ய:**
+
+கீழ்க்காணும் கட்டளையை டெர்மினலில் இயக்கி உங்கள் API சேவையகம் சரியாக இயங்குகிறதா எனப் பார்க்கவும்:
 
 ```sh
 curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
+# -> "Bank API v1.0.0" என்பதை ஒரு முடிவாக வழங்க வேண்டும்
+```
+
+**இந்த கட்டளை என்ன செய்கிறது:**
+- உங்கள் உள்ளூர் API சேவையகத்திற்கு GET கோரிக்கை அனுப்புகிறது
+- இணைப்பு சரியானதா என்று சோதிக்கவும் சேவையகம் பதிலளிக்கிறதா என்று உறுதிப்படுத்துகிறது
+- எல்லாம் சரியாக இருந்தால் API பதிப்பு தகவலை திருப்பி அளிக்கிறது
+
+## 🧠 நிலை நிர்வாக கட்டமைப்பின் சாராம்சம்
+
+```mermaid
+mindmap
+  root((நிலை மேலாண்மை))
+    Current Problems
+      Session Loss
+        பக்கம் புதுப்பிப்பு பிரச்சினைகள்
+        உலாவி மூடு தாக்கம்
+        மாறி மீட்டமைப்பு பிரச்சினைகள்
+      Scattered Updates
+        பல திருத்தம் புள்ளிகள்
+        பிழைத்திருத்தல் சவால்கள்
+        முன்கூட்டியே கணிக்க இயலாத நடத்தை
+      Incomplete Cleanup
+        புகுபதிகை நிலை பிரச்சினைகள்
+        நினைவக கசிவு
+        பாதுகாப்பு கவலைகள்
+    Centralized Solutions
+      Unified State Object
+        ஒரே உண்மையின் மூலாதாரம்
+        கணிக்கக்கூடிய அமைப்பு
+        விரிவாக்கக்கூடிய அடிப்படைக் கட்டமைப்பு
+      Controlled Updates
+        மாற்றப்படாத முறைகள்
+        Object.freeze பயன்பாடு
+        செயல்பாடு அடிப்படையிலான மாற்றங்கள்
+      State Tracking
+        வரலாறு மேலாண்மை
+        பிழை காண்பிப்பு
+        மாற்றம் கண்காணிப்பு
+    Persistence Strategies
+      localStorage Integration
+        அமர்வு தொடர்ச்சி
+        JSON தொடர் வடிவமாற்றம்
+        தானாக ஒத்திசைவு
+      Data Freshness
+        சேவையகம் புதுப்பிப்பு
+        பழைய தரவு கையாளல்
+        சமநிலை முன்னேற்றம்
+      Storage Optimization
+        குறைந்தபட்ச தரவு
+        செயல்திறன் கவனம்
+        பாதுகாப்பு கருதுகோள்கள்
 ```
+**மூலக் கொள்கை**: தொழில்திறனான நிலை நிர்வாகம் கணிப்பாய்வு, நிலைத்தன்மை மற்றும் செயல்திறனை சமநிலைப்படுத்தி எளிதாக நம்பகமான பயனர் அனுபவங்களை உருவாக்குகிறது, எளிய தொடர்புகளிலிருந்து சிக்கலான செயலி ஓட்டங்களுக்குப் பரவுகிறது.
 
 ---
 
-## நிலை மேலாண்மையை மீண்டும் பரிசீலிக்கவும்
+## தற்போதைய நிலை பிரச்சனைகளை கண்டறிதல்
 
-[முந்தைய பாடத்தில்](../3-data/README.md), நாங்கள் `account` என்ற உலகளாவிய மாறியைப் பயன்படுத்தி, தற்போதைய உள்நுழைந்த பயனரின் வங்கி தரவுகளை உள்ளடக்கிய அடிப்படை நிலை கருத்தை அறிமுகப்படுத்தினோம். ஆனால், தற்போதைய செயல்பாட்டில் சில குறைகள் உள்ளன. டாஷ்போர்டில் இருக்கும் போது பக்கத்தை புதுப்பிக்க முயற்சிக்கவும். என்ன நடக்கிறது?
+ஷெர்லக் ஹோம்ஸ் போல குற்றப்பகுதியை பரிசோதிப்பதுபோல், பயனர் அமர்வுகள் மறைந்துபோகும் மர்மத்தை தீர்க்க முதலிலேயே நாம் நிகழ்க்கும் நிலை நிர்வாக சிக்கல்களை சரியாக புரிந்து கொள்ளவேண்டும்.
 
-தற்போதைய குறியீட்டில் 3 பிரச்சினைகள் உள்ளன:
+நாம் உள்ளீடு நிலை நிர்வாக சிக்கல்களை வெளிப்படுத்தும் எளிய பரிசோதனையை நடத்துவோம்:
 
-- நிலை நிலைத்திருக்கவில்லை, உலாவி புதுப்பிப்பு உங்களை மீண்டும் உள்நுழைவு பக்கத்திற்கு அழைத்துச் செல்கிறது.
-- நிலையை மாற்றும் பல செயல்பாடுகள் உள்ளன. பயன்பாடு வளரும்போது, இது மாற்றங்களை கண்காணிக்க கடினமாக்கும், மேலும் ஒன்றை புதுப்பிக்க மறக்க எளிதாக இருக்கும்.
-- நிலை சுத்தம் செய்யப்படவில்லை, எனவே நீங்கள் *Logout* கிளிக் செய்தால், உள்நுழைவு பக்கத்தில் இருந்தாலும் கணக்கு தரவுகள் இன்னும் அங்கே இருக்கும்.
+**🧪 இந்த டயக்னோஸ்டிக் சோதனையை முயற்சி செய்யவும்:**
+1. உங்கள் வங்கி செயலியில் உள்நுழைந்து டாஷ்போர்டுக்கு சென்று
+2. உலாவி பக்கத்தை புதுப்பிக்கவும்
+3. உள்நுழைவு நிலைக்கு என்ன ஆகிறது என்பதைக் கவனிக்கவும்
 
-இந்த பிரச்சினைகளை ஒன்றொன்றாக தீர்க்க குறியீட்டை புதுப்பிக்கலாம், ஆனால் இது குறியீட்டு மடிப்பை உருவாக்கும் மற்றும் பயன்பாட்டை பராமரிக்க கடினமாக்கும். அல்லது சில நிமிடங்கள் இடைவேளை எடுத்து, எங்கள் உத்தியை மீண்டும் பரிசீலிக்கலாம்.
+நீங்கள் மீண்டும் உள்நுழைவு திரைக்கு திருப்பப்படுகிறீர்கள் என்றால், நீங்கள் பாரம்பரிய நிலைத்தன்மை பிரச்சனையை கண்டறிந்துள்ளீர்கள். இது நிகழும் காரணம், தற்போதைய நிறைவேற்றல் பயனர் தரவை ஜாவாஸ்கிரிப்ட் மாறிலிகள் இல் வைக்கிறது, அவை ஒவ்வொரு பக்க புதுப்பிப்பும் மீண்டும் இனி நிரலாகிறது.
 
-> இங்கே நாம் உண்மையில் எந்த பிரச்சினைகளை தீர்க்க முயற்சிக்கிறோம்?
+**தற்போதைய நிறைவேற்றல் பிரச்சனைகள்:**
 
-[நிலை மேலாண்மை](https://en.wikipedia.org/wiki/State_management) என்பது இந்த இரண்டு குறிப்பிட்ட பிரச்சினைகளை தீர்க்க ஒரு நல்ல அணுகுமுறையை கண்டுபிடிப்பது பற்றியது:
+எமது [முந்தைய பாடம்](../3-data/README.md) இலிருந்து எடுக்கப்பட்ட எளிய `account` மாறி பயனர் அனுபவத்தையும் குறியீடு பராமரிப்பையும் பாதிக்கும் மூன்று முக்கிய சிக்கல்களை உருவாக்குகிறது:
 
-- பயன்பாட்டில் தரவோட்டங்களை புரிந்துகொள்ள எளிதாக எப்படி வைத்திருக்கலாம்?
-- பயனர் இடைமுகத்துடன் நிலை தரவுகளை எப்போதும் ஒத்திசைக்க (மற்றும் மாறாக) எப்படி வைத்திருக்கலாம்?
+| பிரச்சனை | தொழில்நுட்ப காரணம் | பயனர் தாக்கம் |
+|---------|---------|----------------|
+| **அமர்வு இழப்பு** | பக்கம் புதுப்பிப்பு ஜாவாஸ்கிரிப்ட் மாறிலிகளை அழிக்கிறது | பயனர்கள் அடிக்கடி மீண்டும் அடையாளப்படுத்த வேண்டும் |
+| **பரவலாக புதுப்பிப்புகள்** | பல செயல்பாடுகள் நேரடியாக நிலையை மாற்றுகின்றன | பிழைத்திருத்தம் கடினமாகிறது |
+| **முழுமையாக சுத்தம் செய்யப்படவில்லை** | வெளியேறுதல் அனைத்து நிலை வாசகங்களையும் அழிக்காது | பாதுகாப்பு மற்றும் தனியுரிமை பிரச்சனைகள் |
 
-இந்தவற்றை கவனித்துக்கொண்ட பிறகு, உங்களிடம் இருக்கும் பிற பிரச்சினைகள் ஏற்கனவே தீர்க்கப்பட்டிருக்கலாம் அல்லது தீர்க்க எளிதாக மாறியிருக்கலாம். இந்த பிரச்சினைகளை தீர்க்க பல்வேறு அணுகுமுறைகள் உள்ளன, ஆனால் **தரவை மற்றும் அதை மாற்றும் வழிகளை மையமாக்குதல்** என்ற பொதுவான தீர்வுடன் நாம் செல்லலாம். தரவோட்டங்கள் இவ்வாறு செல்லும்:
+**கட்டமைப்பு சவால்:**
 
-![HTML, பயனர் நடவடிக்கைகள் மற்றும் நிலை இடையே தரவோட்டங்களை காட்டும் வரைபடம்](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.ta.png)
+டைட்டானிக்கின் பிரிவுகளுக்கான வடிவமைப்பைப் போல, எதிகண்டியில் பல பிரிவுகள் கூட குறுகிய நேரத்தில் தண்ணீரால் நிரம்புவதைப்போல், தனித்தனியாக இந்த பிரச்சனைகளைக் குணமாக்குவது அடிப்படை கட்டமைப்பு சிக்கலை தீர்க்கமாட்டாது. ஒரு விரிவான நிலை நிர்வாக தீர்வை நாம் உருவாக்க வேண்டும்.
 
-> தரவு தானாகவே பார்வை புதுப்பிப்பைத் தூண்டும் பகுதியை இங்கே நாம் கையாளமாட்டோம், ஏனெனில் இது [செயல்திறன் நிரலாக்கம்](https://en.wikipedia.org/wiki/Reactive_programming) என்ற மேம்பட்ட கருத்துகளுடன் தொடர்புடையது. நீங்கள் ஆழமான ஆய்வுக்கு தயாராக இருந்தால், இது ஒரு நல்ல தொடர்ச்சியான பொருள்.
+> 💡 **நாம் உண்மையில் என்ன செய்ய முயல்கிறோம்?**
 
-✅ நிலை மேலாண்மைக்கு பல்வேறு அணுகுமுறைகளுடன் பல நூலகங்கள் உள்ளன, [Redux](https://redux.js.org) ஒரு பிரபலமான விருப்பமாகும். இது பெரும்பாலான வலை பயன்பாடுகளில் நீங்கள் எதிர்கொள்ளக்கூடிய சாத்தியமான பிரச்சினைகள் மற்றும் அதை எப்படி தீர்க்கலாம் என்பதைப் புரிந்துகொள்ள ஒரு நல்ல வழியாக இருக்கும்.
+[நிலை நிர்வாகம்](https://en.wikipedia.org/wiki/State_management) என்பது இரண்டு அடிப்படைக் புதிர்களை தீர்க்கும் பொருள்:
 
-### பணிக்கூற்று
+1. **என் தரவு எங்கே?**: எவற்றைப் பற்றி நாம் தெரிந்து கொள்ள வேண்டும் மற்றும் அவை எங்கிருந்து வருகிறது என்பது
+2. **அனைவர் ஒரே பக்கத்தில் உள்ளவரா?**: பயனர்கள் காணும் விஷயங்கள் உண்மையில் நிகழ்வதுடன் பொருந்துகிறதா என்பதை உறுதிப்படுத்தல்
 
-சிறிது மறுசீரமைப்புடன் தொடங்குவோம். `account` அறிவிப்பை மாற்றவும்:
+**எங்கள் செயல்திட்டம்:**
+
+நாம் தலை சுற்றி ஓடுவதைவிட, ஒரு **மைய நிலை நிர்வாக** அமைப்பை உருவாக்கப்போகிறோம். முக்கியமான அனைத்து விஷயங்களையும் ஒருவரே ஒழுங்குபடுத்துவார் போல கற்பனை செய்யுங்கள்:
+
+![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc8.ta.png)
+
+```mermaid
+flowchart TD
+    A[பயனர் நடவடிக்கை] --> B[சம்பவ செயலியை]
+    B --> C[அமைப்பு நிலைமை செயலி]
+    C --> D{நிலை சட்டப்பூர்வமாக உள்ளது?}
+    D -->|சட்டபூர்வம்| E[புதிய நிலை உருவாக்கு]
+    D -->|சட்டம் தவறானது| F[பிழை கையாளுதல்]
+    E --> G[Object.freeze]
+    G --> H[உள்ளூர்நிலந்திர்க்கு புதுப்பி]
+    H --> I[UI புதுப்பிப்பை செயல்படுத்து]
+    I --> J[பயனர் மாற்றங்களை பார்க்கிறார்]
+    F --> K[பயனர் பிழையை பார்க்கிறார்]
+    
+    subgraph "நிலை மேலாண்மை அடுக்கு"
+        C
+        E
+        G
+    end
+    
+    subgraph "நிலைத்தன்மை அடுக்கு"
+        H
+        L[localStorage]
+        H -.-> L
+    end
+```
+**இந்த தரவு ஓட்டத்தை புரிந்து கொள்வது:**
+- அனைத்து செயலி நிலைகளை ஒரே இடத்தில் மையம் செய்கிறது
+- அனைத்து நிலை மாற்றங்களும் கட்டுப்படுத்தப்பட்ட செயல்பாடுகள் வழியாகப் பரிமாறப்படுகிறது
+- UI தற்போதைய நிலை உடன் ஒத்திசைவாக இருக்கிறது
+- தரவு நிர்வாகத்திற்கு தெளிவான, கணிப்பாய்வான வார்ப்புருவை வழங்குகிறது
+
+> 💡 **தொழில்முறை அறிவுரை**: இந்த பாடம் அடிப்படைக் கருத்துக்களை கவனமாகக் குறிப்பிடுகிறது. சிக்கலான செயலிகளுக்கு, [Redux](https://redux.js.org) போன்ற நூலகங்கள் கூடுதல் முன்னேற்றமான நிலை நிர்வாக அம்சங்களை வழங்குகின்றன. இந்த அடிப்படை கருத்துக்களைப் புரிந்துகொள்வது எந்த நிலை நிர்வாக நூலகத்தையும் கையாள்வதற்கு உதவும்.
+
+> ⚠️ **மேம்பட்ட பொருள்**: நிலை மாற்றங்களால் தானாக UI புதுப்பிப்புகள் ஏற்படுவது [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming) கருத்துக்களை உள்ளடக்கியதால், நாங்கள் இதைப் பேசவில்லை. இது உங்கள் கற்றல் பயணத்திற்கான அடுத்த சிறந்த படியாகக் கருதலாம்!
+
+### பணிகள்: நிலை அமைப்பை மையமாக்குதல்
+
+பரவலாக உள்ள நிலை நிர்வாகத்தை மையமாக்கப்பட்ட அமைப்பாக மாற்றுவதைத் தொடங்குவோம். முதல் படி, பின்னர் வரும் அனைத்து மேம்பாடுகளுக்கும் அடித்தளம் அமைக்கும்.
+
+**படி 1: மைய நிலை பொருளை உருவாக்கவும்**
+
+எளிய `account` அறிவிப்பை மாற்றவும்:
 
 ```js
 let account = null;
 ```
 
-இதுடன்:
+மைது அமைப்புடைய நிலை பொருளுடன்:
 
 ```js
 let state = {
@@ -75,29 +244,110 @@ let state = {
 };
 ```
 
-இருப்பIdea என்பது அனைத்து பயன்பாட்டு தரவுகளையும் ஒரு நிலை பொருளில் மையமாக்குவது. தற்போதைக்கு நிலையில் `account` மட்டுமே உள்ளதால் இது அதிகம் மாறாது, ஆனால் இது வளர்ச்சிகளுக்கு பாதையை உருவாக்குகிறது.
+**இந்த மாற்றம் ஏன் முக்கியம்:**
+- அனைத்து செயலி தரவுகளையும் ஒரே இடத்தில் மையமாக்குகிறது
+- எதிர்காலத்தில் கூடுதல் நிலை சொத்துக்களைச் சேர்க்க கட்டமைப்பு தயார் செய்கிறது
+- நிலை மற்றும் பிற மாறிலிகள் இடையே தெளிவான எல்லை உருவாக்குகிறது
+- உங்கள் செயலி வளரும்போது பரவலாக கணிப்பாய்வான மாதிரியை உருவாக்குகிறது
 
-இதைப் பயன்படுத்தும் செயல்பாடுகளையும் புதுப்பிக்க வேண்டும். `register()` மற்றும் `login()` செயல்பாடுகளில், `account = ...` ஐ `state.account = ...` என மாற்றவும்;
+**படி 2: நிலை அணுகும் முறைகளை புதுப்பிக்கவும்**
 
-`updateDashboard()` செயல்பாட்டின் மேல் பகுதியில், இந்த வரியைச் சேர்க்கவும்:
+புதிய நிலை அமைப்பைப் பயன்படுத்த உங்கள் செயல்பாடுகளை புதுப்பியுங்கள்:
+
+**`register()` மற்றும் `login()` செயல்பாடுகளில்**, கீழ்க்காணும் மாற்றத்தை செய்யவும்:
+```js
+account = ...
+```
 
+இதை மாற்றி:
+```js
+state.account = ...
+```
+
+**`updateDashboard()` செயல்பாட்டில்**, இதை மேலே சேர்க்கவும்:
 ```js
 const account = state.account;
 ```
 
-இந்த மறுசீரமைப்பு தனியாக அதிக மேம்பாடுகளை கொண்டு வரவில்லை, ஆனால் அடுத்த மாற்றங்களுக்கு அடித்தளத்தை அமைப்பதே நோக்கம்.
+**இந்த மாற்றங்கள் என்ன செய்கின்றன:**
+- உள்ளமைவினை மேம்படுத்தி முன்னதாக இருந்த செயல்பாடுகளை பராமரிக்கிறது
+- உங்கள் குறியீட்டை மேம்பட்ட நிலை நிர்வாகத்திற்கு தயாராக்குகிறது
+- நிலை தரவுகளுக்கு அணுகுவதற்கான ஒரே மாதிரியை உருவாக்குகிறது
+- மைய நிலை புதுப்பிப்புகளுக்கான அடித்தளத்தை நிறுவுகிறது
+
+> 💡 **குறிப்பு**: இந்த மறுசீரமைப்பு உடனே பிரச்சனைகளை தீர்க்காது, ஆனால் வரும் சக்திவாய்ந்த மேம்பாடுகளுக்கான அடிப்படையை உருவாக்குகிறது!
+
+### 🎯 கல்வி சோதனை: மையப்படுத்தல் கொள்கைகள்
+
+**பொறுப்புடன் சிந்தியுங்கள்**: நீங்கள் தற்போது மையப்படுத்தப்பட்ட நிலை நிர்வாகத்தின் அடித்தளத்தை உருவாக்கியுள்ளீர்கள். இது மிக முக்கியமான கட்டமைப்பு தீர்மானம்.
+
+**மிக விரைவான சுய மதிப்பீடு**:
+- நிலையை ஒரே பொருளில் மையமாக்குவது பரவலான மாறிலிகளைக் க்கு மேல் எப்படி சிறந்தது என்று விவரிக்க முடிகிறதா?
+- நீங்கள் ஒரு செயல்பாட்டை `state.account` பயன்படுத்த மாற்ற மறந்தால் என்ன நடக்கும்?
+- இந்த மாதிரி உங்கள் குறியீட்டை மேம்பட்ட அம்சங்களுக்கு எப்படி தயார் செய்கிறது?
+
+**உண்மையான உலக தொடர்பு**: நீங்கள் கற்ற மையப்படுத்தல் மாதிரி Redux, Vuex, React Context போன்ற நவீன கட்டமைப்புகளின் அடித்தளம். நீங்கள் பெரிய செயலிகளில் பயன்படுத்தப்படும் அதே கட்டமைப்புக் கோலோசனையை உருவாக்கி வருகிறீர்கள்.
+
+**சவால் கேள்வி**: பயனர் விருப்பங்களை (தீம், மொழி) சேர்க்க வேண்டியிருந்தால், அதை நிலை அமைப்பில் எங்கு சேர்ப்பீர்கள்? இது எப்படி பரவுகிறது?
+
+## கட்டுப்படுத்தப்பட்ட நிலை புதுப்பிப்புகளை செயல்படுத்தல்
+
+நமது நிலை மையமாக்கப்பட்ட நிலையில் இருப்பதால், அடுத்த படி தரவு மாற்றங்களுக்கான கட்டுப்படுத்தப்பட்ட முறைகளை ஏற்படுத்துவதாகும். இது கணிப்பாய்வான நிலை மாற்றங்களையும் எளிய பிழைத்திருத்தத்தையும் உறுதிசெய்கிறது.
+
+இந்த அடிப்படைக் கொள்கை விமான போக்குவரத்து கண்காணிப்பைப் போன்றது: பல செயல்பாடுகள் தனித்தனியாக நிலையை மாற்ற அனுமதிப்பதற்குப் பதிலாக, அனைத்து மாற்றங்களும் ஒரே கட்டுப்படுத்தப்பட்ட செயல்பாட்டின் வழியாக செல்லும். இது எப்போது மற்றும் எப்படி மாற்றங்கள் நிகழ்ந்தன என்று தெளிவான கண்காணிப்பை வழங்குகிறது.
+
+**இறுக்கமான நிலை நிர்வாகம்:**
 
-## தரவு மாற்றங்களை கண்காணிக்கவும்
+நாம் `state` பொருளை [*மேலோட்ட*](https://en.wikipedia.org/wiki/Immutable_object) என்று கருதியிருப்போம், அதாவது நேரடியாக அதை மாற்ற மாட்டோம். ஒவ்வொரு மாற்றமும் புதிதாக ஒரு புதிய நிலை பொருளை உருவாக்கும்.
 
-நாம் `state` பொருளை எங்கள் தரவுகளை சேமிக்க பயன்படுத்திய பிறகு, அடுத்த படியாக புதுப்பிப்புகளை மையமாக்க வேண்டும். எந்த மாற்றங்கள் எப்போது நிகழ்கின்றன என்பதை கண்காணிக்க எளிதாக செய்ய வேண்டும்.
+இந்த அணுகுமுறை நேரடியாக மாற்றங்களை விட ஆரம்பத்தில் சற்று செயல்திறன் இழப்பு போலும், அது பிழைத்திருத்தம், சோதனை, மற்றும் செயலி கணிப்பாய்வுக்கு மிகப் பெரிய நன்மைகளை வழங்கும்.
 
-`state` பொருளில் மாற்றங்கள் செய்ய தவிர்க்க, அதை [*மாறாதது*](https://en.wikipedia.org/wiki/Immutable_object) எனக் கருதுவது நல்ல நடைமுறையாகும், அதாவது அதை முழுமையாக மாற்ற முடியாது. இதனால், நீங்கள் அதில் ஏதாவது மாற்ற விரும்பினால் புதிய state பொருளை உருவாக்க வேண்டும். இதைச் செய்வதன் மூலம், நீங்கள் எதிர்பாராத [பக்க விளைவுகள்](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) பற்றிய பாதுகாப்பை உருவாக்குகிறீர்கள், மேலும் உங்கள் பயன்பாட்டில் undo/redo போன்ற புதிய அம்சங்களை செயல்படுத்துவதற்கான வாய்ப்புகளைத் திறக்கிறீர்கள், மேலும் பிழையை சரிசெய்ய எளிதாகவும் செய்கிறீர்கள். உதாரணமாக, நீங்கள் state இல் செய்யப்பட்ட ஒவ்வொரு மாற்றத்தையும் பதிவு செய்து, பிழையின் மூலத்தைப் புரிந்துகொள்ள மாற்றங்களின் வரலாற்றை வைத்திருக்கலாம்.
+**இறுக்கமான நிலை நிர்வாகத்தின் நன்மைகள்:**
 
-JavaScript இல், [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) ஐப் பயன்படுத்தி ஒரு மாறாத பதிப்பை உருவாக்கலாம். மாறாத பொருளில் மாற்றங்களைச் செய்ய முயற்சித்தால், ஒரு εξαίρεση எழுப்பப்படும்.
+| நன்மை | விளக்கம் | தாக்கம் |
+|---------|-------------|--------|
+| **கணிப்பாய்வு** | மாற்றங்கள் கட்டுப்படுத்தப்பட்ட செயல்பாடுகளின் மூலம் மட்டுமே நிகழும் | பிழைத்திருத்தம் மற்றும் சோதனை எளிது |
+| **வரலாறு கண்காணிப்பு** | ஒவ்வொரு மாற்றத்துக்கும் புதிய பொருள் உருவாகிறது | Undo/Redo செயல்பாடுகளை அனுமதிக்கும் |
+| **புற விளைவுகளைக் தடுப்பு** | தவறுதலாக மாற்றங்கள் ஏற்படாது | மர்மமான பிழைகளை தடுக்கும் |
+| **செயல்திறன் மேம்பாடு** | நிலை மாற்றம் உண்மையாக எப்போது ஏற்பட்டது என்பதை கண்டறிய எளிது | திறமையான UI புதுப்பிப்புகளைத் தருகிறது |
 
-✅ *கூடுகூறாக* மற்றும் *ஆழமாக* மாறாத பொருளின் வித்தியாசம் என்ன என்பதை நீங்கள் அறிந்தீர்களா? [இங்கே](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) படிக்கலாம்.
+**`Object.freeze()` மூலம் JavaScript இல் இயங்கும் இறுக்கம்:**
 
-### பணிக்கூற்று
+JavaScript வழங்கும் [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) பின்வரும் பணி செய்கிறது:
+
+```js
+const immutableState = Object.freeze({ account: userData });
+// immutableState ஐ மாற்ற எந்த முயலும் பிழையை ஏற்படுத்தும்
+```
+
+**இங்கே என்ன நடக்கிறது என்பதைப் பிரிக்கவும்:**
+- நேரடி சொத்து குறியீடு அல்லது அகற்றல்களைத் தடுக்கும்
+- மாற்ற முயற்சிகள் ஏற்பட்டால் தவறுகளைத் தூக்கும்
+- நிலை மாற்றங்கள் கட்டுப்படுத்தப்பட்ட செயல்பாடுகளின் வழியே மட்டுமே நிகழ வேண்டும் என்பதை உறுதி செய்கிறது
+- நிலையை புதுப்பிக்கும் விதத்தில் தெளிவான ஒப்பந்தத்தை உருவாக்குகிறது
+
+> 💡 **விவரிப்புக் களம்**: [MDN ஆவணத்தில்](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) *மேலோட்ட* மற்றும் *ஆழமான* இறுக்கமான பொருட்களின் வேறுபாட்டை அறிக. சிக்கலான நிலை அமைப்புகளுக்கு இந்த வேறுபாடு மிக முக்கியம்.
+
+```mermaid
+stateDiagram-v2
+    [*] --> StateV1: ஆரம்ப நிலை
+    StateV1 --> StateV2: updateState('account', newData)
+    StateV2 --> StateV3: updateState('account', anotherUpdate)
+    StateV3 --> StateV4: updateState('preferences', userSettings)
+    
+    note right of StateV1
+        Object.freeze()
+        மாற்ற முடியாதது
+        பிழைத்திருத்தக்கூடியது
+    end note
+    
+    note right of StateV2
+        புதிய பொருள் உருவாக்கப்பட்டது
+        முந்தைய நிலை பாதுகாக்கப்பட்டது
+        கணிக்கக்கூடிய மாற்றங்கள்
+    end note
+```
+### பணிகள்
 
 புதிய `updateState()` செயல்பாட்டை உருவாக்குவோம்:
 
@@ -110,9 +360,9 @@ function updateState(property, newData) {
 }
 ```
 
-இந்த செயல்பாட்டில், நாம் ஒரு புதிய state பொருளை உருவாக்கி, முந்தைய state இல் இருந்து தரவுகளை [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) ஐப் பயன்படுத்தி நகலெடுக்கிறோம். பின்னர், state பொருளின் குறிப்பிட்ட சொத்தை புதிய தரவுடன் [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` ஐப் பயன்படுத்தி மேம்படுத்துகிறோம். இறுதியாக, `Object.freeze()` ஐப் பயன்படுத்தி பொருளை மாற்றங்களைத் தடுக்க பூட்டுகிறோம். தற்போதைக்கு state இல் `account` சொத்து மட்டுமே சேமிக்கப்பட்டுள்ளது, ஆனால் இந்த அணுகுமுறையுடன் state இல் தேவையான சொத்துகளை நீங்கள் சேர்க்கலாம்.
+இந்த செயல்பாட்டில், நமது கடந்த நிலை பொருளிலிருந்து தரவை நகல் செய்து புதிய நிலை பொருளை உருவாக்குகிறோம், [*பரவல் (`...`) இயக்கி*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) பயன்படுத்தி. பிறகு, `[property]` குறியீட்டைப் பயன்படுத்தி அந்த நிலை பொருளின் குறிப்பிட்ட சொத்தைக் புதிய தரவு மூலம் மாற்றுகிறோம். கடைசியில், `Object.freeze()` யைப் பயன்படுத்தி அந்த பொருளை மாற்றமுடியாததாக அடைக்கிறோம். நமது நிலையில் மட்டும் இப்போது `account` சொத்து உள்ளதோடு, இந்த முறையில் நீங்கள் தேவையான என்ன சொத்துக்களையும் சேர்க்க முடியும்.
 
-நாங்கள் state ஆரம்பத்தையும் புதுப்பிக்க வேண்டும், ஆரம்ப நிலை உறுதியாக உறுதிப்படுத்தவும்:
+நாம் மேலும் `state` தொடக்க நிலையை வளர்ச்சி உறுதி செய்ய நிரந்தரமாக மறுவிசேசம் செய்யப்போகிறோம்:
 
 ```js
 let state = Object.freeze({
@@ -120,19 +370,19 @@ let state = Object.freeze({
 });
 ```
 
-அதன் பிறகு, `register` செயல்பாட்டை `state.account = result;` ஒதுக்கீட்டை மாற்றி:
+பிறகு, `register` செயல்பாட்டில் `state.account = result;` பொறுத்துப்பொருள் பின்வரும் மாற்றவும்:
 
 ```js
 updateState('account', result);
 ```
 
-`login` செயல்பாட்டுடன் இதையே செய்யவும், `state.account = data;` ஐ மாற்றி:
+அதேபோல், `login` செயல்பாட்டிலும் `state.account = data;` என்பதை இப்படி மாற்றவும்:
 
 ```js
 updateState('account', data);
 ```
 
-இப்போது பயனர் *Logout* ஐ கிளிக் செய்தால் கணக்கு தரவுகள் அழிக்கப்படாத பிரச்சினையை சரிசெய்ய வாய்ப்பு கிடைத்துள்ளது.
+பயனர் *வெளியேறு* பொத்தானை கிளிக் செய்தபோது கணக்கு தரவு அழிக்கப்படாத பிரச்சனையை இப்போது சரி செய்ய நேர்ந்துள்ளது.
 
 புதிய `logout()` செயல்பாட்டை உருவாக்கவும்:
 
@@ -143,33 +393,420 @@ function logout() {
 }
 ```
 
-`updateDashboard()` இல், `return navigate('/login');` என்ற வழிமாற்றத்தை `return logout();` என மாற்றவும்;
+`updateDashboard()` இல், பரிமாற்றத்தை `return navigate('/login');` இருந்து `return logout();` ஆக மாற்றவும்;
+
+புதிய கணக்கை பதிவு செய்து, வெளியேறி மீண்டும் உள்நுழையும் முயற்சியை செய்து எல்லாம் சரியாகச் செயல்படுகிறதா என்பதை உறுதிப்படுத்தவும்.
+
+> குறிப்பு: `updateState()` இன் பக்கத்தில் `console.log(state)` சேர்க்கவும் உலாவியின் மேம்பாட்டு கருவிகளில் கன்சோலை திறந்து அனைத்து நிலை மாற்றங்களையும் பார்.
+
+## தரவு நிலைத்தன்மை அமலாக்கம்
+
+முந்தைய பரிசோதனையில் கண்டறிந்த அமர்வு இழப்பு பிரச்சனையை தீர்க்க சுற்றுச்சூழல் நிலைத்தன்மை வேண்டும், இது உலாவி அமர்வுகளில் பயனர் நிலையை பாதுகாத்து வைக்க உதவும். இது நமது செயலியை தற்காலிக அனுபவத்திலிருந்து நம்பகமான தொழில்திறன் வாய்ந்த கருவியாக மாற்றும்.
+
+அக்டமிக் கடிகாரங்கள் மின் துண்டிப்பு நேரத்திலும் நேரத்தைக் கணக்கிடத் தொடர்ந்து நினைவகத்தில் தரவை சேமித்து வைத்திருக்கிறதுபோல், வலை செயலிகளும் முக்கிய பயனர் தரவுகளை உலாவி அமர்வுகளுக்கு மத்தியில் நீடித்த சேமிப்பு முறைகளை கொண்டிருக்க வேண்டியதுதான்.
+
+**தரவுத்தள நிலைத்தன்மைக்கான தந்திரவியல் கேள்விகள்:**
+
+நிலைத்தன்மையை செயல்படுத்துவதற்கு முன், இந்த முக்கிய அம்சங்களை கவனியுங்கள்:
+
+| கேள்வி | வங்கி செயலி சூழல் | தீர்மானம் மீது தாக்கம் |
+|----------|-------------------|----------------|
+| **தரவு நுண்ணறிவானதா?** | கணக்கு இருப்பு, பரிமாற்ற வரலாறு | பாதுகாப்பான சேமிப்பு முறைகளைத் தேர்வு செய்க |
+| **எவ்வளவு காலம் இருக்க வேண்டும்?** | புகுபதிகை நிலை மற்றும் தற்காலிக UI விருப்பங்கள் | பொருத்தமான சேமிப்பு காலத்தை தேர்வு செய்க |  
+| **சேவையகம் இதனை தேவைப்படுகின்றதா?** | அங்கீகார டோக்கன்கள் மற்றும் UI அமைப்புகள் | பகிர்வு தேவைகளை தீர்மானிக்கவும் |
+
+**உலாவி சேமிப்பு விருப்புகள்:**
+
+நவீன உலாவிகள் பல்வேறு சேமிப்பு முறைகளை வழங்குகின்றன, ஒவ்வொன்றும் வேறு பயன்பாடுகளுக்காக வடிவமைக்கப்பட்டுள்ளது:
+
+**முதன்மை சேமிப்பு APIகள்:**
+
+1. **[`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)**: நிலையான [முக்கிய/மதிப்பு சேமிப்பு](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)  
+   - **திடமான** தரவை உலாவி அமர்வுகள் முழுவதும் நிரந்தரமாக வைத்திருக்கிறது  
+   - உலாவி மறுதொடக்கம் மற்றும் கணினி ரீபூட்டுகளையும் **தாண்டி நிலைத்திருக்கிறது**  
+   - குறிப்பிட்ட வலைத்தள டொமைனுக்கே **உரிமையளிக்கப்பட்டது**  
+   - பயனர் விருப்பங்கள் மற்றும் புகுபதிகை நிலைகளுக்கு **சரியானது**  
+
+2. **[`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)**: தற்காலிக அமர்வு சேமிப்பு  
+   - செயல்பாட்டில் இருக்கும்போது localStorage போல **வேலை செய்கிறது**  
+   - உலாவி தாவல் மூடப்பட்டபோது தானாக **சுத்தம் செய்யப்படுகிறது**  
+   - நிலைத்திருக்கக் கூடாது என்ற தற்காலிக தரவுக்கு **சரி**  
+
+3. **[HTTP குக்கீகள்](https://developer.mozilla.org/docs/Web/HTTP/Cookies)**: சேவையகம் பகிரும் சேமிப்பு  
+   - ஒவ்வொரு சேவையகம் கோரிக்கையுடனும் தானாக **இறக்குமதி செய்யப்படுகிறது**  
+   - [அங்கீகார](https://en.wikipedia.org/wiki/Authentication) டோக்கன்களுக்கு **இனியவை**  
+   - அளவுக்கு கட்டுப்பாடுகள் உள்ளன மற்றும் செயல்திறன் பாதிக்கலாம்  
+
+**தரவு தொடர் வடிவமைப்பு தேவைகள்:**
+
+`localStorage` மற்றும் `sessionStorage` இரண்டிலும் [Strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) மட்டுமே சேமிக்கப்படுகின்றன:
+
+```js
+// பொருட்களை சேமிப்பதற்காக JSON ஊற்றுக்களை மாற்றவும்
+const accountData = { user: 'john', balance: 150 };
+localStorage.setItem('account', JSON.stringify(accountData));
+
+// மீட்டெடுக்கும் போது JSON ஊற்றுக்களை மீண்டும் பொருட்களாக பதிப்பிக்கவும்
+const savedAccount = JSON.parse(localStorage.getItem('account'));
+```
+  
+**தொடர்வாக்கு புரிதல்:**  
+- ஜாவாஸ்கிரிப்ட் ஒப்ஜெக்ட்களை JSON வெள்ளிக்கோவுகளாக மாற்றுகிறது [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) மூலம்  
+- JSONயிலிருந்து ஒப்ஜெக்ட்களை மீண்டும் உருவாக்குகிறது [`JSON.parse()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) மூலம்  
+- சிக்கலான உள்ளடக்க கொண்ட ஒப்ஜெக்ட்கள் மற்றும் வரிசைகளை தானாக கையாள்கிறது  
+- செயல்பாடுகள், வரையறையற்ற மதிப்புகள் மற்றும் சுற்றுச்சூழல் மேற்கோள்களில் தோல்வி பெறுகிறது  
+
+> 💡 **மேம்பட்ட விருப்பம்**: பெரிய தரவு தொகுதிகளுடன் கூடிய சிக்கலான ஆஃப்லைன் செயலிகளுக்கு [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) பரிந்துரைக்கப்படுகிறது. இது முழுமையான கிளையண்ட்-சைடு தரவுத்தொகுதியாகும், ஆனால் நடைமுறைக்கு சிக்கலானது.  
+
+```mermaid
+quadrantChart
+    title உலாவி சேமிப்பு விருப்பங்கள்
+    x-axis குறைந்த சிக்கல் --> அதிக சிக்கல்
+    y-axis குறுகிய காலம் --> நீண்ட காலம்
+    
+    quadrant-1 தொழில்முறை கருவிகள்
+    quadrant-2 எளிதான நிலைத்தன்மை
+    quadrant-3 தற்காலிக சேமிப்பு
+    quadrant-4 முன்னேற்றப்பட்ட அமைப்புகள்
+    
+    localStorage: [0.3, 0.8]
+    sessionStorage: [0.2, 0.2]
+    HTTP Cookies: [0.6, 0.7]
+    IndexedDB: [0.9, 0.9]
+    Memory Variables: [0.1, 0.1]
+```  
+### பணி: localStorage நிலைத்தன்மையை செயல்படுத்துக  
+
+பயனாளர்கள் வெளிநுழைவதற்கு முன் நிலைத்திருக்கும் சேமிப்பை செயல்படுத்துவோம். கணக்கு தகவலை உலாவி அமர்வுகள் முழுவதும் `localStorage` இல் சேமிப்போம்.  
+
+**படி 1: சேமிப்பு கட்டமைப்பை வரையறுக்கவும்**  
+
+```js
+const storageKey = 'savedAccount';
+```
+  
+**இந்த நிலையானது என்ன வழங்குகிறது:**  
+- சேமிக்கப்பட்ட தரவுக்கு ஒருங்கிணைந்த அடையாளத்தை உருவாக்குகிறது  
+- சேமிப்பு முக்கிய தொடுப்பில் எழுத்துப்பிழைகளைத் தவிர்க்கிறது  
+- தேவையென்றால் சேமிப்பு தொடுப்பை எளிதாக மாற்ற முடிகிறது  
+- பராமரிக்க எளிதான சிறந்த நடைமுறைகளை பின்பற்றுகிறது  
+
+**படி 2: தானாக நிலைத்தன்மை சேர்க்கவும்**  
+
+`updateState()` செயல்பாட்டின் இறுதியில் இந்த வரியை சேர்க்கவும்:  
+
+```js
+localStorage.setItem(storageKey, JSON.stringify(state.account));
+```
+  
+**இங்கே நிகழ்வதை விவரித்தல்:**  
+- கணக்கு ஒப்ஜெக்டை JSON வெள்ளிக்கோவாக மாற்றுகிறது சேமிப்புக்கு  
+- ஒருங்கிணைந்த சேமிப்பு தொடுப்பைப் பயன்படுத்தி தரவை சேமிக்கிறது  
+- நிலை மாற்றங்கள் நேர்ந்தவுடன் தானாக இயங்குகிறது  
+- சேமிக்கப்பட்ட தரவு எப்போதும் தற்போதைய நிலைக்கு ஒத்திசைக்கப்படுகிறது  
+
+> 💡 **கட்டமைப்பு பயன்பாடு**: அனைத்து நிலை புதுப்பிப்புகளும் `updateState()` மூலம் மையப்படுத்தப்பட்டதால், நிலைத்தன்மைச் சேர்க்க ஒரு வரியால் போதும். இது நல்ல கட்டமைப்பு தீர்வுகளின் வலுவை காண்பிக்கிறது!  
+
+**படி 3: செயலியில் ஏற்றும்போது நிலையை மீட்டெடுக்கவும்**  
+
+சேமிக்கப்பட்ட தரவை மீட்டெடுக்க ஆரம்ப செயல்பாட்டை உருவாக்குக:  
+
+```js
+function init() {
+  const savedAccount = localStorage.getItem(storageKey);
+  if (savedAccount) {
+    updateState('account', JSON.parse(savedAccount));
+  }
+
+  // நமது முந்தைய துவக்க குறியீடு
+  window.onpopstate = () => updateRoute();
+  updateRoute();
+}
+
+init();
+```
+  
+**ஆரம்ப செயல்முறையைப் புரிந்துகொள்ளல்:**  
+- முந்தைய சேமிக்கப்பட்ட கணக்கு தரவை localStorage இலிருந்து பெறுகிறது  
+- JSON வெள்ளிக்கோவை மீண்டும் ஜாவாஸ்கிரிப்ட் ஒப்ஜெக்டாக மாற்றுகிறது  
+- கட்டுப்பாட்டுடன் நிலையை புதுப்பிக்கிறது  
+- பக்க சேர் முன்னர் பயனர் அமர்வு தானாக மீட்டெடுக்கப்படுகிறது  
+- தடம் புதுப்பிப்புகளுக்கு முன் செயல்படுகிறது  
+
+**படி 4: இயல்புநிலை பாதையை மேம்படுத்தவும்**  
+
+`updateRoute()` இல் இதைப் பதிலாக இடுக:  
+
+```js
+// மாற்று: return navigate('/login');
+return navigate('/dashboard');
+```
+  
+**இந்த மாற்றம் நியாயமான காரணங்கள்:**  
+- புதிய நிலைத்துறை முறையைச் சிறப்பாகப் பயன்படுத்துகிறது  
+- அங்கீகாரச் சோதனைகளை கையாளும் டாஷ்போர்டுக்கு வாய்ப்பு தருகிறது  
+- சேமிக்கப்படாத அமர்வு இருந்தால் தானாக புகுபதிகைக்கு மாற்றுகிறது  
+- பயனர் அனுபவத்தை மெல்லியதாக மாற்றுகிறது  
+
+**உங்கள் செயல்பாட்டை சோதனை செய்ய:**  
+
+1. உங்கள் வங்கி செயலியில் புகுபதிகை செய்யவும்  
+2. உலாவி பக்கத்தை மீண்டும் துவக்கவும்  
+3. நீங்கள் புகுபதிகை செய்யப்பட்டிருப்பது மற்றும் டாஷ்போர்டில் இருப்பதை உறுதிப்படுத்தவும்  
+4. உலாவியை மூடி மீண்டும் திறக்கவும்  
+5. செயலி ஓருபக்கம் செல்லவும் மற்றும் நீங்கள் இன்னும் உள்நுழைந்திருப்பதை உறுதிப்படுத்தவும்  
+
+🎉 **வெற்றி பெற்றுள்ளீர்கள்**: நீங்கள் நிலையான நிலை மேலாண்மையை வெற்றிகரமாக செயல்படுத்தியுள்ளீர்கள்! உங்கள் செயலி ஒரு தொழில்முறை வலை செயலியைப் போல நடக்கிறது.  
+
+### 🎯 கல்வி சரிபார்ப்பு: நிலைத்தன்மை கட்டமைப்பு  
+
+**கட்டமைப்பு புரிதல்**: நீங்கள் பயனர் அனுபவத்தையும் தரவு நிர்வாக சிக்கலையும் சமமாக உருவாக்கும் நிலைத்துறை நிலையை செயல்படுத்தியுள்ளீர்கள்.  
+
+**முக்கிய கருத்துக்கள் கற்றல்:**  
+- **JSON தொடர் வடிவம்**: சிக்கலான ஒப்ஜெக்ட்களை சேமிக்கக்கூடிய சரங்கள் ஆக மாற்றுதல்  
+- **தானாக ஒத்திசைவு**: நிலை மாற்றங்கள் நிலைத்துவரை துவக்குதல்  
+- **அமர்வு மீட்பு**: இடையூறுகளுக்குப் பிறகு செயலிகள் பயனர் சூழலை மீட்டெடுக்க முடியும்  
+- **மையப்படுத்தப்பட்ட நிலைத்தன்மை**: ஒரே புதுப்பிப்பு செயல்பாடு அனைத்து சேமிப்பையும் கையாள்கிறது  
+
+**தொழில் தொடர்பு**: இந்த நிலைத்துறை முறை பரிந்துரைப்படுத்தப்பட்ட வலை செயலிகள் (PWA), ஆஃப்லைன் முதன்மையான செயலிகள் மற்றும் நவீன மொபைல் வலை அனுபவங்களுக்கு அடிப்படையாகப் பொதுவாக உள்ளது. நீங்கள் தயாரிப்புத் தரப்பட்ட திறன்களை கட்டி கொண்டிருக்கிறீர்கள்.  
 
-புதிய கணக்கை பதிவு செய்து, வெளியேறி மீண்டும் உள்நுழைந்து, அனைத்தும் சரியாக வேலை செய்கிறதா என்பதைச் சரிபார்க்கவும்.
+**போக்கு கேள்வி**: ஒரே சாதனத்தில் பல பயனர் கணக்குகளைச் சமாளிக்க நீங்கள் இந்த முறையை எப்படி திருத்துவீர்கள்? தனியுரிமை மற்றும் பாதுகாப்பு பாதிப்புகளை கவனியுங்கள்.  
 
-> குறிப்புரை: `updateState()` இன் கீழே `console.log(state)` ஐச் சேர்த்து, உலாவியின் மேம்பாட்டு கருவிகளில் உள்ள கன்சோலைத் திறக்கவும், அனைத்து state மாற்றங்களையும் பார்க்கலாம்.
+## நிலைத்தன்மையும் தரவு புதியதன்மையும் சமநிலை  
 
-## நிலையை நிலைத்திருக்கவும்
+நமது நிலைத்துறை சிஸ்டம் பயனர் அமர்வுகளைத் தொடர்ந்து பராமரிக்கிறது, ஆனால் புதிய சிக்கலை உருவாக்குகிறது: தரவு பழுதுபாராமை. பல பயனர்கள் அல்லது செயலிகள் ஒரே சேவையகத் தரவை மாற்றும்போது உள்ளூர் கேச் செய்த தகவல் பழுதடைந்து விடும்.  
 
-பெரும்பாலான வலை பயன்பாடுகள் சரியாக வேலை செய்ய தரவுகளை நிலைத்திருக்க வேண்டும். அனைத்து முக்கியமான தரவுகளும் பொதுவாக ஒரு தரவுத்தொகுப்பில் சேமிக்கப்படும் மற்றும் சர்வர் API மூலம் அணுகப்படும், எங்கள் வழக்கில் பயனர் கணக்கு தரவுகள் போன்றவை. ஆனால் சில நேரங்களில், உலாவியில் இயங்கும் கிளையன்ட் பயன்பாட்டில் சில தரவுகளை நிலைத்திருக்கவும், சிறந்த பயனர் அனுபவத்திற்காக அல்லது ஏற்றுதல் செயல்திறனை மேம்படுத்தவும் இது சுவாரஸ்யமாக இருக்கும்.
+இந்த நிலை, வைகிங் வழிசெலுத்திகள் சேமித்துள்ள நட்சத்திர வரைபடங்களையும் தற்போதைய விண்மீன் பார்வைகளையும் இணைத்து பயன்படுத்தியதைப் போன்றது. வரைபடங்கள் திடமாக இருந்தாலும், வழிசெலுத்திகள் மாற்றங்களைக் கவனித்து புதுப்பித்த பார்வைகளை தேவைப்படுத்தினர். அதுபோல, நமது செயலிக்கு நிலையான பயனர் நிலை மற்றும் தற்போதைய சேவையகத் தரவுகள் இரண்டும் தேவை.  
 
-உங்கள் உலாவியில் தரவுகளை நிலைத்திருக்க விரும்பும்போது, சில முக்கியமான கேள்விகளை நீங்கள் உங்களிடம் கேட்க வேண்டும்:
+**🧪 தரவு புதியதன்மை பிரச்சனை கண்டறிதல்:**  
 
-- *தரவு நுண்ணறிவாக உள்ளதா?* பயனர் கடவுச்சொற்கள் போன்ற எந்த நுண்ணறிவு தரவையும் கிளையன்டில் சேமிக்க தவிர்க்க வேண்டும்.
-- *இந்த தரவை எவ்வளவு காலத்திற்கு நீங்கள் வைத்திருக்க வேண்டும்?* இந்த தரவை தற்போதைய அமர்விற்காக மட்டுமே அணுக திட்டமிடுகிறீர்களா அல்லது அதை நிரந்தரமாகச் சேமிக்க விரும்புகிறீர்களா?
+1. `test` கணக்கில் டாஷ்போர்டில் உள்நுழைக  
+2. வேறு மூலத்திலிருந்து பரிவர்த்தனை ஆகும் செயல்பாட்டைப் பின்வரும் டெர்மினல் கட்டளையை இயக்கவும்:  
 
-தகவல்களை ஒரு v
-[பாடத்திற்குப் பின் வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/48)
+```sh
+curl --request POST \
+     --header "Content-Type: application/json" \
+     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
+     http://localhost:5000/api/accounts/test/transactions
+```
+  
+3. உலாவியில் உங்கள் டாஷ்போர்டைப் புதுப்பிக்கவும்  
+4. புதிய பரிவர்த்தனைக் காண்பீர்களா என கவனிக்கவும்  
+
+**இந்த சோதனை வழங்குவது:**  
+- உள்ளூர் சேமிப்பில் "பழையது" ஆகிவிட்டதை காட்டுகிறது  
+- உங்கள் செயலிக்கெல்லாம் வெளியில் தரவு மாற்றங்கள் இருப்பதை மாற்றுகிறது  
+- நிலைத்தன்மை மற்றும் தரவுத் புதியதன்மை இடையேயான மோதலை வெளிப்படுத்துகிறது  
+
+**தரவு பழுதுபாராமை பிரச்சனை:**  
+
+| பிரச்சனை | காரணம் | பயனர் தாக்கம் |  
+|---------|-------|-------------|  
+| **பழைய தரவு** | localStorage தானாக காலாவதி ஆகாது | பயனர்கள் பழைய தகவலைக் காண்கிறார்கள் |  
+| **சேவையக மாற்றங்கள்** | பிற செயலிகள்/பயனர்கள் ஒரே தரவை மாற்றுகின்றனர் | பல்வேறு தளங்களில் ஒரே தரவு மாறுபடும் |  
+| **கேச் மற்றும் உண்மை** | உள்ளூர் கேச் சேவையக நிலைக்கு பொருத்தமில்லை | மோசமான பயனர் அனுபவம் மற்றும் குழப்பம் |  
+
+**தீர்வு நெறிமுறை:**  
+
+நாம் "பக்க ஏற்றும்போது புதுப்பி" னு ஒரு முறையை நடுவில் கொண்டு வருவோம், இது நிலைத்தன்மைக்கும் புதிய தரவைப் பெறுதலுக்கும் சமநிலை நிலை பற்றிய அணுகுமுறை ஆகும். இது விரிவான பயனர் அனுபவத்தையும் தரவு துல்லியத்தையும் உறுதிசெய்கிறது.  
+
+```mermaid
+sequenceDiagram
+    participant U as பயனர்
+    participant A as செயலி
+    participant L as உள்ளூர்தொகுப்பு
+    participant S as சேவையகம்
+    
+    U->>A: செயலியை திறக்கிறது
+    A->>L: சேமிக்கப்பட்ட நிலையை ஏற்றுகொள்
+    L-->>A: பெட்டியிலுள்ள தரவைத் திருப்பி வையங்கு
+    A->>U: உடனடி UI காட்டு
+    A->>S: புதிய தரவை எடு
+    S-->>A: தற்போதைய தரவைத் திருப்பிவருக
+    A->>L: பெட்டியை புதுப்பி
+    A->>U: புதிய தரவை UI இல் புதுப்பி
+```  
+### பணி: தரவு புதுப்பிப்பு சிஸ்டம் செயல்படுத்துக  
+
+நமது நிலைத்துறை நிர்வாகத்தின் நன்மைகளைப் பேணி, சேவையகத்திலிருந்து புதிய தரவை தானாக பெறும் முறையை உருவாக்குவோம்.  
+
+**படி 1: கணக்கு தரவு புதுப்பிப்பாளர் உருவாக்குக**  
 
-## பணிக்கூற்று
+```js
+async function updateAccountData() {
+  const account = state.account;
+  if (!account) {
+    return logout();
+  }
+
+  const data = await getAccount(account.user);
+  if (data.error) {
+    return logout();
+  }
+
+  updateState('account', data);
+}
+```
+  
+**இந்த செயல்பாட்டின் லாஜிக் புரிதல்:**  
+- பயனர் தற்போது உள்நுழைந்துள்ளதா என்று (state.account உள்ளது) சரிபார்க்கிறது  
+- செல்லாவிட்டால் வெளிநுழைவிற்கு மாற்றுகிறது  
+- `getAccount()` என்ற உள்ளிருக்கும் செயல்பாட்டைப் பயன்படுத்தி சேவையகத்திலிருந்து புதிய கணக்கு தரவை பெறுகிறது  
+- சேவை பிழைகள் ஏற்படினால், தவறான அமர்வுகளை வெளியேற்றுகிறது  
+- நமது கட்டுப்பாடுள்ள புதுப்பிப்பு முறையில் நிலையை புதிய தரவுடன் புதுப்பிக்கிறது  
+- `updateState()` மூலம் தானாக localStorage நிலைத்தன்மையை தூண்டும்  
 
-["Add transaction" உரையாடலை செயல்படுத்தவும்](assignment.md)
+**படி 2: டாஷ்போர்டு புதுப்பிப்பு கையாள்கை உருவாக்குக**  
 
-பணிக்கூற்றை முடித்த பிறகு கிடைக்கும் உதாரண முடிவு இதோ:
+```js
+async function refresh() {
+  await updateAccountData();
+  updateDashboard();
+}
+```
+  
+**இந்த புதுப்பிப்பு செயல்பாடு செய்வதம்:**  
+- தரவு புதுப்பிப்பு மற்றும் UI புதுப்பிப்பு செயல்முறைகளை ஒருங்கிணைக்கிறது  
+- புதிய தரவு ஏற்றப்படுவதற்காக காத்திருந்து பின்னர் காட்சியமைப்பை மாற்றுகிறது  
+- டாஷ்போர்டு தற்போதைய தகவலை பகிர்கிறதை உறுதிசெய்கிறது  
+- தரவு நிர்வாகமும் UI புதுப்பிப்பும் தெளிவாக பிரிக்கப்பட்டுள்ளன  
+
+**படி 3: பாதை அமைப்புடன் இணைப்பு**  
+
+உங்கள் பாதை அமைப்பை புதுப்பித்து, தானாக இந்த புதுப்பிப்பை இயங்க வையுங்கள்:  
 
-!["Add transaction" உரையாடல் உதாரணத்தை காட்டும் ஸ்கிரீன்ஷாட்](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ta.png)
+```js
+const routes = {
+  '/login': { templateId: 'login' },
+  '/dashboard': { templateId: 'dashboard', init: refresh }
+};
+```
+  
+**இந்த இணைப்பின் செயல்விளக்கம்:**  
+- டாஷ்போர்டு பாதை ஏற்றும்போது புதுப்பிப்பு செயல்பாட்டை இயக்குகிறது  
+- பயனர் டாஷ்போர்டுக்கு செல்லும் போது எப்போதும் புதிய தரவு காட்டப்படுகிறது  
+- முன்னைய பாதை அமைப்பும் தொடர்கிறது; தரவு புதியதன்மை சேர்க்கப்பட்டுள்ளது  
+- பாதை குறிப்பிட்ட ஆரம்பப்படுத்தல் முறைக்கு ஒரே மாதிரி வழங்குகிறது  
+
+**தரவு புதுப்பிப்பு முறையை சோதனை செய்ய:**  
+
+1. உங்கள் வங்கி செயலியில் உள்நுழைக  
+2. முன்பு கூறிய curl கட்டளையை இயக்கி புதிய பரிவர்த்தனையை உருவாக்கவும்  
+3. உங்கள் டாஷ்போர்டு பக்கத்தை புதுப்பிக்கவும் அல்லது விட்டு மீண்டும் செல்லவும்  
+4. புதிய பரிவர்த்தனை உடனடியாக தோன்றுகிறதா என்பதை உறுதிசெய்க  
+
+🎉 **சரியான சமநிலை அடைந்தது**: உங்கள் செயலி நிலைத்துறை மென்மையான அனுபவத்தையும் புதிய சேவை தரவுகளின் துல்லியத்தையும் இணைத்துக் கொண்டுள்ளது!  
+
+## 📈 உங்கள் நிலை நிர்வாக திறனின் முன்னேற்ற காலவரிசை  
+
+```mermaid
+timeline
+    title தொழில் நிலை மேலாண்மை பயணம்
+    
+    section சிக்கல் அறிதல்
+        State Issues Diagnosis
+            : சேஷன் இழப்பு பிரச்சினைகளை கண்டறிதல்
+            : பரவலாக உள்ள புதுப்பிப்பு பிரச்சினைகளை புரிதல்
+            : கட்டமைப்புக்கான தேவைகளை அடையாளம் காண்தல்
+    
+    section Architecture Foundation
+        Centralized State Design
+            : ஒருங்கிணைந்த நிலை பொருட்களை உருவாக்குதல்
+            : கட்டுப்படுத்தப்பட்ட புதுப்பிப்பு முறைகளை அமற்படுத்துதல்
+            : மாறாத அடிப்படைகள் ஏற்பாடு செய்தல்
+        
+        Predictable Updates
+            : Object.freeze() பயன்படுத்துதல் கற்றல்
+            : பிழை கண்டறிய எளிதான அமைப்புகளை உருவாக்குதல்
+            : பரவலான மாதிரிகள் உருவாக்குதல்
+    
+    section Persistence Mastery
+        localStorage Integration
+            : JSON தொடர் நிரலாக்கத்தை கையாள்தல்
+            : தானாக ஒத்திசைவு செய்வதைக் கையாள்தல்
+            : சேஷன் தொடர்ச்சியை உருவாக்குதல்
+        
+        Data Freshness Balance
+            : பழுப்படіння சவால்களை முகாமைத்தல்
+            : புதுப்பிப்பு அமைப்புகளை உருவாக்குதல்
+            : திறன் மற்றும் துல்லியத்தை 최்ஷான்மை செய்யுதல்
+    
+    section Professional Patterns
+        Production-Ready Systems
+            : பிழை கையாள்தலை அமற்படுத்துதல்
+            : பராமரிக்கக்கூடிய கட்டமைப்புகளை உருவாக்குதல்
+            : தொழில் தர சிறந்த நடைமுறைகளை பின்பற்றுதல்
+        
+        Advanced Capabilities
+            : கட்டமைப்பு ஒருங்கிணைப்புக்கு தயார்
+            : சிக்கலான நிலை தேவைகளுக்கு தயாராக 있음
+            : நேரடி விடய கனவை அடிப்படையாகக் கொண்டது
+```  
+**🎓 பட்டமளிக்கும் கட்டம்**: நீங்கள் ரெடக்ஸ், Vuex மற்றும் மற்ற தொழில்முறை நிலை நூலகங்களின் கொள்கைகளைப் பயன்படுத்தி ஒரு முழுமையான நிலை நிர்வாக அமைப்பை வெற்றிகரமாக உருவாக்கியுள்ளீர்கள். இந்த முறைகள் எளிய செயலிகளிலிருந்து நிறுவன செயலிகள் வரை பருமனமாக செயல்படுகின்றன.  
+
+**🔄 அடுத்த நிலை திறன்கள்:**  
+- நிலை நிர்வாக கட்டமைப்புகளை (Redux, Zustand, Pinia) கற்றுக்கொள்ள தயாராகவும்  
+- WebSockets உடன் நேரடியான அம்சங்களை செயல்படுத்த தயாராகவும்  
+- ஆஃப்லைன் முதன்மையான முன்னேற்றமான வலை செயலிகளைக் கட்டமைக்கவும்  
+- நிலை இயந்திரங்கள் மற்றும் பின்வட்டாரிகளின் மேம்பட்ட கோட்பாடுகளுக்கான அடித்தளத்தை அமைக்கவும்  
+
+## GitHub Copilot முகவர் சவால் 🚀  
+
+முகவர் முறையைப் பயன்படுத்தி அடுத்த சவாலை நிறைவேற்றுக:  
+
+**விளக்கம்:** வங்கிப் செயலிக்கு undo/redo செயல்பாடுகளுடன் கூடிய ஒரு முழுமையான நிலை நிர்வாக அமைப்பை உருவாக்குக. இந்த சவால் நிலை வரலாறு கண்காணிப்பு, மாற்றமற்ற புதுப்பிப்புகள் மற்றும் பயனர் இடைமுக ஒத்திசைவு ஆகிய மேம்பட்ட நிலை நிர்வாகக் கொள்கைகளைப் பயிற்சி செய்வதற்கு உதவும்.  
+
+**உள்ளடக்கம்:**  
+1) முந்தைய அனைத்து நிலைகளையும் கண்காணிக்கும் நிலை வரலாறு வரிசை,  
+2) undo மற்றும் redo செயல்பாடுகள் முந்தைய நிலைகளுக்கு முடியுமான வளைத்தோடும்,  
+3) undo/redo அம்சங்களுக்கு டாஷ்போர்டில் UI பொத்தான்கள்,  
+4) நினைவக பிரச்சனைகளை தவிர்க்க அதிகபட்ச வரலாறு வரிசை 10,  
+5) பயனர் வெளியேறுவோதே வரலாறு சுத்தப்படுத்தல். undo/redo பண்புகள் கணக்கு இருப்பு மாற்றங்களுடன் வேலை செய்ய மற்றும் உலாவி புதுப்பிப்புகளைக் கையாண்டு நிலைத்திருக்க வேண்டும்.  
+
+[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) பற்றி மேலதிகமாக அறியும்.  
+
+## 🚀 சவால்: சேமிப்பை மேம்படுத்தல்  
+
+உங்கள் செயல்முறை இப்போது பயனர் அமர்வுகளை, தரவு புதுப்பிப்பை மற்றும் நிலை நிர்வாகத்தையும் திறம்பட கையாள்கிறது. இருப்பினும், நமது தற்போதைய அணுகுமுறை சேமிப்பு திறன் மற்றும் செயல்திறனுக்கு இடையே மிகச்சரியான சமநிலை உள்ளதா என்று பரிசீலனை செய்யவும்.  
+
+சதுரங்க ஆடவர்களைப் போன்று, முக்கிய துண்டுகள் மற்றும் அகற்றக்கூடிய குதிரைகள் இடையேயான வேறுபாட்டை உணர்ந்து, சிறந்த நிலை நிர்வாகம் எந்த தரவு நிலையாக இருக்க வேண்டும் மற்றும் எந்த தரவு எப்போதும் சேவையகத்திலிருந்து புதியதாக வேண்டும் என்று கண்டறிவது அவசியம்.  
+
+**திறப்பு பகுப்பாய்வு:**  
+
+தற்போதைய localStorage செயல்பாட்டைப் மதிப்பீடு செய்து பின்வரும் கேள்விகளைச் சிந்திக்கவும்:  
+- பயனர் அங்கீகாரத்தை பராமரிக்க தேவையான குறைந்தபட்சத் தகவல் என்ன?  
+- எந்த தரவு அடிக்கடி மாறுகிறது எனவே உள்ளூர் கேசிங் பலனின்றி இருக்கும்?  
+- சேமிப்பு மேம்படுத்தல் செயல்திறனை உடைத்துச் செலாமல் பயனர் அனுபவத்தை எப்படி மேம்படுத்த முடியும்?  
+
+இத்தகைய கட்டமைப்பு ஆராய்ச்சி, பயனையும் திறனையும் கவனிக்கும் அனுபவமுள்ள மேம்பாடு செய்பவர்களைப் பிரிக்கிறது.  
+
+**இடைநிலை திட்டம்:**  
+- நிலையாக இருக்க வேண்டிய அத்தியாவசிய தரவை அடையாளம் காண்க (மிகவும் பயனர் அடையாளம் மட்டும் இருக்கலாம்)  
+- உங்கள் localStorage செயல்பாட்டை முக்கிய அமர்வு தரவை மட்டும் சேமிப்பதற்காக மாற்றுக  
+- டாஷ்போர்டு பயணங்களில் எப்போதும் சேவையகத்திலிருந்து புதிய தரவை ஏற்றுக  
+- உங்கள் மேம்படுத்தப்பட்ட முறையால் பயனர் அனுபவம் கையாளப்படுவதை சோதிக்கவும்  
+
+**மேம்பட்ட கருத்து:**  
+- முழு கணக்கு தரவு மற்றும் அங்கீகார டோக்கன்கள் ஒருங்கிணைப்புகளுக்குள் உருவாகும் நன்மைகள் மற்றும் தீமைகள் தொடர்பான ஒப்பீடு  
+- உங்கள் முடிவுகள் மற்றும் காரணங்களை அடுத்த குழுவினருக்கு ஆவணப்படுத்தவும்  
+
+இந்த சவால் பயனர் அனுபவமும் செயலி திறனும் இரண்டையும் கவனிக்கும் தொழில்முறை மேம்பாட்டாளராக நீங்கள் சிந்திக்க உதவும். வெகுவாக விரும்பாமல் ஆராயவும்!  
+
+## பாடக்குழு உதவி வினாடி வினா  
+
+[பாடக்குழு உதவி வினாடி வினா](https://ff-quizzes.netlify.app/web/quiz/48)  
+
+## பணிகள்  
+
+["பரிவர்த்தனைச் சேர்" உரையாடலை செயல்படுத்துக](assignment.md)  
+
+பணியை முடித்த பின் ஒரு உதாரண முடிவு:  
+
+![ஒரு உதாரண "பரிவர்த்தனைச் சேர்" உரையாடலைக் காண்கிற ஸ்கிரீன் ஷாட்](../../../../translated_images/dialog.93bba104afeb79f1.ta.png)
 
 ---
 
-**குறிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**பிரதிபादन குறிச்சொல்**:  
+இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) பயன்படுத்தி மொழிபெயர்க்கப்பட்டது. நாங்கள் துல்லியத்திற்காக முயற்சி செய்யும் போதும், தானியங்கி மொழிபெயர்ப்பில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து கவனியுங்கள். தனது மூலப் பண்டத்தில் உள்ள ஆவணம் அதிகாரப்பூர்வமான மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கான, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டிலிருந்து எழும் எந்தவொரு தவறுபடுத்தல்கள் அல்லது தவறான புரிதல்களுக்கு நாங்கள் பொறுப்பாளர் அல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/7-bank-project/4-state-management/assignment.md

@@ -1,39 +1,165 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "f23a868536c07da991b1d4e773161e25",
-  "translation_date": "2025-10-11T12:02:41+00:00",
+  "original_hash": "50a7783473b39a2e0f133e271a102231",
+  "translation_date": "2026-01-07T13:36:57+00:00",
   "source_file": "7-bank-project/4-state-management/assignment.md",
   "language_code": "ta"
 }
 -->
 # "பரிவர்த்தனை சேர்க்க" உரையாடலை செயல்படுத்தவும்
 
+## அவலோகம்
+
+உங்கள் வங்கி செயலி இப்போது உறுதியான மாநில மேலாண்மை மற்றும் தரவுத்தள நிலைத்தன்மையைக் கொண்டுள்ளது, ஆனால் அது உண்மையான வங்கி செயலிகளுக்கு தேவையான ஒரு முக்கிய அம்சத்தை இல்லாமல் உள்ளது: பயனர்கள் தங்களுடைய சொந்த பரிவர்த்தனைகளை சேர்க்கும் திறன். இந்த பணியில், நீங்கள் உங்கள் தற்போதைய மாநில மேலாண்மை அமைப்புடன் தனித்தனியாக இணைக்கக்கூடிய முழுமையான "பரிவர்த்தனை சேர்க்க" உரையாடலை செயல்படுத்துவீர்கள்.
+
+இந்த வேலை நீங்கள் நான்கு வங்கி பாடங்களில் கற்றுக்கொண்ட அனைத்தையும் ஒருங்கிணைக்கிறது: HTML வார்ப்புரு, படிவ கையாளல், API ஒருங்கிணைப்பு மற்றும் மாநில மேலாண்மை.
+
+## கற்றல் இலக்குகள்
+
+இந்த பணியை முடித்தால், நீங்கள்:
+
+- **உரையாடல் இடைமுகத்தை** பயனர் நட்பானவாறு உருவாக்குவீர்கள்
+- விசைப்பலகை மற்றும் திரை அதிபர் ஆதரவு கொண்ட அணுகல்திறனுள்ள படிவ வடிவமைப்பை **செயல்படுத்துவீர்கள்**
+- புதிய அம்சங்களை உங்கள் தற்போதைய மாநில மேலாண்மைக்கு **இணைத்திடுவீர்கள்**
+- API தொடர்பு மற்றும் பிழை கையாளலை **பயிற்சி செய்வீர்கள்**
+- நவீன வலை வளர்ச்சி முறைமைகளை உண்மையான அம்சத்திற்கு **விண்ணப்பிப்பீர்கள்**
+
 ## வழிமுறைகள்
 
-எங்கள் வங்கி பயன்பாட்டில் இன்னும் ஒரு முக்கிய அம்சம் இல்லை: புதிய பரிவர்த்தனைகளை உள்ளிடும் சாத்தியம்.
-முந்தைய நான்கு பாடங்களில் நீங்கள் கற்றுக்கொண்ட அனைத்தையும் பயன்படுத்தி, "பரிவர்த்தனை சேர்க்க" உரையாடலை செயல்படுத்தவும்:
+### படி 1: பரிவர்த்தனை சேர்க்க பொத்தான்
+
+உங்கள் டாஷ்போர்ட் பக்கத்தில் பயனர்கள் எளிதாக காணவும் அணுகவும் கூடிய "பரிவர்த்தனை சேர்க்க" பொத்தானை **உருவாக்கவும்**.
+
+**தேவைகள்:**
+- பொத்தானை டாஷ்போர்டில் பொருத்தமான இடத்தில் **வைக்கவும்**
+- தெளிவான, செயல்-நோக்கிய பொத்தானின் உரையை **பயன்படுத்தவும்**
+- உங்கள் தற்போதைய UI வடிவமைப்புடன் பொருந்தும் வகையில் பொத்தானை **அழகுசெய்யவும்**
+- பொத்தான் விசைப்பலகை மூலம் அணுகக்கூடியதாக இருக்க **உறுதி செய்யவும்**
+
+### படி 2: உரையாடல் செயல்படுத்தல்
+
+உங்கள் உரையாடலை செயல்படுத்த இந்த இரண்டு முறைமைகளில் ஒன்றைத் தேர்ந்தெடுக்கவும்:
+
+**விருப்பம் A: தனித்தானே பக்கம்**  
+- பரிவர்த்தனை படிவத்திற்கான புதிய HTML வார்ப்புருவை **உருவாக்கவும்**  
+- உங்கள் வழிச்செலுத்தல் அமைப்பில் புதிய வழியை **சேர்க்கவும்**  
+- படிவ பக்கத்திற்கும் அதிலிருந்து திருப்புதல் வழிச்செலுத்தல்களை **செயல்படுத்தவும்**
+
+**விருப்பம் B: மாடல் உரையாடல் ( adviseren )**  
+- கவனத்தை நகர்த்தாமல் உங்களுக்கு JavaScript பயன்படுத்தி உரையாடலை காட்ட/மறைக்கவும்  
+- [`hidden` பண்புக்கூறு](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) அல்லது CSS வகுப்புகளை பயன்படுத்தி செயல்படுத்தவும்  
+- சரியான கவனம் மேலாண்மையுடன் மென்மையான பயனர் அனுபவத்தை உருவாக்கவும்  
+
+### படி 3: அணுகல்திறன் செயல்படுத்தல்
+
+உங்கள் உரையாடல் [அணுகல்திறன் தரநிலைகளை பூர்த்தி செய்வதை](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) உறுதிப்படுத்தவும்:
+
+**விசைப்பலகை வழிச்செலுத்தல்:**  
+- உரையாடலை மூட Escape விசையை ஆதரிக்கவும்  
+- உரையாடல் திறந்திருக்கும் போது கவனம் அதன் உள்ளே இருப்பதை உறுதிப்படுத்தவும்  
+- உரையாடல் மூடும் போது கவனத்தை முயற்சி பொத்தானுக்கு திருப்பவும்  
+
+**திரை வாசிப் படை ஆதரவு:**  
+- பொருத்தமான ARIA லேபிள்கள் மற்றும் பங்கு சேர்க்கவும்  
+- உரையாடல் திறப்பு/மூடு நிகழ்வுகளை திரை வாசிப் படைக்கு அறிவிக்கவும்  
+- தெளிவான படிவ புல லேபிள்கள் மற்றும் பிழை செய்திகளை வழங்கவும்  
+
+### படி 4: படிவ உருவாக்கல்
+
+பரிவர்த்தனை தரவுகளை சேகரிக்க ஒரு HTML படிவத்தை **வடிவமைக்கவும்**:
+
+**தேவையான புலங்கள்:**
+- **தேதி**: பரிவர்த்தனை நடந்த தேதி  
+- **விளக்கம்**: பரிவர்த்தனை செய்கின்ற விபரம்  
+- **தொகை**: பரிவர்த்தனை மதிப்பு (வருமானம் இருப்பின் நேர்மறை, செலவுகள் இருப்பின் எதிர்மறை)  
+
+**படிவ அம்சங்கள்:**  
+- சமர்ப்பிப்புக்கு முன் பயனர் உள்ளீட்டை **சரிபார்க்கவும்**  
+- தவறான தரவுக்கு தெளிவான பிழை செய்திகள் **அறிவிக்கவும்**  
+- உதவிகரமான இடைமுகத் திருத்தங்கள் மற்றும் லேபிள்களை உள்ளடக்கவும்  
+- உங்கள் தற்போதைய வடிவமைப்புடன் **தொகுத்தமைக்கவும்**  
+
+### படி 5: API ஒருங்கிணைப்பு
+
+உங்கள் படிவத்தை பின்னணி API-க்கு இணைக்கவும்:
+
+**செயல்படுத்தும் படிகள்:**  
+- [சேவையகம் API குறிப்புகளை](../api/README.md) சரிபார்த்து தொடுப்பும் தரவுப் படிவத்தைப் பெறவும்  
+- உங்கள் படிவ உள்ளீடுகளிருந்து JSON தரவை உருவாக்கவும்  
+- பொருத்தமான பிழை கையாளலுடன் API-க்கு தரவை அனுப்பவும்  
+- பயனருக்கு வெற்றி/தோல்வி செய்திகளை காட்டவும்  
+- நெட்வொர்க் பிழைகளை மென்மையாக கையாளவும்  
+
+### படி 6: மாநில மேலாண்மை ஒருங்கிணைப்பு
+
+புதிய பரிவர்த்தனையுடன் உங்கள் டாஷ்போர்டை புதுப்பிக்கவும்:
+
+**ஒருங்கிணைப்பு தேவைகள்:**  
+- பரிவர்த்தனை வெற்றிகரமாக சேர்க்கப்பட்ட பிறகு கணக்குத் தரவைக் குதிக்கவும்  
+- பக்கம் மறுதொகுப்பு இல்லாமல் டாஷ்போர்ட் காட்சி புதுப்பிக்கவும்  
+- புதிய பரிவர்த்தனை உடனடியாக தெரியும் வகையில் செய்யவும்  
+- முழு செயல்முறை முழுவதும் சரியான மாநில நிலைத்தன்மையை பராமரிக்கவும்  
+
+## தொழில்நுட்ப விவரங்கள்
+
+**API தொடுப்பு விவரங்கள்:**  
+[சேவையகம் API நிரலாக்கக் குறிப்புகளை](../api/README.md) பார்க்கவும்:  
+- பரிவர்த்தனை தரவிற்கான தேவையான JSON வடிவமைப்பு  
+- HTTP முறை மற்றும் தொடுப்பு URL  
+- எதிர்பார்க்கப்பட்ட பதில் வடிவமைப்பு  
+- பிழை பதில் கையாளல்  
+
+**எதிர்பார்க்கும் முடிவு:**  
+இந்த பணியை நிறைவு செய்த பிறகு, உங்கள் வங்கி செயலியில் தொழில்முறை தோற்றமும் செயல்பாடும் கொண்ட முழுமையான "பரிவர்த்தனை சேர்க்க" அம்சம் இருக்க வேண்டும்:
+
+![ஒரு எடுத்துக்காட்டு "பரிவர்த்தனை சேர்க்க" உரையாடலை காட்டும் ஸ்கிரின்ஷாட்](../../../../translated_images/dialog.93bba104afeb79f1.ta.png)
+
+## உங்கள் செயல்பாட்டை சோதனை செய்தல்
+
+**செயல்பாட்டு சோதனை:**  
+1. "பரிவர்த்தனை சேர்க்க" பொத்தான் தெளிவாகக் காணப்படுகிறது மற்றும் அணுகக்கூடியதா என்பதை **சரிபார்க்கவும்**  
+2. உரையாடல் சரியாக திறக்கும் மற்றும் மூடும் என்பதை **சோதிக்கவும்**  
+3. அனைத்து தேவையான புலங்களுக்குமான படிவ சரிபார்ப்பு வேலை செய்கிறதா என்று **உறுதி செய்யவும்**  
+4. வெற்றிகரமான பரிவர்த்தனைகள் உடனடியாக டாஷ்போர்டில் தோன்றுகின்றனவா என்பதை **பரிசோதிக்கவும்**  
+5. தவறான தரவு மற்றும் நெட்வொர்க் பிரச்சினைகளுக்கான பிழை கையாளல் வேலை செய்கிறதா என்பதை **உறுதிப்படுத்தவும்**  
+
+**அணுகல்திறன் சோதனை:**  
+1. முழு செயல்முறையையும் விசைப்பலகை மட்டும் பயன்படுத்தி **வழிசெலுத்தவும்**  
+2. திரை வாசிப்பான் மூலம் சோதனை செய்து சரியான அறிவிக்கைகள் வருகிறதா என்பதை **சரிபார்க்கவும்**  
+3. கவனம் மேலாண்மை சரியாக இருக்கிறதா என்று **தகவலடையவும்**  
+4. அனைத்து படிவ கூறுகளும் பொருத்தமான லேபிள்களைக் கொண்டுள்ளதா என்பதை **தயாராய்வார்**  
+
+## மதிப்பீட்டுக் குறியீடு
 
-- டாஷ்போர்டு பக்கத்தில் "பரிவர்த்தனை சேர்க்க" பொத்தானை சேர்க்கவும்
-- HTML டெம்ப்ளேட் கொண்ட புதிய பக்கத்தை உருவாக்கவும் அல்லது டாஷ்போர்டு பக்கத்தை விட்டு செல்லாமல் உரையாடல் HTML ஐ காட்ட/மறைக்க JavaScript ஐ பயன்படுத்தவும் (அதற்காக [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) பண்பை அல்லது CSS வகைகளை பயன்படுத்தலாம்)
-- உரையாடலுக்கான [keyboard மற்றும் screen reader accessibility](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) ஐ சரியாக கையாளவும்
-- உள்ளீட்டு தரவுகளை பெற HTML படிவத்தை செயல்படுத்தவும்
-- படிவ தரவுகளிலிருந்து JSON தரவுகளை உருவாக்கி API க்கு அனுப்பவும்
-- புதிய தரவுடன் டாஷ்போர்டு பக்கத்தை புதுப்பிக்கவும்
+| நிபந்தனை | சிறந்தது | போதுமானது | மேம்படுத்த வேண்டும் |
+| -------- | --------- | -------- | ----------------- |
+| **செயல்திறன்** | பரிவர்த்தனை அம்சம் சிறந்த பயனர் அனுபவத்துடன் முற்றிலும் செயல்படுகிறது மற்றும் பாடங்களின் அனைத்து சிறந்த நடைமுறைகளையும் பின்பற்றுகிறது | பரிவர்த்தனை அம்சம் சரியாக இயங்குகிறது ஆனால் சில சிறந்த நடைமுறைகளை பின்பற்றாதவையாக இருக்கலாம் அல்லது சிறு பாவனை பிரச்சினைகள் இருக்கலாம் | பரிவர்த்தனை அம்சம் பகுதி மட்டுமே செயல்படுகிறது அல்லது அதன் usability-ல் மிகப்பெரிய பிரச்சினைகள் உள்ளன |
+| **குறியீட்டு தரம்** | குறியீடு நன்கு அமைக்கப்பட்டுள்ளது, நெறியிடப்பட்ட முறைமைகள் பின்பற்றப்பட்டு, சரியான பிழை கையாளல் உள்ளது மற்றும் தற்போதைய மாநில மேலாண்மையுடன் இணைந்து செயல்படுகிறது | குறியீடு வேலை செய்கிறது ஆனால் அமைப்பு பிரச்சினைகள் அல்லது தற்போதைய குறியீட்டுடன் ஒத்திசையாமை இருக்கலாம் | குறியீடில் கட்டமைப்பு பிரச்சினைகள் மிகுந்ததால் அல்லது தற்போதைய முறைமைகளுடன் இணைக்கப்படவில்லை |
+| **அணுகல்திறன்** | முழு விசைப்பலகை வழிசெலுத்தல் ஆதரவு, திரை வாசிப்பான் பொருத்தம் மற்றும் WCAG வழிகாட்டுதல்களுடன் சிறந்த கவனம் மேலாண்மை | அடிப்படையான அணுகல்திறன் அம்சங்கள் செயல்படுத்தப்பட்டிருக்கலாம் ஆனால் சில விசைப்பலகை வழிசெலுத்தல் அல்லது திரை வாசிப்பான் அம்சங்கள் இல்லாமை இருக்கலாம் | இலிமிட்டோ அல்லது எந்த அணுகல்திறன் கருதுகோள்களும் அமல்படுத்தப்பட்டுள்ளதில்லை |
+| **பயனர் அனுபவம்** | புரிந்துகொள்ள எளிதான, துல்லியமான இடைமுகம், தெளிவான பின்னூட்டத்துடன், மென்மையான தொடர்புகள் மற்றும் தொழில்முறை தோற்றம் | சிறந்த பயனர் அனுபவம் ஆனால் பின்னூட்டம் அல்லது பார்வை வடிவமைப்பில் சிறு இடைகள் உள்ளன | குழப்பமான இடைமுகம் அல்லது பயனர் பின்னூட்டமின்மை உடைய குறைபாடான பயனர் அனுபவம் |
 
-எந்த API ஐ அழைக்க வேண்டும் மற்றும் எதிர்பார்க்கப்படும் JSON வடிவம் என்ன என்பதை அறிய [சர்வர் API விவரக்குறிப்புகளை](../api/README.md) பார்க்கவும்.
+## கூடுதல் சவால்கள் (விருப்பமானவை)
 
-பாடத்தை முடித்த பிறகு பெறப்படும் ஒரு எடுத்துக்காட்டு முடிவை இங்கே காணலாம்:
+அடிப்படை தேவைகள் முடிந்த பிறகு, இந்த மேம்படுத்தல்களை பரிசீலிக்கவும்:
 
-![எடுத்துக்காட்டு "பரிவர்த்தனை சேர்க்க" உரையாடலைக் காட்டும் ஸ்கிரீன்ஷாட்](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.ta.png)
+**மேம்பட்ட அம்சங்கள்:**  
+- பரிவர்த்தனை வகைகள் சேர்க்கவும் (உணவு, போக்குவரத்து, பொழுதுபோக்கு, மற்றும் பிற)  
+- நேரடி பின்னூட்டத்துடன் உள்ளீடு சரிபார்ப்பை செயல்படுத்தவும்  
+- சக்திவாய்ந்த பயனர்களுக்கான விசைப்பலகை மாற்றுருக்கள் உருவாக்கவும்  
+- பரிவர்த்தனை திருத்தம் மற்றும் நீக்குதல் செயல்பாடுகளைக் கொண்டு வரவும்  
 
-## மதிப்பீடு
+**மேம்பட்ட ஒருங்கிணைப்பு:**  
+- சமீபத்தில் சேர்ந்த பரிவர்த்தனைகளுக்கான முன்னோக்கி செயல்பாட்டை அமல்படுத்தவும்  
+- CSV கோப்புகளிலிருந்து மிகப்பெரிய பரிவர்த்தனை இறக்குமதி சேர்க்கவும்  
+- பரிவர்த்தனை தேடல் மற்றும் வடிகட்டும் திறன்களை உருவாக்கவும்  
+- தரவு ஏற்று செயல்பாட்டை செயல்படுத்தவும்  
 
-| அளவுகோல் | சிறந்தது                                                                                          | போதுமானது                                                                                                                | மேம்பாடு தேவை                                   |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | பரிவர்த்தனை சேர்க்கும் செயல்பாடு பாடங்களில் காணப்பட்ட சிறந்த நடைமுறைகளை முழுமையாக பின்பற்றி செயல்படுத்தப்பட்டுள்ளது. | பரிவர்த்தனை சேர்க்கும் செயல்பாடு செயல்படுத்தப்பட்டுள்ளது, ஆனால் பாடங்களில் காணப்பட்ட சிறந்த நடைமுறைகளை பின்பற்றவில்லை அல்லது பகுதியளவில் மட்டுமே செயல்படுகிறது. | பரிவர்த்தனை சேர்க்கும் செயல்பாடு முற்றிலும் செயல்படவில்லை. |
+இந்த விருப்ப அம்சங்கள் உங்கள் வலை வளர்ச்சி திறன்களை மேம்படுத்தவும் முழுமையான வங்கி செயலியை உருவாக்கவும் உதவும்!
 
 ---
 
-**குறிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**மறுப்பு**:  
+இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. சரியான்தன்மைக்காக முயற்சிப்பினும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுக்கள் ஏற்படலாம் என்பதை தயவுசெய்து அறிவீர்கள். அதன் சொந்த மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாக கருதப்பட வேண்டும். மிக முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்தரிக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்தியதால் ஏற்படும் எந்தவொரு புரிதல் தவறுகளுக்கும் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பல்லோம்.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/7-bank-project/README.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 இந்த திட்டத்தில், நீங்கள் ஒரு கற்பனை வங்கியை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்வீர்கள். இந்த பாடங்கள் ஒரு வலை பயன்பாட்டை அமைப்பது மற்றும் வழிகள் வழங்குவது, படிவங்களை உருவாக்குவது, நிலையை நிர்வகிப்பது, மற்றும் API-இல் இருந்து வங்கியின் தரவுகளை பெறுவது போன்ற வழிமுறைகளை உள்ளடக்கியது.
 
-| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.ta.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.ta.png) |
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.ta.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.ta.png) |
 |--------------------------------|--------------------------------|
 
 ## பாடங்கள்

translations/ta/8-code-editor/1-using-a-code-editor/README.md

@@ -1,175 +1,639 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "f8d4b0284f3fc1de7eb65073d8338cca",
-  "translation_date": "2025-10-11T11:46:34+00:00",
+  "original_hash": "a9a3bcc037a447e2d8994d99e871cd9f",
+  "translation_date": "2026-01-07T12:57:50+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/README.md",
   "language_code": "ta"
 }
 -->
-***
+# குறியீட்டு நிரலாக்கி பயன்படுத்துவது: VSCode.dev க்கான சிறந்த பயிற்சி
+
+*தி மாட்ரிக்ஸ்* திரைப்படத்தில் நீயோ ஒரு பெரிய கணினி முனையத்துடன் இணைக்கப்பட்டு டிஜிட்டல் உலகத்தை அணுகினதை நினைவிருக்கிறதா? இன்றைய வலை வளர்ச்சி கருவிகள் அது மாறான கதை – எங்கிருந்தும் அணுகக்கூடிய அற்புதமான திறன்கள். VSCode.dev என்பது உலாவியில் இயங்கும் குறியீட்டு நிரலாக்கி, இணைய இணைப்புடன் எந்த சாதனத்திலும் தொழில்முறை வளர்ச்சி கருவிகளை கொண்டுவரும்.
+
+புத்தக அச்சிடும் எந்திரம் அவசியம் இல்லாமல் பொதுமக்களுக்கு புத்தகங்களை கொண்டு வந்ததைப்போல், VSCode.dev குறியீட்டினை பொது மக்களுக்கு உரிமையாக்குகிறது. நூலக கணினி, பள்ளி ஆய்வகம் அல்லது உலாவி கிடைக்கும் எங்கும் நீங்கள் பணியாற்ற முடியும். ஏதுமில்லை நிறுவற்புகளும், “எனக்கு எனது தனியுரிமை அமைப்பு வேண்டும்” என்ற வரம்புகளும்.
+
+இந்த பாடத்தின் முடிவில், நீங்கள் VSCode.dev ஐ எவ்வாறு பாவிக்க செல்லுவது, உலாவியில் நேரடியாக GitHub சேமிப்பகங்களை திறந்து பணியாற்றுவது, மற்றும் பதிப்பு கட்டுப்பாட்டிற்கான Git பயன்பாட்டை புரிந்துகொள்வீர்கள் – இவை தொழில்முறை வளர்ப்பாளர்கள் தினசரி பயன்படுத்தும் திறன்கள்.
+
+## ⚡ அடுத்த 5 நிமிடங்களில் நீங்கள் செய்யக்கூடியவை
+
+**பிஸி வளர்ப்பாளர்களுக்கான விரைவு துவக்கம்**
+
+```mermaid
+flowchart LR
+    A[⚡ 5 நிமிடங்கள்] --> B[https://vscode.dev பார்க்கவும்]
+    B --> C[GitHub கணக்கை இணைக்கவும்]
+    C --> D[எந்தவொரு சேமிப்பகத்தையும் திறக்கவும்]
+    D --> E[உடனடியாக திருத்தச் தொடங்கவும்]
+```
+- **நிமிடம் 1**: [vscode.dev](https://vscode.dev)க்கு செல் – நிறுவல் தேவையில்லை
+- **நிமிடம் 2**: உங்கள் GitHub கணக்கில் உள்நுழைந்து சேமிப்பகங்களை இணை
+- **நிமிடம் 3**: URL மோசடி முயற்சி செய்: எந்த repos URLயிலும் `github.com` ஐ `vscode.dev/github` ஆக மாற்று
+- **நிமிடம் 4**: புதிய கோப்பை உருவாக்கு, உருவாக்கும் போது பாங்கு வண்ணமயமாகிறது
+- **நிமிடம் 5**: மாற்றம் செய்யவும் Source Control பலகையில் இருந்து commit செய்
+
+**விரைவு சோதனை URL**:
+```
+# Transform this:
+github.com/microsoft/Web-Dev-For-Beginners
+
+# Into this:
+vscode.dev/github/microsoft/Web-Dev-For-Beginners
+```
+
+**ஏன் இது முக்கியம்**: 5 நிமிடத்தில் நீங்கள் எங்கிருந்து வேண்டுமானாலும் தொழில்முறை கருவிகளுடன் குறியீட்டை உருவாக்கும் சுதந்திரத்தை அனுபவிப்பீர்கள். இது வளர்ச்சியின் எதிர்காலத்தை குறிக்கும் – அணுகக்கூடியது, சக்திவாய்ந்தது, உடனடி.
+
+## 🗺️ மேகம் அடித்த வளர்ச்சி பயணம்
+
+```mermaid
+journey
+    title உள்ளூர் அமைப்பில் இருந்து கிளவுட் வளர்ச்சியில் நிபுணத்துவம்
+    section தளம் புரிந்துகொள்ளல்
+      வலைதளம் அடிப்படை தொடர்பானத் திருத்தத்தை கண்டுபிடி: 4: You
+      GitHub சூழலை இணைத்தல்: 6: You
+      இடைமுகம் வழிசெலுத்தலில் நிபுணத்துவம் பெறு: 7: You
+    section கோப்பு மேலாண்மை திறன்கள்
+      கோப்புகளை உருவாக்கி ஒழுங்குபடுத்து: 5: You
+      எழுத்துத்தள வண்ணமயமுபடுத்தல் மூலம் திருத்து: 7: You
+      திட்ட கட்டமைப்புகளை வழிசெல்: 8: You
+    section பதிப்பு கட்டுப்பாட்டு நிபுணத்துவம்
+      Git இணைப்பை புரிந்துகொள்: 6: You
+      செயல்பாடு கமிட்டுப் பயிற்சி மேற்கொள்: 8: You
+      ஒத்துழைப்பு வடிவமைப்புகளை நிபுணப்படுத்து: 9: You
+    section தொழில்முறை தனிப்பயன்
+      சக்திவாய்ந்த நீட்சிகளை நிறுவு: 7: You
+      வளர்ச்சிப் பரிமாணத்தை அமைக்க: 8: You
+      தனிப்பட்ட செயல்முறை உருவாக்கு: 9: You
+```
+**உங்கள் பயண இலக்கு**: இந்த பாடத்தின் முடிவில், நீங்கள் தொழில்முறை மேகம் அடித்த வளர்ச்சி சூழலை முழுமையாக கையாளக்கூடியவர் ஆகி இருக்கும், அது எந்த சாதனத்திலும் வேலை செய்யும், பெரிய தொழில் நிறுவனங்களில் பயன்படுத்தப்படும் கருவிகளுடன் குறியீடு செய்வதற்கு உதவும்.
+
+## நீங்கள் கற்றுக்கொண்டிட போகும் விஷயங்கள்
+
+கூடுகாட்டி பின்பற்றுவதற்கு பிறகு, நீங்கள் முடியும்:
+
+- VSCode.dev இல் இரண்டாம் வீட்டுப்போல் வழிசெல்ல – தேவைப்படும் அனைத்தையும் இழந்துவிடாமல் கண்டுபிடி
+- எந்த GitHub சேமிப்பகத்தையும் உலாவியில் திறந்து உடனடியாக திருத்த ஆரம்பி (இது அதிசயகரமானது!)
+- Git பயன்படுத்தி உங்கள் மாற்றங்களை கண்காணித்து முன்னேற்றத்தை பாதுகாப்பது
+- விருப்ப விரிவாக்கங்களுடன் உங்கள் நிரலாக்கியை வேகமாகவும் மகிழ்ச்சியுடனும் மாற்று
+- திட்ட கோப்புகளை நம்பிக்கையுடன் உருவாக்க மற்றும் அழகு செய்ய
+
+## உங்களிடம் என்ன தேவை
+
+தேவைகள் வெறும் சில:
+
+- ஒரு இலவச [GitHub கணக்கு](https://github.com) (தேவையானால் உருவாக்க வழிகாட்டுவோம்)
+- வலை உலாவிகளுக்கு அடிப்படை அறிவு
+- GitHub அடிப்படைகள் பாடம் பயனுள்ளதாக இருக்கும், ஆனால் அவசியமில்லை
+
+> 💡 **GitHub புதியவரா?** கணக்கு உருவாக்குவது இலவசம் மற்றும் சில நிமிடங்களில் முடியும். நூலக அட்டை போல உலகக் நூலகங்களில் புத்தகம் வாசிப்பதற்கு அனுமதி தருவது போல, GitHub கணக்கு இணையத்தின் முழுவதும் உள்ள குறியீட்டு சேமிப்பகங்களை அணுக உதவும்.
+
+## 🧠 மேகம் அடித்த வளர்ச்சி சூழல் அறிமுகம்
+
+```mermaid
+mindmap
+  root((VSCode.dev தலைமை))
+    Platform Benefits
+      Accessibility
+        உபகரண தன்னாட்சி
+        நிறுவல் தேவையில்லை
+        உடனடி புதுப்பிப்புகள்
+        உலகளாவிய அணுகல்
+      Integration
+        GitHub இணைப்பு
+        களஞ்சிய ஒத்திசைவு
+        அமைப்புகள் நிலைத்தன்மை
+        ஒத்துழைப்பு தயார்
+    Development Workflow
+      File Management
+        திட்ட அமைப்பு
+        இலக்கணம் ஒளிர்வு
+        பலடுக்கு திருத்தம்
+        தானாகச் சேமிப்பு வசதிகள்
+      Version Control
+        Git ஒருங்கակցை
+        பரிபாட்டு வேலைப்பாடுகள்
+        கிளை நிர்வாகம்
+        மாற்றங்கள் கண்காணிப்பு
+    Customization Power
+      Extensions Ecosystem
+        உற்பத்தித்தன்மை கருவிகள்
+        மொழி ஆதரவு
+        தீம் விருப்பங்கள்
+        தனிப்பயன் சுருக்கங்கள்
+      Environment Setup
+        தனிப்பட்ட விருப்பங்கள்
+        பணியிட கட்டமைப்பு
+        கருவி ஒருங்கிணைவு
+        பணிச்சூழல் மேம்பாடு
+    Professional Skills
+      Industry Standards
+        பதிப்பு கட்டுப்பாடு
+        குறியீட்டு தரம்
+        ஒத்துழைப்பு
+        ஆவணப்படுத்தல்
+      Career Readiness
+        தொலைதூர வேலை
+        மேகம் அபிவிருத்தி
+        குழு திட்டங்கள்
+        திறந்த மூலக் குறியீடு
+```
+**முக்கியக் கொள்கை**: மேகம் அடித்த வளர்ச்சி சூழல்கள் குறியீட்டின் எதிர்காலம் – தொழில்முறை கருவிகள் அணுகக்கூடியவை, ஒத்துழைப்புடையவை, மற்றும் தளங்களின் அடிப்படையில் இல்லாதவை.
+
+## இணைய அடிப்படை குறியீட்டு நிரலாக்கிகள் ஏன் அவசியம்
+
+இணையம் இன்றி, பல பல்கலைக் கழக ஆய்வாளர்கள் எளிதில் ஆராய்ச்சி பகிரவில்லை. பின்னர் 1960களில் ARPANET தோன்றினது,தொலை விலான கணினிகளை இணைத்தது. இணைய அடிப்படையிலான குறியீட்டு நிரலாக்கிகள் அதே கொள்கையை பின்பற்றுகின்றன – சக்திவாய்ந்த கருவிகளை எந்த இடத்தில் நீங்கள் இருந்தாலும் கொண்டு வருவது.
+
+ஒரு குறியீட்டு நிரலாக்கி, உங்கள் வளர்ச்சி பணிக்கிடையாக செயல்படுகிறது, இதில் குறியீட்டை நீங்கள் எழுத, திருத்த, மற்றும் கோப்புகளை ஒழுங்குபடுத்தலாம். எளிய உரை நிரலாக்கிகளுக்கு மாறாக, தொழில்முறை குறியீட்டு நிரலாக்கிகள் பாங்கு வண்ணமயக்கவும், பிழை கண்டறியும் மற்றும் திட்ட மேலாண்மை அம்சங்கள் வழங்குகின்றன.
+
+VSCode.dev இந்த சக்திகளை உலாவியில் கொண்டு வருகிறது:
+
+**இணைய அடிப்படை திருத்தம் மூல விளைவுகள்:**
+
+| அம்சம் | விளக்கம் | நடைமுறை நன்மை |
+|---------|-------------|----------|
+| **தள பரிசுத்தன்மை** | உலாவியுள்ள எந்த சாதனத்திலும் இயங்கும் | வித்தியாசமான கணினிகளிலிருந்து சாதகமான வேலை |
+| **நிறுவல் தேவையில்லை** | இணைய URL மூலம் அணுகும் | மென்பொருள் நிறுவலைத் தவிர்க்கும் |
+| **தானியங்கி புதுப்பிப்புகள்** | எப்போதும் சமீபத்திய பதிப்பு இயங்கும் | புதிய அம்சங்களை கைமுறையாக புதுப்பிக்க வேண்டாம் |
+| **சேமிப்பக ஒருங்கிணைப்பு** | நேரடி GitHub கூடை | உள்ளூர் கோப்புகள் இல்லாமல் குறியீடு திருத்தவும் |
+
+**நடைமுறை விளைவுகள்:**
+- வித்தியாசமான சூழல்களில் வேலை தொடர்ச்சி
+- இயங்கு முறை இல்லாமல் ஒரே மைய இடைமுகம்
+- உடனடி ஒத்துழைப்பு திறன்
+- குறைவான உள்ளூர் சேமிப்பு தேவை
+
+## VSCode.dev ஐ ஆராய்ச்சி
+
+மேரி கியூரி ஆய்வகத்தில் சிக்கலான கருவிகள் இருந்தபோலும், VSCode.dev ஒரு உலாவி இடைமுகத்தில் தொழில்முறை வளர்ச்சி கருவிகளை அழுத்துகிறது. இந்த இணைய செயலி மேசை குறியீட்டு நிரலாக்கிகளின் அதே அடிப்படையான செயல்திறனை வழங்குகிறது.
+
+உலாவியில் [vscode.dev](https://vscode.dev) ஐ திறந்து தொடங்கு. இடைமுகம் பதிவிறக்கம் அல்லது அமைப்பு இல்லாமல் ஏற்றப்படும் – மேகம் கணினி கொள்கையின் நேரடி அலகு.
+
+### உங்கள் GitHub கணக்குடன் இணைப்பு
+
+அலெக்சாண்டர் கிராஹாம் பெல்லின் தொலைபேசி தொலைதூரங்களை இணைத்த போல, உங்கள் GitHub கணக்கை இணைப்பது VSCode.dev மற்றும் உங்கள் குறியீட்டு சேமிப்பகங்களை இணைக்கும் பாலம் ஆகும். GitHub உடன் உள்நுழைவதற்கான அழைப்பை நீங்கள் ஏற்கவும் பரிந்துரைக்கப்படுகிறது.
+
+**GitHub ஒருங்கிணைப்பு வழங்குகிறது:**
+- நிரலாக்கியில் உங்கள் சேமிப்பகங்களுக்கு நேரடி அணுகல்
+- சாதனங்களுக்கு தாண்டி ஒருங்கிணைந்த அமைப்புகள் மற்றும் விரிவாக்கங்கள்
+- GitHubக்கு சேமிப்புத் திட்டத்தின் ஒருங்கிணைந்த வேலைநெறி
+- தனிப்பட்ட வளர்ச்சி சூழல்
+
+### உங்கள் புதிய பணிக்கிடையை அறிதல்
+
+எல்லாம் ஏற்றப்பட்டதும், நீங்கள் அழகாக சுத்தமான ஒரு பணிக்கிடையை பார்வையிடுவீர்கள், இது உங்களை உங்கள் குறியீடுங்கு கவனம் செலுத்த எளிதாக்கும்!
+
+![Default VSCode.dev interface](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.ta.png)
+
+**கார்த்திடம் சுற்றியபடியே:**
+- **செயற்பாட்டு பட்டை** (இடதுபுறம் பட்டை): முக்கியத் திசைநிலை, Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, மற்றும் Settings ⚙️ உள்ளது
+- **பக்கவட்டம்** (அதனுடன் அடுத்த பக்கம்): நீங்கள் தேர்ந்தெடுத்துள்ளதை வைத்து தொடர்புடைய தகவலை காட்டும்
+- **நிரலாக்க மண்டலம்** (நடுத்தர பகுதி): இங்கே மந்திரம் நடக்கும் – உங்கள் முக்கிய குறியீட்டு பகுதி
+
+**சற்று நேரம் செலுத்து ஆராய:**
+- செயற்பாட்டு பட்டை ஐகான்களை எட்டு கிளிக் செய்து செயல்பாட்டை பார்
+- பக்கவட்டம் எண்ணற்ற தகவல்களை மாற்றிக் காட்டுவதை கவனித்துப் பார் – அருமை!
+- Explorer பார்வை (📁) தான் நீங்கள் அதிக நேரம் செலவிடும் இடம், அதற்கு பழகிக் கொள்ளுங்கள்
+
+```mermaid
+flowchart TB
+    subgraph "VSCode.dev இடைமுக கட்டமைப்பு"
+        A[செயற்பாட்டு பட்டை] --> B[ஆய்வாளர் 📁]
+        A --> C[தேடல் 🔍]
+        A --> D[மூல கட்டுப்பாடு 🌿]
+        A --> E[விரிவாக்கங்கள் 🧩]
+        A --> F[அமைப்புகள் ⚙️]
+        
+        B --> G[கோப்பு மரம்]
+        C --> H[காண் & மாற்று]
+        D --> I[கிட் நிலை]
+        E --> J[விரிவாக்க சந்தை]
+        F --> K[கட்டமைப்பு]
+        
+        L[பக்க பட்டை] --> M[சூழல் பற்றுணர்வு பலகை]
+        N[எடிட்டர் பகுதி] --> O[குறியீட்டு கோப்புகள்]
+        P[வழிமுறை/வெளியீடு] --> Q[கட்டளை வரி]
+    end
+```
+## GitHub சேமிப்பகங்களை திறக்குதல்
 
-# கோட் எடிட்டர் பயன்படுத்துவது: [VSCode.dev](https://vscode.dev) கற்றல்
+இணையம் இன்றி முன்பு ஆய்வாளர்கள் நூலகங்களுக்கு பயணம் செய்து ஆவணங்களை அணுகுங்கள். GitHub சேமிப்பகங்கள் அதே போல – தொலைத்தில் சேமிக்கப்பட்ட குறியீடு தொகுப்புகள். VSCode.dev அந்தப் பழைய பாரம்பரிய வழியை தவிர்க்கிறது, உள்ளூரில் பதிவிறக்காமே திருத்த அனுமதிக்கிறது.
 
-**வரவேற்கிறோம்!**  
-இந்த பாடம் உங்களை [VSCode.dev](https://vscode.dev)—இந்த சக்திவாய்ந்த, வலை அடிப்படையிலான கோட் எடிட்டரை அடிப்படையிலிருந்து மேம்பட்ட பயன்பாட்டிற்கு அழைத்துச் செல்கிறது. நீங்கள் எந்த நிறுவலுமின்றி உலாவியில் இருந்து நேரடியாக கோடுகளை திருத்துவது, திட்டங்களை நிர்வகிப்பது, மாற்றங்களை கண்காணிப்பது, நீட்சிகளை நிறுவுவது மற்றும் தொழில்முறை போல ஒத்துழைப்பது போன்றவற்றை நம்பிக்கையுடன் கற்றுக்கொள்வீர்கள்.
+இந்த திறன், எந்த பொது சேமிப்பகத்தையும் உடனடியாக பார்வை, திருத்தம் அல்லது பங்களிப்பதற்கு வழி செய்கிறது. சேமிப்பகங்களை திறக்கும் இரண்டு முறைகள்:
 
-***
+### முறை 1: கிளிக் செய்து திறக்கல்
 
-## கற்றல் நோக்கங்கள்
+VSCode.dev இல் புதியபடையாக இருந்து ஒரு குறிப்பிட்ட சேமிப்பகத்தை திறக்க இது சிறந்தது. எளிமையானதும் துவக்கத்திற்கானதும்:
 
-இந்த பாடத்தின் முடிவில், நீங்கள்:
+**இங்கே செய்முறை:**
 
-- எந்த திட்டத்திலும், எங்கிருந்தும் திறம்பட ஒரு கோட் எடிட்டரைப் பயன்படுத்த முடியும்
-- உள்ளமைக்கப்பட்ட பதிப்பு கட்டுப்பாட்டுடன் உங்கள் பணியை எளிதாக கண்காணிக்க முடியும்
-- எடிட்டர் தனிப்பயனாக்கங்கள் மற்றும் நீட்சிகளுடன் உங்கள் மேம்பாட்டு பணியை மேம்படுத்த முடியும்
+1. [vscode.dev](https://vscode.dev)ல் போவதற்கு
+2. வரவேற்பு திரையில் "Open Remote Repository" பொத்தானை காணவும் கிளிக் செய்யவும்
 
-***
+   ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.ta.png)
 
-## முன் தேவைகள்
+3. எந்த GitHub சேமிப்பக URLயை வேண்டுமானாலும் ஒட்டவும் (உதாரணம்: `https://github.com/microsoft/Web-Dev-For-Beginners`)
+4. Enter அழுத்தி மாயத்தை பாருங்கள்!
 
-தொடங்க, **ஒரு இலவச [GitHub](https://github.com) கணக்கிற்கு பதிவு செய்யுங்கள்**, இது உங்களுக்கு கோட் ரெப்போசிடரிகளை நிர்வகிக்கவும், உலகளாவிய அளவில் ஒத்துழைக்கவும் உதவும். உங்களிடம் கணக்கு இல்லையெனில், [இங்கே உருவாக்கவும்](https://github.com/).
+**திறமையான குறிப்பு - கட்டளை பட்டி சுருக்கம்:**
 
-***
+ஒரு குறியீட்டு குருவாக உணர விரும்புகிறீர்களா? இக் கீபோர்டு சுருக்கத்தை முயற்சி: Ctrl+Shift+P (அல்லது Macஇல் Cmd+Shift+P) கட்டளை பட்டி திறக்கும்:
 
-## ஏன் ஒரு வலை அடிப்படையிலான கோட் எடிட்டரை பயன்படுத்த வேண்டும்?
+![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.ta.png)
 
-**கோட் எடிட்டர்** போன்ற VSCode.dev உங்கள் கோடுகளை எழுத, திருத்த மற்றும் நிர்வகிக்க ஒரு கட்டளைக் களமாக செயல்படுகிறது. எளிய இடைமுகம், ஏராளமான அம்சங்கள் மற்றும் உலாவி மூலம் உடனடி அணுகல் ஆகியவற்றுடன், நீங்கள்:
+**கட்டளை பட்டி உங்கள் எல்லா செயல்களுக்கும் தேடுபொறி போல:**
+- "open remote" என நுழைக்கும் போது தொடர்புடைய சேமிப்பகம் திறப்பு காட்டும்
+- சமீபத்தில் திறந்த சேமிப்பகங்களை நினைவில் வைக்கின்றது (மிக உதவிகரமாக உள்ளது!)
+- பயன்படுத்த பழகினால் இறைவேம்போல் குறியீடு எழுதும் உணர்வு
+- இது VSCode.dev இன் "ஹே Siri, குறியீட்டிற்கு" பதிப்பு
 
-- எந்த சாதனத்திலும் திட்டங்களைத் திருத்தலாம்
-- நிறுவல் சிக்கல்களை தவிர்க்கலாம்
-- உடனடியாக ஒத்துழைத்து பங்களிக்கலாம்
+### முறை 2: URL மாற்றுவது
 
-VSCode.dev-ஐ நீங்கள் நன்கு கையாளத் தெரிந்த பிறகு, எங்கிருந்தும், எப்போது வேண்டுமானாலும் கோடிங் பணிகளைச் செய்ய தயாராக இருப்பீர்கள்.
+HTTP மற்றும் HTTPS protocol மாறுவது போல், VSCode.dev URL வடிவம் GitHub முகவரியை பிரதிபலிக்கும். எந்த GitHub சேமிப்பகம் URLயும் VSCode.dev இல் நேரடியாக திறக்க மாற்ற முடியும்.
 
-***
+**URL மாற்ற மாதிரி:**
 
-## VSCode.dev-ஐ தொடங்குவது எப்படி
+| சேமிப்பக வகை | GitHub URL | VSCode.dev URL |
+|----------------|---------------------|----------------|
+| **பொது சேமிப்பகம்** | `github.com/microsoft/Web-Dev-For-Beginners` | `vscode.dev/github/microsoft/Web-Dev-For-Beginners` |
+| **தனிப்பட்ட திட்டம்** | `github.com/your-username/my-project` | `vscode.dev/github/your-username/my-project` |
+| **எந்த தரவுக்கூடம்** | `github.com/their-username/awesome-repo` | `vscode.dev/github/their-username/awesome-repo` |
 
-**[VSCode.dev](https://vscode.dev)**-க்கு செல்லுங்கள்—நிறுவல் தேவையில்லை, பதிவிறக்கம் தேவையில்லை. GitHub-இல் உள்நுழைவது முழு அணுகலை திறக்கிறது, அதில் உங்கள் அமைப்புகள், நீட்சிகள் மற்றும் ரெப்போசிடரிகளை ஒத்திசைக்கவும் அடங்கும். கேட்கப்பட்டால், உங்கள் GitHub கணக்கை இணைக்கவும்.
+**விளக்கம்:**
+- `github.com`  ஐ `vscode.dev/github` ஆக மாற்று
+- மற்ற URL பகுதிகள் மாற்றாதே
+- எந்த பொது சேமிப்பகத்திலும் வேலை செய்கிறது
+- உடனடி திருத்த பயன்பாடு தருகிறது
 
-ஏற்றப்பட்ட பிறகு, உங்கள் பணிமனை இவ்வாறு இருக்கும்:
+> 💡 **உயிர் மாற்றும் சலுகை**: உங்கள் விருப்பமான சேமிப்பகங்களின் VSCode.dev பதிப்புகளை புத்தகமாக்குங்கள். என் புத்தகங்களில் "என் போர்ட்ஃபோலியோ திருத்து" மற்றும் " ஆவண திருத்து" போன்றவை உள்ளன, நேரடியாக திருத்துகளுக்கு போக!
 
-![Default VSCode.dev](../images/default-vscode-dev மூன்று முக்கிய பகுதிகளைக் கொண்டுள்ளது இடமிருந்து வலமாக:
-- **செயல்பாட்டு பட்டை:** 🔎 (தேடல்), ⚙️ (அமைப்புகள்), கோப்புகள், மூலக் கட்டுப்பாடு போன்ற ஐகான்கள்.
-- **சைட்பார்:** செயல்பாட்டு பட்டை ஐகான் தேர்ந்தெடுக்கப்பட்டதன் அடிப்படையில் சூழலை மாற்றுகிறது (இயல்பாக *Explorer* ஆக இருக்கும்).
-- **எடிட்டர்/கோட் பகுதி:** வலது பக்கம் மிகப்பெரிய பகுதி—இங்கு நீங்கள் கோடுகளை திருத்தவும் காணவும் முடியும்.
+**எந்த முறையை பயன்படுத்தலாம்?**
+- **இடைமுகம் வழி**: நீங்கள் ஆராய்வதற்கோ அல்லது சரியான சேமிப்பக பெயர்கள் நினைவில்லாதபோது சிறந்தது
+- **URL பாவனை**: எங்கே செல்லவென்று தெரிந்துவிட்டால் வேகமாக அனுக
 
-அம்சங்களை ஆராய ஐகான்களை கிளிக் செய்யவும், ஆனால் உங்கள் இடத்தைத் திரும்பப் பெற _Explorer_க்கு திரும்பவும்.
+### 🎯 கல்வி சோதனை: மேகம் அடிப்படையிலான அணுகல்
 
-***
+**சிந்தனை இடுங்கவும்**: நீங்கள் இணைய உலாவியில் குறியீட்டு சேமிப்பகங்களை திறக்கும் இரண்டு முறைகளை கற்றுக்கொண்டீர்கள். இது வளர்ச்சியில் இயல்பான மாற்றம்.
 
-## GitHub ரெப்போசிடரியை திறக்க
+**விரைவான சரிபார்ப்பு:**
+- இணைய அடிப்படை திருத்தம் "வளர்ச்சி சூழல் அமைப்பு" தேவையை எவ்வாறு அகற்றுகிறது?
+- URL மாற்ற முறை உள்ளூர் git க்ளோனுக்கு காட்டிலும் என்ன நன்மையை வழங்குகிறது?
+- இந்த அணுகல் திறந்த மூல திட்டங்களில் பங்களிப்பை எப்படி மாற்றும்?
 
-### முறை 1: எடிட்டரிலிருந்து
+**உண்மை உலக இணைப்பு**: GitHub, GitLab, Replit போன்ற நிறுவனங்கள் இந்த மேகம் முதன்மையிலான கொள்கைகளில் தங்கள் வளர்ச்சி தளங்களை கட்டியுள்ளன. இவை தொழில்முறை வளர்ச்சி அணிகளின் வேலைப்பாடுகளை நீங்கள் கற்று வருகிறீர்கள்.
 
-1. [VSCode.dev](https://vscode.dev)க்கு செல்லவும். **"Open Remote Repository"** என்பதை கிளிக் செய்யவும்.
+**சவால் கேள்வி**: மேகம் அடித்த வளர்ச்சி பள்ளிகளில் குறியீடு கற்றலை எப்படி மாற்றலாம்? சாதன தேவைகள், மென்பொருள் மேலாண்மை மற்றும் ஒத்துழைப்பு வாய்ப்புகளை கவனியுங்கள்.
 
-   ![Open remote repository](../../../../8-code-editor/images/open-remote-repository _Command Palette_ (Ctrl-Shift-P, அல்லது Mac-ல் Cmd-Shift-P) பயன்படுத்தவும்.
+## கோப்புகள் மற்றும் திட்டங்களுடன் பணியாற்றுதல்
 
-   ![Palette Menu](../images/palette-menu.pngopen remote repository.”
-   - விருப்பத்தைத் தேர்ந்தெடுக்கவும்.
-   - உங்கள் GitHub ரெப்போ URL ஐ (எ.கா., `https://github.com/microsoft/Web-Dev-For-Beginners`) ஒட்டவும் மற்றும் Enter அழுத்தவும்.
+சேமிப்பகம் திறந்துவிட்டதுபோல், ஆரம்பிக்கலாம்! VSCode.dev உங்களுக்கு தேவையான அனைத்தையும் கொடுக்கிறது – குறியீட்டு கோப்புகளை உருவாக்க, திருத்த, ஒழுங்குபடுத்து. உங்கள் டிஜிட்டல் கனவு தொழிற்சாலையாக இது இருக்கிறது – தேவையான கருவிகள் எல்லாம் அருகில் இருக்கும்.
 
-வெற்றிகரமாக இருந்தால், முழு திட்டமும் ஏற்றப்பட்டு திருத்தத்திற்குத் தயாராக இருக்கும்!
+வாராந்திர பணிகளின் அடிப்படையான வேலைகளுக்கு ஆகையா நுழைக.
 
-***
+### புதிய கோப்புகளை உருவாக்குதல்
 
-### முறை 2: URL மூலம் உடனடியாக
+வடிவமைப்பாளரின் அலுவலகத்தில் வரைபடங்கள் கட்டமைப்பது போல, VSCode.dev இல் கோப்புகளை உருவாக்க கூர்மையான முறையில் நடந்து கொள்ளிறது. அனைத்து வழக்கமான வலை வளர்ச்சி கோப்புச் சுருக்கங்களையும் இது ஆதரிக்கிறது.
 
-எந்த GitHub ரெப்போ URL-யையும் `github.com` ஐ `vscode.dev/github` ஆக மாற்றி நேரடியாக VSCode.dev-ல் திறக்கவும்.  
-எ.கா.:
+**கோப்பு உருவாக்கம் பணிகள்:**
 
-- GitHub: `https://github.com/microsoft/Web-Dev-For-Beginners`
-- VSCode.dev: `https://vscode.dev/github/microsoft/Web-Dev-For-Beginners`
+1. Explorer பக்கவட்டத்தில் இலக்கு கோப்புறைக்கு செல்லவும்
+2. கோப்புறையின் பெயருக்குத் தெறிக்கும் போது “புதிய கோப்பு” ஐகானை காணவும் (📄+)
+3. கோப்பின் பெயர் மற்றும் சரியான நீட்சியை உள்ளீடு செய்க (`style.css`, `script.js`, `index.html`)
+4. Enter அழுத்தி கோப்பை உருவாக்கவும்
 
-இந்த அம்சம் எந்த திட்டத்திற்கும் விரைவான அணுகலை அதிகரிக்கிறது.
+![Creating a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb.ta.png)
 
-***
+**பெயரிடல் நடைமுறைகள்:**
+- கோப்பின் குறிக்கோளை வெளிப்படுத்தும் விளக்கமான பெயர்கள் வையுங்கள்
+- சரியான பாங்கு வண்ண மயக்கும் நீட்சிகள் அடங்கும்
+- முழு திட்டம் முழுவதும் ஒருங்கிணைந்த பெயரிடல்
+- இடைவெளி பதிலாக சிறிய எழுத்துக்கள் மற்றும் - பாவனை
 
-## உங்கள் திட்டத்தில் கோப்புகளை திருத்துவது
+### கோப்புகளை திருத்தி சேமிக்கும்
 
-உங்கள் ரெப்போ திறந்தவுடன், நீங்கள் செய்யக்கூடியவை:
+இங்கே உண்மையான பொழுது தொடங்குகிறது! VSCode.dev தொகுப்பாளர் உதவிகளுடன் நுட்பமான மற்றும் நிவாரணமிக்க நிரலாக்க அனுபவத்தை வழங்குகிறது. இது உங்கள் குறியீட்டு உதவியாளராகிய ஒரு போல.
 
-### 1. **புதிய கோப்பை உருவாக்கவும்**
-- *Explorer* சைட்பாரில், உங்கள் விருப்பமான கோப்புறையிலோ அல்லது மூலத்தில் சென்று செல்லவும்.
-- _‘New file ...’_ ஐகானை கிளிக் செய்யவும்.
-- உங்கள் கோப்பிற்கு பெயர் கொடுத்து, **Enter** அழுத்தவும், உடனடியாக உங்கள் கோப்பு தோன்றும்.
+**திருத்த செய்யும் செயற்பாடு:**
 
-![Create a new file](../images/create-new-file 2. **கோப்புகளை திருத்தவும் மற்றும் சேமிக்கவும்**
+1. Explorer இல் எந்த கோப்பும் கிளிக் செய்து முக்கிய பகுதியில் திற
+2. எழுத ஆரம்பித்து நீ விசுப்படம், பரிந்துரைகள் மற்றும் பிழை கண்டறிதல் அனுபவிக்க
+3. Ctrl+S (Windows/Linux) அல்லது Cmd+S (Mac) மூலம் ஏற்றவும் – தானாக சேமிப்பும் உள்ளது!
 
-- *Explorer*ல் ஒரு கோப்பை கிளிக் செய்து, அதை கோட் பகுதியில் திறக்கவும்.
-- தேவையான மாற்றங்களைச் செய்யவும்.
-- VSCode.dev உங்கள் மாற்றங்களை தானாகவே சேமிக்கிறது, ஆனால் நீங்கள் Ctrl+S அழுத்தி கையேடு முறையில் சேமிக்கலாம்.
+![Editing files in VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.ta.png)
 
-![Edit a file](../images/edit-a-file.png. **மாற்றங்களை கண்காணித்து, கமிட் செய்யவும்**
+**நீ குறியீடு எழுதும் போது நடக்கும் அற்புதங்கள்:**
+- குறியீடு அழகான நிறம் கொண்டது, வாசிக்க எளிது
+- VSCode.dev எழுதும் போது முடிப்புகளை பரிந்துரைக்கும் (ஆட்டோ கரெக்ட் போல், ஆனால் நுண்ணறிவு)
+- நீங்கள் சேமிக்க பொதவாக பிழைகள் மற்றும் துண்டுகளைக் கண்டறியும்
+- பல கோப்புகளை உலாவித் தாவல்களில் திறந்து வைக்க முடியும்
+- எல்லாம் பின்னணியில் தானாக சேமிக்கப்படுகிறது
 
-VSCode.dev இல் **Git** பதிப்பு கட்டுப்பாடு ஒருங்கிணைக்கப்பட்டுள்ளது!
+> ⚠️ **விரைவான குறிப்பு**: தானாக சேமிப்பும் இருந்தாலும் Ctrl+S அல்லது Cmd+S அழுத்துவது நல்ல பழக்கம். அது உடனடி சேமிப்பையும் பிழை சரிபார்ப்பையும் செயல்படுத்துகிறது.
 
-- _'Source Control'_ ஐகானை கிளிக் செய்து செய்த மாற்றங்களைப் பார்வையிடவும்.
-- `Changes` கோப்புறையில் உள்ள கோப்புகள் சேர்க்கைகள் (பச்சை) மற்றும் நீக்கங்கள் (சிவப்பு) ஆகியவற்றைக் காட்டும்.  
-  ![View changes](../images/working-tree.png கோப்புகளின் அருகில் உள்ள `+` ஐ கிளிக் செய்து கமிட் செய்ய தயாராக மாற்றங்களைச் சேர்க்கவும்.
-- தேவையற்ற மாற்றங்களை undo ஐகானை கிளிக் செய்து **நிராகரிக்கவும்**.
-- தெளிவான கமிட் செய்தியை உள்ளீடு செய்து, பின்பு கமிட் மற்றும் புஷ் செய்ய டிக் மார்க் ஐ கிளிக் செய்யவும்.
+### Git உடன் பதிப்பு கட்டுப்பாடு
 
-GitHub இல் உங்கள் ரெப்போசிடரிக்கு திரும்ப, மேல் இடது மூலையில் உள்ள ஹாம்பர்கர் மெனுவைத் தேர்ந்தெடுக்கவும்.
+பண்டைய பிஷாப்புகள் ஆய்வு பரப்புகளின் விவரக் குறிப்புகளை உருவாக்கியபோல், Git உங்கள் குறியீடு மாற்றங்களை காலமாக கண்காணிக்க உதவுகிறது. இது திட்ட வரலாற்றை பாதுகாக்கும் மற்றும் தேவையான போது முன் பதிப்புகளுக்கு திரும்ப உதவும். VSCode.dev ஒருங்கிணைக்கப்பட்ட Git அம்சத்துடன் வருகிறது.
 
-![Stage & commit changes](../images/edit-vscode.dev நீட்சிகளுடன் மேம்படுத்தவும்
+**Source Control இடைமுகம்:**
 
-நீட்சிகள் VSCode.dev-க்கு மொழிகள், தீம்கள், டிபக்கர்கள் மற்றும் உற்பத்தி கருவிகளைச் சேர்க்க அனுமதிக்கின்றன—உங்கள் கோடிங் வாழ்க்கையை எளிதாக்கவும், மகிழ்ச்சியாக்கவும்.
+1. செயற்பாட்டு பட்டையில் உள்ள 🌿 ஐக்கானை கிளிக்கவும்
+2. மாற்றிய கோப்புகள் "Changes" பகுதியில் காணப்படும்
+3. நிறம் மூலம் மாற்றவகைகள் குறிக்கப்படும்: பசுமை சேர்க்கைகள், சிவப்பு அகற்றல்கள்
+
+![Viewing changes in Source Control](../../../../translated_images/working-tree.c58eec08e6335c79.ta.png)
+
+**உங்கள் பணியை சேமிக்கும் (commit பணிகளின் வேலைநெறி):**
+
+```mermaid
+flowchart TD
+    A[கோப்புகளில் மாற்றங்கள் செய்யவும்] --> B[மூலக் கட்டுப்பாட்டில் மாற்றங்களை பார்க்கவும்]
+    B --> C[+ கிளிக் செய்து மாற்றங்களை மேடையில் வைக்கவும்]
+    C --> D[விவரமான சமர்ப்பிப்பு செய்தியை எழுதவும்]
+    D --> E[சமர்ப்பிக்க✔க் கிளிக் செய்யவும்]
+    E --> F[மாற்றங்கள் GitHubக்கு தள்ளப்பட்டது]
+```
+```mermaid
+stateDiagram-v2
+    [*] --> Modified: கோப்புகளை தொகுக்கவும்
+    Modified --> Staged: நிலைக்கு + கிளிக் செய்யவும்
+    Staged --> Modified: நிலை குறைக்க - கிளிக் செய்யவும்
+    Staged --> Committed: செய்தியைச் சேர்த்து உறுதி செய்க
+    Committed --> [*]: GitHub-க்கு ஒத்திசைவு செய்யவும்
+    
+    state Committed {
+        [*] --> LocalCommit
+        LocalCommit --> RemotePush: தானாக ஒத்திசைவு
+    }
+```
+**உங்கள் படி படியாக செயல்முறை:**
+- நீங்கள் சேமிக்க வேண்டிய கோப்புகளின் பக்கத்துள்ள "+" ஐக்கானை கிளிக் செய்க (இது "நிலைக்கு கொண்டுவருதல்" ஆகும்)
+- நீங்கள் அனைத்து சேமிப்புக்கான மாற்றங்களையும் சரிபார்த்து மகிழ்ச்சியாயிருக்கிறீர்கள் என்பதை இருமுறை சரிபார்க்கவும்
+- நீங்கள் என்ன செய்தீர்கள் என்று விளக்க ஒரு குறுகிய குறிப்பு எழுதுங்கள் (இது உங்கள் "கமிட் மெசேஜ்")
+- அனைத்தையும் GitHub-க்கு சேமிக்க சரிபார்க்கும் பட்டனை கிளிக் செய்யவும்
+- நீங்கள் ஏதாவது கருத்தை மாற்றினால், இடைநீக்கம் ஐகான் மாற்றங்களை நிராகரிக்க உதவும்
+
+**சிறந்த கமிட் மெசேஜ்களை எழுதுவது (இது நீங்கள் நினைக்கும் அளவிற்கு கடினமல்ல!):**
+- நீங்கள் என்ன செய்தீர்கள் என்பதை மட்டும் விவரிக்கவும், உதாரணமாக "Add contact form" அல்லது "Fix broken navigation"
+- குறுகியதும் இனிமையானதும் ஆக்கவும் – ஒரு ட்வீட் அளவு, ஒரு கட்டுரை போல அல்ல
+- "Add", "Fix", "Update", அல்லது "Remove" போன்ற செயல்பாட்டு சொல்ல்களால் தொடங்கவும்
+- **நல்ல உதாரணங்கள்**: "Add responsive navigation menu", "Fix mobile layout issues", "Update colors for better accessibility"
+
+> 💡 **விரைவான வழிசெலுத்தும் குறிப்பு**: உங்கள் GitHub சேமிப்பு வீட்டுக்கு திரும்பவும் உங்கள் கணினி சூழல் மற்றும் திட்ட இடத்தை இணைக்கும் வழி போல உள்ள ☐ ஹாம்பர்கர் மெனு (☰) மேலே இடது பக்கத்தில் உள்ளது!
+
+## நீட்டிப்புகளுடன் செயல்பாட்டை மேம்படுத்தல்
+
+ஓர் கைவினையாளர் பணியகம் பல்வேறு பணிகளுக்கான சிறப்பு கருவிகள் கொண்டதுபோல், VSCode.dev ஐ குறிப்பிட்ட திறன்களைச் சேர்க்கும் நீட்டிப்புகளுடன் தனிப்பயனாக்க முடியும். இந்த சமூகவளேற்றப்பட்ட பிளகின்கள் பொதுவான வளர்ச்சி தேவைகளை, உதாரணமாக கோட் வடிவமைப்பு, நேரடி முன்னிலைப்படுத்தல் மற்றும் மேம்பட்ட Git ஒருங்கிணைப்பை தீர்க்கின்றன.
+
+நீட்டிப்பு சந்தை உலகெங்கும் உள்ள டெவலப்பர்களால் உருவாக்கப்பட்ட ஆயிரக்கணக்கான இலவச கருவிகளை தாங்குகிறது. ஒவ்வொரு நீட்டிப்பும் குறிப்பிட்ட வேலைப்பாட்டு சவால்களை தீர்க்கும், உங்களுக்கு தனிப்பயனாக்கப்பட்ட வளர்ச்சி சூழலை கட்டமைப்பதற்கு உதவுகிறது.
+
+```mermaid
+mindmap
+  root((விரிவாக்க சூழல்))
+    அவசியமான வகைகள்
+      உற்பத்தித்தன்மை
+        Live Server
+        Auto Rename Tag
+        Bracket Pair Colorizer
+        GitLens
+      குறியீடு தரம்
+        Prettier
+        ESLint
+        Spell Checker
+        Error Lens
+      மொழி ஆதரவு
+        HTML CSS Support
+        JavaScript ES6
+        Python Extension
+        Markdown Preview
+      தீம்கள் & UI
+        Dark+ Modern
+        Material Icon Theme
+        Peacock
+        Rainbow Brackets
+    கண்டுபிடிப்பு முறைகள்
+      பிரபலமான தரவரிசைகள்
+        Download Counts
+        User Ratings
+        Recent Updates
+        Community Reviews
+      பரிந்துரைகள்
+        Workspace Suggestions
+        Language-based
+        Workflow-specific
+        Team Standards
+```
+### உங்கள் சிறந்த நீட்டிப்புகளை கண்டறிதல்
+
+நீட்டிப்பு சந்தை முற்போக்காக ஒழுங்குபடுத்தப்பட்டுள்ளதால், நீங்கள் தேவைப்படும் ஒன்றை தேடியீர்கள் என்றால் தவறாமல் அது எளிதாகக் காணலாம். இது குறிப்பிட்ட கருவிகள் மற்றும் நீங்கள் அறிந்திருக்க கூடாத குளிர்ந்த சின்னங்களை கண்டுபிடிக்க உதவுகிறது!
+
+**சந்தைக்கு செல்லும் வழி:**
+
+1. செயல்பாட்டு பட்டியில் உள்ள நீட்டிப்பு ஐகானை (🧩) கிளிக் செய்யவும்
+2. சுற்றி பார்க்கவும் அல்லது ஏதாவது சிறப்பான ஒன்றை தேடவும்
+3. ஆர்வமான ஒன்றை தேர்ந்தெடுக்கவும் அதன் விவரங்களை அறிய
+
+![Extension marketplace interface](../../../../translated_images/extensions.eca0e0c7f59a10b5.ta.png)
+
+**அங்கு நீங்கள் காணப்போகும் விஷயங்கள்:**
+
+| பகுதி | உள்ளடக்கம் | உதவிகரமானவை |
+|----------|---------|----------|
+| **நிறுவப்பட்டவை** | நீங்கள் ஏற்கனவே சேர்த்த நீட்டிப்புகள் | உங்கள் தனிப்பட்ட குறியீட்டு கருவி |
+| **பிரபலமானவை** | பொதுமக்களின் விருப்பங்கள் | பெரும்பாலும் டெவலப்பர்கள் நம்பும் |
+| **பரிந்துரைக்கபட்டவை** | உங்கள் திட்டத்துக்கு புத்திசாலி பரிந்துரைகள் | VSCode.dev வழங்கும் உதவிகள் |
+
+**உலகளவில் எளிதாக்கம்:**
+- ஒவ்வொரு நீட்டிப்பும் மதிப்பீடுகள், பதிவிறக்கம் எண்ணிக்கை, மற்றும் யாவற்றின் பயனர் விமர்சனங்களை காட்டும்
+- ஒவ்வொருவருக்கும் படங்கள் மற்றும் தெளிவான விளக்கங்கள் கிடைக்கும்
+- எல்லாம் பொருந்தக்கூடிய தகவல்களுடன் தெளிவாக குறிக்கப்பட்டுள்ளது
+- ஒத்த நீட்டிப்புகள் பரிந்துரைக்கப்படுகின்றன, நீங்கள் விருப்பங்களை ஒப்பிடலாம்
+
+### நீட்டிப்புகளை நிறுவுதல் (இது மிக எளிமையானது!)
+
+உங்கள் தொகுப்பாளருக்கு புதிய திறன்களைச் சேர்ப்பது ஒரு பொத்தானை அழுத்துவதுதான். நீட்டிப்புகள் சில விநாடிகளில் நிறுவப்பட்டு உடனே செயல்பட்டு தொடங்குகின்றன – மீண்டும் துவக்கமோ காத்திருக்குமோ தேவையில்லை.
+
+**செய்ய வேண்டியது:**
+
+1. நீங்கள் விரும்பும் ஒன்றைத் தேடுங்கள் ("live server" அல்லது "prettier" என தேட முயற்சிக்கவும்)
+2. ஆர்வமாக தோன்றும் ஒன்றை தேர்ந்தெடுத்து மேல் விவரங்களைப் பார்வையிடவும்
+3. அது என்ன செய்கிறது என வாசித்து மதிப்பீடுகளை பார்வையிடவும்
+4. நீலம் நிற "Install" பொத்தானை அழுத்தி முடித்துவிடவும்!
+
+![Installing extensions](../../../../8-code-editor/images/install-extension.gif)
+
+**பின்னணியில் நடக்கும் நிகழ்வுகள்:**
+- நீட்டிப்பு தானாகத் தரவிறக்கப்பட்டு அமைக்கப்படுகிறது
+- புதிய அம்சங்கள் உடனே உங்கள் முகப்பில் தோன்றும்
+- உடனான செயல்பாட்டுடன் (மிக வேகமானது!)
+- நீங்கள் உள்நுழைந்திருந்தால், நீட்டிப்பு அனைத்து சாதனங்களுடனும் ஒத்திசைவு செய்யும்
+
+**நான் பரிந்துரைக்கும் சில நீட்டிப்புகள்:**
+- **Live Server**: நீங்கள் கோடீடு செய்யும் போது உங்கள் தளம் நேரத்தில் புதுப்பிக்கிறது (இது ஜாதுக்களத்துக்குரியது!)
+- **Prettier**: உங்கள் குறியீட்டை தானாக சுத்தமாக மற்றும் தொழில்முறை தோற்றமாக மாற்றுகிறது
+- **Auto Rename Tag**: ஒரு HTML குறியீட்டை மாற்றினால் அதன் இணைப்பு தானாக மாற்றம் பெறும்
+- **Bracket Pair Colorizer**: உங்கள் முடிச்சுகளுக்கு வண்ணம் பார்க்க வசதியாக்கிறது
+- **GitLens**: உங்களுக்கு பிரத்யேகமான பல உதவி தகவல்களுடன் Git இயல்புகளை மேம்படுத்துகிறது
+
+### உங்கள் நீட்டிப்புகளை தனிப்பயனாக்குதல்
+
+பல நீட்டிப்புகள் நீங்கள் விரும்பும் முறையில் செயல்பட அமைப்புகளை கொண்டுள்ளன. இது கார் இருக்கை மற்றும் கண்ணாடிகளை சரிசெய்யும் சிந்தனையைப் போல் – ஒவ்வொருவருக்கும் தனிப்பட்ட விருப்பங்கள் உள்ளன!
+
+**நீட்டிப்பு அமைப்புகளை மாற்றுக:**
+
+1. நீட்டிப்புகள் போர்ட்டலில் உங்கள் நிறுவப்பட்ட நீட்டிப்பை கண்டுபிடிக்கவும்
+2. அதன் பெயருக்கு அருகில் உள்ள சிறிய குழாய் ஐகானை (⚙️) தேடவும் மற்றும் கிளிக் செய்யவும்
+3. "Extension Settings" ஐத் தேர்ந்தெடுக்கவும்
+4. உங்கள் வேலைப்பாட்டுக்கு பொருந்தும் வரை மாற்றங்கள் செய்யவும்
+
+![Customizing extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78.ta.png)
+
+**மாதிரியான அமைப்புகள்:**
+- உங்கள் குறியீடு எப்படி வடிவமைக்கப்படுகிறது (Tabs vs Spaces, வரி நீளம், மற்றும் போன்றவை)
+- பட்டன்களை ஒருங்கிணைக்கும் விசைப் பண்புகள்
+- நீட்டிப்பு எந்த கோப்புகள் வகைகளுடன் வேலை செய்ய வேண்டும்
+- சுத்தமாக வைத்திருக்க சிறப்பு அம்சங்களை இயக்கல் அல்லது முடக்கு
+
+### நீட்டிப்புகளை ஒழுங்குபடுத்தல்
+
+மிகவும் குளிர்ந்த நீட்டிப்புகளை கண்டுபிடித்து, உங்கள் தொகுப்பை சீரான நிலையில் வைத்திருக்க விரும்புவீர்கள். VSCode.dev இதை மிக எளிதாக்கியுள்ளது.
+
+**நீட்டிப்பு மேலாண்மை விருப்பங்கள்:**
+
+| நீங்கள் செய்யக்கூடியது | எப்போது உதவிகரமாக இருக்கும் | சிறந்த யுக்தி |
+|--------|---------|----------|
+| **மூடல்** | ஒரு நீட்டிப்பு சிக்கலை உண்டாக்குகிறதா என்று சோதிக்க | நீக்கம் செய்யாமல் வைக்க சிறந்தது |
+| **நீக்கம்** | தேவையில்லாத நீட்டிப்புகளை முற்றிலும் அகற்ற | உங்கள் சூழலை சுத்தமாகவும் வேகமாகவும் வைத்திருக்கும் |
+| **புதுப்பித்தல்** | சமீபத்திய அம்சங்கள் மற்றும் பிழை திருத்தங்களைப் பெற | பொதுவாக தானாக நடைபெறும், ஆனாலும் சரிபார்க்கவும் |
+
+**நான் நீட்டிப்புகளை நிர்வகிப்பது:**
+- சில மாதங்களுக்கு ஒரு முறை இன்ஸ்டால் செய்தவற்றை பரிசீலித்து பயன்படாததை அகற்றுகிறேன்
+- எல்லா நீட்டிப்புகளும் புதுப்பிக்கிறேன், புதிய அம்சங்கள் மற்றும் பாதுகாப்பு திருத்தங்கள் கிடைக்கும்
+- எதையாவது மெதுவானதாக இருந்தால், அந்த நீட்டிப்பை தற்காலிகமாக முடக்கி சோதிப்பேன்
+- பெரிய புதுப்பிப்புகளில் உள்ள மாற்றங்களையும் புதிய அம்சங்களையும் வாசிப்பேன்
+
+> ⚠️ **செயல்திறன் குறிப்பு**: நீட்டிப்புகள் அருமை, ஆனால் பல அதிகமாக இருந்தால் மெதுவாக்கலாம். உங்களுக்கு நேர்மையான உதவியளிப்பவைகளைக் கவனியுங்கள், பயனற்றவற்றை நீக்க இருந்து பயப்பட வேண்டாம்.
+
+### 🎯 கல்விப் பரிசீலனை: வளர்ச்சி சூழலின் தனிப்பயனாக்கல்
+
+**முப்பாடு புரிதல்**: சமூகவழியாக உருவாக்கப்பட்ட நீட்டிப்புகளைப் பயன்படுத்தி தொழில்முறை வளர்ச்சி சூழலை தனிப்பயனாக்க கற்றுக்கொண்டீர்கள். இது நிறுவன வளர்ச்சி குழுக்களும் பயன்படுத்தும் சீரமைப்பு கருவித்தளங்களைக் காட்டுகிறது.
+
+**முக்கிய கருத்துக்கள்:**
+- **நீட்டிப்பு கண்டுபிடிப்பு**: குறிப்பிட்ட வளர்ச்சி சவால்களை தீர்க்கும் கருவிகளை கண்டறிதல்
+- **சூழல் அமைப்பு**: தனிப்பட்ட அல்லது குழு விருப்பங்களுக்கு கருவிகளை ஏற்படுத்தல்
+- **செயல்திறன் மேம்பாடு**: செயல்பாடு மற்றும் அமைப்பு செயல்திறனை சமநிலைப்படுத்தல்
+- **சமூகவிழா கூட்டாண்மை**: உலகளாவிய டெவலப்பர் சமூகவால் உருவாக்கப்பட்ட கருவிகள்
+
+**தொழில் தொடர்பு**: நீட்டிப்பு சூழல்கள் VS Code, Chrome DevTools, மற்றும் நவீன IDEகளுக்கு முக்கியமான வளர்ச்சி தளங்கள். நீட்டிப்புகளை மதிப்பீடு செய்து நிறுவுவதும் அமைப்பதும் தொழில்முறை வளர்ச்சி பணிச்சூழல்களுக்கு அவசியம்.
+
+**பின்விளைவு கேள்வி**: 10 டெவலப்பர் குழுவிற்கு பொதுவான வளர்ச்சி சூழலை எப்படி அமைத்துக்கொள்ள விருப்பமாயிருக்கிறீர்கள்? ஒருங்கிணைப்பு, செயல்திறன் மற்றும் தனிப்பட்ட விருப்பங்களை கருத்தில் கொள்ளவும்.
+
+## 📈 உங்கள் மேகம் அடிப்படையுடைய வளர்ச்சி நிபுணத்துவ காலவரிசை
+
+```mermaid
+timeline
+    title தொழில்முனைவோன் மேக வளர்ச்சி பயணம்
+    
+    section தளம் அடிப்படைகள்
+        மேக வளர்ச்சி புரிதல்
+            : வலை அடிப்படையிலான தொகுப்பு கருத்துக்களை தலைமை நடத்தவும்
+            : GitHub ஒருங்கிணைப்பு முறைகளை இணைக்கவும்
+            : தொழில்முறை இடைமுகங்களை செயல்படுத்தவும்
+    
+    section பணிசெயல் தேர்ச்சி
+        கோப்பு & திட்ட மேலாண்மை
+            : ஒழுங்கமைக்கப்பட்ட திட்ட அமைப்புகளை உருவாக்கவும்
+            : குறிச்சொல் விளக்க நன்மைகளை ஆசியுங்கள்
+            : பன்முக கோப்பு தொகுப்பு பணிசெயல்களை கையாளவும்
+        
+        பதிப்பு கட்டுப்பாட்டு ஒருங்கிணைப்பு
+            : Git காட்சி முறைகளை புரிந்துகொள்ளவும்
+            : உருவாக்கிக் குறிப்பு நடைமுறைகள் பயிற்சி பெறவும்
+            : மாற்றம் கண்காணிப்பு பணிசெயல்களை தலைமை நடத்தவும்
+    
+    section சூழல் தனிப்பயன்
+        நீட்டிப்பு உயிரியல் முறைகள்
+            : பயன்முறையில் நீட்டிப்புகளை கண்டறியவும்
+            : வளர்ச்சி விருப்பங்களை அமைக்கவும்
+            : செயல்திறன் மற்றும் செயல்பாடு இடையிலான சமநிலையை மேம்படுத்தவும்
+        
+        தொழில்முறை அமைப்பு
+            : அதே நிலை பணிசெயல்களை உருவாக்கவும்
+            : மீண்டும் பயன்படுத்தக்கூடிய அமைப்புகளை உருவாக்கவும்
+            : குழு நடைமுறைகளை நிறுவவும்
+    
+    section தொழில் தயாரி
+        மேக முதன்மை வளர்ச்சி
+            : தொலைதூர வளர்ச்சி நடைமுறைகளை தலைமை நடத்தவும்
+            : கூட்டு பணிசெயல்கள் புரிந்து கொள்ளவும்
+            : தளமில்லா திறன்களை உருவாக்கவும்
+        
+        தொழில்முறை நடைமுறைகள்
+            : தொழில் தரநிலைகளை பின்பற்றவும்
+            : பராமரிக்கக்கூடிய பணிசெயல்களை உருவாக்கவும்
+            : குழு சூழலுக்கு தயார் ஆகவும்
+```
+**🎓 பட்டம் பெறும் அங்கம்**: தொழில்முறை டெவலப்பர்கள் பயன்படுத்தும் இதே கருவிகள் மற்றும் பணிச்சூழல்களைப் பயன்படுத்தி மேகவழி வளர்ச்சியில் நீங்கள் சாதனை சூட்டியுள்ளீர்கள். இவை மென்பொருள் வளர்ச்சியின் எதிர்காலத்தை அங்கீகரிக்கும்.
+
+**🔄 அடுத்த நிலை திறன்கள்**:
+- மேம்பட்ட மேகவழி வளர்ச்சி தளங்களை (Codespaces, GitPod) ஆராய தயாராக இருக்கிறீர்கள்
+- பரவலாகப் பகிரப்பட்ட வளர்ச்சி குழுக்களில் பணியாற்ற தயாராக இருக்கிறீர்கள்
+- உலகளாவிய திறந்த மூல திட்டங்களுக்கு பங்களிக்கத் தயாராக இருக்கிறீர்கள்
+- நவீன DevOps மற்றும் தொடர்ச்சியான ஒருங்கிணைவு நடைமுறைகளுக்கு அடித்தளத்தை வைத்துள்ளீர்கள்
+
+## GitHub Copilot முகவர் சவாலை 🚀
+
+NASA விண்வெளி அதிரட்டுகளை நிர்வகிப்பது போல அமைந்த முறையில், இந்த சவால் VSCode.dev திறன்களை முழுமையான பணிச்சூழலில் தொழில்திறன் காட்டுகிறது.
+
+**நோக்கம்:** VSCode.dev-ஐ திறமையாக பயன்படுத்தி முழுமையான இணைய வளர்ச்சி பணிச்சூழலை நிறுவுதல்.
+
+**திட்ட தேவைகள்:** முகவர் முறையைக் கொண்டு பின்வரும் பணிகளை செய்து முடிக்கவும்:
+1. ஒருவழி இருக்கும் சேமிப்பிடத்தை கிளோன்செய் அல்லது புதியதாய்ச் சீரமைக்கவும்
+2. HTML, CSS மற்றும் JavaScript கோப்புகளுடன் செயல்படும் திட்ட கட்டமைப்பை நிறுவவும்
+3. வளர்ச்சியை மேம்படுத்தும் மூன்று நீட்டிப்புகளை நிறுவி அமைக்கவும்
+4. விளக்கமான கமிட் செய்திகளுடன் பதிப்பு கட்டுப்பாட்டை பயிற்சி செய்யவும்
+5. அம்ச கிளைகளையும் உருவாக்கி மாற்றங்களை செய்யவும்
+6. README.md கோப்பில் செயல்முறை மற்றும் கற்றல்கள் எழுதவும்
+
+இந்த பயிற்சி VSCode.dev கருத்துக்களை ஓர் நடைமுறை பணிச்சூழலில் ஒருங்கிணைக்கிறது.
+
+மேலும் அறிய [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
+
+## பணிகளுக்கான தவணை
+
+இந்த திறன்களை உண்மையான சூழலில் தேர்ச்சி பெறும் விதமாக பயன்படுத்துங்கள்! நான் ஒரு வேலை திட்டம் கொண்டுள்ளேன், அது நீங்கள் கற்ற உங்கள் அனைத்தையும் நடைமுறையில் செய்ய உதவும்: [VSCode.dev பயன்படுத்தி ஒரு தொழில்முறை ਰெஸ்யூம் இணையதளம் உருவாக்கவும்](./assignment.md)
+
+இந்த பணியில் உங்கள் உலாவியில் முழுமையாக தொழில்முறை ரெஸ்யூம் இணையதளத்தை உருவாக்க படி நடக்கும். நீங்கள் அனைத்து VSCode.dev அம்சங்களையும் பயன்படுத்தப் போகிறீர்கள், இறுதியில் அழகானதான மற்றும் நம்பகமான இணையதளம் பெறுவீர்கள்.
+
+## தொடர்ந்தும் ஆராய்ந்து உங்கள் திறன்களை வளர்த்துக்கொள்ளுங்கள்
+
+நீங்கள் ஒரு வலுவான அடித்தளத்தை பெற்றுள்ளீர்கள், ஆனால் இன்னும் குளிர்ந்தவை நிறைய இருக்கின்றன! உங்கள் VSCode.dev திறன்களை அடுத்த கட்டத்திற்கு கொண்டு செல்ல சில வளங்களும் யோசனைகளும்:
+
+**அதிகாரம் பெற்ற ஆவணங்கள்:**
+- [VSCode வலை ஆவணங்கள்](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) – உலாவியில் அடிப்படையிலான திருத்தத்துக்கு முழு கையேடு
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) – மேகத்தில் கூடுதலான சக்தி தேவையானபோது
+
+**பின்பு முயற்சிக்க சிறந்த அம்சங்கள்:**
+- **விசைக்குறிப்புகள்**: குறியீடு நிஞ்ஜாவாக உணர்த்தும் முக்கிய திறமைகள்
+- **வேலைப்பாசறை அமைப்புகள்**: வெவ்வேறு வகை திட்டங்களுக்கு வேறுபட்ட சூழல்கள் அமைப்பது
+- **பல ரூட் வேலைப்பாசறைகள்**: ஒரே நேரத்தில் பல சேமிப்பிடங்களில் பணியாற்றுதல் (மிகவும் பயனுள்ளது!)
+- **டெர்மினல் ஒருங்கிணைப்பு**: உலாவியிலேயே கட்டளை வரிசை கருவிகள் அணுக
+
+**பயிற்சி யோசனைகள்:**
+- திறந்த மூல திட்டங்களில் பங்கேற்று VSCode.dev பயன்படுத்தி உதவுங்கள் – தரமான பங்களிப்பு!
+- வெவ்வேறு நீட்டிப்புகளை முயற்சி செய்து உங்கள் சிறந்த அமைப்பை கண்டறியவும்
+- நீங்கள் பெரும்பாலும் கட்டும் தளங்கள் மாதிரி திட்ட வார்ப்புருக்களை உருவாக்கவும்
+- கிளைவு மற்றும் இணைப்பு போன்ற Git பணிச்சூழல் முறைகளை பயிற்சி செய்யவும் – குழு திட்டங்களில் இது தங்கம் போலவும்
 
-### நீட்சிகளை உலாவுதல் மற்றும் நிர்வகித்தல்
-
-- செயல்பாட்டு பட்டையில் **Extensions icon** ஐ கிளிக் செய்யவும்.
-- _'Search Extensions in Marketplace'_ பெட்டியில் ஒரு நீட்சியைத் தேடவும்.
-
-  ![Extension details](../images/extension-details:
-  - **Installed**: நீங்கள் சேர்த்த அனைத்து நீட்சிகளும்
-  - **Popular**: தொழில்துறை பிரபலங்கள்
-  - **Recommended**: உங்கள் பணிமுறைக்கு ஏற்றவாறு பரிந்துரைக்கப்பட்டவை
-
-  ![View extensions](
-
-  
-
-***
-
-### 1. **நீட்சிகளை நிறுவவும்**
-
-- தேடலில் நீட்சியின் பெயரை உள்ளீடு செய்து, அதை கிளிக் செய்து, எடிட்டரில் விவரங்களைப் பார்வையிடவும்.
-- பக்கப்பட்டையிலோ அல்லது முக்கிய கோட் பகுதியில் **நீல Install பொத்தானை** அழுத்தவும்.
-
-  ![Install extensions](../images/install-extension 2. **நீட்சிகளை தனிப்பயனாக்கவும்**
-
-- உங்கள் நிறுவப்பட்ட நீட்சியைத் தேடவும்.
-- **Gear icon** ஐ கிளிக் செய்யவும் → _Extension Settings_ ஐத் தேர்ந்தெடுத்து உங்கள் விருப்பங்களுக்கு ஏற்ப அமைப்புகளைச் சரிசெய்யவும்.
-
-  ![Modify extension settings](../images/extension-settings 3. **நீட்சிகளை நிர்வகிக்கவும்**
-நீங்கள் செய்யக்கூடியவை:
-
-- **Disable:** ஒரு நீட்சியை தற்காலிகமாக முடக்கு, ஆனால் அதை நிறுவியவாறு வைத்திரு
-- **Uninstall:** தேவையில்லாதால் நிரந்தரமாக நீக்கு
-
-  நீட்சியைத் தேடவும், Gear ஐகானை அழுத்தி, ‘Disable’ அல்லது ‘Uninstall’ ஐத் தேர்ந்தெடுக்கவும், அல்லது கோட் பகுதியில் உள்ள நீல பொத்தான்களைப் பயன்படுத்தவும்.
-
-***
-
-## பணிக்குறிப்பு
-
-உங்கள் திறன்களை சோதிக்க: [vscode.dev பயன்படுத்தி ஒரு ரெஸ்யூமே வலைத்தளத்தை உருவாக்கவும்](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
-
-***
-
-## மேலும் ஆராய்ச்சி மற்றும் சுயபயிற்சி
+---
 
-- [அதிகாரப்பூர்வ VSCode Web Docs](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) மூலம் மேலும் ஆழமாக ஆராயவும்.
-- மேம்பட்ட பணிமனை அம்சங்கள், விசைப்பலகை குறுக்குவழிகள் மற்றும் அமைப்புகளை ஆராயவும்.
+**நீங்கள் உலாவி அடிப்படையிலான வளர்ச்சியில் தேர்ச்சி பெற்றுள்ளீர்கள்!** 🎉 போக்குவரத்து சாதனங்கள் கண்டுபிடிக்கப்பட்டதால் விஞ்ஞானிகள் தொலைவு இடங்களில் ஆய்வு செய்ததைப் போல, VSCode.dev இணைய இணைப்புடைய எந்த சாதனத்திலிருந்தும் தொழில்முறை குறியீட்டுத் திறனை வழங்குகிறது.
 
-***
+இந்த திறன்கள் தற்போதைய தொழில் நடைமுறைகளைக் காட்டுகின்றன – பல தொழில்முறை டெவலப்பர்கள் தந்திரக் கூடிய அணுகல் மற்றும் சுருக்கமான படைப்புத் திறனுக்காக மேகவழி வளர்ச்சி சூழல்களைப் பயன்படுத்துகின்றனர். நீங்கள் தனிப்பட்ட திட்டங்களிலிருந்து பெரிய குழு ஒத்துழைப்புக்கு வரைக்கும் பரப்பளவை கூடிய நடைமுறையை கற்றுக்கொண்டீர்கள்.
 
-**இப்போது நீங்கள் எங்கிருந்தும், எந்த சாதனத்திலும், VSCode.dev பயன்படுத்தி கோடிங் செய்ய, உருவாக்க, மற்றும் ஒத்துழைக்க தயாராக இருக்கிறீர்கள்!**
+அடுத்த வளர்ச்சி திட்டத்தில் இந்த நுட்பங்களைப் பயன்படுத்துங்கள்! 🚀
 
 ---
 
-**குறிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. எங்கள் நோக்கம் துல்லியமாக இருக்க வேண்டும் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது துல்லியமின்மைகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**நினைவூட்டல்**:  
+இந்த ஆவணம் AI மொழி மாற்று சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழி மாற்றப்பட்டுள்ளது. நாங்கள் துல்லியத்துக்காக முயற்சித்தாலும், தானாகவே செய்யப்பட்ட மொழி மாற்றங்களில் தவறுகள் அல்லது பிழைகள் ஏற்படலாம் என்பதை தயவுசெய்து கவனிக்கவும். உள்ளூர் மொழியில் உள்ள அடிப்படையான ஆவணம் அதிகாரபூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழி மாற்றத்தின் பயன்பாட்டினால் உண்டாகும் ஏதேனும் தவறான புரிதல்கள் அல்லது தவறுணர்வுகளுக்கு நாம் பொறுப்பேற்கவில்லை.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/8-code-editor/1-using-a-code-editor/assignment.md

@@ -1,247 +1,575 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "bd3aa6d2b879c30ea496c43aec1c49ed",
-  "translation_date": "2025-10-11T11:47:17+00:00",
+  "original_hash": "effe56ba51c38d7bdfad1ea38288666b",
+  "translation_date": "2026-01-07T13:01:08+00:00",
   "source_file": "8-code-editor/1-using-a-code-editor/assignment.md",
   "language_code": "ta"
 }
 -->
-# vscode.dev பயன்படுத்தி ஒரு ரெச்யூம்-வலைத்தளம் உருவாக்குங்கள்
+# VSCode.dev பயன்படுத்தி ஒரு ரெசுமே வலைத்தளத்தை உருவாக்கவும்
 
-_ஒரு வேலைவாய்ப்பு வழங்குநர் உங்கள் ரெச்யூமை கேட்கும்போது, நீங்கள் அவர்களுக்கு ஒரு URL அனுப்பினால் எவ்வளவு அருமையாக இருக்கும்?_ 😎
+உங்கள் திறன்கள் மற்றும் அனுபவத்தை கோர்த்துக்காட்டும், பரிணாமம் மிகுந்த, நவீன வடிவில் ஒரு தொழில்முறை ரெசுமே வலைத்தளத்தை உருவாக்கி உங்கள் தொழில் வாய்ப்புகளை மாற்றி அமைக்கவும். பாரம்பரிய PDF கோப்புகளை அனுப்புவதற்கு பதிலாக, பணியமர்த்துநர்களுக்கு தகுதிகள் மற்றும் உங்கள் வலை மேம்பாட்டு திறன்களை காட்டும் சுருக்கு, பதிலளிக்கும் வலைத்தளத்தை வழங்குவதை கற்பனை செய்யவும்.
 
-## நோக்கங்கள்
+இந்த கைமுறைப் பணிக்கான பணிகள் உங்களுடைய VSCode.dev திறன்களை முழுமையாக பயன்படுத்த ஊக்குவிக்கிறது, மேலும் உங்கள் உலாவியில் உட்பட, சேமிப்பகம் உருவாக்குதல் முதல் வெளியீடு வரை முழுமையான வலை மேம்பாட்டு பணிமுறைபாட்டைப் பெறுவீர்கள்.
 
-இந்த பணியை முடித்த பிறகு, நீங்கள் கற்றுக்கொள்வீர்கள்:
+இந்த திட்டத்தை நிறைவு செய்தவுடன், உங்களுக்கு தொழில்முறை ஆன்லைன் உருவம் கிடைக்கும், அதை சாத்தியமான பணியாளர்களுடன் எளிதில் பகிரலாம், உங்கள் திறன்கள் வளர்ந்தால் புதுப்பிக்கலாம், நேர்த்தியான தனிப்பட்ட பிராண்ட்டுக்கு ஏற்ப அமைக்கலாம். இதுவே உண்மையான உலக வலை மேம்பாட்டு திறன்களை வெளிப்படுத்தும் நடைமுறைத் திட்டம்.
 
-- உங்கள் ரெச்யூவை வெளிப்படுத்த ஒரு வலைத்தளத்தை உருவாக்குவது
+## கற்றல் இலக்குகள்
 
-### முன் தேவைகள்
+இந்த பணியை முடித்த பிறகு, நீங்கள் מסוגலாக முடியும்:
 
-1. ஒரு GitHub கணக்கு. [GitHub](https://github.com/) க்கு சென்று, உங்களிடம் கணக்கு இல்லையெனில், ஒரு கணக்கை உருவாக்கவும்.
+- **VSCode.dev** பயன்படுத்தி முழுமையான வலை மேம்பாட்டு திட்டத்தை உருவாக்கவும் மற்றும் பராமரிக்கவும்
+- அரசியல் HTML உறுப்புகள் கொண்டு தொழில்முறை வலைத்தளத்தை **உருவாக்கவும்**
+- நவீன CSS தொழில்நுட்பங்களுடன் பதிலளிக்கும் வடிவமைப்பினை **அழகு படுத்தவும்**
+- அடிப்படை வலை தொழில்நுட்பங்களை பயன்படுத்தி பரிணாம அம்சங்களை **இயக்கு**
+- பகிரக்கூடிய URL மூலம் அணுகக்கூடிய நேரடி வலைத்தளத்தை **வெளியிடவும்**
+- மேம்பாட்டுப் பணியில் பதிப்புக் கட்டுப்பாட்டின் சிறந்த நடைமுறைகளை **திருவிழிக்கவும்**
 
-## படிகள்
+## முன்னோடிகள்
 
-**படி 1:** ஒரு புதிய GitHub Repository உருவாக்கி, அதற்கு `my-resume` என்று பெயரிடுங்கள்.
+இந்த பணியைத் தொடங்குவதற்கு முன், சோதனை செய்யவும்:
 
-**படி 2:** உங்கள் Repositoryயில் ஒரு `index.html` கோப்பை உருவாக்குங்கள். நாம் github.com இல் குறைந்தது ஒரு கோப்பை சேர்க்க வேண்டும், ஏனெனில் நீங்கள் vscode.dev இல் ஒரு காலியான Repositoryயை திறக்க முடியாது.
+- GitHub கணக்கு (தயவு செய்து [github.com](https://github.com/) இல் கணக்கொன்றை உருவாக்கவும்)
+- VSCode.dev பாட நெறியின் இடைமுகக் வழிசென்று அடிப்படைக் செயல்பாடுகள் முடித்தல்
+- HTML கட்டமைப்பு மற்றும் CSS அழகுபடுத்தல் கருத்துக்களை அடிப்படையிலான புரிதல்
 
-`creating a new file` இணைப்பை கிளிக் செய்து, `index.html` என்று பெயரை தட்டச்சு செய்து, `Commit new file` பொத்தானை தேர்வு செய்யவும்.
+## திட்ட அமைப்பு மற்றும் சேமிப்பகம் உருவாக்கல்
 
-![github.com இல் புதிய கோப்பை உருவாக்கவும்](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.ta.png)
+உங்கள் திட்டத்தின் அடித்தளத்தை அமைக்க தொடங்குவோம். இந்த செயல்முறை எவ்வாறு திட்டங்கள் எளிய சேமிப்பகத் துவக்கம் மற்றும் கட்டுமான திட்டமிடுதலுடன் ஆரம்பிக்கப்படுகின்றன என்பதைக் காட்டுகிறது.
 
-**படி 3:** [VSCode.dev](https://vscode.dev) ஐ திறந்து, `Open Remote Repository` பொத்தானை தேர்வு செய்யவும்.
+### படி 1: GitHub சேமிப்பகத்தை உருவாக்கவும்
 
-நீங்கள் உங்கள் ரெச்யூம் தளத்திற்காக உருவாக்கிய Repositoryயின் URL ஐ நகலெடுத்து, உள்ளீட்டு பெட்டியில் ஒட்டவும்:
+ஒரு அர்ப்பணிக்கப்பட்ட சேமிப்பகம் அமைத்தல் உங்கள் திட்டம் சரியான வகையில் ஒழுங்குபடுத்தப்பட்டு பதிப்புக் கட்டுப்பாட்டுக்குள் இருப்பதை உறுதிசெய்கிறது.
 
-_`your-username` ஐ உங்கள் GitHub பயனர் பெயருடன் மாற்றவும்._
+1. **[GitHub.com](https://github.com) இல் உள்நுழைக**
+2. மேல் வலப்புறம் காணப்படும் பச்சை "New" பொத்தானை அல்லது "+" ஐ கிளிக் செய்யவும்
+3. உங்கள் சேமிப்பகத்திற்கு `my-resume` என்று பெயர்criptive்றுக (அல்லது உங்கள் விருப்பப்படி `john-smith-resume` போன்ற தனிப்பட்ட பெயர்)
+4. சுருக்கமான விளக்கம் சேர்க்கவும்: "HTML மற்றும் CSS கொண்டு செய்யப்பட்ட தொழில்முறை ரெசுமே வலைத்தளம்"
+5. "பொது" என்பதைக் தேர்வு செய்து உங்கள் ரெசுமே பணியாளர்களுக்கு அணுகக்கூடியதாக்கவும்
+6. "README கோப்பை சேர்க்கு" என்பதை தேர்வுசெய்க
+7. அமைப்பை நிறைவு செய்ய "Create repository" கிளிக் செய்யவும்
 
+> 💡 **சேமிப்பகம் பெயரிடல் அறிவுரை**: திட்டத்தின் நோக்கத்தை தெளிவாக குறிக்கிற வீடியான மற்றும் தொழில்முறைமான பெயர்களைப் பயன்படுத்தவும். இது பணியாளர்களுடன் பகிரும்போது அல்லது போர்ட்போலியோ மதிப்பாய்வுகளில் உதவும்.
+
+### படி 2: திட்ட கட்டுமானத்தை தொடங்கு
+
+VSCode.dev நிறுவுதலில் குறைந்தது ஒரு கோப்பு தேவை என்பதால், முதலில் GitHub இல் உங்கள் முதன்மை HTML கோப்பை உருவாக்குவோம், பின்னர் வலைத் தொகுப்பிலே மாற்றுவோம்.
+
+1. புதிய சேமிப்பகத்தில் "creating a new file" இணைப்பை கிளிக் செய்யவும்
+2. கோப்புப் பெயராக `index.html` எனத் தட்டச்சு செய்யவும்
+3. இந்த ஆரம்ப HTML கட்டுமானத்தைக் சேர்க்கவும்:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Name - Professional Resume</title>
+</head>
+<body>
+    <h1>Your Name</h1>
+    <p>Professional Resume Website</p>
+</body>
+</html>
 ```
-https://github.com/your-username/my-resume
-```
 
-✅ வெற்றிகரமாக இருந்தால், உங்கள் திட்டத்தையும், index.html கோப்பையும் உலாவியில் உள்ள உரை திருத்தியில் திறந்துவிடலாம்.
+4. "Add initial HTML structure" என கமிட் செய்தலை எழுது
+5. "Commit new file" கிளிக் செய்து மாற்றங்களைச் சேமிக்கவும்
+
+![GitHub இல் ஆரம்ப கோப்பை உருவாக்குதல்](../../../../translated_images/new-file-github.com.c886796d800e8056.ta.png)
+
+**இந்த ஆரம்ப அமைப்பு எதை நிறைவேற்றுகிறது:**
+- உரிய HTML5 ஆவண கட்டமைப்பை அரசியல் உறுப்புகளுடன் **உருவாக்குகிறது**
+- பதிலளிக்கும் வடிவமைப்புக்கான viewport meta தகுதியை உள்ளடக்குகிறது
+- உலாவி டாப்களில் காணப்படும் விளக்கமான பக்கம் தலைப்பை அமைக்கிறது
+- தொழில்முறை உள்ளடக்கம் ஏற்பாடு செய்ய அடித்தளத்தை உருவாக்குகிறது
+
+
+## VSCode.dev இல் பணியாற்றுதல்
+
+இப்போது உங்கள் சேமிப்பகம் அடித்தளம் தயாரும், முதன்மை மேம்பாட்டு பணிக்காக VSCode.dev இல் மாற்றுவோம். இந்த வலை அடிப்படையிலான தொகுப்பியில் தொழில்முறை வலை மேம்பாட்டிற்கு தேவையான அனைத்து கருவிகளும் உள்ளன.
+
+### படி 3: VSCode.dev இல் உங்கள் திட்டத்தை திறக்கவும்
+
+1. புதிய உலாவி தாவலில் [vscode.dev](https://vscode.dev) செல்லவும்
+2. வரவேற்பு திரையில் "Open Remote Repository" கிளிக் செய்யவும்
+3. GitHub இல் உங்கள் சேமிப்பக URLஐ நகலெடுத்து உள்ளீட்டுப் புலத்தில் ஒட்டவும்
+
+   வடிவம்: `https://github.com/your-username/my-resume`
+   
+   *`your-username` என்பதற்கு உங்கள் GitHub பயனர் பெயரை மாற்றவும்*
+
+4. Enter தட்டவும் மற்றும் உங்கள் திட்டத்தை ஏற்றவும்
+
+✅ **வெற்றி குறியியல்**: உங்கள் திட்ட கோப்புகள் எக்ஸ்ப்ளோரரில் மற்றும் `index.html` முதன்மை தொகுப்பியில் திருத்தத்திற்கு கிடைக்கும்.
 
-![புதிய கோப்பை உருவாக்கவும்](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.ta.png)
+![VSCode.dev இல் திட்டம் ஏற்றப்பட்டது](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.ta.png)
 
-**படி 4:** `index.html` கோப்பை திறந்து, கீழே உள்ள குறியீட்டை உங்கள் குறியீட்டு பகுதியில் ஒட்டவும் மற்றும் சேமிக்கவும்.
+**இந்த இடைமுகத்தில் நீங்கள் பார்க்கும் விஷயங்கள்:**
+- **எக்ஸ்ப்ளோரர் பக்கவுரு**: சேமிப்பகம் கோப்புகள் மற்றும் கோப்புறை அமைப்பை காட்சிப்படுத்தும்
+- **தொகுப்பாய்வு பகுதி**: தேர்ந்தெடுக்கப்பட்ட கோப்புகளின் உள்ளடக்கத்தை திருத்தக் காட்டும்
+- **செயற்பாட்டு பட்டை**: மூலக் கட்டுப்பாடு மற்றும் நீட்டிப்புக்கள் போன்ற அம்சங்களுக்கு அணுகல்
+- **நிலைக் பட்டை**: இணைப்பு நிலை மற்றும் தற்போதைய கிளைப் பற்றிய தகவல்
+
+### படி 4: உங்கள் ரெசுமே உள்ளடக்கத்தை உருவாக்கவும்
+
+`index.html` இல் உள்ள இடமதிப்புகளை முழுமையான ரெசுமே கட்டமைப்பால் மாற்றவும். இந்த HTML உங்கள் தகுதிகளை தொழில்முறை முறையில் முன்னிறுத்தும் அடித்தளம்.
 
 <details>
-    <summary><b>உங்கள் ரெச்யூம் வலைத்தளத்தின் உள்ளடக்கத்திற்கான HTML குறியீடு.</b></summary>
+<summary><b>முழுமையான HTML ரெசுமே கட்டமைப்பு</b></summary>
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <title>Your Name - Professional Resume</title>
+</head>
+<body>
+    <header id="header">
+        <h1>Your Full Name</h1>
+        <hr>
+        <p class="role">Your Professional Title</p>
+        <hr>
+    </header>
     
-        <html>
-
-            <head>
-                <link href="style.css" rel="stylesheet">
-                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-                <title>உங்கள் பெயரை இங்கே எழுதுங்கள்!</title>
-            </head>
-            <body>
-                <header id="header">
-                    <!-- உங்கள் பெயரும் தலைப்பும் கொண்ட ரெச்யூம் தலைப்பு -->
-                    <h1>உங்கள் பெயரை இங்கே எழுதுங்கள்!</h1>
-                    <hr>
-                    உங்கள் பங்கு!
-                    <hr>
-                </header>
-                <main>
-                    <article id="mainLeft">
-                        <section>
-                            <h2>தொடர்பு</h2>
-                            <!-- சமூக ஊடகங்களை உள்ளடக்கிய தொடர்பு தகவல் -->
-                            <p>
-                                <i class="fa fa-envelope" aria-hidden="true"></i>
-                                <a href="mailto:username@domain.top-level domain">உங்கள் மின்னஞ்சலை இங்கே எழுதுங்கள்</a>
-                            </p>
-                            <p>
-                                <i class="fab fa-github" aria-hidden="true"></i>
-                                <a href="github.com/yourGitHubUsername">உங்கள் பயனர் பெயரை இங்கே எழுதுங்கள்!</a>
-                            </p>
-                            <p>
-                                <i class="fab fa-linkedin" aria-hidden="true"></i>
-                                <a href="linkedin.com/yourLinkedInUsername">உங்கள் பயனர் பெயரை இங்கே எழுதுங்கள்!</a>
-                            </p>
-                        </section>
-                        <section>
-                            <h2>திறன்கள்</h2>
-                            <!-- உங்கள் திறன்கள் -->
-                            <ul>
-                                <li>திறன் 1!</li>
-                                <li>திறன் 2!</li>
-                                <li>திறன் 3!</li>
-                                <li>திறன் 4!</li>
-                            </ul>
-                        </section>
-                        <section>
-                            <h2>கல்வி</h2>
-                            <!-- உங்கள் கல்வி -->
-                            <h3>உங்கள் பாடத்திட்டத்தை இங்கே எழுதுங்கள்!</h3>
-                            <p>
-                                உங்கள் கல்வி நிறுவனத்தை இங்கே எழுதுங்கள்!
-                            </p>
-                            <p>
-                                தொடக்கம் - முடிவு தேதி
-                            </p>
-                        </section>            
-                    </article>
-                    <article id="mainRight">
-                        <section>
-                            <h2>பற்றி</h2>
-                            <!-- உங்களைப் பற்றி -->
-                            <p>உங்களைப் பற்றிய ஒரு குறிப்பு எழுதுங்கள்!</p>
-                        </section>
-                        <section>
-                            <h2>வேலை அனுபவம்</h2>
-                            <!-- உங்கள் வேலை அனுபவம் -->
-                            <h3>வேலை தலைப்பு</h3>
-                            <p>
-                                அமைப்பின் பெயரை இங்கே எழுதுங்கள் | தொடங்கும் மாதம் – முடியும் மாதம்
-                            </p>
-                            <ul>
-                                    <li>பணி 1 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!</li>
-                                    <li>பணி 2 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!</li>
-                                    <li>உங்கள் பங்களிப்பின் விளைவுகள்/தாக்கங்களை எழுதுங்கள்</li>
-                                    
-                            </ul>
-                            <h3>வேலை தலைப்பு 2</h3>
-                            <p>
-                                அமைப்பின் பெயரை இங்கே எழுதுங்கள் | தொடங்கும் மாதம் – முடியும் மாதம்
-                            </p>
-                            <ul>
-                                    <li>பணி 1 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!</li>
-                                    <li>பணி 2 - நீங்கள் என்ன செய்தீர்கள் என்பதை எழுதுங்கள்!</li>
-                                    <li>உங்கள் பங்களிப்பின் விளைவுகள்/தாக்கங்களை எழுதுங்கள்</li>
-                                    
-                            </ul>
-                        </section>
-                    </article>
-                </main>
-            </body>
-        </html>
+    <main>
+        <article id="mainLeft">
+            <section>
+                <h2>CONTACT</h2>
+                <p>
+                    <i class="fa fa-envelope" aria-hidden="true"></i>
+                    <a href="mailto:your.email@domain.com">your.email@domain.com</a>
+                </p>
+                <p>
+                    <i class="fab fa-github" aria-hidden="true"></i>
+                    <a href="https://github.com/your-username">github.com/your-username</a>
+                </p>
+                <p>
+                    <i class="fab fa-linkedin" aria-hidden="true"></i>
+                    <a href="https://linkedin.com/in/your-profile">linkedin.com/in/your-profile</a>
+                </p>
+            </section>
+            
+            <section>
+                <h2>SKILLS</h2>
+                <ul>
+                    <li>HTML5 & CSS3</li>
+                    <li>JavaScript (ES6+)</li>
+                    <li>Responsive Web Design</li>
+                    <li>Version Control (Git)</li>
+                    <li>Problem Solving</li>
+                </ul>
+            </section>
+            
+            <section>
+                <h2>EDUCATION</h2>
+                <h3>Your Degree or Certification</h3>
+                <p>Institution Name</p>
+                <p>Start Date - End Date</p>
+            </section>
+        </article>
+        
+        <article id="mainRight">
+            <section>
+                <h2>ABOUT</h2>
+                <p>Write a compelling summary that highlights your passion for web development, key achievements, and career goals. This section should give employers insight into your personality and professional approach.</p>
+            </section>
+            
+            <section>
+                <h2>WORK EXPERIENCE</h2>
+                <div class="job">
+                    <h3>Job Title</h3>
+                    <p class="company">Company Name | Start Date – End Date</p>
+                    <ul>
+                        <li>Describe a key accomplishment or responsibility</li>
+                        <li>Highlight specific skills or technologies used</li>
+                        <li>Quantify impact where possible (e.g., "Improved efficiency by 25%")</li>
+                    </ul>
+                </div>
+                
+                <div class="job">
+                    <h3>Previous Job Title</h3>
+                    <p class="company">Previous Company | Start Date – End Date</p>
+                    <ul>
+                        <li>Focus on transferable skills and achievements</li>
+                        <li>Demonstrate growth and learning progression</li>
+                        <li>Include any leadership or collaboration experiences</li>
+                    </ul>
+                </div>
+            </section>
+            
+            <section>
+                <h2>PROJECTS</h2>
+                <div class="project">
+                    <h3>Project Name</h3>
+                    <p>Brief description of what the project accomplishes and technologies used.</p>
+                    <a href="#" target="_blank">View Project</a>
+                </div>
+            </section>
+        </article>
+    </main>
+</body>
+</html>
+```
 </details>
 
-உங்கள் ரெச்யூம் விவரங்களை HTML குறியீட்டில் உள்ள _placeholder text_ ஐ மாற்றி சேர்க்கவும்.
+**தனிப்பயனாக்கும் வழிகாட்டல்கள்:**
+- அனைத்து இடமதிப்பு உரைகளையும் உங்கள் உண்மையான தகவல்களால் மாற்றவும்
+- உங்கள் அனுபவ நிலை மற்றும் தொழில் திசையில் பொருந்துமாறு பகுதிகள் மாற்றிக் கொள்ளவும்
+- தேவையானவை சேர்க்கவும் அல்லது அகற்றவும் (உதாரணம்: சான்றிதழ்கள், தன்னமர்வோர் வேலை, மொழிகள்)
+- உங்கள் உண்மையான சுயவிவர மற்றும் திட்டங்களுக்கான இணைப்புகளை சேர்க்கவும்
 
-**படி 5:** My-Resume கோப்புறை மீது மிதக்க, `New File ...` ஐகானை கிளிக் செய்து, உங்கள் திட்டத்தில் 2 புதிய கோப்புகளை உருவாக்கவும்: `style.css` மற்றும் `codeswing.json` கோப்புகள்.
+### படி 5: ஆதரவு கோப்புகளை உருவாக்கவும்
 
-**படி 6:** `style.css` கோப்பை திறந்து, கீழே உள்ள குறியீட்டை ஒட்டவும் மற்றும் சேமிக்கவும்.
+தொழில்முறை வலைத்தளங்களுக்கு ஒருங்கிணைந்த கோப்பு அமைப்புகள் தேவை. முழுமையான திட்டத்திற்கு தேவையான CSS ஸ்டைல்ஷீட் மற்றும் கட்டமைப்பு கோப்புகளை உருவாக்கவும்.
+
+1. எக்ஸ்ப்ளோரர் பக்கவுரலில் உங்கள் திட்ட கோப்புறை பெயரின் மேல் சிய.hover செய்யவும்
+2. காணும் "New File" ஐகானை (📄+) கிளிக் செய்யவும்
+3. கீழ்காணும் கோப்புகளை தானாக உருவாக்கவும்:
+   - `style.css` (அழகுபடுத்தல் மற்றும் வடிவமைப்பிற்காக)
+   - `codeswing.json` (முன்காட்சிப்படுத்தல் நீட்டிப்பு கட்டமைப்பு)
+
+**CSS கோப்பு உருவாக்கல் (`style.css`):**
 
 <details>
-        <summary><b>தளத்தின் அமைப்பை வடிவமைக்க CSS குறியீடு.</b></summary>
-            
-            body {
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                font-size: 16px;
-                max-width: 960px;
-                margin: auto;
-            }
-            h1 {
-                font-size: 3em;
-                letter-spacing: .6em;
-                padding-top: 1em;
-                padding-bottom: 1em;
-            }
-
-            h2 {
-                font-size: 1.5em;
-                padding-bottom: 1em;
-            }
-
-            h3 {
-                font-size: 1em;
-                padding-bottom: 1em;
-            }
-            main { 
-                display: grid;
-                grid-template-columns: 40% 60%;
-                margin-top: 3em;
-            }
-            header {
-                text-align: center;
-                margin: auto 2em;
-            }
-
-            section {
-                margin: auto 1em 4em 2em;
-            }
-
-            i {
-                margin-right: .5em;
-            }
-
-            p {
-                margin: .2em auto
-            }
-
-            hr {
-                border: none;
-                background-color: lightgray;
-                height: 1px;
-            }
-
-            h1, h2, h3 {
-                font-weight: 100;
-                margin-bottom: 0;
-            }
-            #mainLeft {
-                border-right: 1px solid lightgray;
-            }
-            
+<summary><b>தொழில்முறை CSS அழகுபடுத்தல்</b></summary>
+
+```css
+/* Modern Resume Styling */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+    background-color: #f9f9f9;
+}
+
+/* Header Styling */
+header {
+    text-align: center;
+    margin-bottom: 3em;
+    padding: 2em;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    font-size: 3em;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.2em;
+    font-weight: 300;
+}
+
+.role {
+    font-size: 1.3em;
+    font-weight: 300;
+    margin: 1em 0;
+}
+
+/* Main Content Layout */
+main {
+    display: grid;
+    grid-template-columns: 35% 65%;
+    gap: 3em;
+    margin-top: 3em;
+    background: white;
+    padding: 2em;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Typography */
+h2 {
+    font-size: 1.4em;
+    font-weight: 600;
+    margin-bottom: 1em;
+    color: #667eea;
+    border-bottom: 2px solid #667eea;
+    padding-bottom: 0.3em;
+}
+
+h3 {
+    font-size: 1.1em;
+    font-weight: 600;
+    margin-bottom: 0.5em;
+    color: #444;
+}
+
+/* Section Styling */
+section {
+    margin-bottom: 2.5em;
+}
+
+#mainLeft {
+    border-right: 1px solid #e0e0e0;
+    padding-right: 2em;
+}
+
+/* Contact Links */
+section a {
+    color: #667eea;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+section a:hover {
+    color: #764ba2;
+    text-decoration: underline;
+}
+
+/* Icons */
+i {
+    margin-right: 0.8em;
+    width: 20px;
+    text-align: center;
+    color: #667eea;
+}
+
+/* Lists */
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+li {
+    margin: 0.5em 0;
+    padding: 0.3em 0;
+    position: relative;
+}
+
+li:before {
+    content: "▸";
+    color: #667eea;
+    margin-right: 0.5em;
+}
+
+/* Work Experience */
+.job, .project {
+    margin-bottom: 2em;
+    padding-bottom: 1.5em;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.company {
+    font-style: italic;
+    color: #666;
+    margin-bottom: 0.5em;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    main {
+        grid-template-columns: 1fr;
+        gap: 2em;
+    }
+    
+    #mainLeft {
+        border-right: none;
+        border-bottom: 1px solid #e0e0e0;
+        padding-right: 0;
+        padding-bottom: 2em;
+    }
+    
+    h1 {
+        font-size: 2.2em;
+    }
+    
+    body {
+        padding: 10px;
+    }
+}
+
+/* Print Styles */
+@media print {
+    body {
+        background: white;
+        color: black;
+        font-size: 12pt;
+    }
+    
+    header {
+        background: none;
+        color: black;
+        box-shadow: none;
+    }
+    
+    main {
+        box-shadow: none;
+    }
+}
+```
 </details>
 
-**படி 6:** `codeswing.json` கோப்பை திறந்து, கீழே உள்ள குறியீட்டை ஒட்டவும் மற்றும் சேமிக்கவும்.
+**கட்டமைப்பு கோப்பு உருவாக்கல் (`codeswing.json`):**
 
-    {
+```json
+{
     "scripts": [],
     "styles": []
-    }
+}
+```
+
+**CSS அம்சங்களைப் புரிந்துகொள்வது:**
+- பதிலளிக்கும், தொழில்முறை வடிவமைப்பு க்கான CSS கிரிட் பயன்பாடு
+- கிரேடியன்ட் தலைப்புகளுடன் நவீன நிற திட்டங்கள்
+- நேரடி விளைவுகள் மற்றும் மென்மையான மாற்றங்களைக்கொண்ட ஹோவர் விளைவுகள்
+- அனைத்து சாதன அளவுகளுக்கும் வேலை செய்யும் பதிலளிக்கும் வடிவமைப்பு
+- PDF உருவாக்கத்திற்கு அச்சிட சக்திவாய்ந்த அமைப்புகள்
+
+
+### படி 6: நீட்டிப்புகள் நிறுவுதல் மற்றும் கட்டமைத்தல்
+
+நீட்டிப்புகள் உங்கள் மேம்பாட்டு அனுபவத்தை நேரடி முன்னோட்ட வசதிகள் மற்றும் மேம்பட்ட பணிமுறை கருவிகளால் அதிகரிக்கின்றன. CodeSwing நீட்டிப்பு வலை தொழில்முறைத் திட்டங்களுக்கு மிகவும் பயனுள்ளதாகும்.
+
+**CodeSwing நீட்டிப்பை நிறுவுதல்:**
 
-**படி 7:** `Codeswing extension` ஐ நிறுவி, குறியீட்டு பகுதியில் ரெச்யூம் வலைத்தளத்தை காண்பிக்கவும்.
+1. செயல்பாட்டுப் பட்டியில் (🧩) நீட்டிப்புகள் ஐகானை கிளிக் செய்யவும்
+2. சந்தைத் தேடல் பொட்டியில் "CodeSwing" என தேடவும்
+3. தேடல் முடிவுகளில் CodeSwing நீட்டிப்பை தேர்ந்தெடுக்கவும்
+4. நீல "Install" பொத்தானை கிளிக் செய்யவும்
 
-_`Extensions`_ ஐகானை செயல்பாட்டு பட்டியில் கிளிக் செய்து, Codeswing என தட்டச்சு செய்யவும். விரிவாக்கப்பட்ட செயல்பாட்டு பட்டியில் _நீல நிற install button_ ஐ கிளிக் செய்து அல்லது விரிவாக்கத்தை தேர்வு செய்த பிறகு குறியீட்டு பகுதியில் தோன்றும் install button ஐ பயன்படுத்தி நிறுவவும். விரிவாக்கத்தை நிறுவியவுடன், உங்கள் திட்டத்தில் ஏற்பட்ட மாற்றங்களை கவனிக்கவும் 😃
+![CodeSwing நீட்டிப்பு நிறுவுதல்](../../../../8-code-editor/images/install-extension.gif)
 
-![Extensions ஐ நிறுவவும்](../../../../8-code-editor/images/install-extension.gif)
+**CodeSwing வழங்கும் வசதிகள்:**
+- தொகுக்கும்போது உங்கள் வலைத்தளத்தின் நேரடி முன்னோட்டை இயக்குக
+- கைமுறையான புதுப்பிப்பின்றி மாற்றங்களை நேரடியாக காட்சிப்படுத்துக
+- HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் உள்ளிட்ட பல கோப்பு வகைகளை ஆதரிக்கிறது
+- ஒருங்கிணைக்கப்பட்ட மேம்பாட்டு சூழல் அனுபவத்தை வழங்குகிறது
 
-விரிவாக்கத்தை நிறுவிய பிறகு, உங்கள் திரையில் இதை காணலாம்.
+**நிறுவின்பின் உடனடியான விளைவுகள்:**
+CodeSwing நிறுவப்பட்டவுடன், தொகுப்பாளரிலேயே உங்கள் ரெசுமே வலைத்தளத்தின் நேரடி முன்னோட்டை காட்டும். மாற்றங்களைச் செய்தபோது உங்கள் தளம் எப்படி தோன்றுகிறது என்பது தெளிவாக பார்க்க முடியும்.
 
-![Codeswing விரிவாக்கம் செயல்பாட்டில்](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.ta.png)
+![CodeSwing நீட்டிப்பின் நேரடி முன்னோட்டை](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.ta.png)
 
-நீங்கள் செய்த மாற்றங்களில் திருப்தி அடைந்தால், `Changes` கோப்புறையில் மிதக்கவும், `+` பொத்தானை கிளிக் செய்து மாற்றங்களை நிலைப்படுத்தவும்.
+**வளர்ந்த இடைமுகத்தைப் புரிந்து கொள்ள:**
+- **வெட்டு காட்சியமைப்பு**: ஒரு பக்கத்தில் நீங்கள் எழுதும் குறியீடு மற்றும் மற்ற பக்கத்தில் நேரடி முன்னோட்டை காட்சி
+- **நேரடி புதுப்பிப்புகள்**: தட்டச்சு செய்தவுடன் உடனான ஆப்டேட்கள்
+- **பரிணாம முன்னோட்டை**: இணைப்புகள் மற்றும் தொடர்புகளை சோதிக்க உகந்தது
+- **மொபைல் சிமுலேஷன்**: பதிலளிக்கும் வடிவமைத்தை சோதிக்கும் திறன்
 
-ஒரு commit செய்தி _(நீங்கள் திட்டத்தில் செய்த மாற்றத்தின் விளக்கம்)_ தட்டச்சு செய்து, `check` ஐ கிளிக் செய்து உங்கள் மாற்றங்களை commit செய்யவும். உங்கள் திட்டத்தில் வேலை முடிந்தவுடன், மேலே இடது மூலையில் உள்ள ஹாம்பர்கர் மெனு ஐகானை தேர்வு செய்து GitHub இல் உள்ள Repositoryக்கு திரும்பவும்.
+### படி 7: பதிப்புக் கட்டுப்பாடு மற்றும் வெளியீடு
 
-வாழ்த்துக்கள் 🎉 சில படிகளில் நீங்கள் vscode.dev ஐப் பயன்படுத்தி உங்கள் ரெச்யூம் வலைத்தளத்தை உருவாக்கி விட்டீர்கள்.
+உங்கள் ரெசுமே வலைத்தளம் முடிந்தவுடன், Git ஐபயன்படுத்தி உங்கள் பணியை சேமித்து ஆன்லைனில் வெளியிடுங்கள்.
 
-## 🚀 சவால்
+**மாற்றங்களை கமிட் செய்வது:**
 
-நீங்கள் மாற்றங்களைச் செய்ய அனுமதி உள்ள ஒரு தொலைவிலுள்ள Repositoryயைத் திறந்து, சில கோப்புகளை புதுப்பிக்கவும். அடுத்ததாக, உங்கள் மாற்றங்களுடன் ஒரு புதிய கிளையை உருவாக்கி, ஒரு Pull Request ஐ உருவாக்க முயற்சிக்கவும்.
+1. செயல்பாட்டுப் பட்டியில் (🌿) மூலக் கட்டுப்பாடு ஐகானை கிளிக் செய்யவும்
+2. நீங்கள் உருவாக்கிய மற்றும் மாற்றிய கோப்புகளை "Changes" பகுதியில் பரிசீலிக்கவும்
+3. ஒவ்வொரு கோப்பின் பக்கத்தில் உள்ள "+" ஐகானை கிளிக் செய்து மாற்றங்களை நிலைப்படுத்தவும்
+4. விளக்கமான கமிட் செய்தலை எழுதவும், உதாரணம்:
+   - "பதிலளிக்கும் வடிவமைப்புடன் முழுமையான ரெசுமே வலைத்தளத்தை சேர்த்து"
+   - "தொழில்முறை ஸ்டைலிங் மற்றும் உள்ளடக்க கட்டமைப்பை அமற்றல்"
+5. ✓ (சரிபார்ப்பு) ஐகானை கிளிக் செய்து உங்கள் மாற்றங்களை கமிட் செய்து புஷ் செய்யவும்
 
-## மதிப்பீடு & சுயபயிற்சி
+**சிறந்த கமிட் செய்தல் மாதிரிகள்:**
+- "தொழில்முறை ரெசுமே உள்ளடக்கம் மற்றும் ஸ்டைலிங் சேர்க்கப்பட்டது"
+- "மொபைல் பொருத்தத்துக்கான பதிலளிக்கும் வடிவமைப்பு செயல்படுத்தப்பட்டது"
+- "தொடர்பு தகவல்கள் மற்றும் திட்ட இணைப்புகள் புதுப்பிக்கப்பட்டன"
+
+> 💡 **தொழில்முறை அறிவுரை**: நல்ல கமிட் செய்தல்கள் உங்கள் திட்டத்தின் வளர்ச்சியை பின்தொடரவும், சிறிய விபரங்களில் கவனம் செலுத்துகிறீர்கள் என்பதை நிரூபிக்கும் - இது பணியாளர்களுக்கு விருப்பமானது.
+
+**பதிப்பிடப்பட்ட தளத்தை அணுகுதல்:**
+கமிட் செய்த பிறகு, மேல்திரையில் இடது மூலமுகத்தில் உள்ள ஹாம்பர்கர் மெனு (☰) மூலம் GitHub சேமிப்பகத்திற்கு திரும்பலாம். உங்கள் ரெசுமே வலைத்தளம் பதிப்புக் கட்டுப்பாடுடன் தயாராக வெளியிடமுடியும் அல்லது பகிரப்படலாம்.
+
+## முடிவுகள் மற்றும் அடுத்த படிகள்
+
+**வாழ்த்துக்கள்! 🎉** நீங்கள் வெற்றிகரமாக VSCode.dev கொண்டு ஒரு தொழில்முறை ரெசுமே வலைத்தளத்தை உருவாக்கி முடித்துள்ளீர்கள். உங்கள் திட்டம் இதையை நிரூபிக்கிறது:
+
+**தொழில்நுட்ப திறன்கள்:**
+- **சேமிப்பகம் மேலாண்மை**: முழுமையான திட்ட கட்டமைப்பை உருவாக்கி ஒழுங்குபடுத்தியது
+- **வலை மேம்பாடு**: நவீன HTML5 மற்றும் CSS3 பயன்படுத்தி பதிலளிக்கும் வலைதளத்தை உருவாக்கியது
+- **பதிப்புக் கட்டுப்பாடு**: பொருத்தமான Git பணிமுறையை அமற்படுத்தியது
+- **கருவி திறன்**: VSCode.dev இடைமுகமும் நீட்டிப்பு அமைப்பும் சிறப்பாக பயன்படுத்தப்பட்டது
+
+**தொழில்முறை பெறுமதிகள்:**
+- **ஆன்லைன் உருவம்**: உங்கள் தகுதிகளைக் காட்டும் பகிரக்கூடிய URL
+- **நவீன வடிவம்**: பாரம்பரிய PDF ரெசுமே க்கு பதிலாக பரிணாம மாற்று
+- **பிரமாணப்படுத்தப்பட்ட திறன்கள்**: உங்கள் வலை மேம்பாட்டு திறன்களுக்கான தெளிவான சான்று
+- **எளிய புதுப்பிப்புகள்**: தொடர்ச்சியாக மேம்படுத்தவும் செம்மைப்படுத்தவும் செய்யக்கூடிய அடித்தளம்
+
+### வெளியீடு விருப்பங்கள்
+
+உங்கள் ரெசுமே பணியாளர்களுக்கு அணுகக்கூடியதாக பின்வரும் ஹோஸ்டிங் விருப்பங்களை பரிசீலிக்கவும்:
+
+**GitHub Pages (பரவலாய் பரிந்துரைக்கப்படுகிறது):**
+1. GitHub இல் உங்கள் சேமிப்பகம் அமைப்புகளுக்கு செல்லவும்
+2. "Pages" பகுதியை கீழே இடம் பார்த்து செல்
+3. "Deploy from a branch" தேர்ந்தெடுத்து "main" கிளையை தேர்வு செய்யவும்
+4. உங்கள் தளம் `https://your-username.github.io/my-resume` இல் கிடைக்கும்
+
+**மாற்று தளங்கள்:**
+- **Netlify**: தானியங்கி வெளியீடு மற்றும் தனிப்பயன் டொமைன்கள்
+- **Vercel**: நவீன ஹோஸ்டிங் அம்சங்களுடன் வேகமான வெளியீடு
+- **GitHub Codespaces**: இடைமுக முன்னோட்டத்துடன் மேம்பாட்டு சூழல்
+
+### மேம்பாட்டு பரிந்துரைகள்
+
+உங்கள் திறன்களை வளர்க்க, கீழ்க்காணும் அம்சங்களைச் சேர்க்க முயற்சிக்கவும்:
+
+**தொழில்நுட்ப மேம்பாடுகள்:**
+- **JavaScript தகவல் பரிணாமம்**: மென்மையான ஸ்க்ரோல்லிங் அல்லது பரிணாம கூறுகள் சேர்க்கவும்
+- **இருண்ட / வெளிர் தீம் மாற்றி**: பயனர் விருப்பத்திற்கு தீம் மாற்றி அம்சம் உருவாக்கவும்
+- **தொடர்பு படிவம்**: நேரடி தொடர்புக்கு படிவ சரிபார்ப்புடன் செயல்படுத்தவும்
+- **திட்டங்கள் பகுதி**: ஹோவ் விளைவுகளும் மோடல் பாப்பப்புகளும் கொண்ட பகுதி உருவாக்கவும்
+- **பிளாக் பகுதி**: உங்கள் கற்றல் பயணத்தை குறிக்கும் குறைந்தது 3 மாதிரி பதிவுகளுடன் சேர்க்கவும்
+- **SEO மேம்பாடு**: பொருத்தமான மெட்டா டேக், கட்டமைக்கப்பட்ட தரவு மற்றும் செயல்திறன் மேம்பாடு
+- **GitHub Pages அல்லது Netlify மூலம் மேம்படுத்தப்பட்ட தளத்தை வெளியிடு**
+- **README.md இல் அனைத்து புதிய அம்சங்களையும் திரை படங்களுடன் விவரிக்கவும்**
+
+உங்கள் மேம்படுத்தப்பட்ட வலைதளம் பதிலளிக்கும் வடிவமைப்பு, JavaScript பரிணாமம் மற்றும் தொழில்முறை வெளியீட்டு பணிமுறை ஆகியவற்றை அதிகாரப்பூர்வமாகக் காட்ட வேண்டும்.
+
+## சவால் நீட்டிப்பு
+
+உங்கள் திறன்களை இன்னும் விரிவுபடுத்த தயாரா? கீழ்க்காணும் சவால்களை முயற்சிக்கவும்:
+
+**📱 மொபைல் முதன்மை மறுவரைவோடு:** CSS Grid மற்றும் Flexbox பயன்படுத்தி உங்கள் தளத்தை முற்றிலும் மறுவடிவமைக்கவும்
+
+**🔍 SEO மேம்பாடு:** முழுமையான SEO உடன் மெட்டா டேக்க்கள், கட்டமைக்கப்பட்ட தரவு மற்றும் செயல்திறன் மேம்பாடு செயல்படுத்தவும்
+
+**🌐 பல மொழி ஆதரவு:** பல மொழிகளுக்கு ஆதரவு கொண்ட சர்வதேசப்படுத்தல் அம்சங்கள் சேர்க்கவும்
+
+**📊 பகுப்பாய்வு ஒருங்கிணைப்பு:** பயணியர் ஈடுபாட்டைப் பதிவு செய்ய கூகுள் அனலிடிக்ஸ் சேர்க்கவும் மற்றும் உள்ளடக்கத்தை மேம்படுத்தவும்
+
+**🚀 செயல்திறன் மேம்பாடு:** அனைத்து பிரிவுகளிலும் *Lighthouse* செயல்திறன் மதிப்பெண்களில் சரியான மதிப்பெண்களை பெறும் நிலைக்கு கொண்டு செல்
+
+## மதிப்பாய்வு மற்றும் தன்னிலை ஆய்வு
+
+உங்கள் அறிவை விரிவுபடுத்த கீழ்காணும் வளங்களைப் பயன்படுத்தவும்:
+
+**உயர் மட்ட VSCode.dev அம்சங்கள்:**
+- [VSCode.dev கையேடு](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - வலைதள அடிப்படை தொகுப்பு முழுமையான வழிகாட்டி
+- [GitHub Codespaces](https://docs.github.com/en/codespaces) - மேக மேம்பாட்டு சூழல்கள்
+
+**வலை மேம்பாட்டு சிறந்த நடைமுறைகள்:**
+- **பதிலளிக்கும் வடிவமைப்பு**: நவீன அமைப்பிற்கு CSS கிரிட் மற்றும் Flexbox ஆகியவற்றை படித்தறிந்து கொள்ளவும்
+- **அணுகல்**: ஒருங்கிணைந்த வலை வடிவமைப்பிற்கான WCAG வழிகாட்டுதல்களை கற்கவும்  
+- **செயல்்திறன்**: கணையம் மேம்பாட்டிற்காக Lighthouse போன்ற கருவிகள் பற்றிக் கற்றுக்கொள்ளவும்  
+- **SEO**: தேடல் இயந்திர மேம்பாடு அடிப்படைகளை புரிந்து கொள்ளவும்  
+
+**தொழில் வளர்ச்சி:**  
+- **போர்ட்ஃபோலியோ கட்டமைத்தல்**: பல்வேறு திறன்களை காட்ட கூடுதல் திட்டங்களை உருவாக்கவும்  
+- **திறந்த மூல**: இணைந்து பணிபுரிய பிராஜெக்ட்களில் பங்குபெறவும்  
+- **நெட்வொர்க்கிங்**: உங்கள் ரெசியூமி வலைத்தளத்தை டெவலப்பர் சமூகங்களில் பகிர்ந்து கருத்துக்களை பெறவும்  
+- **தொடர் கற்றல்**: வலை வளர்ச்சி போக்குகள் மற்றும் தொழில்நுட்பங்களில் புதுப்பிக்கப்பட்டிருங்கள்  
+
+---
 
-[VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) மற்றும் அதன் பிற அம்சங்கள் பற்றிய மேலும் படிக்கவும்.
+**உங்கள் அடுத்த படிகள்:** உங்கள் ரெசியூமி வலைத்தளத்தை நண்பர்கள், குடும்பம் அல்லது வழிகாட்டிகளுடன் பகிர்ந்து கருத்துக்களை பெறுங்கள். அவர்களின் பரிந்துரைகளை பயன்படுத்தி உங்கள் வடிவமைப்பை மேம்படுத்தி திருத்துங்கள். இது வெறும் ரெசியூமி அல்ல என்பதை நினைவில் வையுங்கள் – இது ஒரு வலை டெவலப்பராக உங்கள் வளர்ச்சியின் ஒரு அறிகுறி!
 
 ---
 
-**அறிவிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கிறோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளவும். அதன் சொந்த மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்களுக்கும் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**அறிவுறுத்தல்**:  
+இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவையான [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. துல்லியத்தை நோக்கி முயலினாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து அறிந்து கொள்ளுங்கள். உள்ளூர் மொழியில் உள்ள அசல் ஆவணம் அதிகாரப்பூர்வ மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கான முறையாக, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பின் பயன்படுத்தலால் உருவாகக்கூடிய எந்த தவறான புரிதல்கள் அல்லது வழு விளக்கங்களுக்கு நாங்கள் பொறுப்பு ஏற்கவில்லை.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/9-chat-project/solution/backend/python/README.md

@@ -1,13 +1,13 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "537f02a36d73db093cbb8b9b44867645",
-  "translation_date": "2025-10-11T11:55:02+00:00",
+  "original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
+  "translation_date": "2026-01-07T14:03:29+00:00",
   "source_file": "9-chat-project/solution/backend/python/README.md",
   "language_code": "ta"
 }
 -->
-# கோடு இயக்கவும்
+# குறியீட்டை இயக்கவும்
 
 ## அமைப்பு
 
@@ -18,41 +18,47 @@ python -m venv venv
 source ./venv/bin/activate
 ```
 
-
-## சார்புகளை நிறுவவும்
+## சார்ந்தவற்றை நிறுவவும்
 
 ```sh
-pip install openai flask flask-cors 
+pip install openai fastapi uvicorn python-dotenv
 ```
 
-
 ## API ஐ இயக்கவும்
 
 ```sh
+# முறை 1: நேரடி செயலாக்கம்
 python api.py
+
+# முறை 2: uvicorn பயன்படுத்தல்
+uvicorn api:app --host 0.0.0.0 --port 5000 --reload
 ```
 
+## API ஐ சோதிக்கவும்
 
-## முன்புறத்தை இயக்கவும்
+இணையதள API ஆவணத்தை பார்: `http://localhost:5000/docs`
 
-முன்புற கோப்புறையில் இருப்பதை உறுதிப்படுத்தவும்
+## முன்னணி இயக்கவும்
 
-*app.js* ஐ கண்டறியவும், `BASE_URL` ஐ உங்கள் பின்புற URL ஆக மாற்றவும்
+நீங்கள் frontend கோப்பகத்தில் இருக்கிறீர்களா என்று உறுதி செய்யவும்
 
-இதை இயக்கவும்
+*app.js* ஐ கண்டறிந்து, `BASE_URL` ஐ உங்கள் பின்னணி URL ஆக மாற்றவும்
+
+இயக்கவும்
 
 ```
 npx http-server -p 8000
 ```
 
+உரையாடலில் ஒரு செய்தியை வடிவமைத்துப் பார்க்கவும், பதில் கிடைக்கும் (நீங்கள் இதை Codespace இல் இயக்குகிறீர்கள் அல்லது அணுகல் குறியீட்டை அமைத்துள்ளீர்கள் எனில்).
 
-செய்தியை உரையாடலில் தட்டச்சு செய்ய முயற்சிக்கவும், நீங்கள் பதிலை காணலாம் (நீங்கள் இதை Codespace-ல் இயக்கினால் அல்லது அணுகல் டோக்கனை அமைத்திருந்தால்).
-
-## அணுகல் டோக்கனை அமைக்கவும் (நீங்கள் இதை Codespace-ல் இயக்கவில்லை என்றால்)
+## அணுகல் குறியீட்டை அமைக்க (நீங்கள் இதை Codespace இல் இயக்கவில்லை என்றால்)
 
-[தனிப்பட்ட அணுகல் டோக்கன்களை அமைக்கவும்](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) ஐப் பார்க்கவும்
+[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) ஐப் பார்வையிடவும்
 
 ---
 
-**குறிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை கவனத்தில் கொள்ளவும். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**உறுதிமொழி**:
+இந்தக் கோப்பு [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற செயற்கை நுண்ணறிவு மொழிபெயர்ப்புச் சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்தினைப் பெற முயற்சி செய்கிறோம் என்றாலும், தன்னிச்சையான மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை தெரிந்துகொள்ளவும். இயல்புநிலையான மொழியில் உள்ள அசல் ஆவணம் அதிகாரபூர்வமான மூலமாக கருதப்பட வேண்டும். அவசரமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதன் மூலம் ஏற்படும் எந்த தவறான புரிதலும் அல்லது தவறான பொருள் எடுத்துக்காட்டுகளுக்கும் நாங்கள் பொறுப்பாக இருக்கமாட்டோம்.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/README.md

@@ -1,8 +1,8 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "caf2ca695e9d259153d24a5cf3e07ef5",
-  "translation_date": "2025-10-11T11:37:48+00:00",
+  "original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
+  "translation_date": "2026-01-07T12:28:29+00:00",
   "source_file": "README.md",
   "language_code": "ta"
 }
@@ -17,215 +17,262 @@ CO_OP_TRANSLATOR_METADATA:
 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
 [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
 
-[![](https://dcbadge.vercel.app/api/server/ByRwuEEgH4)](https://discord.gg/zxKYvhSnVp?WT.mc_id=academic-000002-leestott)
+[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
 
-# தொடக்கத்திற்கான வலை மேம்பாடு - ஒரு பாடத்திட்டம்
+# ஆரம்பத்தைக் கொண்டவர்களுக்கான வலை மேம்பாடு - ஒரு பாடத்திட்டம்
 
-மைக்ரோசாஃப்ட் கிளவுட் ஆதரவாளர்களால் உருவாக்கப்பட்ட 12 வார முழுமையான பாடத்திட்டத்தின் மூலம் வலை மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். 24 பாடங்களில் ஒவ்வொன்றும் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஆகியவற்றை டெராரியங்கள், உலாவி நீட்டிப்புகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற நடைமுறை திட்டங்கள் மூலம் ஆராய்கிறது. வினாடி வினா, விவாதங்கள் மற்றும் நடைமுறை பணிகளைச் செய்யுங்கள். எங்கள் பயிற்சி அடிப்படையிலான கற்றல் முறையின் மூலம் உங்கள் திறன்களை மேம்படுத்தி, அறிவு நிலைத்தன்மையை அதிகரிக்கவும். இன்று உங்கள் குறியீட்டு பயணத்தைத் தொடங்குங்கள்!
+Microsoft Cloud Advocates உடன் இருக்கும் 12 வார முழுமையான பாடத்திட்டத்தில் வலை மேம்பாட்டின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள். 24 பாடங்களில் ஒவ்வொன்றும் terrariums, உலாவி நீட்சிகள் மற்றும் விண்வெளி விளையாட்டுகள் போன்ற கைமுறை திட்டங்களின் மூலமாக JavaScript, CSS மற்றும் HTML ஐ ஆராய்கிறது. வினாக்கள், விவாதங்கள் மற்றும் நடைமுறை பணிகளுடன் ஈடுபடுங்கள். உங்கள் திறன்களை மேம்படுத்தி, நம் பயனுள்ள திட்ட-அடிப்படையிலான கல்விச் முறையுடன் உங்கள் அறிவை சிறப்பாக உறுதிப்படுத்துங்கள். இன்றே உங்கள் குறியீட்டு பயணத்தை தொடங்குங்கள்!
 
-Azure AI Foundry Discord சமூகத்தில் சேரவும்
+Azure AI Foundry Discord சமுதாயத்தில் சேரவும்
 
-[![Microsoft Azure AI Foundry Discord](https://dcbadge.limes.pink/api/server/ByRwuEEgH4)](https://discord.com/invite/ByRwuEEgH4)
+[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
 
-இந்த வளங்களைப் பயன்படுத்தத் தொடங்குவதற்கான படிகள்:
-1. **களஞ்சியத்தை Fork செய்யவும்**: [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) கிளிக் செய்யவும்
-2. **களஞ்சியத்தை Clone செய்யவும்**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+இந்த வளங்களை பயன்படுத்த தொடங்க பின்வரும் படிகளை பின்பற்றவும்:
+1. **கோப்பகத்தைக் குறுக்கு செய்யவும்**: கிளிக் செய்க [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
+2. **கோப்பகத்தை நகலெடுக்கவும்**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 3. [**Azure AI Foundry Discord-இல் சேர்ந்து நிபுணர்களையும் மற்ற டெவலப்பர்களையும் சந்திக்கவும்**](https://discord.com/invite/ByRwuEEgH4)
 
 ### 🌐 பல மொழி ஆதரவு
 
-#### GitHub Action மூலம் ஆதரிக்கப்படுகிறது (தானியங்கி மற்றும் எப்போதும் புதுப்பிக்கப்பட்டது)
+#### GitHub Action மூலம் ஆதரிக்கப்படுகிறது (தானாகவும் எப்போதும் புதுப்பிக்கப்படும்)
 
 <!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
-[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](./README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
+[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](./README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)
+
+> **உங்களுடைய கணினியில் நகல் எடுக்க விரும்புகிறீர்களா?**
+
+> இந்த கோப்பகம் 50+ மொழி மொழிபெயர்ப்புகளை கொண்டுள்ளது, இது பதிவிறக்க அளவைக் குறைக்கும் உதவும். மொழிபெயர்ப்புகளை இல்லாமல் நகல் எடுக்க sparse checkout ஐ பயன்படுத்தவும்:
+> ```bash
+> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
+> cd Web-Dev-For-Beginners
+> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
+> ```
+> இது பாடத்திட்டத்தை முழுமையாக முடிக்க தேவையான அனைத்தையும் விரைவான பதிவிறக்கத்துடன் வழங்கும்.
 <!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
 
-**கூடுதல் மொழிபெயர்ப்புகளை ஆதரிக்க விரும்பினால், [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) பட்டியலிடப்பட்டுள்ள மொழிகளைப் பார்க்கவும்**
+**கூடுதல் மொழிபெயர்ப்பு மொழிகள் ஆதரிக்கப்பட வேண்டும் என்றால், பட்டியலை [இங்கே](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) காணவும்**
+
+[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
+
+#### 🧑‍🎓 _நீங்கள் மாணவரா?_
+
+[**Student Hub பக்கத்தை**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடுங்கள். அங்கு ஆரம்பக் கல்வி வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வவுச்சர் பெறும் வழிமுறைகளும் உள்ளன. மாதாந்திரமாகப் புதுப்பிக்கப்படும் உள்ளடக்கத்தைக் காண இந்த பக்கம் நீங்கள் கூடுதல் பார்க்கத் தேவைப்படும்.
 
-[![Visual Studio Code-இல் திறக்கவும்](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
+### 📣 அறிவிப்பு - GitHub Copilot Agent முறை சவால்கள் புதியவை!
 
-#### 🧑‍🎓 _நீங்கள் ஒரு மாணவரா?_
+புதிய சவால் சேர்க்கப்பட்டது, பெரும்பாலான அத்தியாயங்களில் "GitHub Copilot Agent Challenge 🚀" என தேடுங்கள். இது GitHub Copilot மற்றும் Agent முறையை பயன்படுத்தி நீங்கள் முடிக்க வேண்டிய புதிய சவால் ஆகும். முன்பு Agent முறையைப் பயன்படுத்தவில்லையெனில், இது உரை உருவாக்குதல் மட்டுமின்றி கோப்புகள் உருவாக்கல் மற்றும் திருத்துதல், கட்டளை இயக்குதல் மற்றும் இன்னும் பலவற்றை செய்யக்கூடியது.
 
-[**மாணவர் Hub பக்கம்**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) பார்வையிடவும், அங்கு தொடக்க நிலை வளங்கள், மாணவர் தொகுப்புகள் மற்றும் இலவச சான்றிதழ் வவுச்சரைப் பெறுவதற்கான வழிகள் கிடைக்கும். இந்தப் பக்கத்தை புத்தகக்குறியாக்கி, மாதாந்திரமாக உள்ளடக்கத்தை மாற்றியமைக்கும் போது சரிபார்க்கவும்.
+### 📣 அறிவிப்பு - _Generative AI பயன்படுத்தி புதிய திட்டம்_ 
 
-### 📣 அறிவிப்பு - _Generative AI பயன்படுத்த புதிய திட்டம்_
+புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டுள்ளது, இதைப் பார்க்கவும் [திட்டம்](./9-chat-project/README.md)
 
-புதிய AI உதவியாளர் திட்டம் சேர்க்கப்பட்டுள்ளது, [திட்டத்தை](./09-chat-project/README.md) பார்வையிடவும்.
+### 📣 அறிவிப்பு - _Generative AI க்கான புதிய பாடத்திட்டம்_ JavaScript க்கானது வெளியிடப்பட்டது
 
-### 📣 அறிவிப்பு - _Generative AI பாடத்திட்டம்_ ஜாவாஸ்கிரிப்டுக்காக வெளியிடப்பட்டது
+எமது புதிய Generative AI பாடத்திட்டத்தை தவறவிடுங்கள்!
 
-எங்கள் புதிய Generative AI பாடத்திட்டத்தை தவறவிடாதீர்கள்!
+தொடங்க, [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்க்கவும்!
 
-தொடங்க [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்வையிடவும்!
+![Background](../../translated_images/background.148a8d43afde5730.ta.png)
 
-![பின்புலம்](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.ta.png)
+- அடிப்படை முதல் RAG வரை ஆய்வுகள் உள்ளன.
+- GenAI மற்றும் எங்களுடைய கூட்டாளி செயலியுடன் வரலாற்று காட்சிகளுடன் தொடர்பு கொள்ளவும்.
+- பொழுதுபோக்கான மற்றும் ஈர்க்கக்கூடிய கதை, கால பயணம் செய்யும் அனுபவம்!
 
-- அடிப்படைகள் முதல் RAG வரை உள்ள பாடங்கள்.
-- GenAI மற்றும் எங்கள் துணை செயலியைப் பயன்படுத்தி வரலாற்று கதாபாத்திரங்களுடன் தொடர்பு கொள்ளுங்கள்.
-- சுவாரஸ்யமான மற்றும் ஈர்க்கக்கூடிய கதை, நீங்கள் காலப்பயணம் செய்யப் போகிறீர்கள்!
+![character](../../translated_images/character.5c0dd8e067ffd693.ta.png)
 
-![கதாபாத்திரம்](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.ta.png)
 
-ஒவ்வொரு பாடமும் பின்வருவனவற்றை உள்ளடக்கியது:
-- ஒரு பணியை முடிக்கவும்
-- அறிவு சரிபார்ப்பு
-- கற்றல் தலைப்புகளை வழிநடத்த ஒரு சவால்:
-  - Prompting மற்றும் prompt engineering
-  - உரை மற்றும் பட பயன்பாட்டு உருவாக்கம்
-  - தேடல் பயன்பாடுகள்
+ஒவ்வொரு பாடத்திலும் ஒரு பணியை முடிக்கவும், அறிவு பரிசோதனை மற்றும் சவால்களை உள்ளடக்கியது, இவற்றை வழிநடத்தி நீங்கள் கீழ்க்காணும் தலைப்புகளை கற்றுக் கொள்ளலாம்:
+- வழிகாட்டும் கேள்விகள் மற்றும் வழிகாட்டல் பொறியியல்
+- உரை மற்றும் படம் செயலி உருவாக்குதல்
+- தேடல் செயலிகள்
 
-தொடங்க [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) பார்வையிடவும்!
+தொடங்க [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) பார்க்கவும்!
 
-## 🌱 தொடங்குதல்
 
-> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பதற்கான [சில பரிந்துரைகளை](for-teachers.md) சேர்த்துள்ளோம். எங்கள் [விவாதக் களத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) உங்கள் கருத்துகளைப் பகிர விரும்புகிறோம்!
 
-**[கற்றவர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஒவ்வொரு பாடத்திற்கும், முன்-வகுப்பு வினாடி வினாவுடன் தொடங்கவும், வகுப்பு பொருளை படித்து, பல்வேறு செயல்பாடுகளை முடித்து, வகுப்புக்குப் பின் வினாடி வினாவுடன் உங்கள் புரிதலைச் சரிபார்க்கவும்.
+## 🌱 தொடக்கம்
 
-உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, உங்கள் சக மாணவர்களுடன் இணைந்து திட்டங்களில் பணியாற்றுங்கள்! விவாதங்கள் எங்கள் [விவாதக் களத்தில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ஊக்குவிக்கப்படுகின்றன, எங்கள் மாடரேட்டர்கள் குழு உங்கள் கேள்விகளுக்கு பதிலளிக்க தயாராக இருக்கும்.
+> **ஆசிரியர்கள்**, இந்த பாடத்திட்டத்தை எப்படி பயன்படுத்துவது என்பது குறித்து [சிபாரிசுகள்](for-teachers.md) சேர்த்துள்ளோம். உங்கள் கருத்துக்களை எங்கள் [விவாதக் குழுவில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) பகிர்ந்து கொள்ள விரும்புகிறோம்!
 
-உங்கள் கல்வியை மேலும் மேம்படுத்த, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) ஐ ஆராய்வதை பரிந்துரைக்கிறோம், மேலும் கற்கும் பொருட்கள் கிடைக்கின்றன.
+**[கல்வியாளர்கள்](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, ஹரொரு பாடத்திலும் முன்-பாடவாய்ப்பு வினாத்தாளுடன் தொடங்கி, பாடக்க material அகங்களைப் படித்து, பல செயல்பாடுகளை முடித்து, பின்னர் பாட்டுப் பாட வினாத்தாளில் உங்கள் புரிதலைச் சோதிக்கவும்.
+
+உங்கள் கற்றல் அனுபவத்தை மேம்படுத்த, உங்கள் நண்பர்களுடன் இணைந்து திட்டங்களைக் கையாளவும்! விவாதங்கள் நமது [விவாதக் குழுவில்](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ஊக்குவிக்கப்படுகின்றன, எங்கே நமது மோதரேட்டர் குழு உங்கள் கேள்விகளுக்கு பதிலளிக்க தயாராக இருக்கும்.
+
+மேலும் உங்கள் கல்வியை மேம்படுத்த, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) இல் கூடுதல் படிப்பு பொருட்களை ஆராய பரிந்துரை செய்கின்றோம்.
 
 ### 📋 உங்கள் சூழலை அமைத்தல்
 
-இந்த பாடத்திட்டத்திற்கான மேம்பாட்டு சூழல் தயாராக உள்ளது! நீங்கள் தொடங்கும்போது, [Codespace](https://github.com/features/codespaces/) (_உலாவி அடிப்படையிலான, நிறுவல் தேவையற்ற சூழல்_) அல்லது உங்கள் கணினியில் உள்ள [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்ற உரை திருத்தியைப் பயன்படுத்தி உள்ளூர் முறையில் பாடத்திட்டத்தை இயக்கத் தேர்வு செய்யலாம்.
+இந்த பாடத்திட்டத்திற்கு ஒரு மேம்பாடு சூழல் தயார் செய்யப்பட்டுள்ளது! நீங்கள் தொடங்கும் போது, [Codespace](https://github.com/features/codespaces/) (_உலாவியில் இயங்கும், நிறுவல்களைத் தேவையில்லாத சூழல்_) அல்லது [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) போன்ற உரை தொகுப்புடைய உங்கள் கணினியில் பேசலாம்.
 
-#### உங்கள் களஞ்சியத்தை உருவாக்கவும்
-உங்கள் பணிகளை எளிதாகச் சேமிக்க, இந்த களஞ்சியத்தின் உங்கள் சொந்த பிரதியை உருவாக்க பரிந்துரைக்கப்படுகிறது. இதைச் செய்ய, பக்கத்தின் மேல் உள்ள **Use this template** பொத்தானைக் கிளிக் செய்யவும். இது பாடத்திட்டத்துடன் உங்கள் GitHub கணக்கில் ஒரு புதிய களஞ்சியத்தை உருவாக்கும்.
+#### உங்கள் கோப்பகத்தை உருவாக்கவும்
+உங்கள் பணியை எளிதில் சேமிக்க உங்கள் சொந்தக் காப்பியை உருவாக்குவது பரிந்துரைக்கப்படுகிறது. இதை செய்ய, பக்கத்தின் மேல் பகுதியில் உள்ள **Use this template** பொத்தானை கிளிக் செய்யவும். இது உங்கள் GitHub கணக்கில் இந்த பாடத்திட்டத்தின் நகலுடன் புதிய கோப்பகத்தை உருவாக்கும்.
 
-இந்த படிகளைப் பின்பற்றவும்:
-1. **களஞ்சியத்தை Fork செய்யவும்**: இந்த பக்கத்தின் மேல் வலது மூலையில் உள்ள "Fork" பொத்தானைக் கிளிக் செய்யவும்.
-2. **களஞ்சியத்தை Clone செய்யவும்**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+பின்வரும் படிகளை பின்பற்றி:
+1. **கோப்பகத்தை குறுக்கு செய்யவும் (Fork)**: இந்த பக்கத்தின் வலது மேல் மூலையில் உள்ள "Fork" பொத்தானை கிளிக் செய்யவும்.
+2. **கோப்பகத்தை கிளோன் செய்யவும்**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 
-#### Codespace-இல் பாடத்திட்டத்தை இயக்குதல்
+#### Codespaceஇல் பாடத்திட்டத்தை இயக்குதல்
 
-நீங்கள் உருவாக்கிய இந்த களஞ்சியத்தின் உங்கள் பிரதியில், **Code** பொத்தானைக் கிளிக் செய்து **Open with Codespaces** ஐத் தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace ஐ உருவாக்கும்.
+நீங்கள் உருவாக்கிய இந்தக் கோப்பகத்தின் நகலில், **Code** பொத்தானை கிளிக் செய்து **Open with Codespaces** ஐத் தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace ஐ உருவாக்கும்.
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.ta.png)
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ta.png)
 
-#### உங்கள் கணினியில் உள்ளூர் முறையில் பாடத்திட்டத்தை இயக்குதல்
+#### உங்கள் கணினியில் பாடத்திட்டத்தை இயக்குதல்
 
-இந்த பாடத்திட்டத்தை உங்கள் கணினியில் உள்ளூர் முறையில் இயக்க, ஒரு உரை திருத்தி, ஒரு உலாவி மற்றும் ஒரு கட்டளை வரி கருவி தேவைப்படும். எங்கள் முதல் பாடம், [தொடக்கத்திற்கான நிரலாக்க மொழிகள் மற்றும் கருவிகள்](../../1-getting-started-lessons/1-intro-to-programming-languages), இந்த கருவிகளுக்கான பல்வேறு விருப்பங்களை உங்களுக்குத் தேர்ந்தெடுக்க வழிநடத்தும்.
+இந்த பாடத்திட்டத்தை உங்கள் கணினியில் இயக்க, ஒரு உரை தொகுப்பான், உலாவி மற்றும் கட்டளைக்கட்டளை கருவி தேவை. எங்கள் முதல் பாடம் [Introduction to Programming Languages and Tools of the Trade](../../1-getting-started-lessons/1-intro-to-programming-languages) இதில் பல விருப்பங்களைக் கூறி உங்களுக்கு ஏற்றதைத் தேர்ந்தெடுக்க உதவும்.
 
-எங்கள் பரிந்துரை [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ஐ உங்கள் திருத்தியாகப் பயன்படுத்துவது, இது [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐ உள்ளடக்கியது. Visual Studio Code ஐ [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) பதிவிறக்கலாம்.
+நாம் பரிந்துரைக்கும் உரை தொகுப்பான் [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon), இதன் உட்பட்ட [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) அமையும் உண்டு. Visual Studio Code ஐ [இங்கே](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) இருந்து பதிவிறக்கலாம்.
 
-1. உங்கள் களஞ்சியத்தை உங்கள் கணினியில் Clone செய்யவும். இதைச் செய்ய, **Code** பொத்தானைக் கிளிக் செய்து URL ஐ நகலெடுக்கவும்:
 
-    [CodeSpace](./images/createcodespace.png)
+1. உங்கள் கணினிக்கு கோப்பகத்தை கிளோன் செய்யவும். இது **Code** பொத்தானை கிளிக் செய்து URL ஐ நகலெடுத்து செய்யலாம்:
 
-    பின்னர், [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உள்ள [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐ திறந்து, நீங்கள் நகலெடுத்த URL ஐ மாற்றி பின்வரும் கட்டளையை இயக்கவும்:
+    [CodeSpace](./images/createcodespace.png)
+அப்பொழுது, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) உள்ளே [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ஐ திறந்து, கீழ்காணும் கட்டளை இயக்கவும், `<your-repository-url>` என்பதனை நீங்கள் இப்போது பிரதிபலித்துள்ள URL-ஆக மாற்றவும்:
 
     ```bash 
     git clone <your-repository-url>
     ```
 
-2. Visual Studio Code-இல் கோப்புறையைத் திறக்கவும். இதைச் செய்ய, **File** > **Open Folder** ஐ கிளிக் செய்து நீங்கள் Clone செய்த கோப்புறையைத் தேர்ந்தெடுக்கவும்.
+2. Visual Studio Code இல் கோப்புறை திறக்கவும். **File** > **Open Folder** என்பதனை கிளிக் செய்து நீங்கள் தற்போது குறியிட்ட கோப்புறையை தேர்ந்தெடுக்கலாம்.
 
-> பரிந்துரைக்கப்பட்ட Visual Studio Code நீட்டிப்புகள்:
+>  பரிந்துரைக்கப்பட்ட Visual Studio Code விரிவாக்கங்கள்:
 >
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code-இல் HTML பக்கங்களை முன்னோட்டமாக பார்க்க
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - குறியீட்டை விரைவாக எழுத உதவ
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code இல் HTML பக்கங்களை முன்னோடி பார்க்க
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - நீங்கள் குறியீடு எழுதுவதில் வேகம் அதிகரிக்க உதவும்
 
-## 📂 ஒவ்வொரு பாடமும் உள்ளடக்கியது:
+## 📂 ஒவ்வொரு பாடத்திலும் செய்யப்பட்டுள்ளது:
 
-- விருப்பமான sketchnote
-- விருப்பமான கூடுதல் வீடியோ
-- பாடத்திற்கு முன் வினாடி வினா
-- எழுதப்பட்ட பாடம்  
-- திட்ட அடிப்படையிலான பாடங்களுக்கு, திட்டத்தை உருவாக்குவதற்கான படிப்படியாக வழிகாட்டிகள்  
-- அறிவு சரிபார்ப்புகள்  
-- ஒரு சவால்  
-- கூடுதல் வாசிப்பு  
-- பணிக்கட்டளை  
-- [பாடத்திற்குப் பிந்தைய வினாடி வினா](https://ff-quizzes.netlify.app/web/)
+- விருப்பமான ஸ்கெட்ச்நோட்
+- விருப்பமான கூடுதல் காணொளி
+- முன்னே பாடப் பழகல் குயிஸ்
+- எழுத்துப்பாடம்
+- திட்டம் சார்ந்த பாடங்களுக்கு, திட்டத்தை கட்டமைப்பதற்கான படிநிலை வழிகாட்டிகள்
+- அறிவு பரிசோதனைகள்
+- ஒரு சவால்
+- கூடுதல் வாசிப்பு
+- பின்-பாடக் குயிஸ் [post-lesson quiz](https://ff-quizzes.netlify.app/web/)
 
-> **வினாடி வினாக்கள் குறித்த ஒரு குறிப்பு**: அனைத்து வினாடி வினாக்களும் Quiz-app கோப்பகத்தில் உள்ளன, ஒவ்வொன்றும் மூன்று கேள்விகளுடன் மொத்தம் 48 வினாடி வினாக்கள் உள்ளன. அவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன. வினாடி வினா செயலியை உள்ளூர் கணினியில் இயக்கவோ அல்லது Azure-ல் வெளியிடவோ முடியும்; `quiz-app` கோப்பகத்தில் உள்ள வழிமுறைகளை பின்பற்றவும்.
+> **குயிஸ்கள் குறித்த குறிப்புகள்**: அனைத்து குயிஸ்களும் Quiz-app கோப்புறையில் உள்ளன, மூன்று கேள்விகளைக் கொண்ட மொத்தம் 48 குயிஸ்கள் இருக்கின்றன. அவை [இங்கே](https://ff-quizzes.netlify.app/web/) கிடைக்கின்றன, குயிஸ் பயன்பாட்டை உள்ளூர్లో ஓட்டவோ அல்லது Azure இல் வெளியிடவோ முடியும்; `quiz-app` கோப்புறையின் வழிமுறைகளை பின்பற்றவும்.
 
 ## 🗃️ பாடங்கள்
 
-|     |                       திட்டத்தின் பெயர்                       |                            கற்றல் கருத்துக்கள்                             | கற்றல் நோக்கங்கள்                                                                                                                 |                                                         இணைக்கப்பட்ட பாடம்                                                          |         ஆசிரியர்          |
+|     |                       திட்டத்தின் பெயர்                       |                            கற்றுக்கொள்ளப்படும் கருத்துக்கள்                             | கற்கை நோக்கங்கள்                                                                                                                 |                                                         சம்பந்தப்பட்ட பாடம்                                                          |         ஆசிரியர்          |
 | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     தொடங்குதல்                      |           நிரலாக்கம் மற்றும் தொழில்முறை கருவிகள் பற்றிய அறிமுகம்           | பெரும்பாலான நிரலாக்க மொழிகளின் அடிப்படை அம்சங்கள் மற்றும் தொழில்முறை டெவலப்பர்கள் தங்கள் வேலையைச் செய்ய உதவும் மென்பொருள் பற்றி கற்றுக்கொள்ளுங்கள் | [நிரலாக்க மொழிகள் மற்றும் தொழில்முறை கருவிகள் பற்றிய அறிமுகம்](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         ஜாஸ்மின்         |
-| 02  |                     தொடங்குதல்                      |             GitHub அடிப்படைகள், குழுவுடன் வேலை செய்வது             | உங்கள் திட்டத்தில் GitHub-ஐ எப்படி பயன்படுத்துவது, ஒரு குறியீட்டு அடிப்படையில் பிறருடன் எப்படி ஒத்துழைக்க வேண்டும்                                                    |                            [GitHub அறிமுகம்](./1-getting-started-lessons/2-github-basics/README.md)                             |          பிளோர்          |
-| 03  |                     தொடங்குதல்                      |                             அணுகல்                              | வலை அணுகல் அடிப்படைகளை கற்றுக்கொள்ளுங்கள்                                                                                               |                       [அணுகல் அடிப்படைகள்](./1-getting-started-lessons/3-accessibility/README.md)                       |       கிறிஸ்டோபர்       |
-| 04  |                        ஜேஎஸ் அடிப்படைகள்                         |                         ஜாவாஸ்கிரிப்ட் தரவுத் வகைகள்                          | ஜாவாஸ்கிரிப்ட் தரவுத் வகைகளின் அடிப்படைகளை கற்றுக்கொள்ளுங்கள்                                                                                                 |                                       [தரவுத் வகைகள்](./2-js-basics/1-data-types/README.md)                                        |         ஜாஸ்மின்         |
-| 05  |                        ஜேஎஸ் அடிப்படைகள்                         |                         செயல்பாடுகள் மற்றும் முறைகள்                          | செயல்பாடுகள் மற்றும் முறைகள் பற்றி கற்றுக்கொண்டு, ஒரு செயலியின் தர்க்க ஓட்டத்தை நிர்வகிக்கவும்                                                             |                              [செயல்பாடுகள் மற்றும் முறைகள்](./2-js-basics/2-functions-methods/README.md)                               | ஜாஸ்மின் மற்றும் கிறிஸ்டோபர் |
-| 06  |                        ஜேஎஸ் அடிப்படைகள்                         |                        ஜேஎஸ் மூலம் முடிவுகளை எடுப்பது                        | முடிவெடுக்கும் முறைகளைப் பயன்படுத்தி உங்கள் குறியீட்டில் நிபந்தனைகளை உருவாக்குவது எப்படி                                                           |                                 [முடிவெடுக்கும் முறைகள்](./2-js-basics/3-making-decisions/README.md)                                  |         ஜாஸ்மின்         |
-| 07  |                        ஜேஎஸ் அடிப்படைகள்                         |                            வரிசைகள் மற்றும் மடக்கங்கள்                            | ஜாவாஸ்கிரிப்டில் தரவுகளை வரிசைகள் மற்றும் மடக்கங்களைப் பயன்படுத்தி வேலை செய்யுங்கள்                                                                                 |                                   [வரிசைகள் மற்றும் மடக்கங்கள்](./2-js-basics/4-arrays-loops/README.md)                                    |         ஜாஸ்மின்         |
-| 08  |       [டெரேரியம்](./3-terrarium/solution/README.md)       |                            HTML நடைமுறையில்                            | ஒரு ஆன்லைன் டெரேரியத்தை உருவாக்க HTML உருவாக்கவும், அமைப்பை உருவாக்குவதில் கவனம் செலுத்தவும்                                                         |                                 [HTML அறிமுகம்](./3-terrarium/1-intro-to-html/README.md)                                 |           ஜென்           |
-| 09  |       [டெரேரியம்](./3-terrarium/solution/README.md)       |                            CSS நடைமுறையில்                             | ஆன்லைன் டெரேரியத்தை அலங்கரிக்க CSS உருவாக்கவும், CSS அடிப்படைகளில் கவனம் செலுத்தவும், பக்கம் பதிலளிக்கக்கூடியதாக இருக்க வேண்டும்                     |                                  [CSS அறிமுகம்](./3-terrarium/2-intro-to-css/README.md)                                  |           ஜென்           |
-| 10  |            [டெரேரியம்](./3-terrarium/solution/README.md)            |                 ஜாவாஸ்கிரிப்ட் க்ளோஷர்கள், DOM மேலாண்மை                  | டெரேரியத்தை ஒரு இழுவை/விடு இடைமுகமாக செயல்படுத்த ஜாவாஸ்கிரிப்ட் உருவாக்கவும், க்ளோஷர்கள் மற்றும் DOM மேலாண்மையில் கவனம் செலுத்தவும்             |                  [ஜாவாஸ்கிரிப்ட் க்ளோஷர்கள், DOM மேலாண்மை](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           ஜென்           |
-| 11  |          [டைப்பிங் விளையாட்டு](./4-typing-game/solution/README.md)          |                          டைப்பிங் விளையாட்டை உருவாக்குங்கள்                           | உங்கள் ஜாவாஸ்கிரிப்ட் செயலியின் தர்க்கத்தை இயக்க விசைப்பலகை நிகழ்வுகளை எப்படி பயன்படுத்துவது பற்றி கற்றுக்கொள்ளுங்கள்                                                          |                                [நிகழ்வு இயக்கப்பட்ட நிரலாக்கம்](./4-typing-game/typing-game/README.md)                                |       கிறிஸ்டோபர்       |
-| 12  | [பச்சை உலாவி நீட்சிகள்](./5-browser-extension/solution/README.md) |                         உலாவிகளுடன் வேலை செய்ய                          | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு மற்றும் உலாவி நீட்சியின் முதல் கூறுகளை எப்படி உருவாக்குவது என்பதை கற்றுக்கொள்ளுங்கள்                               |                               [உலாவிகள் பற்றி](./5-browser-extension/1-about-browsers/README.md)                                |           ஜென்           |
-| 13  | [பச்சை உலாவி நீட்சிகள்](./5-browser-extension/solution/README.md) | படிவம் உருவாக்குதல், API அழைப்புகள் மற்றும் உள்ளூர் சேமிப்பகத்தில் மாறிகளை சேமித்தல் | உள்ளூர் சேமிப்பகத்தில் சேமிக்கப்பட்ட மாறிகளைப் பயன்படுத்தி API ஐ அழைக்க உலாவி நீட்சியின் ஜாவாஸ்கிரிப்ட் கூறுகளை உருவாக்குங்கள்                      |                [APIகள், படிவங்கள் மற்றும் உள்ளூர் சேமிப்பகம்](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           ஜென்           |
-| 14  | [பச்சை உலாவி நீட்சிகள்](./5-browser-extension/solution/README.md) |          உலாவியில் பின்னணி செயல்முறைகள், வலை செயல்திறன்          | உலாவியின் பின்னணி செயல்முறைகளை நீட்சியின் ஐகானை நிர்வகிக்க பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றுக்கொள்ளுங்கள்   |             [பின்னணி பணிகள் மற்றும் செயல்திறன்](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           ஜென்           |
-| 15  |           [விண்வெளி விளையாட்டு](./6-space-game/solution/README.md)           |             ஜாவாஸ்கிரிப்ட் மூலம் மேம்பட்ட விளையாட்டு மேம்பாடு             | ஒரு விளையாட்டை உருவாக்குவதற்கு முன்னேற்பாடாக வகுப்புகள் மற்றும் கலவையின் மூலம் பரம்பரை மற்றும் பப்/சப் முறை பற்றி கற்றுக்கொள்ளுங்கள்              |                      [மேம்பட்ட விளையாட்டு மேம்பாட்டிற்கான அறிமுகம்](./6-space-game/1-introduction/README.md)                       |          கிறிஸ்          |
-| 16  |           [விண்வெளி விளையாட்டு](./6-space-game/solution/README.md)           |                           கேன்வாஸ் வரைதல்                            | திரையில் கூறுகளை வரைய கேன்வாஸ் API பற்றி கற்றுக்கொள்ளுங்கள்                                                                       |                                [கேன்வாஸ் வரைதல்](./6-space-game/2-drawing-to-canvas/README.md)                                |          கிறிஸ்          |
-| 17  |           [விண்வெளி விளையாட்டு](./6-space-game/solution/README.md)           |                   திரையில் கூறுகளை நகர்த்துதல்                    | கார்டிசியன் கோஆர்டினேட்ஸ் மற்றும் கேன்வாஸ் API ஐப் பயன்படுத்தி கூறுகள் எப்படி நகர்த்தப்படுகின்றன என்பதை கற்றுக்கொள்ளுங்கள்                                            |                           [கூறுகளை நகர்த்துதல்](./6-space-game/3-moving-elements-around/README.md)                           |          கிறிஸ்          |
-| 18  |           [விண்வெளி விளையாட்டு](./6-space-game/solution/README.md)           |                          மோதல் கண்டறிதல்                           | கூறுகள் ஒன்றுடன் ஒன்று மோதுவதையும், அவை எப்படி எதிர்வினை அளிக்கின்றன என்பதையும் கற்றுக்கொள்ளுங்கள்; விளையாட்டின் செயல்திறனை உறுதிசெய்ய ஒரு குளிரூட்டல் செயல்பாட்டை வழங்கவும்    |                              [மோதல் கண்டறிதல்](./6-space-game/4-collision-detection/README.md)                              |          கிறிஸ்          |
-| 19  |           [விண்வெளி விளையாட்டு](./6-space-game/solution/README.md)           |                             மதிப்பெண் கணக்கீடு                              | விளையாட்டின் நிலை மற்றும் செயல்திறனை அடிப்படையாகக் கொண்டு கணித கணக்கீடுகளைச் செய்யுங்கள்                                                                |                                    [மதிப்பெண் கணக்கீடு](./6-space-game/5-keeping-score/README.md)                                    |          கிறிஸ்          |
-| 20  |           [விண்வெளி விளையாட்டு](./6-space-game/solution/README.md)           |                     விளையாட்டை முடித்தல் மற்றும் மீண்டும் தொடங்குதல்                     | சொத்துக்களை சுத்தம் செய்தல் மற்றும் மாறி மதிப்புகளை மீண்டும் அமைத்தல் உட்பட விளையாட்டை முடித்தல் மற்றும் மீண்டும் தொடங்குதல் பற்றி கற்றுக்கொள்ளுங்கள்                              |                                [முடிவு நிலை](./6-space-game/6-end-condition/README.md)                                 |          கிறிஸ்          |
-| 21  |         [வங்கி செயலி](./7-bank-project/solution/README.md)          |                 ஒரு வலை செயலியில் HTML டெம்ப்ளேட்கள் மற்றும் வழிகள்                 | வழிமுறைகள் மற்றும் HTML டெம்ப்ளேட்களைப் பயன்படுத்தி ஒரு பல பக்க வலைத்தளத்தின் கட்டமைப்பை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்ளுங்கள்                             |                            [HTML டெம்ப்ளேட்கள் மற்றும் வழிகள்](./7-bank-project/1-template-route/README.md)                             |          யோஹன்          |
-| 22  |         [வங்கி செயலி](./7-bank-project/solution/README.md)          |                  உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்குதல்                   | படிவங்களை உருவாக்குதல் மற்றும் சரிபார்ப்பு நடைமுறைகளை கையாள்வது பற்றி கற்றுக்கொள்ளுங்கள்                                                                          |                                           [படிவங்கள்](./7-bank-project/2-forms/README.md)                                           |          யோஹன்          |
-| 23  |         [வங்கி செயலி](./7-bank-project/solution/README.md)          |                   தரவுகளை பெறுதல் மற்றும் பயன்படுத்தும் முறைகள்                   | உங்கள் செயலியில் தரவுகள் எப்படி உள்ளே மற்றும் வெளியே செல்கின்றன, அவற்றை எப்படி பெறுவது, சேமிக்க வேண்டும், மற்றும் கைவிட வேண்டும்                                                 |                                            [தரவு](./7-bank-project/3-data/README.md)                                            |          யோஹன்          |
-| 24  |         [வங்கி செயலி](./7-bank-project/solution/README.md)          |                      நிலை மேலாண்மை கருத்துக்கள்                      | உங்கள் செயலி நிலையை எப்படி தக்கவைத்துக் கொள்கிறது மற்றும் அதை நிரலாக்க முறையில் எப்படி நிர்வகிக்க வேண்டும் என்பதை கற்றுக்கொள்ளுங்கள்                                                              |                                [நிலை மேலாண்மை](./7-bank-project/4-state-management/README.md)                                |          யோஹன்          |
-| 25 | [உலாவி/விஎஸ் கோடு](../../8-code-editor) | VScode உடன் வேலை செய்ய | ஒரு குறியீட்டு தொகுப்பாளரை எப்படி பயன்படுத்துவது என்பதை கற்றுக்கொள்ளுங்கள் | [VScode குறியீட்டு தொகுப்பாளரைப் பயன்படுத்தவும்](./8-code-editor/1-using-a-code-editor/README.md) | கிறிஸ் |
-| 26 | [ஏஐ உதவியாளர்கள்](./9-chat-project/README.md) | ஏஐ உடன் வேலை செய்ய | உங்கள் சொந்த ஏஐ உதவியாளரை உருவாக்குவது எப்படி கற்றுக்கொள்ளுங்கள் | [ஏஐ உதவியாளர் திட்டம்](./9-chat-project/README.md) | கிறிஸ் |
+| 01  |                     தொடக்கம்                      |           நிரலாக்க அறிமுகம் மற்றும் தொழில்சாதனங்கள்           | பெரும்பாலான நிரலாக்க மொழிகளின் அடிப்படைகளை கற்றுக்கொள்ளவும் மற்றும் தொழில்முறை டெவலப்பர்கள் தங்களின் பணி செய்ய உதவும் மென்பொருள் பற்றி தெரிந்து கொள்ளவும் | [நிரலாக்க மொழிகள் மற்றும் தொழில்சாதனங்கள் அறிமுகம்](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     தொடக்கம்                      |             GitHub அடிப்படைகள், ஒரு குழுவுடன் பணியாற்றும் முறைகள்             | உங்கள் திட்டத்தில் GitHub ஐ எப்படி பயன்படுத்துவது, மற்றவர்களுடன் குறியீடு பரிமாற்றம் செய்வது எப்படி                                                                |                            [GitHub அறிமுகம்](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     தொடக்கம்                      |                             அணுகத்தக்க தன்மை                              | வலை அணுகத்தக்க தன்மை அடிப்படைகள் கற்றுக்கொள்ளவும்                                                                                               |                       [அணுகத்தக்க தன்மை அடிப்படைகள்](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        JS அடிப்படைகள்                         |                         JavaScript தரவுத் தகுதிகள்                          | JavaScript தரவுத் தகுதிகளின் அடிப்படை                                                                                                 |                                       [தரவுத் தகுதிகள்](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        JS அடிப்படைகள்                         |                         செயல்பாடுகள் மற்றும் முறைமைகள்                          | பயன்பாட்டின் நியமநிலை ஒற்றுமையை நிர்வகிக்க செயல்பாடுகள் மற்றும் முறைமைகளை பற்றி கற்றுக்கொள்ளவும்                                                             |                              [செயல்பாடுகள் மற்றும் முறைமைகள்](./2-js-basics/2-functions-methods/README.md)                               | Jasmine மற்றும் Christopher |
+| 06  |                        JS அடிப்படைகள்                         |                        JS மூலம் முடிவெடுக்கல்                        | உங்கள் குறியீட்டில் முடிவெடுத்தல் முறைகளை உருவாக்க கற்றுக்கொள்ளவும்                                                           |                                 [முடிவெடுத்தல்](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        JS அடிப்படைகள்                         |                            வரிசைகள் மற்றும் சுற்றிகள்                            | JavaScript-இல் வரிசைகள் மற்றும் சுற்றிகள் மூலம் தரவை கையாளவும்                                                                                 |                                   [வரிசைகள் மற்றும் சுற்றிகள்](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            HTML நடைமுறை                            | ஆன்லைன் டெரேரியத்தை உருவாக்கும் HTML கட்டமைவிட்டு, கட்டமைப்புக்கு கவனம் செலுத்தவும்                                                         |                                 [HTML அறிமுகம்](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            CSS நடைமுறை                             | ஆன்லைன் டெரேரியத்தை அலங்கரிக்க CSS கட்டமைத்து, அடிப்படையான CSS மற்றும் பக்கம் பதிலளிக்கும் முறைகள் பற்றி கற்றுக்கொள்ளவும்                     |                                  [CSS அறிமுகம்](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript மூடுபெயர்ச்சி, DOM செயலாக்கம்                  | டெரேரியத்தை ஒரு டிராக்/டிராப் இடைமுகமாக செயல்படுத்த JavaScript எழுதுக, மூடுபெயர்ச்சி மற்றும் DOM செயலாக்கம் பற்றி கவனம் செலுத்தவும்             |                  [JavaScript மூடுபெயர்ச்சி, DOM செயலாக்கம்](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          টাইப்பிங் கேம் உருவாக்கல்                           | உங்கள் JavaScript பயன்பாட்டின் நியமநிலையை இயக்க விசைப்பலகை நிகழ்வுகளை எப்படி பயன்படுத்துவது என்று கற்றுக்கொள்ளவும்                                                          |                                [நிகழ்வு சார்ந்த நிரலாக்கம்](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         உலாவிகள் வேலை செயல்                          | உலாவிகள் எப்படி வேலை செய்கின்றன, அவற்றின் வரலாறு, ஒரு உலாவி நீட்டிப்பின் முதல் கூறுகளை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்ளவும்                               |                               [உலாவிகள் குறித்த](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | படிவம் உருவாக்கல், API அழைப்பும் உள்ளக சேமிப்பில் 변수 சேமிப்பும் | API ஐ அழைக்க உலாவி நீட்டிப்பின் JavaScript கூறுகளை உருவாக்கவும்; உள்ளக சேமிப்பில் சேமிக்கப்பட்ட மாறி மதிப்புகளை பயன்படுத்தவும்                      |                [APIs, படிவங்கள் மற்றும் உள்ளக சேமிப்பு](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          உலாவி பின்னணி செயலிகள், வலை செயல்திறன்          | நீட்டிப்பின் ஐகானை நிர்வகிக்க உலாவியின் பின்னணி செயலிகளைப் பயன்படுத்தவும்; வலை செயல்திறன் மற்றும் சில மேம்பாடுகள் பற்றி கற்றுக்கொள்ளவும்   |             [பின்னணி பணிகள் மற்றும் செயல்திறன்](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](./6-space-game/solution/README.md)           |             JavaScript உதவி அதிகரிக்கப்பட்ட விளையாட்டு மேம்பாடு             | வகுப்புகளையும் கூட்டமைப்பையும் பயன்படுத்தி பேருரிமையை கற்றுக்கொள்ளவும் மற்றும் Pub/Sub வடிவமைப்பை அறிந்து விளையாட்டைப் போடும் முன் துவங்கவும்              |                      [மேம்பட்ட விளையாட்டு மேம்பாடு அறிமுகம்](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           கேன்வாஸ் வரைதல்                            | திரையில் கூறுகளை வரைய தேவைப்படும் Canvas API பற்றி கற்றுக்கொள்ளவும்                                                                       |                                [கேன்வாஸ் வரைதல்](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   திரையில் கூறுகள் நகர்த்தல்                    | கார்டிசியன் ஒருங்குத்தல்கள் மற்றும் Canvas API உதவியுடன் கூறுகள் எப்படி நகர்கின்றன என்பதை கண்டறியவும்                                            |                           [குறுப்புகளை நகர்த்தல்](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          மோதி கண்டறிதல்                           | கூறுகள் எப்படி ஒருவரை ஒருவர் மோதி விளையாட்டு செயல்திறனை உறுதி செய்ய ஒரு குளிர் செயல்பாட்டுடன் செயல்படுகிறார்கள் என்பதைக் கற்றுக்கொள்ளவும்    |                              [மோதி கண்டறிதல்](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             மதிப்பெண் வைத்தல்                              | விளையாட்டின் நிலை மற்றும் செயல்திறனை அடிப்படையாகக் கொண்டு கணக்குகளைச் செய்யவும்                                                                |                                    [மதிப்பெண் வைத்தல்](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     விளையாட்டை முடித்தல் மற்றும் மீட்டமைத்தல்                     | விளையாட்டை முடித்தல் மற்றும் மீட்டமைப்புக்கள், சொத்துகளை சுத்தம் செய்தல் மற்றும் மாறிலி மதிப்புகளை மீட்டமைத்தல் பற்றி கற்றுக்கொள்ளவும்                              |                                [முடிவு நிபந்தனை](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 வலை பயன்பாட்டில் HTML வார்ப்புருக்கள் மற்றும் பாதைகள்                 | பல பக்கங்கள் கொண்ட வலைத்தள கட்டமைப்பை பாதை வழிநடத்தல் மற்றும் HTML வார்ப்புருக்களைக் கொண்டு உருவாக்கும் முறை பற்றி கற்றுக்கொள்ளவும்                             |                            [HTML வார்ப்புருக்கள் மற்றும் பாதைகள்](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  உள்நுழைவு மற்றும் பதிவு படிவம் உருவாக்கல்                   | படிவங்கள் உருவாக்கல் மற்றும் சரிபார்ப்பு முறைகள் பற்றி கற்றுக்கொள்ளவும்                                                                          |                                           [படிவங்கள்](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   தரவு பெறுதல் மற்றும் பயன்பாடு                   | உங்கள் பயன்பாட்டிலே தரவு எப்படி வந்து செல்கிறது, அதை பெற்றல், சேமிப்பு மற்றும் திருட்டு செய்வது பற்றி கற்றுக்கொள்ளவும்                                                 |                                            [தரவு](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      நிலை நிர்வாகம் கருத்துக்கள்                      | உங்கள் பயன்பாடு நிலையை எவ்வாறு வைத்திருக்கிறது மற்றும் அதை நிரல் முறையில் எப்படி நிர்வகிப்பது என்பதைக் கற்றுக்கொள்ளவும்                                                              |                                [நிலை நிர்வாகம்](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 25 | [Browser/VScode Code](../../8-code-editor) | VScode உடன் பணியாற்றுதல் | குறியீடு தொகுப்பி எப்படி பயன்படுத்துவது கற்றுக்கொள்ளவும் | [VScode Code Editor பயன்படுத்துக](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AI உதவியாளர்கள்](./9-chat-project/README.md) | AI உடன் பணியாற்றுதல் | உங்கள் சொந்த AI உதவியாளரை எப்படி உருவாக்குவது கற்றுக்கொள்ளவும் | [AI உதவியாளர் திட்டம்](./9-chat-project/README.md) | Chris |
 
-## 🏫 கல்வி முறை
+## 🏫 பாடத்திட்டம்
 
-எங்கள் பாடத்திட்டம் இரண்டு முக்கியமான கல்வி முறைகளை மனதில் வைத்து வடிவமைக்கப்பட்டுள்ளது:  
-* திட்ட அடிப்படையிலான கற்றல்  
-* அடிக்கடி வினாடி வினாக்கள்  
+எங்கள் பாடத்திட்டம் இரண்டு முக்கியக் கல்விக் கொள்கைகளுடன் வடிவமைக்கப்பட்டுள்ளது:
+* திட்டம் சார்ந்த கற்றல்
+* அடிக்கடி குயிஸ்கள்
 
-இந்த திட்டம் ஜாவாஸ்கிரிப்ட், HTML மற்றும் CSS ஆகியவற்றின் அடிப்படைகளை மட்டுமல்லாமல், இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் தொழில்நுட்பங்களையும் கற்பிக்கிறது. மாணவர்கள் டைப்பிங் விளையாட்டு, மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் நட்பு உலாவி நீட்சிகள், விண்வெளி தாக்குதல் விளையாட்டு மற்றும் வணிகங்களுக்கான வங்கி செயலியை உருவாக்குவதன் மூலம் கைகூலி அனுபவத்தைப் பெற வாய்ப்பு கிடைக்கும். இந்த தொடர் முடிவடையும் போது, மாணவர்கள் வலை மேம்பாட்டின் ஒரு வலுவான புரிதலைப் பெறுவார்கள்.
+இந்த திட்டம் JavaScript, HTML மற்றும் CSS அடிப்படைகளை, மேலும் இன்றைய வலை டெவலப்பர்கள் பயன்படுத்தும் சமீபத்திய கருவிகள் மற்றும் தொழில்நுட்பங்களை கற்பிக்கிறது. மாணவர்கள் ஒரு டைப் செய்யும் கேம், மெய்நிகர் டெரேரியம், சுற்றுச்சூழல் பொருந்திய உலாவி நீட்டிப்பு, விண்வெளி படையல் பாணி விளையாட்டு மற்றும் வணிக கணக்கியல் பயன்பாட்டை உருவாக்கும் மூலம் நேரடித் அனுபவம் பெறுவர். தொடர் முடிவுக்கு நிலையில், மாணவர்கள் வலை மேம்பாட்டின் உறுதியான புரிதலைப் பெறுவர்.
 
-> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக Microsoft Learn-ல் எடுத்துக்கொள்ளலாம்!
+> 🎓 இந்த பாடத்திட்டத்தின் முதல் சில பாடங்களை Microsoft Learn இல் [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) ஆக எடுக்கலாம்!
 
-பாடங்கள் திட்டங்களுடன் இணைந்திருப்பதை உறுதிசெய்து, மாணவர்களுக்கு கற்றல் செயல்முறை மேலும் ஈர்க்கக்கூடியதாக மாறுகிறது மற்றும் கருத்துக்களின் நினைவாற்றல் அதிகரிக்கப்படும். மேலும், ஜாவாஸ்கிரிப்ட் அடிப்படைகளில் பல தொடக்க பாடங்களை எழுதினோம், அவை "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" என்ற வீடியோ தொடர் தொகுப்பில் உள்ள வீடியோவுடன் இணைக்கப்பட்டுள்ளன, இதன் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்திற்கும் பங்களித்துள்ளனர்.
+திட்டங்களுக்கு எந்த வடிவமைப்பும் பொருந்திநிலை பின்பற்றுவதால் மாணவர்களுக்கான ஈடுபாட்டும் கருத்துக்கள் நீடிக்கும் தன்மையும் அதிகரிக்கும். JavaScript அடிப்படைகள் குறைந்தபட்ச வித்தியாசங்களை அறிமுகப்படுத்த சில தொடக்க பாடங்களும், "[JavaScript தொடக்க தொடர்](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" வீடியோ பாடத் தொகுப்பில் இருந்து ஒரு காணொளியும் இணைக்கப்பட்டுள்ளது, அதுவரையில் சில ஆசிரியர்கள் இந்த பாடத்திட்டத்திற்கு பங்களித்துள்ளனர்.
 
-மேலும், ஒரு வகுப்புக்கு முன் குறைந்த அழுத்த வினாடி வினா ஒரு தலைப்பை கற்றுக்கொள்வதற்கான மாணவரின் நோக்கத்தை அமைக்கிறது, அதே நேரத்தில் வகுப்புக்குப் பிறகு ஒரு இரண்டாவது வினாடி வினா மேலும் நினைவாற்றலை உறுதிசெய்கிறது. இந்த பாடத்திட்டம் நெகிழ்வான மற்றும் மகிழ்ச்சியானதாக வடிவமைக்கப்பட்டுள்ளது மற்றும் முழுமையாக அல்லது பகுதியளவில் எடுத்துக்கொள்ளலாம். திட்டங்கள் சிறியதாக தொடங்கி, 12 வார சுழற்சியின் இறுதியில் அதிகமாக சிக்கலானதாக மாறுகின்றன.
+மேலும், வகுப்புக்கு முன்தானியச்சாதனம் ஒரு குறைந்தபட்சமான குயிஸ் மூலம் மாணவரின் படிக்கும் நோக்கம் சமர்ப்பிக்கப்படுகிறது, வகுப்புக்குப் பின்பு இரண்டாவது குயிஸ் தன்மை மையமாக இருக்கும். இந்த பாடத்திட்டம் நெகிழ்வாகவும் வேடிக்கையாகவும் உருவாக்கப்பட்டுள்ளது மற்றும் முழுவதும் அல்லது பகுதியளவு ஏற்றுக்கொள்ளக்கூடியது. 12 வாரம் தொடர்ந்த இந்த திட்டங்கள் ஆரம்பத்தில் சிறியவை, இறுதியில் சிக்கலானவையாக மாறும்.
 
-நாங்கள் ஜாவாஸ்கிரிப்ட் ஃபிரேம்வொர்க்குகளை அறிமுகப்படுத்துவதை நோக்கமாகக் கொண்டுள்ளோம், ஒரு ஃபிரேம்வொர்க்கை ஏற்றுக்கொள்வதற்கு முன் ஒரு வலை டெவலப்பராக அடிப்படை திறன்களை கற்றுக்கொள்வது முக்கியம். இந்த பாடத்திட்டத்தை முடித்த பிறகு, மற்றொரு வீடியோ தொகுப்பின் மூலம் Node.js பற்றி கற்றுக்கொள்வது ஒரு நல்ல அடுத்த படியாக இருக்கும்: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+JavaScript கட்டமைப்புக்களை அறிமுகப்படுத்தாமல் வலைப்பDeveloper ஆக தேவையான அடிப்படைக் கையறைகள் மீது கவனம் செலுத்த இந்த திட்டம் வடிவமைக்கப்பட்டுள்ளது. இந்த பாடத்திட்டத்தை முடிக்க அடுத்தடுத்த ஓர் நல்ல படி Node.js பற்றி தனி வீடியோ தொகுப்பின் மூலம் கற்றுக்கொள்வது "[Node.js தொடக்க தொடர்](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" ஆகும்.
 
-> எங்கள் [நடத்தை விதிமுறைகள்](CODE_OF_CONDUCT.md) மற்றும் [பங்களிப்பு](CONTRIBUTING.md) வழிகாட்டுதல்களை பார்வையிடவும். உங்கள் கட்டுமானமான கருத்துக்களை வரவேற்கிறோம்!
+> எங்கள் [ஒழுங்கு செயல்முறை](CODE_OF_CONDUCT.md) மற்றும் [பங்களிப்பு](CONTRIBUTING.md) வழிகாட்டுதல்களை பார்வையிடவும். உங்கள் கட்டுமான கருத்துக்களை வரவேற்கின்றோம்!
 
 
-## 🧭 இணையதளத்தை ஆஃப்லைனில் அணுகுதல்
+## 🧭 இணையமற்ற அணுகல்
 
-இந்த ஆவணங்களை [Docsify](https://docsify.js.org/#/) பயன்படுத்தி ஆஃப்லைனில் இயக்கலாம். இந்த களஞ்சியத்தை Fork செய்யவும், உங்கள் உள்ளூர் கணினியில் [Docsify ஐ நிறுவவும்](https://docsify.js.org/#/quickstart), பின்னர் இந்த களஞ்சியத்தின் மூல கோப்பகத்தில் `docsify serve` என தட்டச்சு செய்யவும். இணையதளம் உங்கள் localhost இல் 3000 என்ற போர்ட்டில் வழங்கப்படும்: `localhost:3000`.
+[Docsify](https://docsify.js.org/#/) பயன்படுத்தி இந்த ஆவணத்தை இணையமின்றி இயக்கலாம். இந்த தொகுப்பைக் fork செய்து, [Docsify ஐ நிறுவி](https://docsify.js.org/#/quickstart) உங்கள் உள்ளூர் கணினியில் நிறுவி, பின்னர் இந்த தொகுப்பின் முகப்புக் கோப்புறையில் `docsify serve` எனக் கமாண்ட் செய்யவும். இந்த இணையத்தளமும் உங்கள் உள்ளூரில் வடிவமைக்கப்பட்ட 3000 போர்ட்டில் சேவையாக இருக்கும்: `localhost:3000`.
 
 ## 📘 PDF
 
-அனைத்து பாடங்களின் PDF ஐ [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம்.
+எல்லா பாடங்களின் PDF இனை [இங்கே](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) காணலாம்.
 
 
-## 🎒 பிற பாடநெறிகள்
+## 🎒 பிற பாட வகுப்புகள்
+எங்கள் குழு பிற பாடநெறிகளை தயாரிக்கிறது! பார்வையிடவும்:
 
-எங்கள் குழு பிற பாடநெறிகளையும் தயாரிக்கிறது! பாருங்கள்:
+<!-- CO-OP TRANSLATOR OTHER COURSES START -->
+### LangChain
+[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
+[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
 
-- [துவக்கத்திற்கான MCP](https://aka.ms/mcp-for-beginners)  
-- [தொலைவிலிருந்து செயற்கை நுண்ணறிவு](https://aka.ms/edgeai-for-beginners)
-- [தொடக்க நிலை XR மேம்பாடு](https://github.com/microsoft/xr-development-for-beginners)  
-- [Agentic பயன்பாட்டிற்கான GitHub Copilot கற்றல்](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)  
-- [C#/.NET டெவலப்பர்களுக்கான GitHub Copilot கற்றல்](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)  
-- [உங்கள் சொந்த Copilot சாகசத்தைத் தேர்ந்தெடுக்கவும்](https://github.com/microsoft/CopilotAdventures)  
+---
+
+### Azure / Edge / MCP / Agents
+[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+ 
+### Generative AI Series
+[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
+[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
+[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
+
+---
+ 
+### Core Learning
+[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
+[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
+[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
+[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
+[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
+[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
+[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
+
+---
+ 
+### Copilot Series
+[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
+[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
+[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
+<!-- CO-OP TRANSLATOR OTHER COURSES END -->
 
-## உதவி பெறுதல்  
+## உதவிக்கு
 
-AI பயன்பாடுகளை உருவாக்குவதில் சிக்கல் அல்லது கேள்விகள் இருந்தால், கீழே உள்ள இணைப்பில் சேரவும்:  
+AI செயலிகளை உருவாக்கும்போது நீங்கள் இடையூறடைந்தால் அல்லது கேள்விகள் இருந்தால், MCP பற்றி மற்ற மாணவர்களும் அனுபவமுள்ள வடிவமைப்பாளர்களுடன் கலந்துரையாடவும். கேள்விகள் வரவேற்கப்படும் மற்றும் அறிவு சுதந்திரமாக பகிரப்படும் ஆதரவான சமூகம் இது.
 
-[![Azure AI Foundry Discord](https://img.shields.io/badge/Discord-Azure_AI_Foundry_Community_Discord-blue?style=for-the-badge&logo=discord&color=5865f2&logoColor=fff)](https://aka.ms/foundry/discord)  
+[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
 
-தயாரிப்பு கருத்துக்களோ அல்லது உருவாக்கத்தின் போது பிழைகளோ இருந்தால், கீழே உள்ள இணைப்பை பார்வையிடவும்:  
+உடையிருக்கை கருத்து அல்லது பிழைகள் இருந்தால் பயிற்சி அமைக்கும்போது பின்வரும் இடத்தை பார்வையிடவும்:
 
-[![Azure AI Foundry Developer Forum](https://img.shields.io/badge/GitHub-Azure_AI_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)  
+[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
 
-## உரிமம்  
+## உரிமம்
 
-இந்த களஞ்சியம் MIT உரிமத்தின் கீழ் உரிமம் பெற்றது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பைப் பார்க்கவும்.  
+இந்த அலுவலககம் MIT உரிமம் கீழ் உரிமையுள்ளது. மேலும் தகவலுக்கு [LICENSE](../../LICENSE) கோப்பை பார்வையிடவும்.
 
 ---
 
-**குறிப்பு**:  
-இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**வெளிப்படைத்தன்மை**:  
+இந்த ஆவணம் AI மொழி மாற்ற சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) பயன்படுத்தி மொழி மாற்றம் செய்யப்பட்டு உள்ளது. நாங்கள் சரியான தரத்தை வழங்க முயற்சிப்பதாக இருந்தாலும், தானியங்கி மொழி மாற்றங்களில் பிழைகள் அல்லது தவறுகள் இருக்க வாய்ப்பு உள்ளது என்பதைக் கவனிக்கவும். அசல் ஆவணம் அதன் சொந்த மொழியில் அதிகாரபூர்வமான மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழி மாற்றம் பரிந்துரை செய்வதாகும். இதன் பயன்படுத்துவதால் ஏற்படும் எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்க மாட்டோம்.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/ta/for-teachers.md

@@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
   - Moodle Cloud-க்கு வரையறுக்கப்பட்ட Common Cartridge ஆதரவு உள்ளது. மேலே உள்ள Moodle கோப்பை விரும்பவும், இது Canvas-ல் கூட ஏற்றப்படலாம்.
   - இறக்குமதி செய்த பிறகு, உங்கள் கால அட்டவணைக்கு பொருந்த மாட்யூல்கள், கடைசித் தேதிகள் மற்றும் வினா அமைப்புகளை மதிப்பாய்வு செய்யவும்.
 
-![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.ta.png)
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ta.png)
 > Moodle வகுப்பறையில் உள்ள பாடத்திட்டம்
 
-![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.ta.png)
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ta.png)
 > Canvas-ல் உள்ள பாடத்திட்டம்
 
 ### Repo-வை நேரடியாக பயன்படுத்துதல் (Classroom இல்லாமல்)

translations/uk/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.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.uk.png)
+![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.uk.png)
 > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid

translations/uk/1-getting-started-lessons/2-github-basics/README.md

@@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Ми пройдемо цей шлях разом, крок за кроком. Без поспіху, без тиску – лише ти, я і кілька дійсно крутих інструментів, які стануть твоїми новими найкращими друзями!
 
-![Вступ до GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.uk.png)
+![Вступ до GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.uk.png)
 > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid
@@ -583,7 +583,7 @@ flowchart TD
 
 ✅ Хороший спосіб знайти репозиторії, дружні до новачків, – це [шукати за тегом 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
 
-![Скопіювати репозиторій локально](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.uk.png)
+![Скопіювати репозиторій локально](../../../../translated_images/clone_repo.5085c48d666ead57.uk.png)
 
 Існує кілька способів копіювання коду. Один із них – "клонувати" вміст репозиторію, використовуючи HTTPS, SSH або GitHub CLI (Command Line Interface).
 

translations/uk/1-getting-started-lessons/3-accessibility/README.md

@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # Створення доступних веб-сторінок
 
-![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png)
+![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.uk.png)
 > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid

translations/uk/2-js-basics/1-data-types/README.md

@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # Основи JavaScript: Типи даних
 
-![Основи JavaScript - Типи даних](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c756480d3ffa46507f746e5975ebf80f99fdaaf1cff09a7f4.uk.png)
+![Основи JavaScript - Типи даних](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.uk.png)
 > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid

translations/uk/2-js-basics/2-functions-methods/README.md

@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # Основи JavaScript: Методи та функції
 
-![Основи JavaScript - Функції](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b7605c36330ac42eeb5cd8ed02bcdd60fdac778174d6cb865.uk.png)
+![Основи JavaScript - Функції](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.uk.png)
 > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid

translations/uk/2-js-basics/3-making-decisions/README.md

@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # Основи JavaScript: Прийняття рішень
 
-![Основи JavaScript - Прийняття рішень](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0b1cb2f8adaff3ed2a77c4f91db96d8a0594132a353fa189a.uk.png)
+![Основи JavaScript - Прийняття рішень](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.uk.png)
 
 > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
 

translations/uk/2-js-basics/4-arrays-loops/README.md

@@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA:
 -->
 # Основи JavaScript: Масиви та Цикли
 
-![Основи JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a294558d0e4302e448d193f8ad7495cc407539cc81f1afe904b470.uk.png)
+![Основи JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.uk.png)
 > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ```mermaid

translations/uk/3-terrarium/1-intro-to-html/README.md

@@ -26,7 +26,7 @@ journey
       Build terrarium: 5: Student
 ```
 
-![Вступ до HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.uk.png)
+![Вступ до HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.uk.png)
 > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 HTML, або HyperText Markup Language, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим.
@@ -88,7 +88,7 @@ mindmap
 4. У панелі Explorer натисніть на іконку "New File"
 5. Назвіть ваш файл `index.html`
 
-![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.uk.png)
+![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/vs-code-index.e2986cf919471eb9.uk.png)
 
 **Варіант 2: Використання команд терміналу**
 ```bash

translations/uk/3-terrarium/2-intro-to-css/README.md

@@ -30,7 +30,7 @@ journey
       Glass reflections: 5: Student
 ```
 
-![Вступ до CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.uk.png)
+![Вступ до CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.uk.png)
 > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? Завдяки CSS ми перетворимо цю просту структуру на щось візуально привабливе.
@@ -205,7 +205,7 @@ body {
 
 Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент `<h1>`. Ви побачите, що він успадковує шрифт від body:
 
-![успадкований шрифт](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.uk.png)
+![успадкований шрифт](../../../../translated_images/1.cc07a5cbe114ad1d.uk.png)
 
 ✅ **Час експерименту**: Спробуйте встановити інші властивості, які можна успадкувати, для `<body>`, такі як `color`, `line-height` або `text-align`. Що відбувається з вашим заголовком та іншими елементами?
 
@@ -560,7 +560,7 @@ flowchart LR
 
 Ви створите тонкі відблиски, які імітують, як світло відбивається від скляних поверхонь. Цей підхід схожий на те, як художники епохи Відродження, такі як Ян ван Ейк, використовували світло і відображення, щоб зробити намальоване скло тривимірним. Ось до чого ви прагнете:
 
-![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.uk.png)
+![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.uk.png)
 
 **Ваш виклик:**
 - **Створіть** тонкі овальні форми білого або світлого кольору для відображень скла

translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md

@@ -26,7 +26,7 @@ journey
       Complete terrarium: 5: Student
 ```
 
-![DOM і замикання](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.uk.png)
+![DOM і замикання](../../../../translated_images/webdev101-js.10280393044d7eaa.uk.png)
 > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac)
 
 Ласкаво просимо до одного з найцікавіших аспектів веб-розробки — створення інтерактивності! Document Object Model (DOM) — це як міст між вашим HTML і JavaScript, і сьогодні ми використаємо його, щоб оживити ваш тераріум. Коли Тім Бернерс-Лі створив перший веб-браузер, він уявляв веб як динамічний і інтерактивний простір — DOM робить це можливим.
@@ -105,7 +105,7 @@ flowchart TD
     style Q fill:#ffebee
 ```
 
-![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png)
+![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.uk.png)
 
 > Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
@@ -150,7 +150,7 @@ flowchart LR
 
 > 💡 **Розуміння замикань**: Замикання — це важлива тема в JavaScript, і багато розробників використовують їх роками, перш ніж повністю зрозуміти всі теоретичні аспекти. Сьогодні ми зосередимося на практичному застосуванні — ви побачите, як замикання природно виникають під час створення наших інтерактивних функцій. Розуміння розвиватиметься, коли ви побачите, як вони вирішують реальні проблеми.
 
-![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.uk.png)
+![Представлення дерева DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.uk.png)
 
 > Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
 
@@ -573,7 +573,7 @@ function stopElementDrag() {
 - **Підтримка різних пристроїв**: Працює на настільних комп'ютерах і мобільних пристроях
 - **Свідомість продуктивності**: Без витоків пам'яті чи зайвих обчислень
 
-![готовий тераріум](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.uk.png)
+![готовий тераріум](../../../../translated_images/terrarium-final.0920f16e87c13a84.uk.png)
 
 ---
 

translations/uk/3-terrarium/README.md

@@ -1,45 +1,30 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
-  "translation_date": "2025-08-27T22:34:33+00:00",
+  "original_hash": "bc5c5550f79d10add90ce419ee34abb3",
+  "translation_date": "2026-01-07T10:53:11+00:00",
   "source_file": "3-terrarium/README.md",
   "language_code": "uk"
 }
 -->
-# Мій тераріум: проект для вивчення HTML, CSS і маніпуляцій з DOM за допомогою JavaScript 🌵🌱
+## Розгорніть свій Terrarium
 
-Невелика вправа з перетягування елементів. З невеликою кількістю HTML, JS і CSS ви зможете створити веб-інтерфейс, стилізувати його і навіть додати кілька взаємодій на ваш вибір.
-
-![мій тераріум](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png)
-
-# Уроки
-
-1. [Вступ до HTML](./1-intro-to-html/README.md)
-2. [Вступ до CSS](./2-intro-to-css/README.md)
-3. [Вступ до DOM і замикань у JS](./3-intro-to-DOM-and-closures/README.md)
-
-## Авторство
-
-Написано з ♥️ [Jen Looper](https://www.twitter.com/jenlooper)
-
-Тераріум, створений за допомогою CSS, був натхненний скляною банкою від Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
-
-Ілюстрації намальовані вручну [Jen Looper](http://jenlooper.com) за допомогою Procreate.
-
-## Розгортання вашого тераріуму
-
-Ви можете розгорнути або опублікувати ваш тераріум в інтернеті за допомогою Azure Static Web Apps.
+Ви можете розгорнути або опублікувати свій Terrarium в Інтернеті за допомогою **Azure Static Web Apps**.
 
 1. Форкніть цей репозиторій
 
-2. Натисніть цю кнопку
+2. Натисніть цю кнопку 👇  
 
-[![Кнопка для розгортання в Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
+[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
 
-3. Пройдіть майстер створення вашого додатку. Переконайтеся, що ви встановили корінь додатку на `/solution` або корінь вашої кодової бази. У цьому додатку немає API, тому не хвилюйтеся про його додавання. У вашому форкнутому репозиторії буде створена папка github, яка допоможе службі збірки Azure Static Web Apps зібрати і опублікувати ваш додаток на новому URL.
+3. Дотримуйтесь майстра налаштувань для створення вашого додатка.  
+   - Встановіть **Корінь додатка** на `/solution` або корінь вашої кодової бази.  
+   - У цьому додатку немає API, тому можна пропустити налаштування API.  
+   - Папка `.github` буде створена автоматично, щоб допомогти Azure Static Web Apps збирати та публікувати ваш додаток.
 
 ---
 
-**Відмова від відповідальності**:  
-Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
+<!-- CO-OP TRANSLATOR DISCLAIMER START -->
+**Відмова від відповідальності**:
+Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Ми прагнемо до точності, але зверніть увагу, що автоматичний переклад може містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом інформації. Для критично важливої інформації рекомендується звертатися до професійного перекладу людиною. Ми не несемо відповідальності за будь-які непорозуміння чи неправильні тлумачення, які можуть виникнути внаслідок використання цього перекладу.
+<!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/uk/3-terrarium/solution/README.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Невелика вправа з перетягування елементів. За допомогою трохи HTML, JS і CSS ви можете створити веб-інтерфейс, стилізувати його та додати взаємодію.
 
-![мій тераріум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.uk.png)
+![мій тераріум](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.uk.png)
 
 ## Авторство
 

translations/uk/5-browser-extension/1-about-browsers/README.md

@@ -26,7 +26,7 @@ journey
       Polish experience: 5: Student
 ```
 
-![Скетчноут браузера](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.uk.jpg)
+![Скетчноут браузера](../../../../translated_images/browser.60317c9be8b7f84a.uk.jpg)
 > Скетчноут від [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
 
 ## Тест перед лекцією
@@ -79,7 +79,7 @@ mindmap
 
 ✅ **Трохи історії**: Перший браузер називався 'WorldWideWeb' і був створений сером Тімоті Бернерсом-Лі у 1990 році.
 
-![ранні браузери](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.uk.jpg)
+![ранні браузери](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.uk.jpg)
 > Деякі ранні браузери, через [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
 
 ### Як браузери обробляють веб-контент
@@ -198,7 +198,7 @@ quadrantChart
 
 Розуміння процесу встановлення розширень допомагає передбачити досвід користувача під час встановлення вашого розширення. Процес встановлення стандартизований у сучасних браузерах, з невеликими варіаціями в дизайні інтерфейсу.
 
-![скріншот браузера Edge, що показує відкриту сторінку edge://extensions і меню налаштувань](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.uk.png)
+![скріншот браузера Edge, що показує відкриту сторінку edge://extensions і меню налаштувань](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.uk.png)
 
 > **Важливо**: Переконайтеся, що ви увімкнули режим розробника та дозволили розширення з інших магазинів під час тестування власних розширень.
 
@@ -313,10 +313,10 @@ project-root/
 ### Огляд вигляду розширення
 
 **Екран налаштувань** - Конфігурація для першого використання:
-![скріншот завершеного розширення, відкритого в браузері, що показує форму з полями для введення назви регіону та ключа API.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.uk.png)
+![скріншот завершеного розширення, відкритого в браузері, що показує форму з полями для введення назви регіону та ключа API.](../../../../translated_images/1.b6da8c1394b07491.uk.png)
 
 **Екран результатів** - Відображення даних про вуглецевий слід:
-![скріншот завершеного розширення, що показує значення використання вуглецю та відсоток викопного палива для регіону US-NEISO.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.uk.png)
+![скріншот завершеного розширення, що показує значення використання вуглецю та відсоток викопного палива для регіону US-NEISO.](../../../../translated_images/2.1dae52ff08042246.uk.png)
 
 ### Створення форми конфігурації
 

translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md

@@ -268,7 +268,7 @@ stateDiagram-v2
     ClearStorage --> FirstTime: Back to setup
 ```
 
-![Панель локального сховища](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.uk.png)
+![Панель локального сховища](../../../../translated_images/localstorage.472f8147b6a3f8d1.uk.png)
 
 > ⚠️ **Міркування про безпеку**: У виробничих додатках зберігання ключів API у LocalStorage становить ризики безпеки, оскільки JavaScript може отримати доступ до цих даних. Для навчальних цілей цей підхід підходить, але реальні додатки повинні використовувати безпечне серверне сховище для конфіденційних даних.
 

translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md

@@ -126,7 +126,7 @@ flowchart LR
 
 Спробуймо це. Відкрийте веб-сайт (Microsoft.com добре підходить для цього) і натисніть кнопку 'Record'. Тепер оновіть сторінку і спостерігайте, як профайлер фіксує все, що відбувається. Коли ви зупините запис, ви побачите детальний розподіл того, як браузер "скриптує", "рендерить" і "малює" сайт. Це нагадує, як центр управління польотами моніторить кожну систему під час запуску ракети - ви отримуєте дані в реальному часі про те, що саме відбувається і коли.
 
-![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.uk.png)
+![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.uk.png)
 
 ✅ [Документація Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) має багато додаткових деталей, якщо ви хочете заглибитися.
 
@@ -136,11 +136,11 @@ flowchart LR
 
 Отримайте знімок продуктивності вашої сторінки, вибравши частину шкали часу профілю та переглянувши панель зведення:
 
-![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.uk.png)
+![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.uk.png)
 
 Перевірте панель журналу подій, щоб побачити, чи будь-яка подія тривала більше 15 мс:
 
-![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.uk.png)
+![Edge event log](../../../../translated_images/log.804026979f3707e0.uk.png)
 
 ✅ Ознайомтеся з вашим профайлером! Відкрийте інструменти розробника на цьому сайті і перевірте, чи є якісь вузькі місця. Який ресурс завантажується найповільніше? Найшвидше?
 

translations/uk/5-browser-extension/README.md

@@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ### Подяки
 
-![зелене розширення для браузера](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![зелене розширення для браузера](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Подяки
 

translations/uk/5-browser-extension/solution/README.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивним є споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати обґрунтовані рішення щодо ваших дій на основі цієї інформації.
 
-![знімок екрану розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![знімок екрану розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для завантаження нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
 
-![встановлення](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![встановлення](../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам підказку щодо того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
 

translations/uk/5-browser-extension/solution/translation/README.fr.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб ви могли отримувати нагадування безпосередньо у своєму браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації.
 
-![знімок розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![знімок розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане розширення", щоб додати нове розширення. Укажіть папку 'dist' у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
 
-![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширень браузера повинна змінюватися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор щодо енергоємних дій, які вам варто виконувати. Концепція цієї системи "точок" була натхненна [розширенням Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів.
 

translations/uk/5-browser-extension/solution/translation/README.hi.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Використання API CO2 Signal від tmrow для відстеження споживання електроенергії, створення розширення для браузера, яке нагадуватиме вам про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації.
 
-![Скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![Скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель розширень. Звідти виберіть "Завантажити неупаковане" для завантаження нового розширення. У вікні виберіть папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його через електронну пошту тут](https://www.co2signal.com/) — введіть свою електронну адресу у поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones) [на електричній карті](https://www.electricitymap.org/map) (наприклад, для Бостона я використовую 'US-NEISO').
 
-![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка у панелі розширень браузера повинна змінитися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запропонована мені розширенням [Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів.
 

translations/uk/5-browser-extension/solution/translation/README.it.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Ви будете використовувати API Signal CO2 від tmrow для моніторингу споживання електроенергії, щоб створити розширення для браузера, яке надаватиме нагадування безпосередньо у вашому браузері про те, наскільки інтенсивним є використання електроенергії у вашому регіоні. Використання цього спеціального розширення допоможе оцінити ваші дії на основі цієї інформації.
 
-![знімок екрану розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![знімок екрану розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Для встановлення в Edge скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Якщо ще не активовано, увімкніть Режим розробника (внизу ліворуч). Виберіть "Завантажити розпаковане", щоб завантажити нове розширення. Укажіть папку "dist" у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal (його можна [отримати тут через електронну пошту](https://www.co2signal.com/) — введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [електричній мапі](https://www.electricitymap.org/map) (наприклад, для Бостона це "US-NEISO").
 
-![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширення браузера має змінитися, щоб відображати споживання енергії у вашому регіоні, і надавати підказки щодо того, які енергоємні дії доцільно виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії.
 

translations/uk/5-browser-extension/solution/translation/README.ja.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Ми створимо розширення для браузера, яке використовує API CO2 Signal від tmrow, щоб відстежувати споживання електроенергії у вашому регіоні. Це розширення відображатиме нагадування у вашому браузері про рівень споживання електроенергії, що дозволить вам приймати рішення щодо вашої діяльності на основі цієї інформації.
 
-![скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![скріншот розширення](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Щоб встановити розширення в Edge, знайдіть панель "Розширення" через меню з "трьома крапками" у верхньому правому куті браузера. Там виберіть "Load Unpacked" і завантажте нове розширення. У вікні, що з'явиться, відкрийте папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його тут через email](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, для Бостона використовується 'US-NEISO').
 
-![встановлення](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![встановлення](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка, що відображається на панелі розширень браузера, змінюватиметься відповідно до рівня енергоспоживання у вашому регіоні. Це допоможе вам визначити, які види діяльності, що потребують енергії, є доцільними в даний момент. Концепція цієї "точкової" системи була натхненна розширенням [Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
 

translations/uk/5-browser-extension/solution/translation/README.ms.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати сповіщення про рівень споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
 
-![скріншот розширення браузера](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![скріншот розширення браузера](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Щоб встановити в Edge, скористайтеся меню "три точки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Load Unpacked", щоб завантажити нове розширення. Відкрийте папку 'dist' за запитом, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Електричній карті](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
 
-![завантаження](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![завантаження](../../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера змінюватиметься, відображаючи рівень споживання енергії у вашому регіоні, і надаватиме вам рекомендації щодо відповідних дій. Ідея системи "точок" була запозичена з [розширення браузера Energy Lollipop](https://energylollipop.com/) для Каліфорнії.
 

translations/uk/5-browser-extension/start/README.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію.
 
-![знімок екрана розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.uk.png)
+![знімок екрана розширення](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.uk.png)
 
 ## Початок роботи
 
@@ -31,7 +31,7 @@ npm run build
 
 Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для додавання нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
 
-![встановлення](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.uk.png)
+![встановлення](../../../../translated_images/install-on-edge.78634f02842c4828.uk.png)
 
 Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка в панелі розширення браузера має змінитися, відображаючи споживання енергії у вашому регіоні, і підказувати, які енергоємні дії вам варто виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії.
 

translations/uk/6-space-game/2-drawing-to-canvas/README.md

@@ -108,7 +108,7 @@ quadrantChart
     UI Elements: [0.9, 0.1]
 ```
 
-![сітка canvas](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.uk.png)
+![сітка canvas](../../../../translated_images/canvas_grid.5f209da785ded492.uk.png)
 > Зображення з [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
 
 Щоб малювати на елементі canvas, ви будете дотримуватися того самого триетапного процесу, який є основою всієї графіки canvas. Після кількох спроб це стане для вас природним:
@@ -329,11 +329,11 @@ flowchart TD
 
 - Корабель героя
 
-   ![Корабель героя](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.uk.png)
+   ![Корабель героя](../../../../translated_images/player.dd24c1afa8c71e9b.uk.png)
 
 - 5×5 монстрів
 
-   ![Корабель монстра](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.uk.png)
+   ![Корабель монстра](../../../../translated_images/enemyShip.5df2a822c16650c2.uk.png)
 
 ### Рекомендовані кроки для початку розробки
 
@@ -455,7 +455,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
 
 Готовий результат має виглядати так:
 
-![Чорний екран з героєм і 5*5 монстрами](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.uk.png)
+![Чорний екран з героєм і 5*5 монстрами](../../../../translated_images/partI-solution.36c53b48c9ffae2a.uk.png)
 
 ## Рішення
 

translations/uk/6-space-game/5-keeping-score/README.md

@@ -160,7 +160,7 @@ sequenceDiagram
 ```
 
 - **Система очок**: Кожен знищений ворожий корабель приносить 100 очок (круглі числа легше підраховувати подумки). Очки відображаються в нижньому лівому куті.
-- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів ![зображення життя](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.uk.png).
+- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів ![зображення життя](../../../../translated_images/life.6fb9f50d53ee0413.uk.png).
 
 ## Починаємо будувати!
 

translations/uk/7-bank-project/1-template-route/README.md

@@ -615,7 +615,7 @@ sequenceDiagram
 
 Використання `history.pushState` створює нові записи в історії навігації браузера. Ви можете перевірити це, утримуючи *кнопку назад* вашого браузера, вона повинна показувати щось на кшталт цього:
 
-![Скріншот історії навігації](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.uk.png)
+![Скріншот історії навігації](../../../../translated_images/history.7fdabbafa521e064.uk.png)
 
 Якщо ви спробуєте кілька разів натиснути кнопку назад, ви побачите, що поточний URL змінюється, а історія оновлюється, але той самий шаблон продовжує відображатися.
 

translations/uk/7-bank-project/2-forms/README.md

@@ -295,7 +295,7 @@ graph TD
 2. Спостерігайте зміни в адресному рядку вашого браузера
 3. Зверніть увагу, як сторінка перезавантажується, і дані з'являються в URL
 
-![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.uk.png)
+![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/click-register.e89a30bf0d4bc9ca.uk.png)
 
 ### Порівняння HTTP методів
 
@@ -350,7 +350,7 @@ graph TD
 2. **Натисніть** кнопку "Створити обліковий запис"
 3. **Спостерігайте** відповідь сервера у вашому браузері
 
-![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.uk.png)
+![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/form-post.61de4ca1b964d91a.uk.png)
 
 **Що ви повинні побачити:**
 - **Браузер перенаправляє** на URL кінцевого пункту API
@@ -532,7 +532,7 @@ async function register() {
 3. **Натисніть** "Створити акаунт"
 4. **Спостерігайте** повідомлення в консолі та зворотний зв'язок для користувача
 
-![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.uk.png)
+![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/browser-console.efaf0b51aaaf6778.uk.png)
 
 **Що ви повинні побачити:**
 - **Стан завантаження** з'являється на кнопці надсилання
@@ -707,7 +707,7 @@ input:focus:invalid {
 3. **Спробуйте** спеціальні символи в полі імені користувача
 4. **Введіть** негативну суму балансу
 
-![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.uk.png)
+![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/validation-error.8bd23e98d416c22f.uk.png)
 
 **Що ви спостерігатимете:**
 - **Браузер відображає** нативні повідомлення про перевірку
@@ -829,7 +829,7 @@ timeline
 
 Ось приклад того, як може виглядати фінальна сторінка входу після невеликого стилювання:
 
-![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.uk.png)
+![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/result.96ef01f607bf856a.uk.png)
 
 ## Тест після лекції
 

translations/uk/7-bank-project/3-data/README.md

@@ -160,7 +160,7 @@ sequenceDiagram
     Browser->>User: Displays new page (flash/reload)
 ```
 
-![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.uk.png)
+![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/mpa.7f7375a1a2d4aa77.uk.png)
 
 **Чому цей підхід здавався незручним:**
 - Кожен клік означав повне перезавантаження сторінки
@@ -187,7 +187,7 @@ sequenceDiagram
     Browser->>User: Shows updated content (no reload)
 ```
 
-![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.uk.png)
+![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/spa.268ec73b41f992c2.uk.png)
 
 **Чому SPA здаються набагато кращими:**
 - Оновлюються лише ті частини, які дійсно змінилися (розумно, правда?)
@@ -504,7 +504,7 @@ if (data.error) {
 
 Тепер, коли ви тестуєте з недійсним обліковим записом, ви побачите корисне повідомлення про помилку прямо на сторінці!
 
-![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.uk.png)
+![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/login-error.416fe019b36a6327.uk.png)
 
 #### Крок 4: Бути інклюзивним з доступністю
 
@@ -836,7 +836,7 @@ timeline
 
 Ось як може виглядати відполірована панель управління:
 
-![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png)
+![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/screen2.123c82a831a1d14a.uk.png)
 
 Не обов'язково точно повторювати це - використовуйте як натхнення і створіть щось своє!
 

translations/uk/7-bank-project/4-state-management/README.md

@@ -190,7 +190,7 @@ mindmap
 
 Замість того, щоб бігати по колу, ми створимо **централізовану систему управління станом**. Уявіть це як одну дуже організовану людину, яка відповідає за всі важливі речі:
 
-![Схема, що показує потоки даних між HTML, діями користувача та станом](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.uk.png)
+![Схема, що показує потоки даних між HTML, діями користувача та станом](../../../../translated_images/data-flow.fa2354e0908fecc8.uk.png)
 
 ```mermaid
 flowchart TD

translations/uk/7-bank-project/4-state-management/assignment.md

@@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA:
 **Очікуваний результат:**
 Після завершення цього завдання ваш банківський додаток повинен мати повністю функціональну функцію "Додати транзакцію", яка виглядає та працює професійно:
 
-![Скріншот, що показує приклад діалогу "Додати транзакцію"](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.uk.png)
+![Скріншот, що показує приклад діалогу "Додати транзакцію"](../../../../translated_images/dialog.93bba104afeb79f1.uk.png)
 
 ## Тестування вашої реалізації
 

translations/uk/7-bank-project/README.md

@@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 У цьому проєкті ви навчитеся створювати вигаданий банк. Ці уроки включають інструкції щодо створення макету веб-додатку, налаштування маршрутів, створення форм, управління станом і отримання даних з API, з якого можна отримати дані банку.
 
-| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.uk.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.uk.png) |
+| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364.uk.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14a.uk.png) |
 |--------------------------------|--------------------------------|
 
 ## Уроки

translations/uk/8-code-editor/1-using-a-code-editor/README.md

@@ -185,7 +185,7 @@ VSCode.dev приносить ці можливості у ваш браузер
 
 Коли все завантажиться, ви побачите красиво оформлений робочий простір, створений для того, щоб ви могли зосередитися на найважливішому — вашому коді!
 
-![Інтерфейс VSCode.dev за замовчуванням](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.uk.png)
+![Інтерфейс VSCode.dev за замовчуванням](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.uk.png)
 
 **Ось ваш тур по околицях:**
 - **Панель активності** (та смужка зліва): Ваш основний навігатор з Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 та Settings ⚙️
@@ -233,7 +233,7 @@ flowchart TB
 1. Перейдіть на [vscode.dev](https://vscode.dev), якщо ви ще не там
 2. Знайдіть кнопку "Open Remote Repository" на екрані привітання та натисніть її
 
-   ![Відкриття віддаленого репозиторію](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.uk.png)
+   ![Відкриття віддаленого репозиторію](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.uk.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 на Mac), щоб відкрити Command Palette:
 
-![Command Palette](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.uk.png)
+![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.uk.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.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.uk.png)
+![Створення нового файлу](../../../../translated_images/create-new-file.2814e609c2af9aeb.uk.png)
 
 **Правила іменування:**
 - Використовуйте описові назви, які вказують на призначення файлу
@@ -386,7 +386,7 @@ mindmap
 2. Переглядайте або шукайте щось конкретне
 3. Натисніть на те, що здається цікавим, щоб дізнатися більше
 
-![Інтерфейс маркетплейсу розширень](../../../../translated_images/extensions.eca0e0c7f59a10b5c88be7fe24b3e32cca6b6058b35a49026c3a9d80b1813b7c.uk.png)
+![Інтерфейс маркетплейсу розширень](../../../../translated_images/extensions.eca0e0c7f59a10b5.uk.png)
 
 **Що ви побачите там:**
 
@@ -439,7 +439,7 @@ mindmap
 3. Виберіть "Extension Settings" у випадаючому меню
 4. Налаштуйте все так, щоб це відповідало вашому робочому процесу
 
-![Налаштування розширень](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.uk.png)
+![Налаштування розширень](../../../../translated_images/extension-settings.21c752ae4f4cdb78.uk.png)
 
 **Загальні речі, які ви можете налаштувати:**
 - Як форматувати ваш код (табуляція проти пробілів, довжина рядка тощо)

translations/uk/8-code-editor/1-using-a-code-editor/assignment.md

@@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA:
 4. **Напишіть** повідомлення про коміт: "Додано початкову структуру HTML"
 5. **Натисніть** "Commit new file", щоб зберегти зміни
 
-![Створення початкового файлу на GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.uk.png)
+![Створення початкового файлу на GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.uk.png)
 
 **Що забезпечує це початкове налаштування:**
 - **Встановлює** правильну структуру документа HTML5 із семантичними елементами
@@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
 
 ✅ **Індикатор успіху**: Ви повинні побачити файли вашого проєкту у боковій панелі Explorer, а `index.html` буде доступний для редагування у головній області редактора.
 
-![Проєкт завантажено у VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.uk.png)
+![Проєкт завантажено у VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.uk.png)
 
 **Що ви побачите в інтерфейсі:**
 - **Бокова панель Explorer**: **Відображає** файли вашого репозиторію та структуру папок
@@ -448,7 +448,7 @@ li:before {
 **Результати після встановлення:**
 Після встановлення CodeSwing ви побачите живий попередній перегляд вашого вебсайту-резюме в редакторі. Це дозволяє вам бачити, як виглядає ваш сайт, у міру внесення змін.
 
-![Розширення CodeSwing показує живий попередній перегляд](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.uk.png)
+![Розширення CodeSwing показує живий попередній перегляд](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.uk.png)
 
 **Розуміння покращеного інтерфейсу:**
 - **Розділений вигляд**: **Показує** ваш код з одного боку та живий попередній перегляд з іншого

translations/uk/9-chat-project/README.md

@@ -61,7 +61,7 @@ print(response.choices[0].message.content)
 
 Ось як виглядатиме ваш готовий проєкт:
 
-![Інтерфейс чату, що показує розмову між користувачем і AI-асистентом](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.uk.png)
+![Інтерфейс чату, що показує розмову між користувачем і AI-асистентом](../../../translated_images/screenshot.0a1ee0d123df681b.uk.png)
 
 ## 🗺️ Ваш навчальний шлях через розробку AI-додатків
 
@@ -194,7 +194,7 @@ mindmap
 
 **Основний принцип**: Розробка AI-додатків поєднує традиційні навички веб-розробки з інтеграцією AI-сервісів, створюючи інтелектуальні додатки, які здаються природними і чуйними для користувачів.
 
-![Інтерфейс GitHub Models AI Playground з вибором моделі і тестовою зоною](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.uk.png)
+![Інтерфейс GitHub Models AI Playground з вибором моделі і тестовою зоною](../../../translated_images/playground.d2b927122224ff8f.uk.png)
 
 **Ось що робить Playground таким корисним:**
 - **Спробуйте** різні AI-моделі, такі як GPT-4o-mini, Claude та інші (усі безкоштовні!)
@@ -204,7 +204,7 @@ mindmap
 
 Після того, як ви трохи пограєте, просто натисніть вкладку "Code" і виберіть вашу мову програмування, щоб отримати код для реалізації.
 
-![Вибір Playground, що показує опції генерації коду для різних мов програмування](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.uk.png)
+![Вибір Playground, що показує опції генерації коду для різних мов програмування](../../../translated_images/playground-choice.1d23ba7d407f4758.uk.png)
 
 ## Налаштування бекенд-інтеграції на Python
 
@@ -2102,14 +2102,14 @@ mindmap
 - **Перейдіть** до [репозиторію Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)  
 - **Натисніть** "Use this template" у верхньому правому куті (переконайтеся, що ви увійшли до GitHub)  
 
-![Інтерфейс створення з шаблону з зеленою кнопкою "Use this template"](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.uk.png)  
+![Інтерфейс створення з шаблону з зеленою кнопкою "Use this template"](../../../translated_images/template.67ad477109d29a2b.uk.png)  
 
 **Крок 2: Запуск Codespaces**  
 - **Відкрийте** щойно створений репозиторій  
 - **Натисніть** зелену кнопку "Code" і виберіть "Codespaces"  
 - **Виберіть** "Create codespace on main", щоб запустити середовище розробки  
 
-![Інтерфейс створення Codespace з опціями для запуску хмарного середовища розробки](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.uk.png)  
+![Інтерфейс створення Codespace з опціями для запуску хмарного середовища розробки](../../../translated_images/codespace.bcecbdf5d2747d3d.uk.png)  
 
 **Крок 3: Налаштування середовища**  
 Після завантаження Codespace ви отримаєте доступ до:  

translations/uk/README.md

@@ -1,177 +1,188 @@
 <!--
 CO_OP_TRANSLATOR_METADATA:
 {
-  "original_hash": "caff943951276a4459a687166f3dfae2",
-  "translation_date": "2025-12-19T10:28:27+00:00",
+  "original_hash": "fea3a0fceb8ad86fd640c09cf63a2aac",
+  "translation_date": "2026-01-07T10:51:15+00:00",
   "source_file": "README.md",
   "language_code": "uk"
 }
 -->
-[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)  
-[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)  
-[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)  
-[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)  
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)  
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)  
-[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)  
-[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)  
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
+
+# Веб-розробка для початківців - навчальна програма
+
+Вивчіть основи веб-розробки за нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків детально розглядає JavaScript, CSS та HTML через практичні проекти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях та практичних завданнях. Покращуйте свої навички та оптимізуйте засвоєння знань за допомогою ефективної педагогіки на основі проектів. Починайте свій шлях у кодуванні сьогодні!
 
-# Веб-розробка для початківців - Курс  
+Приєднуйтесь до спільноти Azure AI Foundry Discord
 
-Вивчайте основи веб-розробки з нашим 12-тижневим комплексним курсом від Microsoft Cloud Advocates. Кожен із 24 уроків охоплює JavaScript, CSS та HTML через практичні проєкти, такі як тераріуми, розширення для браузера та космічні ігри. Беріть участь у вікторинах, обговореннях і практичних завданнях. Покращуйте свої навички та закріплюйте знання завдяки нашій ефективній проєктно-орієнтованій методиці. Почніть свою подорож у програмуванні вже сьогодні!  
+[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
+
+Виконайте ці кроки, щоб почати користуватися цими ресурсами:
+1. **Зробіть форк репозиторію**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
+2. **Клонуйте репозиторій**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
+3. [**Приєднуйтесь до Azure AI Foundry Discord і зустрічайте експертів та інших розробників**](https://discord.com/invite/ByRwuEEgH4)
 
-Приєднуйтесь до спільноти Azure AI Foundry у Discord  
+### 🌐 Підтримка багатьох мов
 
-[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)  
+#### Підтримується через GitHub Action (автоматично та завжди актуально)
 
-Виконайте ці кроки, щоб почати використовувати ці ресурси:  
-1. **Форкніть репозиторій**: Натисніть [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)  
-2. **Клонуйте репозиторій**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
-3. [**Приєднуйтесь до Azure AI Foundry Discord і знайомтесь з експертами та іншими розробниками**](https://discord.com/invite/ByRwuEEgH4)  
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->
+[Арабська](../ar/README.md) | [Бенгальська](../bn/README.md) | [Болгарська](../bg/README.md) | [Бирманська (М’янма)](../my/README.md) | [Китайська (спрощена)](../zh/README.md) | [Китайська (традиційна, Гонконг)](../hk/README.md) | [Китайська (традиційна, Макао)](../mo/README.md) | [Китайська (традиційна, Тайвань)](../tw/README.md) | [Хорватська](../hr/README.md) | [Чеська](../cs/README.md) | [Данська](../da/README.md) | [Голландська](../nl/README.md) | [Естонська](../et/README.md) | [Фінська](../fi/README.md) | [Французька](../fr/README.md) | [Німецька](../de/README.md) | [Грецька](../el/README.md) | [Іврит](../he/README.md) | [Гінді](../hi/README.md) | [Угорська](../hu/README.md) | [Індонезійська](../id/README.md) | [Італійська](../it/README.md) | [Японська](../ja/README.md) | [Каннада](../kn/README.md) | [Корейська](../ko/README.md) | [Литовська](../lt/README.md) | [Малайська](../ms/README.md) | [Малаялам](../ml/README.md) | [Маратхі](../mr/README.md) | [Непальська](../ne/README.md) | [Нігерійський Піджин](../pcm/README.md) | [Норвезька](../no/README.md) | [Перська (фарсі)](../fa/README.md) | [Польська](../pl/README.md) | [Португальська (Бразилія)](../br/README.md) | [Португальська (Португалія)](../pt/README.md) | [Пенджабі (гурмухі)](../pa/README.md) | [Румунська](../ro/README.md) | [Російська](../ru/README.md) | [Сербська (кирилиця)](../sr/README.md) | [Словацька](../sk/README.md) | [Словенська](../sl/README.md) | [Іспанська](../es/README.md) | [Суахілі](../sw/README.md) | [Шведська](../sv/README.md) | [Тагалог (філіппінська)](../tl/README.md) | [Тамільська](../ta/README.md) | [Телугу](../te/README.md) | [Тайська](../th/README.md) | [Турецька](../tr/README.md) | [Українська](./README.md) | [Урду](../ur/README.md) | [В’єтнамська](../vi/README.md)
 
-### 🌐 Підтримка багатьох мов  
+> **Надаєте перевагу клонуванню локально?**
 
-#### Підтримується через GitHub Action (автоматично та завжди актуально)  
+> У цьому репозиторії міститься 50+ мовних перекладів, що значно збільшує розмір завантаження. Щоб клонувати без перекладів, використайте sparse checkout:
+> ```bash
+> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
+> cd Web-Dev-For-Beginners
+> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
+> ```
+> Це дасть вам усе необхідне для проходження курсу з набагато швидшим завантаженням.
+<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
 
-<!-- CO-OP TRANSLATOR LANGUAGES TABLE START -->  
-[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh/README.md) | [Chinese (Traditional, Hong Kong)](../hk/README.md) | [Chinese (Traditional, Macau)](../mo/README.md) | [Chinese (Traditional, Taiwan)](../tw/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../br/README.md) | [Portuguese (Portugal)](../pt/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](./README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md)  
-<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->  
+**Якщо ви хочете додаткові переклади, підтримувані мови наведені [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
 
-**Якщо ви хочете додати додаткові переклади, список підтримуваних мов знаходиться [тут](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**  
+[![Відкрити у Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
 
-[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)  
+#### 🧑‍🎓 _Ви студент?_
 
-#### 🧑‍🎓 _Ви студент?_  
+Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть можливості отримати безкоштовний сертифікат. Цю сторінку варто додати до закладок і час від часу перевіряти, оскільки ми щомісяця оновлюємо контент.
 
-Відвідайте [**сторінку Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), де ви знайдете ресурси для початківців, студентські пакети та навіть способи отримати безкоштовний ваучер на сертифікацію. Це сторінка, яку варто додати в закладки та перевіряти час від часу, оскільки ми щомісяця оновлюємо контент.  
+### 📣 Оголошення - Нові завдання режиму GitHub Copilot Agent для виконання!
 
-### 📣 Оголошення - Нові виклики з режимом GitHub Copilot Agent!  
+Додано нове завдання, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це нове завдання для вас, щоб виконати його за допомогою GitHub Copilot і режиму Agent. Якщо ви не використовували режим Agent раніше, він здатен не лише генерувати текст, а й створювати та редагувати файли, запускати команди та інше.
 
-Додано новий виклик, шукайте "GitHub Copilot Agent Challenge 🚀" у більшості розділів. Це новий виклик для вас, який можна виконати за допомогою GitHub Copilot і режиму Agent. Якщо ви ще не використовували режим Agent, він здатний не лише генерувати текст, але й створювати та редагувати файли, виконувати команди тощо.  
+### 📣 Оголошення - _Новий проект для створення за допомогою генеративного ШІ_
 
-### 📣 Оголошення - _Новий проєкт для створення за допомогою генеративного ШІ_  
+Новий проект AI Assistant лише додано, перегляньте його [тут](./9-chat-project/README.md)
 
-Додано новий проєкт AI Assistant, ознайомтеся з ним [тут](./09-chat-project/README.md)  
+### 📣 Оголошення - _Нова навчальна програма_ з генеративного ШІ для JavaScript щойно випущена
 
-### 📣 Оголошення - _Новий курс_ з генеративного ШІ для JavaScript  
+Не пропустіть нашу нову навчальну програму генеративного ШІ!
 
-Не пропустіть наш новий курс з генеративного ШІ!  
+Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати!
 
-Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!  
+![Фон](../../translated_images/background.148a8d43afde5730.uk.png)
 
-![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.uk.png)  
+- Уроки, що охоплюють все від основ до RAG.
+- Взаємодійте з історичними персонажами за допомогою GenAI і нашого супутнього додатку.
+- Весела та захоплююча розповідь, ви будете подорожувати в часі!
 
-- Уроки, що охоплюють все від основ до RAG.  
-- Взаємодія з історичними персонажами за допомогою GenAI та нашого додатку-компаньйона.  
-- Захоплюючий наратив, ви будете подорожувати в часі!  
+![персонаж](../../translated_images/character.5c0dd8e067ffd693.uk.png)
 
-![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.uk.png)  
+Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам у вивченні таких тем:
+- Запити і інженерія запитів
+- Генерація додатків для тексту та зображень
+- Пошукові додатки
 
-Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам вивчити такі теми, як:  
-- Створення запитів і їх оптимізація  
-- Генерація тексту та зображень  
-- Пошукові додатки  
+Відвідайте [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), щоб почати!
 
-Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб розпочати!  
 
-## 🌱 Початок роботи  
 
-> **Вчителі**, ми [додали кілька пропозицій](for-teachers.md) щодо використання цього курсу. Ми будемо раді вашим відгукам [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!  
+## 🌱 Початок роботи
 
-**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з вікторини перед лекцією, читайте матеріал лекції, виконуйте різні завдання та перевіряйте свої знання за допомогою вікторини після лекції.  
+> **Вчителі**, ми включили [деякі поради](for-teachers.md) щодо використання цієї навчальної програми. Ми будемо раді вашому відгуку [у нашому форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
 
-Щоб покращити свій досвід навчання, спілкуйтеся з однолітками для спільної роботи над проєктами! Обговорення заохочуються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде доступна для відповіді на ваші запитання.  
+**[Учні](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, для кожного уроку починайте з передлекційної вікторини, потім ознайомлюйтеся з матеріалом лекції, виконуйте різні вправи і перевіряйте розуміння за допомогою післялекційної вікторини.
 
-Для подальшого навчання ми настійно рекомендуємо дослідити [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів.  
+Щоб покращити ваш навчальний досвід, спілкуйтеся зі своїми однокурсниками, щоб працювати над проектами разом! Обговорення вітаються у нашому [форумі обговорень](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), де наша команда модераторів буде готова відповісти на ваші питання.
 
-### 📋 Налаштування середовища  
+Для подальшого навчання ми настійно рекомендуємо вивчати [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) для додаткових навчальних матеріалів.
 
-Цей курс має готове середовище для розробки! На початку ви можете вибрати запуск курсу в [Codespace](https://github.com/features/codespaces/) (_браузерне середовище, яке не потребує встановлення_), або локально на вашому комп'ютері за допомогою текстового редактора, такого як [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+### 📋 Налаштування вашого середовища
 
-#### Створіть свій репозиторій  
-Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому обліковому записі GitHub з копією курсу.  
+Ця навчальна програма має готове середовище розробки! Починаючи роботу, ви можете вибрати запуск програми у [Codespace](https://github.com/features/codespaces/) (_середовище на базі браузера, без потреби встановлення_), або локально на вашому комп’ютері за допомогою текстового редактора, наприклад, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
-Виконайте ці кроки:  
-1. **Форкніть репозиторій**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.  
-2. **Клонуйте репозиторій**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`  
+#### Створіть свій репозиторій
+Щоб легко зберігати свою роботу, рекомендується створити власну копію цього репозиторію. Ви можете зробити це, натиснувши кнопку **Use this template** у верхній частині сторінки. Це створить новий репозиторій у вашому акаунті GitHub з копією навчальної програми.
 
-#### Запуск курсу в Codespace  
+Виконайте ці кроки:
+1. **Зробіть форк репозиторію**: Натисніть кнопку "Fork" у верхньому правому куті цієї сторінки.
+2. **Клонуйте репозиторій**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
 
-У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить новий Codespace для роботи.  
+#### Запуск навчальної програми у Codespace
 
-![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.uk.png)  
+У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи.
 
-#### Запуск курсу локально на вашому комп'ютері  
+![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.uk.png)
 
-Щоб запустити цей курс локально на вашому комп'ютері, вам знадобиться текстовий редактор, браузер і інструмент командного рядка. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), проведе вас через різні варіанти для кожного з цих інструментів, щоб ви могли вибрати те, що найкраще підходить для вас.  
+#### Запуск навчальної програми локально на вашому комп’ютері
 
-Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як ваш редактор, який також має вбудований [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).  
+Щоб запустити цю навчальну програму локально на вашому комп’ютері, вам знадобиться текстовий редактор, браузер і командний рядок. Наш перший урок, [Вступ до мов програмування та інструментів](../../1-getting-started-lessons/1-intro-to-programming-languages), допоможе вам дослідити різні варіанти для кожного з цих інструментів та обрати найкращий для вас.
 
-1. Клонуйте свій репозиторій на комп'ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL:  
+Ми рекомендуємо використовувати [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) як редактор, який також має вбудований [термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Ви можете завантажити Visual Studio Code [тут](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
 
-    [CodeSpace](./images/createcodespace.png)  
+1. Клонуйте свій репозиторій на свій комп’ютер. Ви можете зробити це, натиснувши кнопку **Code** і скопіювавши URL:
 
-    Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:  
+    [CodeSpace](./images/createcodespace.png)
+    Потім відкрийте [Термінал](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) у [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) і виконайте наступну команду, замінивши `<your-repository-url>` на URL, який ви щойно скопіювали:
 
     ```bash 
     git clone <your-repository-url>
     ```
-  
-2. Відкрийте папку у Visual Studio Code. Ви можете зробити це, натиснувши **File** > **Open Folder** і вибравши папку, яку ви щойно клонували.  
 
-> Рекомендовані розширення для Visual Studio Code:  
->  
-> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code  
-> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - допоможе вам писати код швидше
+2. Відкрийте папку у Visual Studio Code. Це можна зробити, клацнувши **Файл** > **Відкрити папку** та вибравши щойно клоновану папку.
+
+
+>  Рекомендовані розширення Visual Studio Code:
+>
+> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - для попереднього перегляду HTML-сторінок у Visual Studio Code
+> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - для допомоги у швидшому написанні коду
 
 ## 📂 Кожен урок включає:
 
-- необов'язковий скетчноут
-- необов'язкове додаткове відео
-- розігрівний тест перед уроком
+- необов’язкову замітку
+- необов’язкове додаткове відео
+- розминковий тест перед уроком
 - письмовий урок
-- для уроків, заснованих на проєктах, покрокові інструкції зі створення проєкту
-- перевірка знань
+- для уроків із проєктами — покрокові інструкції зі створення проєкту
+- перевірки знань
 - завдання
-- додаткові матеріали для читання
-- домашнє завдання
+- додаткове читання
 - [тест після уроку](https://ff-quizzes.netlify.app/web/)
 
-> **Примітка щодо тестів**: Усі тести знаходяться в папці Quiz-app, всього 48 тестів по три питання кожен. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток для тестів можна запустити локально або розгорнути в Azure; дотримуйтесь інструкцій у папці `quiz-app`.
+> **Примітка щодо тестів**: Всі тести знаходяться у папці Quiz-app, всього 48 тестів по три питання кожен. Вони доступні [тут](https://ff-quizzes.netlify.app/web/), додаток тесту можна запускати локально або розгортати в Azure; слідуйте інструкціям у папці `quiz-app`.
 
 ## 🗃️ Уроки
 
-|     |                       Назва проєкту                       |                            Вивчені концепти                             | Навчальні цілі                                                                                                                 |                                                         Посилання на урок                                                          |         Автор          |
-| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-| 01  |                     Початок роботи                      |           Вступ до програмування та інструментів розробника           | Дізнайтеся основи більшості мов програмування та про програмне забезпечення, яке допомагає професійним розробникам виконувати свою роботу | [Вступ до мов програмування та інструментів розробника](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-| 02  |                     Початок роботи                      |             Основи GitHub, включаючи роботу в команді             | Як використовувати GitHub у вашому проєкті, як співпрацювати з іншими над кодовою базою                                                    |                            [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-| 03  |                     Початок роботи                      |                             Доступність                              | Вивчіть основи веб-доступності                                                                                               |                       [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-| 04  |                        Основи JS                         |                         Типи даних у JavaScript                          | Основи типів даних у JavaScript                                                                                                 |                                       [Типи даних](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-| 05  |                        Основи JS                         |                         Функції та методи                          | Дізнайтеся про функції та методи для управління логікою додатка                                                             |                              [Функції та методи](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
-| 06  |                        Основи JS                         |                        Прийняття рішень у JS                        | Дізнайтеся, як створювати умови у вашому коді за допомогою методів прийняття рішень                                                           |                                 [Прийняття рішень](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-| 07  |                        Основи JS                         |                            Масиви та цикли                            | Робота з даними за допомогою масивів та циклів у JavaScript                                                                                 |                                   [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-| 08  |       [Тераріум](./3-terrarium/solution/README.md)       |                            HTML на практиці                            | Створіть HTML для онлайн-тераріуму, зосереджуючись на створенні макета                                                         |                                 [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-| 09  |       [Тераріум](./3-terrarium/solution/README.md)       |                            CSS на практиці                             | Створіть CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включаючи адаптивність                     |                                  [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-| 10  |            [Тераріум](./3-terrarium/solution/README.md)            |                 Замикання у JavaScript, маніпуляція DOM                  | Створіть JavaScript для функціонування тераріуму як інтерфейсу перетягування, зосереджуючись на замиканнях та маніпуляції DOM             |                  [Замикання у JavaScript, маніпуляція DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-| 11  |          [Гра на друкування](./4-typing-game/solution/README.md)          |                          Створення гри на друкування                           | Дізнайтеся, як використовувати події клавіатури для управління логікою вашого JavaScript-додатка                                                          |                                [Програмування, кероване подіями](./4-typing-game/typing-game/README.md)                                |       Christopher       |
-| 12  | [Розширення для браузера Green](./5-browser-extension/solution/README.md) |                         Робота з браузерами                          | Дізнайтеся, як працюють браузери, їх історію, і як створити перші елементи розширення для браузера                               |                               [Про браузери](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-| 13  | [Розширення для браузера Green](./5-browser-extension/solution/README.md) | Створення форми, виклик API та збереження змінних у локальному сховищі | Створіть JavaScript-елементи вашого розширення для браузера, щоб викликати API, використовуючи змінні, збережені у локальному сховищі                      |                [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-| 14  | [Розширення для браузера Green](./5-browser-extension/solution/README.md) |          Фонові процеси у браузері, продуктивність вебу          | Використовуйте фонові процеси браузера для управління іконкою розширення; дізнайтеся про продуктивність вебу та оптимізації   |             [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-| 15  |           [Космічна гра](./6-space-game/solution/README.md)           |             Більш просунута розробка ігор з JavaScript             | Дізнайтеся про наслідування, використовуючи як класи, так і композицію, а також патерн Pub/Sub, готуючись до створення гри              |                      [Вступ до просунутої розробки ігор](./6-space-game/1-introduction/README.md)                       |          Chris          |
-| 16  |           [Космічна гра](./6-space-game/solution/README.md)           |                           Малювання на canvas                            | Дізнайтеся про Canvas API, який використовується для малювання елементів на екрані                                                                       |                                [Малювання на canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-| 17  |           [Космічна гра](./6-space-game/solution/README.md)           |                   Переміщення елементів по екрану                    | Дізнайтеся, як елементи можуть рухатися, використовуючи декартові координати та Canvas API                                            |                           [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-| 18  |           [Космічна гра](./6-space-game/solution/README.md)           |                          Виявлення зіткнень                           | Зробіть так, щоб елементи стикалися та реагували один на одного, використовуючи натискання клавіш, і забезпечте функцію затримки для продуктивності гри    |                              [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
-| 19  |           [Космічна гра](./6-space-game/solution/README.md)           |                             Підрахунок очок                              | Виконуйте математичні обчислення на основі статусу та продуктивності гри                                                                |                                    [Підрахунок очок](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-| 20  |           [Космічна гра](./6-space-game/solution/README.md)           |                     Завершення та перезапуск гри                     | Дізнайтеся, як завершувати та перезапускати гру, включаючи очищення ресурсів та скидання значень змінних                              |                                [Умови завершення](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
-| 21  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                 HTML-шаблони та маршрути у веб-додатку                 | Дізнайтеся, як створити структуру багатосторінкового вебсайту, використовуючи маршрути та HTML-шаблони                             |                            [HTML-шаблони та маршрути](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
-| 22  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                  Створення форми входу та реєстрації                   | Дізнайтеся, як створювати форми та обробляти процедури перевірки                                                                          |                                           [Форми](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
-| 23  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                   Методи отримання та використання даних                   | Як дані надходять у ваш додаток, як їх отримувати, зберігати та видаляти                                                 |                                            [Дані](./7-bank-project/3-data/README.md)                                            |          Yohan          |
-| 24  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                      Концепти управління станом                      | Дізнайтеся, як ваш додаток зберігає стан і як ним керувати програмно                                                              |                                [Управління станом](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
-| 25 | [Код у браузері/VScode](../../8-code-editor) | Робота з VScode | Дізнайтеся, як використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
-| 26 | [AI Асистенти](./9-chat-project/README.md) | Робота з AI | Дізнайтеся, як створити власного AI-асистента | [Проєкт AI Асистент](./9-chat-project/README.md) | Chris |
+|     |                       Назва проєкту                       |                          Теми, що викладаються                          | Навчальні цілі                                                                                                                    |                                                        Пов’язаний урок                                                        |         Автор           |
+| :-: | :--------------------------------------------------------: | :----------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
+| 01  |                     Початок роботи                        |           Вступ до програмування та інструменти професії                 | Дізнатися основи більшості мов програмування та про ПЗ, що допомагає професійним розробникам у роботі                           | [Вступ до мов програмування та інструментів професії](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     Початок роботи                        |             Основи GitHub, робота у команді                              | Як використовувати GitHub у вашому проєкті, як співпрацювати з іншими над кодовою базою                                          |                             [Вступ до GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     Початок роботи                        |                             Доступність                                   | Вивчити основи веб-доступності                                                                                                  |                       [Основи доступності](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        Основи JS                          |                         Типи даних JavaScript                           | Основи типів даних у JavaScript                                                                                                 |                                       [Типи даних](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        Основи JS                          |                         Функції та методи                              | Вивчити функції та методи для керування логікою додатка                                                                         |                              [Функції та методи](./2-js-basics/2-functions-methods/README.md)                                | Jasmine and Christopher |
+| 06  |                        Основи JS                          |                        Прийняття рішень у JS                           | Навчитися створювати умови у коді за допомогою методів прийняття рішень                                                          |                                 [Прийняття рішень](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        Основи JS                          |                            Масиви та цикли                             | Працювати з даними, використовуючи масиви та цикли у JavaScript                                                                |                                   [Масиви та цикли](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Тераріум](./3-terrarium/solution/README.md)       |                            Практика HTML                              | Побудувати HTML для створення онлайн-тераріуму, зосереджуючись на верстці                                                       |                                 [Вступ до HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Тераріум](./3-terrarium/solution/README.md)       |                            Практика CSS                               | Побудувати CSS для стилізації онлайн-тераріуму, зосереджуючись на основах CSS, включно з адаптивністю сторінки                  |                                  [Вступ до CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Тераріум](./3-terrarium/solution/README.md)            |           Замикання JavaScript, робота з DOM                         | Побудувати JavaScript для функціонування тераріуму з інтерфейсом перетягування, з акцентом на замикання та роботу з DOM          |                  [Замикання JS, робота з DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Гра на набір тексту](./4-typing-game/solution/README.md)          |                          Створення гри на друку                       | Навчитися використовувати події клавіатури для управління логікою вашого JS-додатка                                             |                                [Програмування на подіях](./4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Зелений Розширення для браузера](./5-browser-extension/solution/README.md) |                         Робота з браузерами                          | Вивчити, як працюють браузери, їхню історію та як створити перші елементи розширення браузера                                    |                               [Про браузери](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Зелений Розширення для браузера](./5-browser-extension/solution/README.md) | Створення форми, виклик API та зберігання змінних у локальному сховищі | Створити JavaScript-елементи розширення браузера для виклику API з використанням змінних, збережених у локальному сховищі       |                [API, форми та локальне сховище](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Зелений Розширення для браузера](./5-browser-extension/solution/README.md) |      Фонові процеси у браузері, веб-продуктивність                   | Використовувати фонова процеси браузера для керування іконкою розширення; вивчити продуктивність вебу та деякі оптимізації місця |             [Фонові завдання та продуктивність](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Космічна гра](./6-space-game/solution/README.md)           |             Розширена розробка ігор на JavaScript                    | Вивчити наслідування через Класи та Композицію та патерн Pub/Sub у підготовці до створення гри                                  |                      [Вступ до розширеної розробки ігор](./6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Космічна гра](./6-space-game/solution/README.md)           |                           Малювання на canvas                         | Вивчити Canvas API, який використовується для малювання на екрані                                                                |                                [Малювання на Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Космічна гра](./6-space-game/solution/README.md)           |                   Переміщення елементів на екрані                      | Дізнатися, як елементи можуть рухатися, використовуючи декартові координати та Canvas API                                       |                           [Переміщення елементів](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Космічна гра](./6-space-game/solution/README.md)           |                          Виявлення зіткнень                          | Зробити зіткнення елементів і їхню реакцію, використовуючи натискання клавіш і функцію охолодження для збереження продуктивності |                              [Виявлення зіткнень](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Космічна гра](./6-space-game/solution/README.md)           |                             Ведення рахунку                           | Виконувати математичні обчислення, базовані на статусі та продуктивності гри                                                    |                                    [Ведення рахунку](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Космічна гра](./6-space-game/solution/README.md)           |                     Завершення та перезапуск гри                      | Вивчити, як завершувати та перезапускати гру, включно з очищенням ресурсів і скиданням значень змінних                         |                                [Умови завершення](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                 HTML-шаблони і маршрути у веб-додатку                 | Навчитися створювати каркас багатосторінкового сайту за допомогою маршрутизації та HTML-шаблонів                              |                            [HTML-шаблони і маршрути](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                  Створення форм входу та реєстрації                   | Дізнатися про створення форм і обробку процедур валідації                                                                        |                                           [Форми](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                   Способи отримання та використання даних             | Як дані надходять і виходять із додатка, як їх отримувати, зберігати та видаляти                                                |                                            [Дані](./7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Банківський додаток](./7-bank-project/solution/README.md)          |                      Концепції управління станом                      | Вивчити, як додаток зберігає стан і як управляти ним програмно                                                                 |                                [Управління станом](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
+| 25 | [Код браузера/VScode](../../8-code-editor) | Робота з VScode | Навчіться використовувати редактор коду | [Використання редактора коду VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
+| 26 | [AI помічники](./9-chat-project/README.md) | Робота з ІІ | Навчіться створювати власного ІІ помічника | [Проєкт AI помічника](./9-chat-project/README.md) | Chris |
 
 ## 🏫 Педагогіка
 
@@ -179,22 +190,22 @@ CO_OP_TRANSLATOR_METADATA:
 * навчання на основі проєктів
 * часті тести
 
-Програма навчає основам JavaScript, HTML і CSS, а також найновішим інструментам і технікам, які використовують сучасні веб-розробники. Студенти матимуть можливість отримати практичний досвід, створюючи гру на друкування, віртуальний тераріум, екологічно чисте розширення для браузера, гру в стилі "космічних загарбників" і банківський додаток для бізнесу. До кінця серії студенти отримають міцне розуміння веб-розробки.
+Програма викладає основи JavaScript, HTML і CSS, а також найсучасніші інструменти й техніки, які використовують сьогоднішні веб-розробники. Студенти матимуть змогу отримати практичний досвід, створюючи гру на друк, віртуальний тераріум, екологічне розширення для браузера, гру в стилі космічних загарбників та банківський додаток для бізнесу. Наприкінці курсу студенти отримають ґрунтовні знання веб-розробки.
 
-> 🎓 Ви можете пройти перші кілька уроків цієї програми як [Навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
+> 🎓 Ви можете пройти перші кілька уроків цієї програми як [навчальний шлях](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) на Microsoft Learn!
 
-Забезпечуючи відповідність контенту проєктам, процес стає більш захоплюючим для студентів, а засвоєння концептів посилюється. Ми також написали кілька вступних уроків з основ JavaScript, які супроводжуються відео з колекції "[Серія для початківців: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі з авторів якої зробили внесок у цю навчальну програму.
+Забезпечуючи відповідність контенту проєктам, процес стає більш захопливим для студентів, а засвоєння концепцій — кращим. Ми також створили кілька початкових уроків з основ JavaScript, поєднаних з відеоуроком із серії "[Початок роботи з JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", деякі автори якої сприяли цій програмі.
 
-Крім того, тест з низькими ставками перед уроком налаштовує студента на вивчення теми, а другий тест після уроку забезпечує подальше засвоєння. Ця навчальна програма була розроблена, щоб бути гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу.
+Крім того, легкий тест перед заняттям формує намір студента вивчати тему, а другий тест після заняття забезпечує подальше засвоєння. Цю програму було спроєктовано, щоб вона була гнучкою та цікавою, і її можна проходити повністю або частково. Проєкти починаються з простих і стають дедалі складнішими до кінця 12-тижневого циклу.
 
-Хоча ми свідомо уникали введення JavaScript-фреймворків, щоб зосередитися на базових навичках, необхідних веб-розробнику перед освоєнням фреймворків, наступним кроком після завершення цієї програми може бути вивчення Node.js через іншу колекцію відео: "[Серія для початківців: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
+Хоча ми цілеспрямовано уникали впровадження фреймворків JavaScript, щоб зосередитися на базових навичках, необхідних веб-розробнику до використання фреймворку, наступним логічним кроком після завершення цієї програми буде вивчення Node.js за допомогою іншої серії відеоуроків: "[Початкова серія по Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
 
-> Відвідайте наші [Правила поведінки](CODE_OF_CONDUCT.md) та [Рекомендації щодо внеску](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки!
+> Відвідайте наші [Правила поведінки](CODE_OF_CONDUCT.md) та [Внесок](CONTRIBUTING.md). Ми вітаємо ваші конструктивні відгуки!
 
 
-## 🧭 Офлайн-доступ
+## 🧭 Оффлайн доступ
 
-Ви можете запустити цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть цей репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп'ютер, а потім у кореневій папці цього репозиторію введіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому localhost: `localhost:3000`.
+Ви можете запускати цю документацію офлайн, використовуючи [Docsify](https://docsify.js.org/#/). Форкніть це репозиторій, [встановіть Docsify](https://docsify.js.org/#/quickstart) на ваш локальний комп’ютер і потім у кореневій папці цього репозиторію наберіть `docsify serve`. Вебсайт буде доступний на порту 3000 на вашому локальному хості: `localhost:3000`.
 
 ## 📘 PDF
 
@@ -202,12 +213,13 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
 
 
 ## 🎒 Інші курси
+Наша команда створює інші курси! Перегляньте:
 
-Наша команда створює й інші курси! Ознайомтеся:
-
+<!-- CO-OP TRANSLATOR OTHER COURSES START -->
 ### LangChain
 [![LangChain4j для початківців](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
 [![LangChain.js для початківців](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
+
 ---
 
 ### Azure / Edge / MCP / Агенти
@@ -217,49 +229,49 @@ PDF усіх уроків можна знайти [тут](https://microsoft.git
 [![AI Агенти для початківців](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
 
 ---
-
-### Серія про генеративний AI
-[![Генеративний AI для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
-[![Генеративний AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
-[![Генеративний AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
-[![Генеративний AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
+ 
+### Серія Генеративного ШІ
+[![Генеративний ШІ для початківців](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![Генеративний ШІ (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
+[![Генеративний ШІ (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
+[![Генеративний ШІ (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
 
 ---
-
+ 
 ### Основне навчання
-[![ML для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
-[![Наука про дані для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
-[![AI для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
+[![Машинне навчання для початківців](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
+[![Data Science для початківців](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
+[![ШІ для початківців](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
 [![Кібербезпека для початківців](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
 [![Веб-розробка для початківців](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
 [![IoT для початківців](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
-[![Розробка XR для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
+[![XR Розробка для початківців](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
 
 ---
-
+ 
 ### Серія Copilot
-[![Copilot для парного програмування з AI](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
+[![Copilot для спільного програмування з ШІ](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
 [![Copilot для C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
-[![Пригоди з Copilot](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
+[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)
 <!-- CO-OP TRANSLATOR OTHER COURSES END -->
 
 ## Отримання допомоги
 
-Якщо ви застрягли або маєте питання щодо створення AI-додатків, приєднуйтесь до обговорень про MCP з іншими учнями та досвідченими розробниками. Це підтримуюча спільнота, де питання вітаються, а знання діляться вільно.
+Якщо ви застрягли або маєте будь-які питання щодо створення AI-додатків. Приєднуйтесь до інших учнів та досвідчених розробників у обговореннях MCP. Це підтримуюча спільнота, де вітаються питання і знання вільно обмінюються.
 
 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)
 
-Якщо у вас є відгуки про продукт або виникають помилки під час створення, відвідайте:
+Якщо у вас є відгуки про продукт або помилки під час розробки, відвідайте:
 
-[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
+[![Форум розробників Microsoft Foundry](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)
 
 ## Ліцензія
 
-Цей репозиторій ліцензований за ліцензією MIT. Дивіться файл [LICENSE](../../LICENSE) для отримання додаткової інформації.
+Цей репозиторій ліцензовано за ліцензією MIT. Докладніше дивіться в файлі [LICENSE](../../LICENSE).
 
 ---
 
 <!-- CO-OP TRANSLATOR DISCLAIMER START -->
 **Відмова від відповідальності**:  
-Цей документ було перекладено за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
+Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматизовані переклади можуть містити помилки або неточності. Оригінальний документ рідною мовою слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується звертатися до професійного людського перекладу. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.
 <!-- CO-OP TRANSLATOR DISCLAIMER END -->

translations/uk/for-teachers.md

@@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA:
   - Moodle Cloud має обмежену підтримку Common Cartridge. Віддавайте перевагу файлу Moodle вище, який також можна завантажити в Canvas.
   - Після імпорту перегляньте модулі, дати здачі та налаштування вікторин, щоб вони відповідали вашому розкладу.
 
-![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.uk.png)
+![Moodle](../../translated_images/moodle.94eb93d714a50cb2.uk.png)
 > Навчальна програма в Moodle
 
-![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.uk.png)
+![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.uk.png)
 > Навчальна програма в Canvas
 
 ### Використання репозиторію напряму (без Classroom)