diff --git a/translations/ml/9-chat-project/solution/backend/python/README.md b/translations/ml/9-chat-project/solution/backend/python/README.md new file mode 100644 index 000000000..bb6f8f943 --- /dev/null +++ b/translations/ml/9-chat-project/solution/backend/python/README.md @@ -0,0 +1,64 @@ + +# കോഡ് 실행ിക്കുക + +## ക്രമീകരിക്കുക + +വര്‍ച്ച്വല്‍ പരിതസ്ഥിതി സൃഷ്ടിക്കുക + +```sh +python -m venv venv +source ./venv/bin/activate +``` + +## ആശ്രിതങ്ങള്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യുക + +```sh +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 ആയി മാറ്റുക + +ഇത് 실행ിക്കുക + +``` +npx http-server -p 8000 +``` + +ചാറ്റില്‍ ഒരു സന്ദേശം ടൈപ്പ് ചെയ്ത് നോക്കൂ, നിങ്ങൾക്ക് ഒരു പ്രതികരണം കാണാം (നിങ്ങൾ ഇത് Codespace-ൽ 실행ിക്കുന്നയാൾ ആണെങ്കിൽ അല്ലെങ്കിൽ അപസ്‌സസ് ടോക്കൺ ക്രമീകരിച്ചിട്ടുണ്ടെങ്കിൽ). + +## അപസ്‌സസ് ടോക്കൺ ക്രമീകരിക്കുക (നിങ്ങൾ ഇത് Codespace-ൽ 실행ിക്കുകയില്ലെങ്കിൽ) + +[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) കാണുക + +--- + + +**അസൂചനം**: +ഈ രേഖ AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം ശരിയായ പരിഭാഷയ്ക്ക് ശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമാറ്റിക് പരിഭാഷകളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അപൂർവതകൾ ഉണ്ടാകാവുന്നതാണ്. മാതൃഭാഷയിലുള്ള യഥാർത്ഥ രേഖയെ ഔദ്യോഗിക ഉറവിടമായി കരുതണം. അത്യന്താപേക്ഷിത വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിൽ നിന്നുള്ള യാതൊരു തെറ്റ്മോ അർത്ഥം തെറ്റിച്ചോ സംഭവിക്കുന്ന ഒരു പിഴവിനും ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/9-chat-project/solution/frontend/README.md b/translations/ml/9-chat-project/solution/frontend/README.md new file mode 100644 index 000000000..7ddb6abf0 --- /dev/null +++ b/translations/ml/9-chat-project/solution/frontend/README.md @@ -0,0 +1,23 @@ + +# കോഡ് 실행 කරන්න + +```sh +npx http-server -p 3000 +``` + +`app.js`-ൽ `BASE_URL` കണ്ടെത്തി അത് ബാക്ക്‌എൻഡ് URL-ന് അനുയോജ്യമായി മാറ്റുക. + +--- + + +**അസ്വീകാരം**: +ഈ ഡോക്യുമെന്റ് AI പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തപ്പെട്ടതാണ്. നമുക്ക് കൃത്യതയ്ക്കായി ശ്രമിച്ചുകയറവൻമാത്രവുമല്ല, സ്വയം പ്രവർത്തിക്കുന്ന പരിഭാഷകളിൽ പിശകുകളും തെറ്റുകളും ഉണ്ടാകാമെന്നാണ് കരുതേണ്ടത്. ഉയർന്ന പ്രാധാന്യമുള്ള വിവരങ്ങൾക്ക് മേൽ സ്വദേശഭാഷയിലുള്ള ഒറിജിനൽ ഡോക്യുമെന്റ് അടിസ്ഥാനഗതമായ കണക്കെടുക്കേണ്ടതാണ്. അത്യന്താപേക്ഷിതമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നത് മൂലം ഉണ്ടാകാവുന്ന തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ, പരസ്പരാർത്ഥം വഴമുടക്കങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളാകുന്നില്ല. + \ No newline at end of file diff --git a/translations/ml/AGENTS.md b/translations/ml/AGENTS.md new file mode 100644 index 000000000..a483c6e6b --- /dev/null +++ b/translations/ml/AGENTS.md @@ -0,0 +1,417 @@ + +# AGENTS.md + +## Project Overview + +ഇത് വെബ് വികസനത്തിന്റെ അടിസ്ഥാനങ്ങളെ തുടക്കക്കാരെ പഠിപ്പിക്കുന്നതിനുള്ള ഒരു വിദ്യാഭ്യാസ പാഠ്യപദ്ധതി റെപ്പോസിറ്ററിയാണ്. മൈക്രോസോഫ്റ്റ് ക്ലൗഡ് അഡ്വക്കേറ്റുകൾ വികസിപ്പിച്ചെടുത്ത 12 ആഴ്ചകളിലെ സമഗ്ര കോഴ്സ് ആണ് ഈ പാഠ്യപദ്ധതി, അതിൽ ജാവാസ്ക്രിപ്റ്റ്, CSS, HTML തുടങ്ങിയ വിഷയങ്ങളെക്കുറിച്ചുള്ള 24 പ്രായോഗിക പാഠങ്ങൾ ഉൾക്കൊള്ളുന്നു. + +### Key Components + +- **വിദ്യാഭ്യാസ ഉള്ളടക്കം**: പദ്ധതിപരമായി ക്രമീകരിച്ച 24 ഘടനാപരമായ പാഠങ്ങൾ +- **പ്രായോഗിക പ്രോജക്ടുകൾ**: Terrarium, ടൈപ്പിങ്ങ് ഗെയിം, ബ്രൗസർ എക്സ്‌ടൻഷൻ, സ്പേസ് ഗെയിം, ബാങ്കിംഗ് ആപ്പ്, കോഡ് എഡിറ്റർ, AI ചാറ്റ് അസിസ്റ്റന്റ് +- **ഇന്ററാക്ടീവ് ക്വിസുകൾ**: ഓരോത്തിലും 3 ചോദ്യങ്ങളുള്ള 48 ക്വിസുകൾ (പാഠം മുമ്പും ശേഷവും) +- **ബഹുഭാഷാ പിന്തുണ**: GitHub Actions ഉപയോഗിച്ച് 50+ ഭാഷകളിലേക്ക് സ്വಯമാറ്റം +- **ടെക്‌നോളജികൾ**: HTML, CSS, ജാവാസ്ക്രിപ്റ്റ്, Vue.js 3, Vite, Node.js, Express, Python (AI പ്രോജക്ടുകൾക്ക്) + +### Architecture + +- പാഠം അധിഷ്ഠിത ഘടനയോടെ വിദ്യാഭ്യാസ റെപ്പോസിറ്ററി +- ഓരോ പാഠ ഫോളഡറിൽ README, കോഡ് ഉദാഹരണങ്ങൾ, പരിഹാരങ്ങൾ അടങ്ങിയിരിക്കുന്നു +- സ്വതന്ത്ര പ്രോജക്ടുകൾ വേർതിരിച്ച ഫോളഡറുകളിൽ (quiz-app, വ്യത്യസ്ത പാഠ പ്രോജക്ടുകൾ) +- GitHub Actions ഉപയോഗിച്ചുള്ള വിവർത്തന സംവിധാനം (co-op-translator) +- ഡോക്യൂമെന്റേഷൻ Docsify വഴി സർവ് ചെയ്യുന്നു കൂടാതെ PDF രൂപത്തിൽ ലഭ്യമാണ് + +## Setup Commands + +ഈ റെപ്പോസിറ്ററി പ്രധാനമായും വിദ്യാഭ്യാസ ഉള്ളടക്കം ഉപയോഗിക്കാൻ ആണ്. പ്രത്യേക പ്രോജക്ടുകൾ ഉപയോഗിക്കാൻ: + +### Main Repository Setup + +```bash +git clone https://github.com/microsoft/Web-Dev-For-Beginners.git +cd Web-Dev-For-Beginners +``` + +### Quiz App Setup (Vue 3 + Vite) + +```bash +cd quiz-app +npm install +npm run dev # ഡെവലപ്പ്മെന്റ് സർവർ തുടങ്ങിയ്ക്കുക +npm run build # പ്രൊഡക്ഷനായി നിർമ്മിക്കുക +npm run lint # ESLint ഓടിക്കൂ +``` + +### Bank Project API (Node.js + Express) + +```bash +cd 7-bank-project/api +npm install +npm start # എപി‌ഐ സര്‍വര്‍ ആരംഭിക്കുക +npm run lint # ഇഎസ്എലിന്‍റ് ഓടിക്കുക +npm run format # പ്രിസ്റ്റിയറോടെ ഫോര്‍മാറ്റ് ചെയ്യുക +``` + +### Browser Extension Projects + +```bash +cd 5-browser-extension/solution +npm install +# ബ്രൗസര്‍-സവിശേഷമായ എക്‌സ്‌ടന്‍ഷന്‍ ലോഡിംഗ് നിർദ്ദേശങ്ങൾ പിന്തുടരുക +``` + +### Space Game Projects + +```bash +cd 6-space-game/solution +npm install +# ബ്രൗസറിൽ index.html തുറക്കുക അല്ലെങ്കിൽ ലൈവ് സർവർ ഉപയോഗിക്കുക +``` + +### Chat Project (Python Backend) + +```bash +cd 9-chat-project/solution/backend/python +pip install openai +# GITHUB_TOKEN പരിസ്ഥിതി സ്വഭാവിക ഘടകമായി സജ്ജമാക്കുക +python api.py +``` + +## Development Workflow + +### For Content Contributors + +1. നിങ്ങളുടെ GitHub അക്കൗണ്ടിൽ റെപ്പോസിറ്ററി **ഫോർക്ക് ചെയ്യുക** +2. നിങ്ങളുടെ ഫോർക്ക് ലൊക്കലായി **ക്ലോൺ ചെയ്യുക** +3. നിങ്ങളുടെ മാറ്റങ്ങൾക്കായി **പുതിയ ബ്രാഞ്ച് സൃഷ്ടിക്കുക** +4. പാഠ ഉള്ളടക്കം അല്ലെങ്കിൽ കോഡ് ഉദാഹരണങ്ങളിൽ മാറ്റങ്ങൾ വരുത്തുക +5. ബന്ധപ്പെട്ട പ്രോജക്ട് ഡയറക്ടറികളിൽ കോഡ് മാറ്റങ്ങൾ പരിശോധന നടത്തുക +6. കൺട്രിബ്യൂഷൻ മാർഗനിർദേശങ്ങൾ പാലിച്ച് പുൾ റിക്വസ്റ്റുകൾ സമർപ്പിക്കുക + +### For Learners + +1. റെപ്പോസിറ്ററി ഫോർക്ക് ചെയ്യുകയോ ക്ലോൺ ചെയ്യുകയോ ചെയ്യുക +2. പാഠ ഡയറക്ടറികളിലേക്ക് ക്രമാശ്രിതമായി പോകുക +3. ഓരോ പാഠത്തിനും README ഫയലുകൾ വായിക്കുക +4. https://ff-quizzes.netlify.app/web/ ൽ പാഠത്തിനു മുമ്പുള്ള ക്വിസുകൾ പൂർത്തിയാക്കുക +5. പാഠ ഫോളഡറുകളിൽ കോഡ് ഉദാഹരണങ്ങൽ പാസാക്കുക +6. അസൈൻമെന്റുകളും കൂടുതൽ ചൈലഞ്ചുകളും പൂർത്തിയാക്കുക +7. പാഠത്തിനു ശേഷമുള്ള ക്വിസുകൾ എടുക്കുക + +### Live Development + +- **ഡോക്യൂമെന്റേഷൻ**: റൂട്ടിൽ `docsify serve` ഓടിക്കുക (പോർട്ട് 3000) +- **Quiz App**: quiz-app ഡയറക്ടറിയിൽ `npm run dev` ഓടിക്കുക +- **പ്രോജക്ടുകൾ**: HTML പ്രോജക്ടുകൾക്ക് VS Code Live Server എക്സ്റ്റെൻഷൻ ഉപയോഗിക്കുക +- **API Projects**:​អതിരേഷമുള്ള API ഡയറക്ടറികളിൽ `npm start` ഓടിക്കുക + +## Testing Instructions + +### Quiz App Testing + +```bash +cd quiz-app +npm run lint # കോഡ് സ്റ്റൈൽ പ്രശ്‌നങ്ങൾ പരിശോധിക്കുക +npm run build # ബിൽഡ് വിജയിക്കുന്നത് സ്ഥിരീകരിക്കുക +``` + +### Bank API Testing + +```bash +cd 7-bank-project/api +npm run lint # കോഡ് സ്റ്റൈൽ പ്രശ്നങ്ങൾ പരിശോധിക്കുക +node server.js # പിഴവുകൾ ഇല്ലാതെ സെർവർ തുടങ്ങുന്നത് സ്ഥിരീകരിക്കുക +``` + +### General Testing Approach + +- ഇത് സമഗ്രമായ സ്വയംപരീക്ഷണ പരീക്ഷണങ്ങളില്ലാത്തൊരു വിദ്യാഭ്യാസ റെപ്പോസിറ്ററിയാണ് +- മാനുവൽ ടെസ്റ്റിംഗിന്റെ പ്രധാന ലക്ഷ്യം: + - കോഡ് ഉദാഹരണങ്ങൾ പിശക് രഹിതമായ പ്രവർത്തനം + - ഡോക്യുമെന്റേഷൻ ലിങ്കുകൾ ശരിയായ പ്രവർത്തനം + - പ്രോജക്ട് ബിൽഡുകൾ പൂര്‍ണ്ണത + - ഉദാഹരണങ്ങൾ മികച്ച അനുഭവരീതികൾ പാലിക്കുന്നു + +### Pre-submission Checks + +- package.json അടങ്ങിയ ഡയറക്ടറികളിൽ `npm run lint` ഓടിക്കുക +- മാർക്ക്ഡൗൺ ലിങ്കുകൾ സാധുവാണെന്ന് പരിശോധിക്കുക +- ബ്രൗസറിലോ Node.js-ലോ കോഡ് ഉദാഹരണങ്ങൾ പരീക്ഷിക്കുക +- വിവർത്തനങ്ങളുടെ ഘടന കൃത്യമായി നിലനിൽക്കുന്നു എന്ന് ഉറപ്പാക്കുക + +## Code Style Guidelines + +### JavaScript + +- ആധുനിക ES6+ ലിപി ഉപയോഗിക്കുക +- പ്രോജക്ടുകളിൽ ലഭ്യമായ സാധാരണ ESLint കോൺഫിഗറേഷനുകൾ പാലിക്കുക +- വിദ്യാർത്ഥികൾക്ക് മനസ്സിലാക്കാൻ സാധിക്കുന്ന രീതിയിൽ നാമങ്ങൾ ഉപയോഗിക്കുക +- ആശയങ്ങൾ വിശദീകരിക്കുന്ന കുറിപ്പുകൾ ചേർക്കുക +- Prettier ഉപയോഗിച്ച് സജ്ജമാക്കിയ സ്ഥലങ്ങളിൽ ഫോർമാറ്റ് ചെയ്യുക + +### HTML/CSS + +- സേമാന്റിക് HTML5 ഘടകങ്ങൾ +- പ്രതികരണാത്മക ഡിസൈൻ സിദ്ധാന്തങ്ങൾ +- സ്പష్టం ക്ലാസ് നാമകരണ പാട് +- വിദ്യാർത്ഥികൾക്ക് സഹായകമായ CSS സാങ്കേതികത വിശദീകരിക്കുന്ന കുറിപ്പുകൾ + +### Python + +- PEP 8 ശൈലി മാർഗനിർദേശങ്ങൾ +- വ്യക്തവും പഠനാർത്ഥകവുമായ കോഡ് ഉദാഹരണങ്ങൾ +- പഠനത്തിന് സഹായകരമായ ടൈപ്പ് നിർദ്ദേശങ്ങൾ + +### Markdown Documentation + +- വ്യക്തമായ തലശ്രീനി ക്രമീകരണം +- ഭാഷ നിർദേശങ്ങളോടുകൂടിയ കോഡ് ബ്ലോക്കുകൾ +- അധിക വിഭവങ്ങളുടെ ലിങ്കുകൾ +- `images/` ഡയറക്ടറികളിൽ സ്‌ക്രീൻഷോട്ടുകളും ചിത്രങ്ങളും +- ആക്സസിബിലിറ്റിക്ക് ചിത്രം മാറ്റിനോട്ടുകൾ + +### File Organization + +- പാഠങ്ങൾ ക്രമീകരിച്ച സംഖ്യകൾ (1-getting-started-lessons, 2-js-basics, മുതലായവ) +- ഓരോ പ്രോജക്ടിനും `solution/` കൂടാതെ പലപ്പോഴും `start/` അല്ലെങ്കിൽ `your-work/` ഡയറക്ടറികൾ +- പാഠം പ്രത്യേക `images/` ഫോൾഡറുകളിൽ ചിത്രങ്ങൾ സൂക്ഷിക്കുന്നു +- വിവർത്തനങ്ങൾ `translations/{language-code}/` ഘടനയിൽ + +## Build and Deployment + +### Quiz App Deployment (Azure Static Web Apps) + +quiz-app Azure Static Web Apps ലോചനത്തിന് ക്രമീകരിച്ചിരിക്കുന്നു: + +```bash +cd quiz-app +npm run build # dist/ ഫോളדער് സൃഷ്ടിക്കുന്നു +# പ്രധാന ബ്രാഞ്ചിലേക്ക് പുഷ് ചെയ്യുമ്പോൾ GitHub Actions വർക്‌ഫ്ലോ ഉപയോഗിച്ച് വിന്യസിക്കുന്നു +``` + +Azure Static Web Apps ക്രമീകരണം: +- **ആപ്പ് സ്ഥലം**: `/quiz-app` +- **ഔട്ട്പുട്ട് സ്ഥലം**: `dist` +- **വർക്‌ഫ്ലോ**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` + +### Documentation PDF Generation + +```bash +npm install # docsify-to-pdf ഇൻസ്റ്റാൾ ചെയ്യുക +npm run convert # ഡോക്‌സിൽ നിന്ന് PDF സൃഷ്‌ടിക്കുക +``` + +### Docsify Documentation + +```bash +npm install -g docsify-cli # ഡോക്സിഫൈ ആഗോളതലത്തിൽ ഇൻസ്റ്റാൾ ചെയ്യുക +docsify serve # localhost:3000-ൽ സർവ് ചെയ്യുക +``` + +### Project-specific Builds + +ഓരോ പ്രോജക്ട് ഡയറക്ടറിയിലും വ്യത്യസ്ത ബിൽഡ് പ്രക്രിയകൾ ഉണ്ടായി കിടക്കാം: +- Vue പ്രോജക്ടുകൾ: `npm run build` പ്രൊഡക്ഷൻ ബണ്ടлів സൃഷ്ടിക്കുന്നു +- സ്റ്റാറ്റിക് പ്രോജക്ടുകൾ: ബില്‍ഡ് സ്‌റ്റെപ്പ് ഇല്ല, ഫയലുകൾ നേരിട്ട് സർവ് ചെയ്യുക + +## Pull Request Guidelines + +### Title Format + +മാറ്റത്തിന്റെ മേഖലയെ വ്യക്തമായി സൂചിപ്പിക്കുന്ന തലക്കെട്ടുകൾ ഉപയോഗിക്കുക: +- `[Quiz-app] Add new quiz for lesson X` +- `[Lesson-3] Fix typo in terrarium project` +- `[Translation] Add Spanish translation for lesson 5` +- `[Docs] Update setup instructions` + +### Required Checks + +പി ആർ സമർപ്പിക്കുന്നതിന് മുമ്പ്: + +1. **കോഡ് ഗുണമേന്മ**: + - ബാധകമായ പ്രോജക്ട് ഡയറക്ടറികളിൽ `npm run lint` ഓടിക്കുക + - എല്ലാ ലിന്റ് പിശകുകളും മുന്നറിയിപ്പുകളും പരിഹരിക്കുക + +2. **ബിൽഡ് പരിശോധന**: + - ബാധകമുള്ള പക്ഷം `npm run build` ഓടിക്കുക + - ബിൽഡ് പിശകുകൾ ഇല്ലെന്ന് ഉറപ്പാക്കുക + +3. **ലിങ്ക് പരിശോധന**: + - എല്ലാ മാർക്ക്ഡൗൺ ലിങ്കുകളും പരിശോധിക്കുക + - ഇമേജ് റഫറൻസുകൾ ശരിയാണെന്ന് ഉറപ്പാക്കുക + +4. **ഉള്ളടക്കം അവലോകനം**: + - വൃത്തിപരിശോധനയും വ്യാകരണമികവ് പരിശോധിക്കൽ + - കോഡ് ഉദാഹരണങ്ങൾ ശരിയായും വിദ്യാഭ്യാസപരവുമായുണ്ടെന്ന് ഉറപ്പാക്കുക + - വിവർത്തനങ്ങൾ യഥാ അർത്ഥത്തെ നിലനിർ‍ത്തുന്നുണ്ടെന്ന് പരിശോധിക്കുക + +### Contribution Requirements + +- Microsoft CLA യുമായി അംഗീകരിക്കുക (ആദ്യ PR-ൽ ഓട്ടോമാറ്റിക് പരിശോധന) +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) പാലിക്കുക +- വിശദമായ മാർഗനിർദേശങ്ങൾക്ക് [CONTRIBUTING.md](./CONTRIBUTING.md) നോക്കുക +- ആവശ്യമായ പക്ഷം പുൾ റിക്ക്വസ്റ്റ് വിവരണത്തിൽ ഇഷ്യൂ നമ്പറുകൾ ഉൾപ്പെടുത്തുക + +### Review Process + +- PR കൾ മെയിന്റെയ്‌നർമാർക്കും സമൂഹത്തിനും റിവ്യൂ ചെയ്യപ്പെടും +- വിദ്യാഭ്യാസ വ്യക്തത മുൻഗണനയാണ് +- കോഡ് ഉദാഹരണങ്ങൾ നിലവിലുള്ള മികച്ച രീതികൾ പാലിക്കണം +- വിവർത്തനങ്ങൾ കൃത്യതയോടെ സംസ്ക്കാരപരമായ അനുയോജ്യതയോടെ പരിശോധിക്കും + +## Translation System + +### Automated Translation + +- GitHub Actions ഉപയോഗിച്ച് co-op-translator വർക്ഫ്ലോ ഉപയോഗിക്കുന്നു +- 50+ ഭാഷകളിലേക്ക് ഓട്ടോമാറ്റിക് വിവർത്തനം നൽകുന്നു +- പ്രധാനം ഡയറക്ടറികളിലുള്ള സ്രോത് ഫയലുകൾ +- വിവർത്തന ഫയലുകൾ `translations/{language-code}/` ഡയറക്ടറിയിലാണ് + +### Adding Manual Translation Improvements + +1. `translations/{language-code}/`യിൽ സ്ഥിതിചെയ്യുന്ന ഫയൽ കണ്ടെത്തുക +2. ഘടന നിലനിർത്തികൊണ്ട് പരിഷ്ക്കാരങ്ങൾ ചെയ്യുക +3. കോഡ് ഉദാഹരണങ്ങൾ പ്രവർത്തനക്ഷമമാണെന്ന് ഉറപ്പാക്കുക +4. ഏതെങ്കിലും പ്രാദേശിക ക്വിസ് ഉള്ളടക്കം പരീക്ഷിക്കുക + +### Translation Metadata + +വിവർത്തന ഫയലുകളിൽ മെറ്റാഡേറ്റ ഹedersറുകൾ ഉൾപ്പെടുന്നു: +```markdown + +``` + +## Debugging and Troubleshooting + +### Common Issues + +**Quiz app fails to start**: +- Node.js പതിപ്പ് പരിശോധിക്കുക (v14+ ശുപാർശ) +- `node_modules`യും `package-lock.json`യും ഇല്ലാതാക്കി വീണ്ടും `npm install` ഓടിക്കുക +- പോർട്ട് കോൺഫ്ലിക്റ്റുകൾ പരിശോധിക്കുക (ഡീഫോൾട്ട്: Vite വിഷയം 5173) + +**API server won't start**: +- Node.js പതിപ്പ് കുറഞ്ഞത് node >=10 ആണെന്ന് ഉറപ്പാക്കുക +- പോർട്ട് ഉപയോഗത്തിലാണ് എന്ന് പരിശോധിക്കുക +- എല്ലാം ഡെപൻഡൻസികളും `npm install` വഴി ഇൻസ്റ്റാൾ ചെയ്തുണ്ടെന്ന് ഉറപ്പാക്കുക + +**Browser extension won't load**: +- manifest.json ശരിയായ ഫോർമാറ്റിൽ ആണെന്ന് പരിശോധിക്കുക +- ബ്രൗസർ കോൺസോൾ പിശകുകൾ കാണുക +- ബ്രൗസറിനനുസരിച്ച് എക്സ്‌ടൻഷൻ ഇൻസ്റ്റലേഷൻ മാർഗനിർദേശങ്ങൾ പാലിക്കുക + +**Python chat project issues**: +- OpenAI പാക്കേജ് ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടോ പരിശോധിക്കുക: `pip install openai` +- GITHUB_TOKEN എൻവയോണ്മെന്റ് വേരിയബിൾ സജ്ജമാണെന്ന് ഉറപ്പാക്കുക +- GitHub മോഡൽസ് ആക്സസ് അനുമതികൾ പരിശോധിക്കുക + +**Docsify not serving docs**: +- docsify-cli ഗ്ലോബലായി ഇൻസ്റ്റാൾ ചെയ്യുക: `npm install -g docsify-cli` +- റെപ്പോസിറ്ററി റൂട്ടിൽ നിന്നു ഓടിക്കുക +- `docs/_sidebar.md` നിലവിലുണ്ടെന്ന് ഉറപ്പാക്കുക + +### Development Environment Tips + +- HTML പ്രോജക്ടുകൾക്കുള്ള VS Code Live Server എക്സ്റ്റെൻഷൻ ഉപയോഗിക്കുക +- ഏകാസംബന്ധിതമായ ഫോർമാറ്റ്‌ക്കായി ESLint, Prettier എക്സ്റ്റൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക +- JavaScript ഡീബഗ് ചെയ്യാൻ ബ്രൗസർ ഡെവ്ടൂൾസ് ഉപയോഗിക്കുക +- Vue പ്രോജക്ടുകൾക്കായി Vue DevTools ബ്രൗസർ എക്സ്‌ടൻഷൻ ഇൻസ്റ്റാൾ ചെയ്യുക + +### Performance Considerations + +- 50+ ഭാഷകളിലുള്ള വിവർത്തിത ഫയലുകളുടെ എണ്ണം വലിയതാണ്, ഫുൾ ക്ലോണുകൾ വലിയതാണ് +- ഉള്ളടക്കത്തിൽ മാത്രം പ്രവർത്തിക്കുന്നവർക്ക് ഷാലോ ക്ലോൺ ഉപയോഗിക്കുക: `git clone --depth 1` +- ഇംഗ്ലീഷ് ഉള്ളടക്കത്തിൽ നടത്തിയപ്പോൾ വിവർത്തനങ്ങൾ തിരയൽ പുറത്താകുന്നതായി ഒഴിവാക്കുക +- ആദ്യ ഓടിയിൽ ബിൽഡ് പ്രക്രിയകൾ (npm install, Vite build) നിത്യം സാധാരണയായി ക്ഷീണാകും + +## Security Considerations + +### Environment Variables + +- API കീകൾ രെപ്പോസിറ്ററിയിൽ ഒരിക്കലും കമ്മിറ്റ് ചെയ്യരുത് +- `.env` ഫയലുകൾ ഉപയോഗിക്കുക (ഇതെല്ലാം `.gitignore`-ലുണ്ട്) +- ആവശ്യമായ എൻ‌വയോൺമെന്റ് വേരിയബിളുകൾ പ്രോജക്ട് READMEs-ൽ രേഖപ്പെടുത്തുക + +### Python Projects + +- വെർച്ച്വൽ എൻ‌വയോൺമെന്റ് ഉപയോഗിക്കുക: `python -m venv venv` +- ഡെപൻഡൻസികൾ അപ്ഡേറ്റ് ചെയ്ത് വയ്ക്കുക +- GitHub ടോക്കണുകൾക്ക് കുറഞ്ഞ ആവശ്യമായ അനുമതികൾ മാത്രം നൽകുക + +### GitHub Models Access + +- GitHub മോഡലുകളിലേക്കുള്ള വ്യക്തിഗത ആക്‌സസ് ടോക്കണുകൾ ആവശ്യമാണ് (PAT) +- ടോക്കണുകൾ എൻ‌വയോൺമെന്റ് വേരിയബിളുകളായി സൂക്ഷിക്കുക +- ടോക്കണുകൾ അല്ലെങ്കിൽ ക്രെഡൻഷ്യലുകൾ ഒരിക്കലും കമ്മിറ്റ് ചെയ്യരുത് + +## Additional Notes + +### Target Audience + +- വെബ് വികസനത്തിൽ പൊതുവായി തുടങ്ങുന്നവർ +- വിദ്യാർത്ഥികളും സവാൽ പഠനക്കാരും +- ക്ലാസറूमിൽ പാഠ്യപദ്ധതി ഉപയോഗിക്കുന്ന അധ്യാപകർ +- പ്രവേശന യോഗ്യതയും നേതൃത്വപരവും ഉള്ള ഉള്ളടക്കം + +### Educational Philosophy + +- പദ്ധതിപരമായ പഠന സമീപനം +- സ്ഥിരം അറിവ് പരിശോധിക്കൽ (ക്വിസുകൾ) +- പ്രായോഗിക കോഡിംഗ് അഭ്യാസങ്ങൾ +- യാഥാർത്ഥ്യ ലോക ഉദാത്തങ്ങൾ +- ഫ്രെയിംവർക്കുകളുടെ മുമ്പ് അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ + +### Repository Maintenance + +- സജീവമായ പഠനക്കാരുടെയും പങ്കാളികളുടെയും സമൂഹം +- ഡെപെൻഡൻസികളും ഉള്ളടക്കവും নিয়മിതമായി നവീകരിക്കുന്നു +- മെയിന്റെയ്‌നർമാരും ചര്‍ച്ചകളും ശ്രദ്ധിക്കുന്നു +- GitHub Actions മുഖേന വിവർത്തന അപ്ഡേറ്റുകൾ സ്വയംനടത്തുന്നു + +### Related Resources + +- [Microsoft Learn modules](https://docs.microsoft.com/learn/) +- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) +- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) പഠനാർത്ഥികൾക്ക് ശുപാർശ ചെയ്യുന്നു +- അധിക കോഴ്സുകൾ: Generative AI, Data Science, ML, IoT പാഠ്യങ്ങള് + +### Working with Specific Projects + +തനതു പ്രോജക്ടുകൾക്കുള്ള വിശദമായ നിർദ്ദേശങ്ങൾക്കായി വായിക്കുക: +- `quiz-app/README.md` - Vue 3 ക്യൂvis് ആപ്പ് +- `7-bank-project/README.md` - ബാൻക് ആപ്പ് ഓത്തന്റിക്കേഷൻ സെറ്റ് ചെയ്യപ്പെട്ടത് +- `5-browser-extension/README.md` - ബ്രൗസർ എക്സ്റ്റെൻഷൻ വികസനം +- `6-space-game/README.md` - കാൻവാസ് അടിസ്ഥാനമായ ഗെയിം വികസനം +- `9-chat-project/README.md` - AI ചാറ്റ് അസിസ്റ്റന്റ് പ്രോജക്ട് + +### Monorepo Structure + +പരമ്പരാഗത മോനോറിപ്പോ അല്ലെങ്കിലും, ഈ റെപ്പോസിറ്ററി പല സ്വതന്ത്ര പ്രോജക്ടുകൾ ഉൾക്കൊള്ളുന്നു: +- ഓരോ പാഠവും സ്വതന്ത്രമാണ് +- പ്രോജക്ടുകൾ പരസ്പരം ഡെപൻഡൻസികൾ പങ്കിടുന്നില്ല +- മറ്റുള്ളവരെ ബാധിക്കാതെ വ്യക്തിഗത പ്രോജക്ടുകളിൽ പ്രവർത്തിക്കുക +- മുഴുവൻ പാഠ്യപദ്ധതി അനുഭവത്തിനായി മുഴുവൻ റെപ്പോ ക്ലോൺ ചെയ്യുക + +--- + + +**അസൂയാനിർദ്ദേശം**: +ഈ രേഖ AI വിവർത്തനം സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്‌തതാണ്. ഞങ്ങൾ പരമാവധി ശരിക്കും ശ്രമിക്കുന്നുവെങ്കിലും, സ്വയംക്രമിത വിവർത്തനങ്ങളിൽ പിഴവുകളോ അസാധ്യതകളോ ഉണ്ടാകാൻ സാധ്യതയുള്ളതാണ്. അതിനാൽ, ദയവായി ശ്രദ്ധിക്കേണ്ടത്, ഈ രേഖയുടെ മുമ്ബ് ഉള്ള ഭാഷയിലുള്ള യുഗ്മം പ്രാമാണിക സ്രോതസ്സായി കണക്കാക്കണം. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശിപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തെത്തുടർന്ന് ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും അർത്ഥവിമർശങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/CODE_OF_CONDUCT.md b/translations/ml/CODE_OF_CONDUCT.md new file mode 100644 index 000000000..86582512b --- /dev/null +++ b/translations/ml/CODE_OF_CONDUCT.md @@ -0,0 +1,25 @@ + +# മൈക്രോസ്‌ഫ്റ്റ് ഓപ്പൺ സോഴ്സ് പെരുമാറ്റ നയം + +ഈ പ്രോജക്ട് [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) സ്വീകരിച്ചിരിക്കുന്നു. + +രിസോഴ്സുകൾ: + +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) +- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) +- ചോദിക്കാനും ആശങ്കകളുള്ളപ്പോൾ [opencode@microsoft.com](mailto:opencode@microsoft.com) എന്ന വിലാസത്തിൽ ബന്ധപ്പെടുക + +--- + + +**കുറിപ്പ്**: +ഈ പ്രമാണം AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ നിശ്ചിതത്വത്തിനായി ശ്രമിച്ചെങ്കിലും, സോഫ്റ്റ്വെയർ വിവർത്തനങ്ങളിൽ തെറ്റുകളോ അകിതാത്മകതകളോ ഉണ്ടാകാമെന്ന് ശ്രദ്ധിക്കുക. ഔദ്യോഗിക ഭാഷയിലെ മൂല പ്രമാണം പ്രാമാണികമായ ഉറവിടമായി കണക്കാക്കേണ്ടതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക്, വിദഗ്ധ മനുഷ്യ വിവർത്തനം നിർബന്ധം ആണ്. ഈ വിവർത്തനത്തിൽ നിന്നുണ്ടാകുന്ന തെറ്റു ബോധ്യങ്ങൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/CONTRIBUTING.md b/translations/ml/CONTRIBUTING.md new file mode 100644 index 000000000..629ef60b9 --- /dev/null +++ b/translations/ml/CONTRIBUTING.md @@ -0,0 +1,30 @@ + +# സംഭാവനകൾ + +ഈ പ്രോജക്ട് സംഭാവനകളും നിർദ്ദേശങ്ങളും സ്വാഗതം ചെയ്യും. ഏറ്റവും അധികം സംഭാവനകൾ നിങ്ങൾക്ക് +കൺട്രിബ്യുട്ടർ ലൈസൻസ് അക്രമം (CLA) യിൽ സമ്മതമാകും എന്നത് ആവശ്യമാണ്, നിങ്ങൾക്ക് അവകാശമുണ്ടെന്ന് +ഉണ്ടെന്നും, വാസ്തവത്തിൽ ബഹുമതികൾ നൽകുന്നുവെന്ന് അറിയിക്കുന്ന CLA യിൽ. കൂടുതലായി വിവരങ്ങൾക്കായി സന്ദർശിക്കുക +[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon). + +നിങ്ങൾ ഒരു പുൾ റിക്വസ്റ്റ് സമർപ്പിക്കുമ്പോൾ, CLA-ബോട്ട് ഓട്ടോമാറ്റിക്കായി നിങ്ങൾക്കു CLA നൽകേണ്ടതുണ്ടോ എന്ന് +നിശ്ചയിക്കുകയും, PR യെ അനുയോജ്യമായി അലങ്കരിക്കുകയും ചെയ്യും (ഉദാ: ലേബൽ, കാമന്റ്). ബോട്ടിന്റെ +निर्देशങ്ങൾ പിന്തുടരുക. നമ്മുടെ CLA ഉപയോഗിക്കുന്ന എല്ലാ റിപ്പോസിറ്ററികളിലും നിങ്ങൾക്ക് ഇത് ഒരു തവണ മാത്രം ചെയ്യേണ്ടതാകും. ദയവായി, എന്തിനാണ് നിങ്ങൾ ആ മാറ്റം ചെയ്‌തതെന്ന് ഞങ്ങൾക്ക് അറിയിക്കാനും চেষ্টা ചെയ്യുക, അതിലൂടെ നിങ്ങളുടെ അഭ്യർത്ഥനയെ കുറിച്ച് നാം മെച്ചത്തിൽ മനസിലാക്കാം. + +ഈ പ്രോജക്ട് [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) നെ ആപേക്ഷിച്ചു. +കൂടുതൽ വിവരങ്ങൾക്ക്, [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) നോക്കുക +അല്ലെങ്കിൽ [opencode@microsoft.com](mailto:opencode@microsoft.com) എന്ന വിലാസത്തിൽ അധിക сұрақങ്ങൾക്കോ അഭിപ്രായങ്ങളിലോ ബന്ധപ്പെടുക. + +--- + + +**സ്ഥിരീകരണം**: +ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്‌തിരിക്കുന്നു. നമുക്ക് കൃത്യതക്ക് ശ്രമിച്ചെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ ദോഷങ്ങൾ ഉണ്ടാകാമെന്ന് ദയവായി മനസിലാക്കുക. അതിന്റെ സ്വതന്ത്ര ഭാഷയിലുള്ള യഥാർത്ഥ രേഖ അധികൃതമായ ഉറവിടമായി കണക്കാക്കേണ്ടതാണ്. അതിജീവക വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നാകുന്ന തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാനക്കേടുകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/Git-Basics/README.md b/translations/ml/Git-Basics/README.md new file mode 100644 index 000000000..1734cb600 --- /dev/null +++ b/translations/ml/Git-Basics/README.md @@ -0,0 +1,137 @@ + +## വെബ്-ഡെവ് തുടങ്ങിയവർക്ക് ഉപകാരപ്രദമായ GIT അടിസ്ഥാനങ്ങൾ👶 + + +## `Git` എന്താണ്? + 1. Git ഒരു വിതരണവത്കരിച്ച പതിപ്പു നിയന്ത്രണ സിസ്റ്റമാണ്. + 2. പൂർണ്ണ കോഡ്‌ബേസ്, ചരിത്രം ഓരോ ഡെവലപ്പറുടെയും കമ്പ്യൂട്ടറിൽ തന്നെ ലഭ്യമാണ്, + ഇത് ബ്രാഞ്ചിംഗ്, മേഴ്‍ജിംഗ് എളുപ്പമാക്കുന്നു. + 3. കമ്പ്യൂട്ടർ ഫയലുകളിലെ മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യാൻ പതിപ്പു നിയന്ത്രണ സിസ്റ്റമായി (VCS) ഉപയോഗിക്കുന്നു. + +* വിതരണവത്കരിച്ച പതിപ്പു നിയന്ത്രണം +* ബഹുഡെവലപ്പർമാരുടെ ഇടയിൽ ജോലി ഏകോപിപ്പിക്കുന്നു +* ആരാണ് എന്ത് മാറ്റം ചെയ്തതും എപ്പോഴാണ് ചെയ്തത് എന്നിവ അറിയാം +* വേണമെങ്കിൽ തിരിച്ചു revert ചെയ്യാം +* ലോക്കൽ & റിമോട്ട് റീപ്പോസ് + +## GIT യുടെ ആശയങ്ങൾ +* കോഡ് ചരിത്രം ട്രാക്ക് ചെയ്യുന്നു +* നിങ്ങളുടെ ഫയലുകളുടെ "സ്നാപ്ഷോട്ടുകൾ" എടുക്കുന്നു +* "കമ്മിറ്റ്" ചെയ്ത് നിങ്ങൾക്ക് സ്നാപ്ഷോട്ട് എടുക്കാന്‍ സമയമെടുത്താൽ +* ഏതൊരൊക്കെ സ്നാപ്ഷോട്ട് വേണമെങ്കിലും സന്ദർശിക്കാം +* കമ്മിറ്റ് ചെയ്യാനുള്ള മുമ്പ് ഫയലുകൾ സ്റ്റേജിംഗ് ചെയ്യാം + +### Git & GitHub ന്റെ വ്യത്യാസം + +| Git | GitHub | +| ------- | ----------- | +| Git ഒരു സോഫ്റ്റ്‌വെയർ ആണ് | GitHub ക്ലൗഡ് സേവനമാണ് | +| Git സിസ്റ്റത്തിൽ ലോക്കലി ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്നത് | GitHub വെബിൽ ഹോസ്റ്റ് ചെയ്തിരിക്കുന്നു | +| കമാൻഡ്-ലൈൻ ടൂൾ ആണ് | ഗ്രാഫിക്കൽ യൂസർ ഇന്റർഫേസ് ആണ് | +| Git ലിനക്സിൽ പരിപാലിക്കപ്പെടുന്നു | GitHub മൈക്രോസോഫ്റ്റ് പരിപാലിക്കുന്നു | +| പതിപ്പു നിയന്ത്രണത്തിലും കോഡ് ഷെയറിംഗിലും കേന്ദ്രീകരിച്ചിരിക്കുന്നു | കേന്ദ്രീകൃത സോഴ്‌സ് കോഡ് ഹോസ്റ്റിങ്ങിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു | +| Git ഓപ്പൺ-സോഴ്സ് ലൈസൻസുള്ളതാണ് | GitHub സൗജന്യവും പണം നൽകേണ്ട തരം ഉള്ലതാണ് | +| Git 2005-ൽ റിലീസ് ചെയ്തു | GitHub 2008-ൽ ഇറക്കി | + +## GIT ഇൻസ്റ്റലേഷൻ +* Linux(Debian) + `$sudo apt-get install git` +* Linux(Fedora) + `$sudo yum install git` +* [ഡൗൺലോഡ്](http://git-scm.com/download/mac) മാക്കിനുള്ളത് +* [ഡൗൺലോഡ്](http://git-scm.com/download/win) വിന്‍ഡോസിനുള്ളത് + + +### ഇൻസ്റ്റലേഷൻ പ്രക്രിയയുടെ ഘട്ടങ്ങൾ: +1. +2. +3. +4. +5. +6. പിന്നീട് Next > Next > Next > Install ക്ലിക്ക് ചെയ്യുക +7. + +### ഇൻസ്റ്റലേഷൻ കഴിഞ്ഞ് git bash ഉപയോഗിച്ച് git കോൺഫിഗർ ചെയ്യേണ്ടത് + 1. `git config --global user.name 'YourName'` + 2. `git config --global user.email 'YourEmail'` +___ + + +## Git കമാൻഡുകൾ +___ + +### പ്രോജക്ടുകൾ സ്വീകരിക്കുക & സൃഷ്ടിക്കുക + +| കമാൻഡ് | വിവരണം | +| ------- | ----------- | +| `git init` | ഒരു ലോക്കൽ Git റീപ്പോസിറ്ററി ആദ്യം സൃഷ്ടിക്കുക | +| `git clone ssh://git@github.com/[username]/[repository-name].git` | ഒരു റിമോട്ട് റീപ്പോസിറ്ററി ലോക്കലിലേക്ക് കോപ്പി ചെയ്യുക | + +### അടിസ്ഥാന സ്നാപ്ഷോട്ടിംഗ് + +| കമാൻഡ് | വിവരണം | +| ------- | ----------- | +| `git status` | നിലവാര പരിശോധിക്കുക | +| `git add [file-name.txt]` | ഒരു ഫയൽ സ്റ്റേജിംഗ് ഏരിയയിൽ ചേർക്കുക | +| `git add -A` | എല്ലാ പുതിയ മാറ്റം വന്ന ഫയലുകളും സ്റ്റേജിംഗിലേക്ക് ചേർക്കുക | +| `git commit -m "[commit message]"` | മാറ്റങ്ങൾ കമ്മിറ്റ് ചെയ്യുക | +| `git rm -r [file-name.txt]` | ഫയലോ ഫോൾഡരോ ഒഴിവാക്കുക | +| `git push` | റിമോട്ട് റീപ്പോവിലേക്ക് എടുക്കുക | +| `git pull` | റിമോട്ട് റീപ്പോവിൽ നിന്നുള്ള ഏറ്റവും പുതിയ മാറ്റങ്ങൾ സ്വീകരിക്കുക | + +### ബ്രാഞ്ചിംഗ് & മേഴ്‌ജിംഗ് + +| കമാൻഡ് | വിവരണം | +| ------- | ----------- | +| `git branch` | ബ്രാഞ്ചുകൾ പട്ടികപ്പെടുത്തുക (ഇപ്പോൾ ഉള്ള ബ്രാഞ്ചിന് അടിയന്തരചിഹ്നം) | +| `git branch -a` | എല്ലാ ബ്രാഞ്ചുകളും പട്ടികപ്പെടുത്തുക (ലോകൽ & റിമോട്ട്) | +| `git branch [branch name]` | പുതിയ ഒരു ബ്രാഞ്ച് സൃഷ്ടിക്കുക | +| `git branch -D [branch name]` | ഒരു ബ്രാഞ്ച് ഇല്ലാക്കുക | +| `git push origin --delete [branch name]` | റിമോട്ട് ബ്രാഞ്ച് നീക്കം ചെയ്യുക | +| `git checkout -b [branch name]` | ഒരു പുതിയ ബ്രാഞ്ച് സൃഷ്ടിച്ച് അതിലേക്ക് മാറുക | +| `git checkout -b [branch name] origin/[branch name]` | റിമോട്ട് ബ്രാഞ്ച് ക്ലോൺ ചെയ്ത് അതിലേക്ക് മാറുക | +| `git branch -m [old branch name] [new branch name]` | ഒരു ബ്രാഞ്ചിന് പുതിയ പേര് നൽകുക | +| `git checkout [branch name]` | ഒരു ബ്രാഞ്ചിലേക്ക് മാറുക | +| `git checkout -` | അവസാനമായി മാറിയ ബ്രാഞ്ചിലേക്ക് മാറുക | +| `git checkout -- [file-name.txt]` | ഫയലിലെ മാറ്റങ്ങൾ ഒഴിവാക്കുക | +| `git merge [branch name]` | ഒരു ബ്രാഞ്ച് ചാലക ബ്രാഞ്ചിലേക്ക് മേഴ്‌ജ് ചെയ്യുക | +| `git merge [source branch] [target branch]` | ഒരു ബ്രാഞ്ച് ലക്ഷ്യമിട്ട ബ്രാഞ്ചിലേക്ക് മർജ്ജ് ചെയ്യുക | +| `git stash` | പ്രവർത്തനസമയത്തെ മാറ്റങ്ങൾ സ്റ്റാഷ് ചെയ്യുക | +| `git stash clear` | എല്ലാ സ്റ്റാഷിലെ എൻട്രികളും നീക്കം ചെയ്യുക | + +### പ്രോജക്ടുകൾ പങ്കുവെക്കൽ & അപ്‌ഡേറ്റ് ചെയ്യൽ + +| കമാൻഡ് | വിവരണം | +| ------- | ----------- | +| `git push origin [branch name]` | ഒരു ബ്രാഞ്ച് റിമോട്ട് റീപ്പോയിലേക്ക് പുഷ് ചെയ്യുക | +| `git push -u origin [branch name]` | റിമോട്ട് റീപ്പോയിലേക്ക് മാറ്റങ്ങൾ പുഷ് ചെയ്യുക (ബ്രാഞ്ച് ഓർമപ്പെടുത്തുക) | +| `git push` | റിമോട്ട് റീപ്പോയിലേക്ക് മാറ്റങ്ങൾ പുഷ് ചെയ്യുക (ഓർമിച്ച ബ്രാഞ്ച്) | +| `git push origin --delete [branch name]` | റിമോട്ട് ബ്രാഞ്ച് ഇല്ലാക്കുക | +| `git pull` | ലോക്കൽ റീപ്പോ പുതിയ കമ്മിറ്റിലേക്ക് അപ്‌ഡേറ്റ് ചെയ്യുക | +| `git pull origin [branch name]` | റിമോട്ട് റീപ്പോയിൽ നിന്നുള്ള മാറ്റങ്ങൾ വലിക്കുക | +| `git remote add origin ssh://git@github.com/[username]/[repository-name].git` | ഒരു റിമോട്ട് റീപ്പോ ചേർക്കുക | +| `git remote set-url origin ssh://git@github.com/[username]/[repository-name].git` | റീപ്പോയുടെ ഓറിജിൻ ബ്രാഞ്ച് SSH ആയി ക്രമീകരിക്കുക | + +### പരിശോധന & താരതമ്യം + +| കമാൻഡ് | വിവരണം | +| ------- | ----------- | +| `git log` | മാറ്റങ്ങൾ കാണുക | +| `git log --summary` | മാറ്റങ്ങൾ (വിശദമായി) കാണുക | +| `git log --oneline` | മാറ്റങ്ങൾ (സംഗ്രഹത്തിൽ) കാണുക | +| `git diff [source branch] [target branch]` | മർജ്ജിന് മുൻപ് മാറ്റങ്ങൾ മുൻകൂർ കാണുക | + +--- + + +**അസൂയാരഹിത കുറിപ്പ്**: +ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI പരിഭാഷാ സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശരിയായ വിവർത്തനത്തിനായി ശ്രമിച്ചേക്കിലും, സ്വയംചാലിതമായ വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ തട്ടിപ്പുകൾ ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. മൊഴിയിൽ നിന്നുള്ള യഥാർത്ഥ രേഖ കാര്യനിർണായക മേധാവി ഉറവിടമായി കണക്കാക്കപ്പെടുകയാണെന്ന് ദയവായി കാണുക. അത്യന്താപേക്ഷിത വിവരങ്ങൾക്കായി ഒരു പ്രൊഫഷണൽ മാനവ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും ഓർമ്മക്കുറിവുകൾക്കും біз ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/README.md b/translations/ml/README.md new file mode 100644 index 000000000..b992c75be --- /dev/null +++ b/translations/ml/README.md @@ -0,0 +1,280 @@ + +[![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/) + +[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) + +# തുടക്കക്കാർക്ക് വെബ് ഡെവലപ്പ്മെന്റ് - ഒരു കോർസ്സ് + +Microsoft Cloud Advocates ഒരുക്കുന്ന 12 ആഴ്ചകളിലായി മുഴുവനായുള്ള കോഴ്‌സിലൂടെ വെബ് വികസനത്തിന്റെ അടിസ്ഥാനങ്ങൾ പഠിക്കുക. 24 പാഠങ്ങളിലൊരൊന്ന് JavaScript, CSS, HTML എന്നിവ കൈകൊണ്ട് ചെയ്യാവുന്ന പ്രോജക്ടുകളായ ടെറരിയം, ബ്രൗസർ എക്സ്റ്റൻഷനുകൾ, സ്‌പേസ് ഗെയിമുകൾ തുടങ്ങിയവയിലൂടെയാണ് പഠിപ്പിക്കുന്നത്. ക്വിസുകൾ, ചർച്ചകൾ, പ്രായോഗിക അസൈൻമെന്റുകൾ എന്നിവയിലും പങ്കെടുക്കുക. വിന്യസാധ്യമായ പ്രോജക്റ്റ്-അടിസ്ഥാന പഠനരീതിയിലൂടെ നിങ്ങളുടെ കഴിവുകൾ മെച്ചപ്പെടുത്തുകയും അറിവ് മെച്ചപ്പെടുത്തുകയും ചെയ്യുക. ഇന്ന് തന്നെ നിങ്ങളുടെ കോഡിംഗ് യാത്ര ആരംഭിക്കൂ! + +Azure AI Foundry Discord Community യിൽ ചേരൂ + +[![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) + +### 🌐 പലഭാഷാ പിന്തുണ + +#### GitHub Action വഴി (സ്വയംപ്രവർത്തനം & എല്ലായ്പ്പോഴും പുതുക്കിയാവുന്ന) + + +[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](./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](../ta/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' +> ``` +> ഇതുവഴി നിങ്ങൾക്ക് കോഴ്‌സ് പൂർത്തിയാക്കാൻ വേണ്ടിയുള്ള എല്ലാ കാര്യങ്ങളും വളരെ വേഗത്തിൽ ഡൗൺലോഡ് ചെയ്യാവുന്നതാണ്. + + +**കൂടുതൽ വിവർത്തന ഭാഷകൾ ഈ ലിങ്കിൽ ചുരുക്കി നൽകിയിട്ടുണ്ട് [ഇവിടെ](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) + +#### 🧑‍🎓 _നിങ്ങൾ ഒരു വിദ്യാർത്ഥിയാണോ?_ + +[**സ്റ്റുഡന്റ് ഹബ് പേജ്**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) സന്ദർശിക്കുക, അവിടെ നിങ്ങൾക്ക് തുടക്കക്കാരുടെ വിഭവങ്ങൾ, സ്റ്റുഡന്റ് പാക്കുകൾ, ഒരു സൗജന്യ സർട്ടിഫിക്കറ്റ് വൗച്ചർ നേടാനുള്ള മാർഗ്ഗങ്ങൾ എന്നിവ ലഭ്യമാണ്. മാസേന ഉള്ളടക്കം മാറ്റുന്നതിനാൽ ഈ പേജ് ബുക്ക്മാർക്ക് ചെയ്ത് ഇടയ്ക്ക് പരിശോധിക്കുന്നതാണ് ഏറ്റവും നല്ലത്. + +### 📣 അറിയിപ്പ് - പുതിയ GitHub Copilot Agent മോഡ് വെല്ലുവിളികൾ പൂർത്തിയാക്കുക! + +പുതിയ വെല്ലുവിളി ചേർത്തു, "GitHub Copilot Agent Challenge 🚀" എന്നതു കൂടുതലായുള്ള അദ്ധ്യായങ്ങളിൽ കാണാം. GitHub Copilot, Agent മോഡ് ഉപയോഗിച്ച് പൂർത്തിയാക്കാനുള്ള പുതിയ വെല്ലുവിളിയാണ് ഇത്. മുൻപ് Agent മോഡ് ഉപയോഗിച്ചിട്ടില്ലെങ്കിൽ, ഇത് തവണ കൂടാതെ എഴുത്ത് സൃഷ്ടിക്കാനും ഫയലുകൾ സൃഷ്ടിക്കാനും സെങ്കിൽ എഡിറ്റ് ചെയ്യാനും, കമാൻഡ് ഓടിക്കാനും കഴിയും. + +### 📣 അറിയിപ്പ് - _Generative AI ഉപയോഗിച്ച് പുതിയ പ്രോജക്ട്_ + +പുതിയ AI Assistant പ്രോജക്ട് ചേർത്തു, ഇത് പരിശോധിക്കുക [project](./9-chat-project/README.md) + +### 📣 അറിയിപ്പ് - _JavaScript നു വേണ്ടി പുതിയ Generative AI കോറിക്കുലം_ + +പുതിയ Generative AI കോറിക്കുലം നഷ്ടപ്പെടുത്തേണ്ടതില്ല! + +ആരംഭിക്കാൻ സന്ദർശിക്കുക [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! + +![Background](../../translated_images/background.148a8d43afde5730.ml.png) + +- അടിസ്ഥാന കാര്യങ്ങളിൽ നിന്നാരംഭിച്ച് RAG വരെ ഉൾക്കൊള്ളുന്ന പാഠങ്ങൾ. +- GenAIയും നമ്മുടെ സഹപാഠിയുള്ള ആപ്പും ഉപയോഗിച്ച് ചരിത്രപ്രസിദ്ധ വ്യക്തികളുമായി തൽസമയ സംവാദം. +- രസകരമായ കഥാരൂപകഥ, നിങ്ങൾകാലയാത്ര ചെയ്യുന്നു! + +![character](../../translated_images/character.5c0dd8e067ffd693.ml.png) + + +ഓരോ പാഠത്തിലും പൂർത്തിയാക്കാനുള്ള അസൈൻമെന്റ്, അറിവ് പരിശോധന, വെല്ലുവിളി എന്നിവയുണ്ട്, പഠിക്കാനുള്ള വിഷയങ്ങൾ ഉൾക്കൊള്ളുന്നു: +- പ്രോമ്പ്റ്റിംഗ് ആൻഡ് പ്രോമ്പ്റ്റ് എഞ്ചിനീയറിങ് +- ടെക്സ്റ്റ് ആൻഡ് ഇമേജ് ആപ്പ് സൃഷ്ടി +- തിരച്ചിൽ ആപ്പുകൾ + +ആരംഭിക്കാൻ സന്ദർശിക്കുക [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) സ്വീകാര്യമാണ്, അവിടെ हमारे മോദറേറ്റർ ടീമംഗങ്ങൾ നിങ്ങളുടെ ചോദ്യങ്ങൾക്ക് ഉത്തരം നൽകാൻ സജ്ജമാണ്. + +കൂടുതൽ വിദ്യാഭ്യാസത്തിനായി, അധിക പഠന സാമഗ്രികൾക്കായി [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 അക്കൗണ്ടിൽ പുതിയ ഒരു റിപോസിറ്ററി നിർമ്മിക്കാം, ഇതിൽ കോറിക്കുലംയുടെ പകർപ്പ് അടങ്ങിയിരിക്കും. + +ഈ ഘട്ടങ്ങൾ പിന്തുടരുക: +1. **റിപോസിറ്ററി ഫോർക്കുചെയ്യുക**: ഈ പേജിന്റെ മുകളിലുള്ള വലത് വശത്തുള്ള "Fork" ബട്ടൺ ക്ലിക്ക് ചെയ്യുക. +2. **റിപോസിറ്ററി ക്ലോൺ ചെയ്യുക**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` + +#### Codespace ൽ കോറിക്കുലം ഓടിക്കുക + +നിങ്ങൾ സൃഷ്ടിച്ച റിപോസിറ്ററിയിൽ, **Code** ബട്ടൺ ക്ലിക്ക് ചെയ്ത് **Open with Codespaces** തിരഞ്ഞെടുക്കുക. പുതിയ ഒരു Codespace നിങ്ങൾക്കായി സൃഷ്ടിക്കും. + +![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.ml.png) + +#### നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ കോറിക്കുലം ലോക്കലായി ഓടിക്കുക + +ഈ കോറിക്കുലം നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ ലോക്കലായി ഓടിക്കാൻ, ഒരു ടെക്സ്റ്റ് എഡിറ്റർ, ഒരു ബ്രൗസർ, ഒരു കമാൻഡ് ലൈൻ ഉപകരണം എന്നിവ ആവശ്യമാണ്. നമ്മുടെ ആദ്യ പാഠമായ [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). + + +1. നിങ്ങളുടെ റിപോസിറ്ററി നിങ്ങളുടെ കമ്പ്യൂട്ടറിലേക്ക് ക്ലോൺ ചെയ്യുക. ഇത് ചെയ്യാൻ, **Code** ബട്ടൺ ക്ലിക്ക് ചെയ്ത് 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) തുറന്ന്, നിങ്ങൾക്ക് تازهപ്പുൽ किया url-ഇനായി `` മാറ്റി താഴെ കാണിക്കുന്ന കമാൻഡ് റൺ ചെയ്യുക: + + ```bash + git clone + ``` + +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) - Visual Studio Code-ൽ HTML പേജുകൾ മുൻകാഴ്ച്ച ചെയ്യാൻ +> * [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` ഫോൾഡറില്‍ കാണുക. + +## 🗃️ പാഠങ്ങൾ + +| | പ്രോജക്ട് നാമം | പഠിപ്പിച്ച ആശയങ്ങൾ | പഠന ലക്ഷ്യങ്ങൾ | ബന്ധമുള്ള പാഠം | ലേഖകൻ | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | തുടക്കം കുറിക്കുന്നു | പ്രോഗ്രാമിംഗ് പരിചയം, വാടക സാധനങ്ങൾ | പല പ്രോഗ്രാമിംഗ് ഭാഷകളുടെ അടിസ്ഥാന ഘടനകളും പ്രൊഫഷണൽ ഡെവലപ്പർമാര്‍ക്ക് സഹായം ചെയ്യുന്നതുമായ സോഫ്റ്റ്‌വയറുകൾ പഠിക്കുക | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ജാസ്മിൻ | +| 02 | തുടക്കം കുറിക്കുന്നു | GitHub അടിസ്ഥാനങ്ങൾ, ടീംവർക്കിനുള്ള പ്രവർത്തനം | നിങ്ങളുടെ പ്രോജക്ടിൽ GitHub ഉപയോഗിക്കുകയും മറ്റു കോഡുകളും സഹകരിച്ച് ഉപയോഗിക്കാനും പഠിക്കുക | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | ഫ്ലോർ | +| 03 | തുടക്കം കുറിക്കുന്നു | ആക്സസ്ബിലിറ്റി | വെബ് ആക്സസ്ബിലിറ്റി അടിസ്ഥാനങ്ങൾ പഠിക്കുക | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | ക്രിസ്റ്റോഫർ | +| 04 | JS ബേസിക്സ് | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റാ ടൈപ്പുകൾ | ജാവാസ്ക്രിപ്റ്റ് ഡാറ്റാ ടൈപ്പുകളുടെ അടിസ്ഥാനങ്ങൾ | [Data Types](./2-js-basics/1-data-types/README.md) | ജാസ്മിൻ | +| 05 | JS ബേസിക്സ് | ഫംഗ്ഷനുകൾ, മെത്തഡുകൾ | ഒരു ആപ്ലിക്കേഷൻ ലജിക് ഫ്ലോ നിയന്ത്രിക്കാൻ ഫംഗ്ഷനുകളും മെത്തഡുകളും പഠിക്കുക | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | ജാസ്മിൻ, ക്രിസ്റ്റോഫർ | +| 06 | JS ബേസിക്സ് | ജാവാസ്ക്രിപ്റ്റിലൂടെ തീരുമാനം എടുക്കൽ | നിർദ്ദേശങ്ങൾ സൃഷ്ടിക്കുന്ന രീതികൾ പഠിക്കുക | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | ജാസ്മിൻ | +| 07 | JS ബേസിക്സ് | അറേസും ലൂപ്പുകളും | ജാവാസ്ക്രിപ്റ്റിൽ അറേയും ലൂപ്പുകളും ഉപയോഗിച്ചു ഡാറ്റ കൈകാര്യം ചെയ്യുക | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | ജാസ്മിൻ | +| 08 | [ടെറേരിയം](./3-terrarium/solution/README.md) | HTML പ്രയോഗം | ഓൺലൈൻ ടെറേരിയം സൃഷ്ടിക്കാൻ HTML നിർമ്മിക്കുക, ലേഔട്ട് നിർമ്മിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | ജെൻ | +| 09 | [ടെറേരിയം](./3-terrarium/solution/README.md) | CSS പ്രയോഗം | ഓൺലൈൻ ടെറേരിക്ക CSS സ്റ്റൈൽ നൽകുക; പേജ് റെസ്പോൺസീവ് ആക്കുന്നതിൽ അടിസ്ഥാനങ്ങൾ ഉൾകൊള്ളുക | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | ജെൻ | +| 10 | [ടെറേരിയം](./3-terrarium/solution/README.md) | ജാവാസ്ക്രിപ്റ്റ് ക്ലോസറുകൾ, DOM മാനിപ്പുലേഷൻ | ടെറേരിയം ഒരു ഡ്രാഗ്/ഡ്രോപ്പ് ഇന്റർഫേസ് ആയി പ്രവർത്തിക്കാൻ ജാവാസ്ക്രിപ്റ്റ് നിർമ്മിക്കുക, ക്ലോസറുകളും DOM മാനിപ്പുലേഷനും ശ്രദ്ധിക്കുക | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | ജെൻ | +| 11 | [ടൈപ്പിംഗ് ഗെയിം](./4-typing-game/solution/README.md) | ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക | ജാവാസ്ക്രിപ്റ്റ് ആപ്ലിക്കേഷൻ ലജിക് ചലിപ്പിക്കാൻ കീബോർഡ് ഇവന്റുകൾ ഉപയോഗിക്കുക | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | ക്രിസ്റ്റോഫർ | +| 12 | [ഗ്രീൻ ബ്രൗസ് എക്സ്റ്റൻഷൻ](./5-browser-extension/solution/README.md) | ബ്രൗസറുകളുടെ പ്രവർത്തനം | ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, അവയുടെ ചരിത്രം, ഒരു ബ്രൗസർ എക്സ്റ്റൻഷന്റെ ആദ്യ ഘടകങ്ങൾ നിർമ്മിക്കുന്നത് പഠിക്കുക | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | ജെൻ | +| 13 | [ഗ്രീൻ ബ്രൗസ് എക്സ്റ്റൻഷൻ](./5-browser-extension/solution/README.md) | ഫാർം നിർമ്മിച്ചു API വിളിച്ച് ലോക്കൽ സ്റ്റോറേജിൽ തരങ്ങൾ സൂക്ഷിക്കൽ | API വിളിക്കാനായി ബ്രൗസർ എക്സ്റ്റൻഷന്റെ ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ നിർമ്മിക്കുക, ലോക്കൽ സ്റ്റോറേജിൽ സൂക്ഷിച്ചിട്ടുള്ള തരങ്ങൾ ഉപയോഗിച്ചു | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | ജെൻ | +| 14 | [ഗ്രീൻ ബ്രൗസ് എക്സ്റ്റൻഷൻ](./5-browser-extension/solution/README.md) | ബ്രൗസറിലെ പശ്ചാത്തല പ്രോസസ്സുകൾ, വെബ് പ്രകടനം | എക്സ്റ്റൻഷന്റെ ഐക്കൺ മാനേജുചെയ്യാൻ ബ്രൗസറിന്റെ പശ്ചാത്തല പ്രോസസ്സുകൾ ഉപയോഗിക്കുക; വെബ് പ്രകടനവും കുറച്ച് മെച്ചപ്പെടുത്തലുകളും പഠിക്കുക | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | ജെൻ | +| 15 | [സ്പേസ് ഗെയിം](./6-space-game/solution/README.md) | ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കൂടുതൽ പുരോഗമിച്ച ഗെയിം വികസനം | ക്ലാസ്സുകളും കോംപോസിഷനും ഉപയോഗിച്ച ഈറിറ്റൻസിന്റെയും പബ്ലിഷ്/സബ്സ്ക്രൈബ് പാറ്റേണിന്റെയും പഠനം, ഗെയിം നിർമ്മാണത്തിനുള്ള ഒരുക്കം | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | ക്രിസ് | +| 16 | [സ്പേസ് ഗെയിം](./6-space-game/solution/README.md) | ക്യാൻവാസ് ലേഖനം | എന്തൊക്കെ സ്‌ക്രീനിലേക്ക് വരയ്ക്കാനായി ക്യാൻവാസ് API ഉപയോഗം | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | ക്രിസ് | +| 17 | [സ്പേസ് ഗെയിം](./6-space-game/solution/README.md) | സ്‌ക്രീനിലെ ഘടകങ്ങൾ സഞ്ചരിക്കൽ | ഘടകങ്ങൾക്ക് ചലനം ലഭിക്കുന്ന രീതി കാർട്ടീഷ്യൻ കോഓർഡിനേറ്റുകളും ക്യാൻവാസ് API-ഉം ഉപയോഗിച്ച് അറിയുക | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | ക്രിസ് | +| 18 | [സ്പേസ് ഗെയിം](./6-space-game/solution/README.md) | ഏറ്റുമുട്ടൽ കണ്ടെത്തൽ | ഘടകങ്ങൾ തമ്മിൽ പട്ട്, കീപ്രസ്സ് ഉപയോഗിച്ച് പ്രതികരതുകയും ഗെയിം പ്രകടനത്തിനായി കൂൾഡൗൺ ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുക | [Collision Detection](./6-space-game/4-collision-detection/README.md) | ക്രിസ് | +| 19 | [സ്പേസ് ഗെയിം](./6-space-game/solution/README.md) | സ്‌കോർ സൂക്ഷിക്കൽ | ഗെയിം സ്റ്റാറ്റസും പ്രകടനത്തിനും അടിസ്ഥാനമാക്കിയുള്ള ഗണിത കണക്കുകൂട്ടലുകൾ നടത്തുക | [Keeping Score](./6-space-game/5-keeping-score/README.md) | ക്രിസ് | +| 20 | [സ്പേസ് ഗെയിം](./6-space-game/solution/README.md) | ഗെയിം അവസാനിപ്പിച്ച് വീണ്ടും ആരംഭിക്കൽ | ഗെയിം അവസാനിപ്പിക്കൽ, റീസ്റ്റാർട്ട് ചെയ്യൽ, ആസ്തികൾ ശുചീകരിക്കുക, വേരിയബിൾ മൂല്യങ്ങൾ പുനഃസജ്ജീകരിക്കുക പഠിക്കുക | [The Ending Condition](./6-space-game/6-end-condition/README.md) | ക്രിസ് | +| 21 | [ബാങ്കിംഗ് ആപ്പ്](./7-bank-project/solution/README.md) | വെബ് ആപ്പിൽ HTML ടേംപ്ലേറ്റുകളും റൂട്ടുകളും | മൾട്ടിപേജ് വെബ്സൈറ്റിന്റെ ആർക്കിടെക്ചർ സൃഷ്ടിക്കാൻ റൂട്ടിംഗും HTML ടേംപ്ലേറ്റുകളും ഉപയോഗിച്ച് Scaffold നിർമ്മിക്കുക | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | യോഗൻ | +| 22 | [ബാങ്കിംഗ് ആപ്പ്](./7-bank-project/solution/README.md) | ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക | ഫോം നിർമ്മാണവും വാലിഡേഷൻ റൂട്ടീനുകളും പഠിക്കുക | [Forms](./7-bank-project/2-forms/README.md) | യോഗൻ | +| 23 | [ബാങ്കിംഗ് ആപ്പ്](./7-bank-project/solution/README.md) | ഡാറ്റ ഏറി വാങ്ങുന്നതിന്റെയും ഉപയോഗത്തിന്റെയും രീതികൾ | ആപ്പിൽ ഡാറ്റ എളുപ്പത്തിൽ എടുക്കാനും സൂക്ഷിക്കാനുമായും ഉപയോഗിക്കുകയും ചെയ്യുന്നതെങ്ങനെ | [Data](./7-bank-project/3-data/README.md) | യോഗൻ | +| 24 | [ബാങ്കിംഗ് ആപ്പ്](./7-bank-project/solution/README.md) | സ്റ്റേറ്റ് മാനേജ്മെന്റ് ആശയങ്ങൾ | നിങ്ങളുടെ ആപ്പ് സ്റ്റേറ്റ് എങ്ങനെ നിലനിർത്തുകയും പ്രോഗ്രാമാറ്റിക്കായി എങ്ങനെ മാനേജുചെയ്യുകയും ചെയ്യുന്നു എന്ന് പഠിക്കുക | [State Management](./7-bank-project/4-state-management/README.md) | യോഗൻ | +| 25 | [Browser/VScode Code](../../8-code-editor) | VScode ഉപയോഗം | കോഡ് എഡിറ്റർ ഉപയോഗിക്കുന്ന വിധം പഠിക്കുക| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | ക്രിസ് | +| 26 | [AI അസിസ്റ്റന്റുകൾ](./9-chat-project/README.md) | AI ഉപയോഗം | നിങ്ങളുടെ സ്വന്തം AI അസിസ്റ്റന്റ് നിർമ്മിക്കാൻ പഠിക്കുക | [AI Assistant project](./9-chat-project/README.md) | ക്രിസ് | + +## 🏫 പാഠ്യരീതിശാസ്ത്രം + +നമ്മുടെ സിലബസ് രണ്ട് പ്രധാന പാഠ്യരീതിശാസ്ത്ര അടിസ്ഥാനങ്ങളോടെയാണ് രൂപപ്പെടുത്തിയിരിക്കുന്നത്: +* പ്രോജക്ട് അടിസ്ഥാന പഠനം +* വീണ്ടും വീണ്ടും ക്വിസ്സുകൾ + +ജാവാസ്ക്രിപ്റ്റ്, HTML, CSS-ന്റെ അടിസ്ഥാനങ്ങളും ഇന്നത്തെ വെബ് ഡെവലപ്പർമാർ ഉപയോഗിക്കുന്ന ഏറ്റവും പുതിയ ഉപകരണങ്ങളും സാങ്കേതിക വിദ്യകളും ഈ പ്രോഗ്രാം പഠിപ്പിക്കുന്നു. ടൈപ്പിംഗ് ഗെയിം, വെർച്ച്വൽ ടെറേരിക്കം, പച്ചപ്പെട്ട ബ്രൗസർ എക്സ്റ്റൻഷൻ, സ്പേസ്-ഇൻവേഡർ സ്റ്റൈൽ ഗെയിം, ബിസിനസ്用 ബാങ്കിംഗ് ആപ്പ് തുടങ്ങി വിവിധ പ്രോജക്ടുകൾ നിർമ്മിച്ച് പ്രായോഗിക പരിചയം നേടാൻ വിദ്യാർത്ഥികൾക്ക് അവസരം ലഭിക്കും. പരമ്പരയുടെ അവസാനം, വിദ്യാർത്ഥികൾ വെബ് ഡെവലപ്‌മെന്റിന്റെ ശക്തമായ അവബോധം നേടിയിരിക്കുമെന്ന് ഉറപ്പ്. + +> 🎓 ഈ പാഠ്യപദ്ധതിയിലെ ആദ്യ പാഠങ്ങൾ Microsoft Learn-ൽ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) എന്ന രൂപത്തിൽ പഠിക്കാം! + +വിഷയങ്ങൾ പ്രോജക്ടുകളുമായി ഏകോപിപ്പിക്കുന്നതിലൂടെ വിദ്യാർത്ഥികൾക്ക് പഠനം കൂടുതൽ ആകർഷകവും ആശയങ്ങൾ മനസ്സിലാക്കൽ മെച്ചപ്പെടുത്തുന്നതുമായിരിക്കുമെന്ന് ഉറപ്പുവരുത്തുന്നു. ചില തുടങ്ങി പാഠങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് അടിസ്ഥാനങ്ങളിൽ എഴുതിയിട്ടുണ്ട്, "[ബിഗിൻസേഴ്സ് സീരീസ് ടു: ജാവാസ്ക്രിപ്റ്റ്](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" വീഡിയോ ട്യൂട്ടോറിയൽ ശേഖരത്തിലെ ഒരു വീഡിയോയും ഉൾപ്പെടുത്തിയാണ്; ഇതിന്റെ ചില ലേഖകർ ഈ പാഠ്യപദ്ധതിയിലേക്കും സഹകരിച്ചിട്ടുണ്ട്. + +ക്ലാസ് തുടങ്ങുന്നതിന് മുമ്പുള്ള ഒരു കുറച്ച് ക്വിസ് വിദ്യാർത്ഥിയുടെ പഠന ലക്ഷ്യത്തെ നിർണയിക്കാനും ക്ലാസ് കഴിഞ്ഞ് മറ്റൊരു ക്വിസ് അറിവിന്റെ ഉറപ്പ് നൽകാനും സഹായിക്കുന്നു. ഈ സിലബസ് ഫ്ലെക്സിബിള്‍ ആയും രസകരവുമാണ്, മുഴുവൻ അല്ലെങ്കിൽ ഭാഗികമായി സ്വീകരിക്കാം. പ്രോജക്ടുകൾ ചെറിയതുതന്നെ ആരംഭിച്ച് 12 ആഴ്ച കാലയളവിന്റെ അവസാനത്തിലെങ്കിൽ സങ്കീർണ്ണവും നവീനവുമായവയാവും. + +ഫ്രെയിംവർക്ക് അവതരിപ്പിക്കുന്നതിൽ നിന്നും ലഘുത്വം നോക്കിക്കൊണ്ട് വെബ് ഡെവലപ്പർക്ക് ആവശ്യമായ അടിസ്ഥാനമുൻകെട്ടുകളെക്കുറിച്ചു ശ്രദ്ധ കേന്ദ്രീകരിച്ചിരുന്നുവെങ്കിലും, ഈ സിലബസ് പൂർത്തിയാക്കാനായി അടുത്തത് "[ബിഗിൻസേഴ്സ് സീരിസ് ടു: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" വീഡിയോ ശേഖരം കൂടി പഠിക്കുക എന്നതാണ് നല്ലത്. + +> ഞങ്ങളുടെ [*Code of Conduct*](CODE_OF_CONDUCT.md)യും [*Contributing*](CONTRIBUTING.md) മാർഗനിർദേശങ്ങളും സന്ദർശിക്കുക. നിങ്ങളുടെ ഗുണപരമായ സുഹൃത്തുക്കൾ ഞങ്ങൾക്ക് സ്വാഗതമാണ്! + + +## 🧭 ഓഫ്‌ലൈൻ ആക്‌സസ് + +[Docsify](https://docsify.js.org/#/) ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഈ ഡോക്യുമെന്റേഷൻ ഓഫ്‌ലൈൻ ആക്കാം. ഈ റിപൊ ഫോർക്ക് ചെയ്ത്, നിങ്ങളുടെ ലോക്കൽ യന്ത്രത്തിൽ [Docsify ഇൻസ്റ്റാൾ](https://docsify.js.org/#/quickstart) ചെയ്യുക, പിന്നെ ഈ റിപൊയുടെ റൂട്ട് ഫോൾഡറിൽ `docsify serve` എന്ന് ടൈപ്പ് ചെയ്‌താൽ വെബ്‌സൈറ്റ് ലൊക്കൽഹോസ്റ്റിൽ പോർട്ട് 3000-ൽ സേർവ് ചെയ്യും: `localhost:3000`. + +## 📘 PDF + +എല്ലാ പാഠങ്ങളും അടങ്ങിയ ഒരു PDF ഇവിടെ ലഭ്യമാണ് [ഇവിടെ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). + + +## 🎒 മറ്റ് കോഴ്സുകൾ +നമ്മളുടെ ടീം മറ്റ് കോഴ്സുകളും നിർമ്മിക്കുന്നു! പരിശോധിക്കുക: + + +### 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) + +--- + +### Azure / Edge / MCP / ഏജന്റുകൾ +[![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) + +--- + +### ജനറേറ്റീവ് AI പരമ്പര +[![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) + +--- + +### കോർ ലേണിംഗ് +[![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 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) + + +## സഹായം ലഭിക്കുന്നത് എങ്ങനെ + +നിങ്ങൾ അടഞ്ഞുപോകുകയോ AI ആപ്പുകൾ നിർമ്മിക്കുന്നതിൽ എന്തെങ്കിലും ചോദ്യം ഉണ്ടായിട്ടുണ്ടോ? MCP-യെക്കുറിച്ച് fellow learners-ഉം പരിചയസമ്പന്നരായ ഡെവലപ്പർമാരും കൂടിച്ചേരുന്ന ചര്‍ച്ചകളിൽ ചേർക്കുക. ചോദ്യങ്ങൾ സ്വാഗതം ചെയ്യപ്പെടുന്ന, അറിവ് സ്വതന്ത്രമായി പങ്കുവെക്കപ്പെടുന്ന ഒരു പിന്തുണയുള്ള സമൂഹമാണ് ഇത്. + +[![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) + +## ലൈസൻസ് + +ഈ റിപ്പോസിറ്ററി MIT ലൈസൻസിനായി ലൈസൻസിദ്ധമാണ്. കൂടുതൽ വിവരങ്ങൾക്ക് [LICENSE](../../LICENSE) ഫയൽ കാണുക. + +--- + + +**ഡിസ്ക്ലെയിമർ**: +ഈ ദസ്താവേദം [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ അനുഭവത്തിൽ ആണ് വിവർത്തനം ചെയ്തിരിക്കുന്നത്. ഞങ്ങൾ ശരിയായ വിവർത്തനത്തിന് ശ്രമിക്കുന്നു എങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ കൃത്യതാ കുറവുകൾ ഉണ്ടായേക്കാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. സ്വന്തം ഭാഷയിലെ മൗലിക ദസ്താവേദം അതിന്റെ പ്രാമാണികമായ ഉറവിടമായി പരിഗണിക്കണം. നിർണ്ണായകമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മാനവ വിവർത്തനം ശിപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽ നിന്ന് ഉണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്ക് ഞങ്ങൾക്ക് ഉത്തരവാദിത്വം ഇല്ല. + \ No newline at end of file diff --git a/translations/ml/SECURITY.md b/translations/ml/SECURITY.md new file mode 100644 index 000000000..f606637c1 --- /dev/null +++ b/translations/ml/SECURITY.md @@ -0,0 +1,53 @@ + +## സുരക്ഷ + +മൈക്രോസോഫ്റ്റ് നമ്മുടെ സോഫ്റ്റ്വെയർ ഉൽപ്പന്നങ്ങളും സേവനങ്ങളും സുരക്ഷിതമാക്കുന്നതിൽ ഗൗരവമായി സമീപിക്കുന്നു, അതിൽ നമ്മുടെ GitHub സംഘടനകളിലൂടെ നിയന്ത്രിക്കുന്ന എല്ലാ സോഴ്‌സ് കോഡ് റെപ്പോസിറ്ററികളും ഉൾപ്പെടുന്നു, അതായത് [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) എന്നിവയും [നമ്മുടെ GitHub സംഘടനകളും](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon). + +നിങ്ങൾ കണ്ടെത്തിയത് മൈക്രോസോഫ്റ്റ് ഉൾപ്പെട്ട രെപ്പോസിറ്ററികളിൽ [മൈക്രോസോഫ്റ്റിന്റെ സുരക്ഷാ ദുർബ്ബലതയുടെ നിർവചനത്തിന്](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon) അനുയോജ്യമായ ഒരു സുരക്ഷാ ദുർബ്ബലതയാണ് എന്ന് നിങ്ങൾ വിശ്വസിക്കുന്നുവെങ്കിൽ, താഴെവിവരിച്ച പ്രകാരം ഞങ്ങളോടു റിപ്പോർട്ട് ചെയ്യുക. + +## സുരക്ഷാ പ്രശ്‌നങ്ങൾ റിപ്പോർട്ട് ചെയ്യൽ + +**ദയവായി സുരക്ഷാ ദുർബ്ബലതകൾ പൊതു GitHub പ്രശ്‌നങ്ങളിലൂടെ റിപ്പോർട്ട് ചെയ്യരുത്.** + +പകരം, ദയവായി മൈക്രോസോഫ്റ്റ് സെക്യൂരിറ്റി റെസ്പോൺസ് സെന്റർ (MSRC) യിൽ [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon) പൊലീസ് റിപ്പോർട്ട് ചെയ്യുക. + +ലോഗിൻ ചെയ്യാതെ സമർപ്പിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, [secure@microsoft.com](mailto:secure@microsoft.com) എന്ന ഇമെയിൽ വിലാസത്തിന് ഇമെയിൽ അയയ്ക്കുക. സാധിക്കുന്നു എങ്കിൽ, ഞങ്ങളുടെ PGP കീ ഉപയോഗിച്ച് നിങ്ങളുടെ സന്ദേശം എൻക്രിപ്റ്റ് ചെയ്യുക; അത് [Microsoft Security Response Center PGP Key പേജിൽ](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon) നിന്ന് ഡൗൺലോഡ് ചെയ്യുക. + +നിങ്ങൾക്ക് 24 മണിക്കൂറിനുള്ളിൽ ഒരു പ്രതികരണം ലഭിക്കുമെന്ന് അനുകൂലിക്കുന്നു. ഏത് കാരണത്താലാകട്ടെ അത് ലഭിക്കുന്നില്ലെങ്കിൽ, നിങ്ങളുടെ ആദ്യ സന്ദേശം ഞങ്ങൾ സ്വീകരിച്ചതായ ഉറപ്പാക്കാൻ ഇമെയിലിലൂടെ ഫോളോ അപ് ചെയ്യുക. കൂടുതൽ വിവരങ്ങൾക്കായി [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon) സന്ദർശിക്കുക. + +താഴെപ്പെട്ട ആവശ്യമായ വിവരങ്ങൾ (സാധ്യമായത്ര നൽകുക) ഉൾപ്പെടുത്തുക, ഇത് സാധ്യതയുള്ള പ്രശ്‌നം എങ്ങനെ സംഭവിക്കുന്നു എന്നതു മെച്ചമായി മനസിലാക്കാൻ സഹായിക്കും: + + * പ്രശ്‌ന തരം (ഉദാഹരണം: ബഫർ ഓവർഫ്ലോ, SQL ഇൻജക്ഷൻ, ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ്, തുടങ്ങിയവ) + * പ്രശ്‌നം പ്രകടമാകുന്നതുമായി ബന്ധപ്പെട്ട സോഴ്‌സ് ഫയലുകളുടെ പൂര്‍ണ്ണ പാതകൾ + * ബാധിക്കപ്പെട്ട സോഴ്‌സ് കോഡ് സ്ഥലം (ടാഗ്/ബ്രാഞ്ച്/കമ്മിറ്റ് അല്ലെങ്കിൽ നേരിട്ട് url) + * പ്രശ്‌നത്തിൽ പുനരുറപ്പിക്കല്‍ നടത്താൻ ആവശ്യമായ പ്രത്യേക കോൺഫിഗറേഷൻ + * പ്രശ്‌നം പുനരുറപ്പിക്കൽ നടത്തുന്ന ഘട്ടഘട്ട നിർദ്ദേശങ്ങൾ + * പ്രൂഫ്-ഓഫ്-കോൻസെപ്റ്റ് അല്ലെങ്കിൽ എക്സ്പ്ലോയിറ്റ് കോഡ് (സാധ്യമായെങ്കിൽ) + * പ്രശ്‌നത്തിന്റെ സ്വാധീനം, പിടികൂടുന്നവൻ ഇത് എങ്ങനെ ഉപയോഗപ്പെടുത്താമെന്ന് ഉൾപ്പെടെ + +ഈ വിവരങ്ങൾ നിങ്ങളുടെ റിപ്പോർട്ട് വേഗത്തിൽ നമുക്ക് പരിശോധിക്കാൻ സഹായിക്കും. + +ബഗ് ബൗണ്ടിക്ക് വേണ്ടി റിപ്പോർട്ട് ചെയ്യുന്നുവെങ്കിൽ, കൂടുതൽ സമ്പൂർണമായ റിപ്പോർട്ടുകൾ കൂടുതൽ വലിയ ബൗണ്ടിയുടെ അവാർഡ് നൽകുന്നതിന് സഹായിക്കും. ഞങ്ങളുടെ [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) പേജ് മുഖാന്തിരം പ്രവർത്തനപ്രദമായ പ്രോഗ്രാമുകൾക്ക് കൂടുതൽ വിവരങ്ങൾ ലഭിക്കും. + +## മുൻഗണന ലഭ്യമായ ഭാഷകൾ + +എല്ലാ ആശയവിനിമയങ്ങളും ഇംഗ്ലീഷിൽ നടക്കുന്നതാണ് ഞങ്ങളുടെ പേര്. + +## നയം + +മൈക്രോസോഫ്റ്റ് [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) എന്ന സിദ്ധാന്തം പാലിക്കുന്നു. + +--- + + +**പരിഹാരം**: +ഈ രേഖ AI ഭാഷാന്തര സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് ഭാഷാന്തരമാക്കിയതാണ്. ഞങ്ങൾ യഥാർത്ഥതയ്ക്കായി പരിശ്രമിച്ചെങ്കിലും, സ്വയംചാലിത ഭാഷാന്തരത്തിൽ പിശകുകളും അസാധുവായതും ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. മാതൃഭാഷയിലുള്ള അർഥസൂചനയാണ് പ്രാമാണികമായ ഉറവിടം. നിർണായക വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ ഭാഷാന്തരം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ ഭാഷാന്തരം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാനക്കുറവുകൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിച്ചു നൽകുന്നില്ല. + \ No newline at end of file diff --git a/translations/ml/SUPPORT.md b/translations/ml/SUPPORT.md new file mode 100644 index 000000000..c2fc63dfa --- /dev/null +++ b/translations/ml/SUPPORT.md @@ -0,0 +1,27 @@ + +# പിന്തുണ + +## പ്രശ്നങ്ങൾ റിപ്പോർട്ട് ചെയ്ത് സഹായം എങ്ങനെ ലഭിക്കാമെന്നും + +ഈ പ്രोजക്ട് ബഗുകളും ഫീച്ചർ അഭ്യർത്ഥനകളും ട്രാക്ക് ചെയ്യാൻ GitHub Issues ഉപയോഗിക്കുന്നു. പുനരാവൃത്തി ഒഴിവാക്കാൻ പുതിയ പ്രശ്നങ്ങൾ റിപ്പോർട്ട് ചെയ്യുന്നതിനു മുമ്പ് നിലവിലെ പ്രശ്നങ്ങൾ തിരയുക. പുതിയ പ്രശ്നങ്ങൾക്കായി നിങ്ങളുടെ ബഗ് അല്ലെങ്കിൽ ഫീച്ചർ അഭ്യർത്ഥന ഒരു പുതിയ Issue ആയി ഫയൽ ചെയ്യുക. + +ഈ പ്രോജക്ട് ഉപയോഗിക്കുന്നതിന് സഹായവും ചോദ്യങ്ങൾക്കുമായി, [നമ്മുടെ സംഭാവന മാർഗ്ഗനിർദ്ദേശങ്ങൾ](CONTRIBUTING.md) കാണുക. + +## മൈക്രോസോഫ്റ്റ് പിന്തുണ നയം + +ഈ പ്രോജക്റ്റിന് പിന്തുണ മുകളിൽ വ്യക്തമാക്കിയ വിഭവങ്ങളിലേക്ക് മാത്രമാണ് പരിധിയിടുന്നത്. + +--- + + +**വിചാരണാ കണക്കെടുപ്പ്**: +ഈ ഡോക്യുമെന്റ് എഐ വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്‌തതാണ്. നമുക്ക് ശരിയായ വിവർത്തനം നൽകാനാണ് ശ്രമമെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിഴവുകള്‍ അല്ലെങ്കിൽ അസാധുവായ വിവരങ്ങൾ ഉണ്ടാകാനിടയുണ്ട് എന്ന് മനസിലാക്കിയിരിക്കണം. യഥാർത്ഥ ഡോക്യുമെന്റ് അതിന്റെ മാതൃഭാഷയിൽ ഏർപ്പെടുത്തിയിരിക്കുന്നത് പ്രാധാന്യമുള്ള ഉറവിടമായി കണക്കാക്കപ്പെടുക ഇതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുള്ള herhangi തെറ്റായ അവബോധം അല്ലെങ്കിൽ വ്യാഖ്യാനത്തിനുള്ള ഉത്തരവാദിത്തം ഞങ്ങൾ ഏറ്റെടുക്കുന്നില്ല. + \ No newline at end of file diff --git a/translations/ml/_404.md b/translations/ml/_404.md new file mode 100644 index 000000000..42577ad72 --- /dev/null +++ b/translations/ml/_404.md @@ -0,0 +1,23 @@ + +# പുരോഗമനത്തിലുള്ള പ്രവർത്തി + +ഞങ്ങൾ ഈ പേജിൽ പ്രവർത്തിക്കുന്നു. ദയവായി പിന്നീട് തിരിച്ച് സന്ദർശിക്കുക. + +നിങ്ങളുടെ ഏതെങ്കിലും സംശയങ്ങൾ ഉണ്ടെങ്കിൽ, ഒരു [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) തുറക്കുക. + +**[Back home](../../../../../../..)** + +--- + + +**ഉദ്യോഗസ്ഥ പ്രഖ്യാപനം**: +ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്യപ്പെട്ടതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിച്ചെങ്കിലും, സ്വയംഭരണ വിവർത്തനങ്ങളിൽ പിഴവുകളും അശുദ്ധികളുമുണ്ടാകാം എന്ന点 ദയവായി ശ്രദ്ധിക്കുക. ഒരു രേഖയുടെ പ്രാമാണിക വാശിയാകുന്നത് ആ ഭാഷയിലെ ആദ്യ രേഖ തന്നെയാണ്. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിലൂടെ ഉണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കും അർത്ഥവ്യത്യാസങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/docs/_navbar.md b/translations/ml/docs/_navbar.md new file mode 100644 index 000000000..4d6143e2c --- /dev/null +++ b/translations/ml/docs/_navbar.md @@ -0,0 +1,36 @@ + +- Translations + - [English (United States)](../../../docs/README) + - [বাংলা](../../../docs/README.bn) + - [中文(中国)](../../../docs/README.zh-cn) + - [中文(台湾)](../../../docs/README.zh-tw) + - [Español](../../../docs/README.es) + - [Français](../../../docs/README.fr) + - [Ελληνικά](../../../docs/README.el) + - [हिन्दी](../../../docs/README.hi) + - [Bahasa Melayu](../../../docs/README.ms) + - [മലയാളം](../../../docs/README.ml) + - [தமிழ്](../../../docs/README.ta) + - [తెలుగు](../../../docs/README.te) + - [Bahasa Indonesia](../../../docs/README.id) + - [Italiano](../../../docs/README.it) + - [日本語](../../../docs/README.ja) + - [Nederlands](../../../docs/README.nl) + - [नेपाली](../../../docs/README.np) + - [Português](../../../docs/README.pt) + - [Русский](../../../docs/README.ru) + +--- + + +**വ്യക്തിഗത ഉത്തരവാദിത്തം**: +ഈ പ്രമാണം AI തർജുമാ സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജുമചെയ്തതാണ്. നാം ശുദ്ധതയ്ക്ക് ശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമാറ്റഡ് തർജുമകളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അസാധുതകൾ ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. അതിനാൽ, പ്രമാണത്തിന്റെ അതിന്റേതായ ഭാഷയിലുള്ള മൊഴി തന്നെ പ്രാമാണികമായ ഉറവിടമായി പരിഗണിക്കmalıdır. നിർണ്ണായക വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ തർജുമ പരിശോധിക്കുക എന്നതാണ് ശുപാർശ. ഈ തർജുമ ഉപയോഗിച്ചതിന്റെ ഫലമായി ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്ക് ഞങ്ങൾ ഉത്തരവാദിത്തം വെക്കുകയില്ല. + \ No newline at end of file diff --git a/translations/ml/docs/_sidebar.md b/translations/ml/docs/_sidebar.md new file mode 100644 index 000000000..94941437f --- /dev/null +++ b/translations/ml/docs/_sidebar.md @@ -0,0 +1,53 @@ + +- വെളിപ്പെടുത്തല്‍ + - [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md) + - [2](../1-getting-started-lessons/2-github-basics/README.md) + - [3](../1-getting-started-lessons/3-accessibility/README.md) + +- JS അടിസ്ഥാനങ്ങള്‍ + - [4](../2-js-basics/1-data-types/README.md) + - [5](../2-js-basics/2-functions-methods/README.md) + - [6](../2-js-basics/3-making-decisions/README.md) + - [7](../2-js-basics/4-arrays-loops/README.md) + +- HTML, CSS, JS + - [8](../3-terrarium/1-intro-to-html/README.md) + - [9](../3-terrarium/2-intro-to-css/README.md) + - [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md) + +- టైപ്പിംഗ് ഗെയിം + - [11](../4-typing-game/typing-game/README.md) + +- ബ്രൗസര്‍ എക്‌സ്റ്റെന്‍ഷന്‍ + - [12](../5-browser-extension/1-about-browsers/README.md) + - [13](../5-browser-extension/2-forms-browsers-local-storage/README.md) + - [14](../5-browser-extension/3-background-tasks-and-performance/README.md) + +- സ്പേസ് ഗെയിം + - [15](../6-space-game/1-introduction/README.md) + - [16](../6-space-game/2-drawing-to-canvas/README.md) + - [17](../6-space-game/3-moving-elements-around/README.md) + - [18](../6-space-game/4-collision-detection/README.md) + - [19](../6-space-game/5-keeping-score/README.md) + - [20](../6-space-game/6-end-condition/README.md) + +- ബാങ്ക് പ്രോജക്ട് + - [21](../7-bank-project/1-template-route/README.md) + - [22](../7-bank-project/2-forms/README.md) + - [23](../7-bank-project/3-data/README.md) + - [24](../7-bank-project/4-state-management/README.md) + +--- + + +**പരാമർശം**: +ഈ ഡോക്യുമെന്റ് എഐ വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്‌തതാണ്. നാം കൃത്യതക്ക് പരിശ്രമിക്കുന്നുവെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തപ്പുകൾ ഉണ്ടാകാവുന്നതാണ്. പ്രാഥമികമായ അസൽ ഡോക്യുമെന്റ് അതിന്റെ മാതൃഭാഷയിൽ പ്രാമാണിക സ്രോതസ്സ് ആയി പരിഗണിക്കേണ്ടതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യവിവർത്തനം ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചുള്ള ഏതെങ്കിലും തെറ്റു മനസ്സിലാക്കലുകൾക്കോ വ്യാഖ്യാനക്കേടുകൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/for-teachers.md b/translations/ml/for-teachers.md new file mode 100644 index 000000000..fce3a942a --- /dev/null +++ b/translations/ml/for-teachers.md @@ -0,0 +1,80 @@ + +### അധ്യാപകര്‍ക്ക് + +ഈ പാഠ്യക്രമം നിങ്ങളുടെ ക്ലാസ്സുകളില്‍ ഉപയോഗിക്കുന്നതിന് സ്വാഗതം. ഇത് GitHub Classroom-നും മുഖ്യ LMS പ്ലാറ്റ്ഫോറങ്ങളില്‍ കൂടി ദ്രുതഗതിയിലും എളുപ്പത്തിൽ പ്രവര്‍ത്തിക്കുന്നു, കൂടാതെ ഇത് നിങ്ങളുടെ വിദ്യാര്‍ത്ഥികളോടൊപ്പം സ്വതന്ത്ര റിപ്പോസിറ്ററിയായി ഉപയോഗിക്കാം. + +### GitHub Classroom-ന്‍റെൊപ്പം ഉപയോഗിക്കുക + +പ്രതിവ6371, ക്ലാസ്‍കര്‍ക്രമം, അഭ്യാസങ്ങള്‍ പൊതുസഞ്ചിതമായിരിക്കുന്നു ആദ64-യുള്ളവര്‍ക്കും വേണ്ടിയാണ് GitHub Classroom ഉപയോഗിക്കുന്നത്. + +- ഈ റിപ്പൊ നിങ്ങളുടെ ഓര്‍ഗനൈസേഷനിലേക്കു ഫോര്‍ക്ക് ചെയ്യുക. +- ഓരോ പാഠത്തിനും പ്രത്യേക റിപ്പൊ സൃഷ്ടിക്കുക, അതിലൂടെ GitHub Classroom ഓരോ അഭ്യാസവും സ്വതന്ത്രമായി ചേര്‍ക്കാന്‍ കഴിയുന്നു. + - ഓപ്ഷന്‍ A: വായ്പ്പു റിപ്പൊകള്‍ (ഓരോ പാഠത്തിനും ഒരൊറ്റ), അവയില്‍ പാഠഫോള്ഡര്‍ ഉള്ളടക്കം പകർത്തുക. + - ഓപ്ഷന്‍ B: ചരിത്രം സംരക്ഷിക്കുന്ന രീതിയില്‍ (ഉദാഹരണത്തിന് ഒരു ഫോള്‍ഡര്‍ പുതിയ റിപ്പൊയിലേക്കു വിഭജിക്കുക) ചെയ്തുകൊണ്ടു സൃഷ്ടിക്കുക. +- GitHub Classroom-ല്‍ ഓരോ പാഠത്തിന് ഒരു അഭ്യാസം സൃഷ്ടിച്ച് അനുയോജ്യമായ പാഠ റിപ്പൊയിലേക്ക് സൂചിപ്പിക്കുക. +- ശുപാര്‍ശ ചെയ്യുന്ന ക്രമീകരണങ്ങള്‍: + - റിപ്പൊവിസിബിലിറ്റി: വിദ്യാര്‍ത്ഥി പ്രവര്‍ത്തനത്തിനായി സ്വകാര്യമായി വെക്കുക. + - പാഠം റിപ്പൊയുടെ ഡിഫോൾട്ട് ബ്രാഞ്ചില്‍ നിന്ന് തുടങ്ങിയ കോഡ് ഉപയോഗിക്കുക. + - ക്വിസുകളും സമര്‍പ്പണങ്ങളും വേണ്ടി ഇഷൂയുടെയും പുള്ള് റിക്ക്വസ്റ്റ് ടെംപ്ലേറ്റുകള്‍ ചേര്‍ക്കുക. + - നിങ്ങളുടെ പാഠങ്ങളില്‍ ഓട്ടോഗ്രേഡിംഗ്, ടെസ്റ്റുകൾ ഉൾപ്പെട്ടിട്ടുണ്ടെങ്കില്‍ അവ ക്രമീകരിക്കുക. +- സഹായകമായ സന്ധര്‍ഭങ്ങള്‍: + - റിപ്പൊ പേരുകള്‍ lesson-01-intro, lesson-02-html തുടങ്ങിയവ പോലെ. + - ലേബലുകള്‍: quiz, assignment, needs-review, late, resubmission. + - ഓരോ കോഹോര്‍ട്ടിന് ടാഗുകള്‍/റിലീസുകള്‍ (ഉദാ. v2025-term1). + +ടിപ്പ്: വിന്‍ഡോസ് Git konflikts ഒഴിവാക്കാന്‍, സെങ്ക്ലഡായ ഫോള്‍ഡറുകള്‍ (OneDrive/Google Drive പോലുള്ള) ഉള്ളില്‍ റിപ്പോസിടറികള്‍ സൂക്ഷിക്കുന്നത് ഒഴിവാക്കുക. + +### Moodle, Canvas, അല്ലെങ്കില്‍ Blackboard-നൊപ്പം ഉപയോഗിക്കുക + +ഈ പാഠ്യക്രമം സാധാരണ LMS പ്രവൃത്തിക്കും അനുയോജ്യമായ ഇറക്കുമതി പാക്കേജുകൾ ഉൾപ്പെടുന്നു. + +- Moodle: പാഠ്യക്രമം മുഴുവനും ലോഡ് ചെയ്യാൻ Moodle അപ്ലോഡ് ഫയല്‍ [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) ഉപയോഗിക്കുക. +- Common Cartridge: വ്യാപകമായ LMS യുമായി പൊരുത്തപ്പെടാന്‍ Common Cartridge ഫയല്‍ [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) ഉപയോഗിക്കുക. +- കുറിപ്പുകൾ: + - Moodle Cloudയ്ക്ക് Common Cartridge പിന്തുണ കുറവാണ്. മുകളില്‍ പറയുന്ന Moodle ഫയല്‍ ഉപയോഗിക്കുക, അത് Canvas-ലും അപ്ലോഡ് ചെയ്യാം. + - ഇറക്കുമതി ചെയ്ത ശേഷം, നിങ്ങളുടെ ടേം ഷെഡ്യൂളിന് അനുയോജ്യമായി മോഡ്യൂളുകളും, തീയ്യതികളും, ക്വിസുകളുടെ ക്രമീകരണങ്ങളും പരിശോധിക്കുക. + +![Moodle](../../translated_images/moodle.94eb93d714a50cb2.ml.png) +> Moodle ക്ലാസ്സില്‍ പാഠ്യക്രമം + +![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.ml.png) +> Canvas-ൽ പാഠ്യക്രമം + +### ക്ലാസ്സ്‌റൂം ഇല്ലാതെ ഈ റിപ്പോ നേരിട്ട് ഉപയോഗിക്കുക + +GitHub Classroom ഉപയോഗിക്കാതെ നേരിട്ട് ഈ റിപ്പോയില്‍ നിന്നു കോഴ്സ് പ്രവര്‍ത്തിപ്പിക്കാം. + +- സിങ്ക്‌റോണസ്/ഓണ്‍ലൈനായി (Zoom/Teams): + - ചോദ്യത്തിന്‍റെ ഉത്തരം സессണുകള്‍ നടത്തുക; ക്വിസുകൾക്ക് ബ്രേക്ക് ഔട്ട് റൂമുകൾ ഉപയോഗിക്കുക. + - ക്വിസുകള്‍ക്കായി സമയപരിധി പ്രഖ്യാപിക്കുക; വിദ്യാര്‍ത്ഥികള്‍ ഉത്തരങ്ങള്‍ GitHub Issues ആയി സമര്‍പ്പിക്കും. + - കൂട്ടായി ചെയ്യുന്ന അഭ്യാസങ്ങള്‍ക്കായി, വിദ്യാര്‍ത്ഥികള്‍ പൊതുവായ പാഠം റിപ്പോസിറ്ററികളില്‍ പ്രവര്‍ത്തിച്ച് പുള്ള് റിക്ക്വസ്റ്റുകള്‍ തുറക്കും. +- പ്രൈവറ്റ്/അസിങ്ക്‌റോണസ് ഫോർമാറ്റുകള്‍: + - ഓരോ പാഠവും കടന്നുവാങ്ങി നിങ്ങളുടെ സ്വത്തമായ **സ്വകാര്യ** റിപ്പോസിറ്ററികളാക്കി, നിങ്ങളെ സഹപ്രവര്‍ത്തകനായി ചേര്‍ക്കുക. + - ക്ലാസ്‌പഠന റിപ്പო അല്ലെങ്കില്‍ സ്വന്തം സ്വകാര്യ ഫോര്‍ക്കുകളില്‍ Issues (ക്വിസുകള്‍)നും Pull Requests (അഭ്യാസങ്ങള്‍)നും വഴി സമര്‍പ്പിക്കുക. + +### മികച്ച പ്രാക്ടിസുകള്‍ + +- Git/GitHub അടിസ്ഥാനങ്ങള്‍, Issues, PRs എന്നിവയെ കുറിച്ച് ഒരു ഓറിയന്റേഷന്‍ പാഠം നല്‍കുക. +- Issues-ല്‍ ബഹു-ചുവട് ചോദ്യങ്ങള്‍ക്ക്/അഭ്യാസങ്ങള്‍ക്ക് ചെക്‌ലിസ്റ്റ് ഉപയോഗിക്കുക. +- CONTRIBUTING.md, CODE_OF_CONDUCT.md അടക്കം ക്ലാസ്‌റൂം നയങ്ങള്‍ നിശ്ചയിക്കുക. +- ആക്‌സസിബിലിറ്റിയുടെ കുറിപ്പുകളും (alt പാഠം, ക്യാപ്ഷനുകൾ) പ്രിന്റ് ചെയ്യാവുന്ന PDF-കളും ചേര്‍ക്കുക. +- പാഠ്യവിഷയങ്ങള്‍ വര്‍ഷത്തിലോ സെമസ്റ്ററിലോ ഒപ്പം വേഴ്ഷന്‍ ചെയ്യുക, പ്രസിദ്ധീകരണത്തിനു ശേഷം പാഠം റിപ്പോസിറ്ററികള്‍ പൂട്ടുക. + +### പ്രതികരണങ്ങളും പിന്തുണയും + +ഈ പാഠ്യക്രമം നിങ്ങളും നിങ്ങളുടെ വിദ്യാര്‍ത്ഥികളും ഉപയോഗിക്കാനായി ആഗ്രഹിക്കുന്നു. പിഴവുകള്‍, ആവശ്യങ്ങള്‍, മെച്ചപ്പെടുത്തലുകള്‍ക്കായി ഈ റിപ്പോഷിറ്ററിയില്‍ പുതിയ ഒരു Issue തുറക്കുക, അല്ലെങ്കില്‍ Teacher Corner-ല്‍ ചര്‍ച്ച ആരംഭിക്കുക. + +--- + + +**തൊഴിലാളി**: +ഈ രേഖ AI തർജ്ജമാ സേവനം [കോ-ഓപ് ട്രാൻസ്‌ലേറ്റർ](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തു. നാം നിർവേദനക്ഷമതയ്ക്കായി ശ്രമിച്ചിട്ടും, സ്വയംഭരണ തർജ്ജമകൾ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റായ വിവരങ്ങൾ ഉൾപ്പെടുത്താവുന്നത് ശ്രദ്ധിക്കുക. എല്ലാ പ്രധാന വിവരങ്ങൾക്കും സ്വദേശഭാഷയിൽ ഉള്ള മൗലിക രേഖയെ വിശ്വസനീയമായ ഉറവിടമായി കാണണം. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജമ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ തർജ്ജമ ഉപയോഗിച്ച് ഉണ്ടാകുന്ന സംശയങ്ങൾക്കും തെറ്റായ വിവർത്തനങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/lesson-template/README.md b/translations/ml/lesson-template/README.md new file mode 100644 index 000000000..6ace6c1ab --- /dev/null +++ b/translations/ml/lesson-template/README.md @@ -0,0 +1,67 @@ + +# [പാഠ വിഷയം] + +![ഇവിടെ ഒരു വീഡിയോ എംബെഡ് ചെയ്യുക](../../../lesson-template/video-url) + +## [പാഠത്തിന് മുമ്പുള്ള ക്വിസ്](../../../lesson-template/quiz-url) + +[നാം പഠിക്കാനുള്ളത് വിവരിക്കുക] + +### പരിചയം + +എന്തെന്താം വിഷയങ്ങൾ ഉൾപ്പെടുമെന്ന് വിവരിക്കുക + +> കുറിപ്പുകൾ + +### മുൻഷരതുകൾ + +ഈ പാഠത്തിനു മുമ്പായി ഏതെല്ലാം നടപടി ക്രമങ്ങൾ പൂർത്തിയാക്കണമായിരിക്കും? + +### തയ്യാറെടുപ്പ് + +ഈ പാഠം ആരംഭിക്കാൻ വേണ്ട തയ്യാറെടുപ്പ് നടപടികൾ + +--- + +[തടങ്ങളായി ഉള്ളടക്കം പരിശോധിക്കുക] + +## [വിഷയം 1] + +### താസ്‌ക്: + +പങ്കിടപ്പെട്ട കോഡോടുകൂടി പ്രോജക്ട് നിർമ്മിക്കാൻ നിങ്ങളുടെ കോഡ്ബെയ്സ് ക്രമം ക്രമമായി മെച്ചപ്പെടുത്താൻ ഒത്തു ചേരുക: + +```html +code blocks +``` + +✅ അറിവ് പരിശോധന - തുറന്ന ചോദ്യംകൾ ഉപയോഗിച്ച് വിദ്യാർത്ഥികളുടെ അറിവ് വ്യാപിപ്പിക്കാൻ ഈ അവസരം ഉപയോഗിക്കൂ + +## [വിഷയം 2] + +## [വിഷയം 3] + +🚀 വെല്ലുവിളി: ക്ലാസിൽ സഹകരിച്ച് പ്രോജക്ട് മെച്ചപ്പെടുത്താൻ വിദ്യാർത്ഥികൾക്ക് വെല്ലുവിളി ചേർക്കുക + +ഓപ്ഷണൽ: പൂർത്തിയായ പാഠത്തിന്റെ UI-യുടെ സ്ക്രീൻഷോട്ട് ആവശ്യമായെങ്കിൽ ചേർക്കുക + +## [പഠനത്തിന് ശേഷമുള്ള ക്വിസ്](../../../lesson-template/quiz-url) + +## അവലോകനം & സ്വയം പഠനം + +**അസൈൻമെന്റ് സമർപ്പണ നിശ്ചിത തിയ്യതി [MM/YY]**: [അസൈൻമെന്റ് പേര്](assignment.md) + +--- + + +**അസാധുവാക്കൽ**: +ഈ രേഖ AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിച്ചാലും, യന്ത്രപരിഭാഷയിൽ പിഴവുകൾ അല്ലെങ്കിൽ അകുറ്റ സമയങ്ങൾ ഉണ്ടാകാമെന്ന് ശ്രദ്ധിക്കുക. യഥാർത്ഥ രേഖ അവരുടെ സ്വദേശഭാഷയിൽ ഉള്ളത് അവധാരിത ഉറവിടമായി കണക്കാക്കേണ്ടതാണ്. സുപ്രധാന വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശുപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗത്തിൽ ഉണ്ടായ misunderstandings അല്ലെങ്കിൽ തെറ്റിദ്ധാരണകൾക്കെതിരെ ഞങ്ങൾ ഉത്തരവാദിത്തം ഏറ്റെടുക്കില്ല. + \ No newline at end of file diff --git a/translations/ml/lesson-template/assignment.md b/translations/ml/lesson-template/assignment.md new file mode 100644 index 000000000..77c471245 --- /dev/null +++ b/translations/ml/lesson-template/assignment.md @@ -0,0 +1,25 @@ + +# [അസൈന്‍മെന്റ് പേര്] + +## നിർദ്ദേശങ്ങൾ + +## റൂബ്രിക്ക് + +| മാനദണ്ഡം | ഉദാത്തമായത് | ശരിയായി | മെച്ചപ്പെടുത്തേണ്ടത് | +| -------- | --------- | -------- | ----------------- | +| | | | | + +--- + + +**തൽക്കാലിക സഹിതം**: +ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്‌ക്ക് ശ്രമിച്ചുള്ളതെങ്കിലും, യന്ത്രം നിർവഹിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അശുദ്ധികൾ ഉണ്ടാകാവുന്നതാണ്. മൂല രേഖ അതിന്റെ കൊടുത്ത ഭാഷയിൽ തന്നേ വിശ്വസനീയമായ ഉറവിടമായി കണക്കാക്കണം. നിർണ്ണായക വിവരങ്ങൾക്ക്, വിദഗ്ധ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനത്തെ അടിസ്ഥാനമാക്കി ഉണ്ടായ任何 தவറുകളും അർത്ഥ വ്യത്യാസങ്ങൾക്കുമുള്ള ഉത്തരവാദിത്തം ഞങ്ങൾ ഏറ്റെടുക്കുന്നില്ല. + \ No newline at end of file diff --git a/translations/ml/memory-game/README.md b/translations/ml/memory-game/README.md new file mode 100644 index 000000000..cfc21394c --- /dev/null +++ b/translations/ml/memory-game/README.md @@ -0,0 +1,52 @@ + +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +ആദ്യം, ഡെവലപ്പ്മെന്റ് സെർവർ പ്രവർത്തിപ്പിക്കുക: + +```bash +npm run dev +# അല്ലെങ്കിൽ +yarn dev +# അല്ലെങ്കിൽ +pnpm dev +# അല്ലെങ്കിൽ +bun dev +``` + +ഫലമായി കാണാൻ നിങ്ങളുടെ ബ്രൗസറിൽ [http://localhost:3000](http://localhost:3000) തുറക്കുക. + +`app/page.js` ഫയൽ മാറ്റം വരുത്തി പേജ് എഡിറ്റിംഗ് ആരംഭിക്കാം. ഫയൽ എഡിറ്റ് ചെയ്യുമ്പോളുതന്നെ പേജ് സ്വയമേവ അപ്‌ഡേറ്റ് ചെയ്യും. + +ഈ പ്രോജക്റ്റ് [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) ഉപയോഗിച്ച് ഓട്ടോമാറ്റിക്കായാണ് ലോഡ് ചെയ്യപ്പെടുന്നതും ഒപ്റ്റിമൈസ് ചെയ്തെടുത്തിരിക്കുന്നതും [Geist](https://vercel.com/font), Vercel പ്രതിഷ്ഠിച്ച പുതിയ ഫോണ്ട് കുടുംബം. + +## Learn More + +Next.js എക്കുറിച്ച് കൂടുതൽ അറിയാൻ താഴെ കൊടുത്തിരിക്കുന്ന സ്രോതസ്സുകൾ നോക്കുക: + +- [Next.js Documentation](https://nextjs.org/docs) - Next.js ഫീച്ചറുകളെയും API-യേയും കുറിച്ച് അറിയുക. +- [Learn Next.js](https://nextjs.org/learn) - ഇന്ററാക്ടീവ് Next.js പരിശീലനം. + +നിങ്ങൾക്ക് [Next.js GitHub റീപോസിറ്ററി](https://github.com/vercel/next.js) സന്ദർശിക്കാം — നിങ്ങളുടെ ഫീഡ്‌ബാക്കും സംഭാവനകളും സ്വാഗതം ചെയ്യുന്നു! + +## Deploy on Vercel + +നിങ്ങളുടെ Next.js ആപ്പ് ഡെപ്ലോയ് ചെയ്യാനുള്ള ഏറ്റവും എളുപ്പമാർഗം Next.js സൃഷ്ടിച്ച [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) ഉപയോഗിച്ചാണ്. + +കൂടുതൽ വിവരങ്ങൾക്ക് നമ്മുടെ [Next.js deployment документация](https://nextjs.org/docs/app/building-your-application/deploying) പരിശോധിക്കുക. + +--- + + +**അസൂയാപേരിപ്പ്**: +ഈ ഡോക്യുമെന്റ് AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശരിയായ വിവർത്തനത്തിന് ശ്രമിച്ചെങ്കിലും, സ്വയംകൃതമായി നടത്തിയ വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തത്വഭ്രഷ്ടതകൾ ഉണ്ടാകാനുള്ള സാധ്യതയുണ്ട്. അതിനാൽ, യഥാർത്ഥ ഡോക്യുമെന്റ് അതിന്റെ মাতൃഭാഷയിലുള്ള പ്രാമാണിക സ്രോതസ്സായി കണക്കാക്കേണ്ടതാണ്. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം നിർദ്ദേശിക്കപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽ നിന്നുണ്ടാകുന്ന അവ മനസ്സിലാക്കൽ തർക്കങ്ങൾക്കോ തെറ്റിദ്ധാരണകൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/ml/quiz-app/README.md b/translations/ml/quiz-app/README.md new file mode 100644 index 000000000..e78ba1c12 --- /dev/null +++ b/translations/ml/quiz-app/README.md @@ -0,0 +1,193 @@ + +# ക്വിസ് ആപ്പ് + +ഈ ക്വിസുകൾ https://aka.ms/webdev-beginners ൽ ഉള്ള ഡേറ്റാ സയൻസ് പാഠ്യപദ്ധതിയുടേതായി ലെക്ചർക്കു മുമ്പും ശേഷം നടത്തപ്പെടുന്ന ക്വിസുകളാണ് + +## ഭാഷಾಂತರിച്ച ക്വിസ് സെറ്റ് ചേർക്കൽ + +`assets/translations` ഫോൾഡറുകളിൽ പൊരുത്തമുള്ള ക്വിസ് ഘടനകൾ സൃഷ്ടിച്ച് ഒരു ക്വിസ് പരിഭാഷ ചേർക്കുക. മുൻനിര്‍ദേശിച്ച ക്വിസുകൾ `assets/translations/en` ൽ ഉണ്ട്. ക്വിസുകള്‍ നിരവധി ഗ്രൂപ്പുകളായി വിഭജിച്ചിരിക്കുന്നു. ക്വിസ് വിഭാഗങ്ങളുടെ നമ്പറിങ്ങുമായി ശരിയായി പൊരുത്തപ്പെടുന്നുണ്ടോയെന്ന് ഉറപ്പാക്കുക. ഈ പാഠ്യപദ്ധതിയിൽ 40 ക്വിസുകളുണ്ട്, എണ്ണം 0 മുതൽ ആരംഭിക്കുന്നു. + + +
+ഇവിടെ ഒരു പരിഭാഷ ഫയലിന്റെ രൂപം ഇപ്രകാരം: + +``` +[ + { + "title": "A title", + "complete": "A complete button title", + "error": "An error message upon selecting the wrong answer", + "quizzes": [ + { + "id": 1, + "title": "Title", + "quiz": [ + { + "questionText": "The question asked", + "answerOptions": [ + { + "answerText": "Option 1 title", + "isCorrect": true + }, + { + "answerText": "Option 2 title", + "isCorrect": false + } + ] + } + ] + } + ] + } +] +``` +
+ +പരിഭാഷകൾ എഡിറ്റ് ചെയ്തശേഷം, `en`ൽ ഉള്ള സൂചനകൾ പാലിച്ച് എല്ലാ ഫയലുകളും ഇൻഡക്സ്.js ഫയലിൽ ഇറക്കുമതി ചെയ്യുക. + +പുതിയ പരിഭാഷാ ഫയലുകൾ ഇറക്കുമതി ചെയ്യുന്നതിന് `assets/translations` എന്നുള്ള ഡയറക്ടറിയിലെ `index.js` ഫയൽ എഡിറ്റ് ചെയ്യുക. + +ഉദാഹരണത്തിന്, നിങ്ങൾ പരിഭാഷ സി‌ JSON ഫയലായ `ex.json` ൽ ഉണ്ടെങ്കിൽ, അതിന്റെ ലൊക്കലൈസേഷൻ കീ ആയി 'ex' നൽകുകയും താഴെ കാണുന്നതുപോലെ ഇറക്കുമതി ചെയ്യുക + +
+index.js + +``` +import ex from "./ex.json"; + +// if 'ex' is localization key then enter it like so in `messages` to expose it + +const messages = { + ex: ex[0], +}; + +export default messages; +``` + +
+ +## ക്വിസ് ആപ്പ് ലോക്കലായി പ്രവർത്തിപ്പിക്കൽ + +### മുൻ‌റിയിപ്പുകൾ + +- ഒരു GitHub അക്കൗണ്ട് +- [Node.js and Git](https://nodejs.org/) + +### ഇൻസ്റ്റാൾ & സെറ്റപ്പ് + +1. ഈ [ടെംപ്ലേറ്റ്](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) ഉപയോഗിച്ച് ഒരു റെപ്പോസിറ്ററി സൃഷ്ടിക്കുക + +1. പുതിയ റെപ്പോസിറ്ററി ക്ലോൺ ചെയ്ത് quiz-app ലേക്ക് പോവുക + + ```bash + git clone https://github.com/your-github-organization/repo-name + cd repo-name/quiz-app + ``` + +1. npm പാക്കേജുകളും ഡിപ്പെൻഡൻസികളും ഇൻസ്റ്റാൾ ചെയ്യുക + + ```bash + npm install + ``` + +### ആപ്പ് ബിൽഡ് ചെയ്യുക + +1. സൊല്യൂഷൻ ബിൽഡ് ചെയ്യാൻ, ഇതു റൺ ചെയ്യുക: + + ```bash + npm run build + ``` + +### ആപ്പ് സ്റ്റാർട്ട് ചെയ്യുക + +1. സൊല്യൂഷൻ റൺ ചെയ്യാൻ, ഇതു റൺ ചെയ്യുക: + + ```bash + npm run dev + ``` + +### [ഐച്ഛികം] ലിന്റിംഗ് + +1. കോഡ് ലിന്റ് ചെയ്യപ്പെട്ടിട്ടുണ്ടെന്ന് ഉറപ്പാക്കാൻ, ഇതു റൺ ചെയ്യുക: + + ```bash + npm run lint + ``` + +## ക്വിസ് ആപ്പ് Azure ൽ ഡിപ്ലോയ് ചെയ്യുക + +### മുൻ‌റിയിപ്പുകൾ +- ഒരു Azure സബ്സ്ക്രിപ്ഷൻ. സൗജന്യമായി ഒന്ന് റജിസ്റ്റർ ചെയ്യാൻ [ഇവിടെ](https://aka.ms/azure-free) ചെയ്യുക. + + _ഈ ക്വിസ് ആപ്പ് ഡിപ്ലോയ് ചെയ്യാനുള്ള ചെലവ്: സൗജന്യം_ + +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) + +മുകളിലുള്ള ലിങ്കിൽ അതിലൂടെ Azureയിൽ സൈൻ ഇൻ ചെയ്തതിനു ശേഷം, ഒരു സബ്സ്ക്രിപ്ഷനും റിസോഴ്‌സ് ഗ്രൂപ്പും തിരഞ്ഞെടുത്ത്: + +- സ്റ്റാറ്റിക് വെബ് ആപ്പ് വിശദാംശങ്ങൾ: ഒരു പേര് നൽകുക, ഹോസ്റ്റിങ് പ്ലാൻ തിരഞ്ഞെടുക്കുക +- GitHub ലോഗിൻ: ഡിപ്പ്ലോയ്‌മെന്റിന്റെ ഉറവിടമായി GitHub തിരഞ്ഞെടുക്കുക, പിന്നീട് ലോഗിൻ ചെയ്ത് ഫോമിലെ ആവശ്യമായ ഫീൽഡുകൾ പൂരിപ്പിക്കുക: + - *ഓർഗനൈസേഷൻ* – നിങ്ങളുടെ ഓർഗനൈസേഷൻ തിരഞ്ഞെടുക്കുക. + - *റിപ്പോസിറ്ററി* – Web Dev for Beginners പാഠ്യപദ്ധതി റെപ്പോസിറ്ററി തിരഞ്ഞെടുക്കുക. + - *ബ്രാഞ്ച്* - ഒരു ബ്രാഞ്ച് (main) തിരഞ്ഞെടുക്കുക +- ബിൽഡ് പ്രിസെറ്റ്സ്: Azure സ്റ്റാറ്റിക് വെബ് ആപ്പുകൾ നിങ്ങളുടെ ആപ്പിൽ ഉപയോഗിക്കുന്ന ഫ്രെയിമ്വർക്കിനെ കണ്ടെത്താൻ ഒരു കണ്ടെത്തൽ ആൾഗോരിതം ഉപയോഗിക്കുന്നു. + - *ആപ്പ് ലൊക്കേഷൻ* - ./quiz-app + - *API ലൊക്കേഷൻ* - + - *ഔട്ട്പുട്ട് ലൊക്കേഷൻ* - dist +- ഡിപ്ലോയ്‌മെന്റ്: 'Review + Create' ക്ലിക്ക് ചെയ്യുക, ശേഷം 'Create' ക്ലിക്ക് ചെയ്യുക + + ഡിപ്ലോയ്മെന്റ് കഴിഞ്ഞതോടെ നിങ്ങളുടെ റെപ്പോസിറ്ററിയുടെ *.github* ഡയറക്ടറിയിൽ ഒരു വർക്ക്‌ഫ്ലോ ഫയൽ സൃഷ്ടിക്കും. ആ വർക്ക്‌ഫ്ലോ ഫയലിൽ ആപ്പിനെ Azure-ൽ വീണ്ടും ഡിപ്ലോയ്മെന്റ് നടത്തുന്നതിനുള്ള ട്രിഗർ സംഭവങ്ങളുടെ നിർദ്ദേശങ്ങൾ ഉണ്ടാകും, ഉദാഹരണം ആയി _**main** ബ്രാഞ്ചിൽ **push**_ തുടങ്ങിയവ. + +
+ ഉദാഹരണ വർക്ക്‌ഫ്ലോ ഫയൽ + GitHub Actions വർക്ക്‌ഫ്ലോ ഫയൽ എങ്ങനെ കാണിക്കാം എന്ന ഒരു ഉദാഹരണം ഇതാ: + name: Azure Static Web Apps CI/CD + + ``` + on: + push: + branches: + - main + pull_request: + types: [opened, synchronize, reopened, closed] + branches: + - main + + jobs: + build_and_deploy_job: + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v2 + - name: Build And Deploy + id: builddeploy + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} + repo_token: ${{ secrets.GITHUB_TOKEN }} + action: "upload" + app_location: "quiz-app" # App source code path + api_location: ""API source code path optional + output_location: "dist" #Built app content directory - optional + ``` + +
+ +- ഡിപ്ലോയ്‌മെന്റിന് ശേഷം: 'Go to Deployment' ശേഷം 'View app in browser' ക്ലിക്ക് ചെയ്യുക. + +നിങ്ങളുടെ GitHub Action (വർക്ക്‌ഫ്ലോ) വിജയകരമായി പ്രവർത്തിച്ചശേഷം, നിങ്ങളുടെ ആപ്പ് കാണുവാൻ തത്സമയം പേജ് റിഫ്രഷ് ചെയ്യുക. + +--- + + +**അസൂയാചകം**: +ഈ രേഖ AI അനുഭവം ഉപയോഗിച്ച് [കോ-ഓപ് ട്രാൻസ്ലേറ്റർ](https://github.com/Azure/co-op-translator) എന്ന അന്വയം സേവനം ഉപയോഗിച്ച് ബഹുഭാഷയാക്കി രൂപാന്തരം ചെയ്തതാണ്. ഞങ്ങൾ നിശ്ചിതത്വത്തിനായി ശ്രമിച്ചിട്ടും, സ്വയംകൃതപ്പെടുന്ന വിവർത്തനങ്ങളിൽ പിശകുകളും അച്ചടക്കക്കുറവുകളും ഉണ്ടായേക്കാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. സ്വന്തം ഭാഷയിലെ മൗലിക രേഖയാണ് സത്യസന്ധമായ ഉറവിടം എന്ന നിലയിൽ കണക്കാക്കേണ്ടത്. നിർണ്ണായകമായ വിവരങ്ങൾക്കായി, പ്രൊഫഷണൽ മാനവ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിന്റെ ഭാഗമായി ഉണ്ടായ എത്രവും തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല. + \ No newline at end of file diff --git a/translations/pcm/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pcm/1-getting-started-lessons/1-intro-to-programming-languages/README.md new file mode 100644 index 000000000..2510f8ea1 --- /dev/null +++ b/translations/pcm/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -0,0 +1,863 @@ + +# Introduction to Programming Languages and Modern Developer Tools + +Hey deh, future developer! 👋 Make I yan you wetin dey always give me goosebumps every single day? You dey ready to sabi say programming no be only about computers – e be like say you get actual superpowers to bring your wildest ideas come life! + +You sabi dat moment wen you dey use your favorite app and e just dey work perfectly? Wen you tap one button and something magical happen wey go make you talk "wow, how dem take DO am?" Well, na person just like you – fit be wey dey sit for dem favorite coffee shop for 2 AM with their third espresso – na im write the code wey create that magic. And make I yan you wetin go scatter your brain: by the end of this lesson, you no go only understand how dem take do am, you go dey excited to try am yourself! + +Look, I understand am if programming fit dey scare you now. When I first start, I really believe say you need to be some kind math genius or say you don dey code since you be small pikin. But wetin change my mind completely be say: programming na just like learning how to talk for new language. You go start with "hello" and "thank you," then you go move go ordering coffee, and before you know am, you dey talk serious tori! But for this case, na computer you dey talk to, and honestly? Dem be the most patient padi wey you fit get – dem no dey judge your mistake and dem dey ready to try again anytime! + +Today, we go explore the correct tools wey dey make modern web development no be only possible, but e also dey very addictive. I dey talk about the same editors, browsers, and workflows wey developers for Netflix, Spotify, and your favorite indie app studio dey use every single day. And here na the part wey go make you dance with joy: most of these professional-grade, industry-standard tools na totally free! + +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.pcm.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Your Programming Journey Today + section Discover + Wetin be Programming: 5: You + Programming Languages: 4: You + Tools Overview: 5: You + section Explore + Code Editors: 4: You + Browsers & DevTools: 5: You + Command Line: 3: You + section Practice + Language Detective: 4: You + Tool Exploration: 5: You + Community Connection: 5: You +``` +## Make We See Wetin You Sabi Before! + +Before we jump enter di fun matter dem, I dey curious – wetin you don sabi about dis programming world? And make you hear me, if you dey look these questions dey think "I no understand anything about any of dis," no wahala at all, e perfect! That one mean say you dey exactly the correct place. Make you think of dis quiz like exercise before workout – we dey just warm up brain muscles! + +[Take the pre-lesson quiz](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) + + +## The Adventure We Dey Go Together + +Okay, I dey really happy for wetin we go explore today! Seriously, I wish say I fit see your face wen some of these things go click for your head. Here na the amazing journey we go take together: + +- **Wetin programming really be (and why e be the coolest thing ever!)** – We go learn how code na the invisible magic wey dey power everything for your side, from that alarm wey sabi say na Monday morning be this, to the algorithm wey beta arrange your Netflix recommendations +- **Programming languages and their different personalities** – Imagine say you dey waka enter party and everybody get different superpowers and ways to solve problem. That na how programming language world dey be, and you go enjoy to meet dem! +- **The basic building blocks wey make digital magic happen** – Think am like the best creative LEGO set. Once you sabi how these parts join together, you go realize say you fit build anything way your imagination talk +- **Professional tools wey go make you feel like person wey get wizard wand** – I no dey exaggerate here – these tools go really make you feel say you get superpowers, and the best part? Na the same ones pros dey use! + +> 💡 **Here na the mata**: No even try memorize everything today! Now now, I just want make you see the excitement about wetin fit happen. The small small details go sure naturally as we dey practice together – na so real learning dey happen! + +> You fit do this lesson for [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! + +## So Wetin Exactly *Be* Programming? + +Alright, make we tackle the big question: wetin be programming, really? + +I go tell you story wey totally change how I dey see this matter. Last week, I dey try explain to my mama how to use our new smart TV remote. I catch myself dey talk like "Press the red button, but no be the big red button, na the small red button for left... no, your other left... okay, hold am for two seconds, no be one, no be three..." E sound familiar? 😅 + +That na programming! Na art of giving very detailed, step by step instructions to something wey powerful but need make you talk am well well. Except say no be to your mama you dey explain (wey fit ask "which red button?!"), na computer you dey talk to (wey just dey do exactly wetin you talk, even if wetin you talk no be wetin you mean). + +Make I talk wetin scatter my mind when I first learn this: computers be actually pretty simple for inside. Dem only sabi two things – 1 and 0, wey be basically "yes" and "no" or "on" and "off." Na im e be! But the magic come be say – we no need talk 1 and 0 like say we dey The Matrix. Na so programming languages enter the matter. Dem be like say you get the best translator wey dey take your normal human brain talk and turn am to computer language. + +And the thing wey still dey give me goosebumps every morning when I wake up be say: everything digital for your life start from person wey just like you, fit dey with pajamas, sip coffee, dey type code for laptop. That Instagram filter wey make you fine? Somebody code am. The recommendation wey bring your new favorite song? Developer build that algorithm. The app wey help you divide dinner bills with your padi dem? Ehn, person talk say "this one dey bother, I fit fix am" and then... dem fix am! + +When you learn programming, you no dey just gain new skill – you join one amazing community of people wey dey solve problem. Dem dey spend dia days dey think, "Wetin if I fit build something wey go make person day better small?" Honestly, e get anything wey sweet pass that? + +✅ **Fun Fact Hunt**: Here na some beta tins to check when you get free time – who you think na the world’s first computer programmer? I go give you hint: e no fit be who you expect! The story behind this person na fascinating one and e show say programming don always be about creative problem-solving and thinking outside the box. + +### 🧠 **Check-in Time: How You Dey Feel?** + +**Take small time to think:** +- E make sense to you now say "giving instructions to computers" mean? +- You fit think of one daily work wey you fit automate with programming? +- Wetin questions dey your mind about this whole programming matter? + +> **Remember**: E normal if some of the ideas dey confuse you now. Learning programming na like learning new language – e take time make your brain build the pathways. You dey do well! + +## Programming Languages Be Like Different Flavors Of Magic + +Okay, this one go sound funny, but stay with me – programming languages dey like different types of music. Think am: you get jazz wey smooth and free style, rock wey powerful and straight forward, classical wey sophisticated and arranged well, plus hip-hop wey creative and expressive. Each style get dia own vibe, dia own fans wey full passion, and each one perfect for different mood and occasion. + +Programming languages dey work same way! You no go use the same language to build fun mobile game wey you go use to process plenty climate data, just like you no go play death metal for yoga class (well, most yoga classes sef! 😄). + +But wetin dey scatter my mind every time I think about am be say: these languages be like say you get the patientst, smartest interpreter for di world wey sidon gidigba beside you. You fit express your ideas naturally as human, and dem go do all the waka to turn am into 1s and 0s wey computer sabi talk. E be like say you get padi wey fluent for both "human creativity" and "computer logic" – and dem no dey tire, no dey need coffee break, and dem no ever dey judge you if you ask same question two times! + +### Popular Programming Languages and Their Uses + +```mermaid +mindmap + root((Programming Languages)) + Web Development + JavaScript + Frontend Magic + Interactive Websites + TypeScript + JavaScript + Types + Enterprise Apps + Data & AI + Python + Data Science + Machine Learning + Automation + R + Statistics + Research + Mobile Apps + Java + Android + Enterprise + Swift + iOS + Apple Ecosystem + Kotlin + Modern Android + Cross-platform + Systems & Performance + C++ + Games + Performance Critical + Rust + Memory Safety + System Programming + Go + Cloud Services + Scalable Backend +``` +| Language | Best For | Why It's Popular | +|----------|----------|------------------| +| **JavaScript** | Web development, user interfaces | E dey run for browsers and e dey power interactive websites | +| **Python** | Data science, automation, AI | Easy to read and sabi, powerful libraries | +| **Java** | Enterprise applications, Android apps | E no depend on platform, e strong for big big systems | +| **C#** | Windows applications, game development | E get strong Microsoft ecosystem support | +| **Go** | Cloud services, backend systems | Fast, simple, e design for modern computing | + +### High-Level vs. Low-Level Languages + +Okay, this one na the concept wey scatter my brain when I first start learning, so I go tell you analogy wey make am clear for me – I hope e help you also! + +Imagine say you dey visit country wey you no sabi language, and you really need find nearest toilet (everybodi don waka this road, abi? 😅): + +- **Low-level programming** na like say you sabi the local dialect well well, so you fit yan the old woman wey dey sell fruit corner this corner wit cultural things, local slang, and inside jokes wey only person wey grow there go understand. E sweet and very efficient... if you fluent! But e go just stress you if na only restroom you dey find. + +- **High-level programming** na like say you get beta local padi wey understand you well. You fit talk "I really need to find restroom" for plain English, and e go translate everything and carry you go the toilet in way wey your non-local brain go understand. + +For programming: +- **Low-level languages** (like Assembly or C) dey allow you talk detailed talk with computer actual hardware, but you must reason like machine, which be... ehn, make we just say e big mental adjustment! +- **High-level languages** (like JavaScript, Python, or C#) dey let you think like human while dem dey do all the machine talk for back scenes. Plus, dem get communities full of people wey remember when dem be new and dey really ready to help! + +Guess which one I go tell you make you start with? 😉 High-level languages na like training wheels wey you no even want remove because dem just dey make am better to learn! + +```mermaid +flowchart TB + A["👤 Human Thought:
'I wan calculate Fibonacci numbers'"] --> B{Choose Language Level} + + B -->|High-Level| C["🌟 JavaScript/Python
Easy to read and write"] + B -->|Low-Level| D["⚙️ Assembly/C
Direct hardware control"] + + C --> E["📝 Write: fibonacci(10)"] + D --> F["📝 Write: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Computer Understanding:
Translator dey handle complexity"] + F --> G + + G --> H["💻 Same Result:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Make I Show You Why High-Level Languages Dey More Friendly + +Alright, I go show you something wey go show why I fall in love with high-level languages, but first – make you promise me one thing. When you see that first code example, no fear! E suppose look like say e heavy. Na exactly wetin I dey yan be that! + +We go look the same task wey write for two complete different styles. Both go create wetin dem dey call Fibonacci sequence – na beautiful mathematical pattern wey every number na the sum of the two number before am: 0, 1, 1, 2, 3, 5, 8, 13... (Fun fact: you go find this pattern everywhere for nature – like sunflower seed spirals, pine cone shapes, even galaxy way dem form!) + +Ready to see di difference? Make we go! + +**High-level language (JavaScript) – Human-friendly:** + +```javascript +// Step 1: Basic Fibonacci setup na so we go start Fibonacci setup +const fibonacciCount = 10; +let current = 0; +let next = 1; + +console.log('Fibonacci sequence:'); +``` + +**Dis code dey do this:** +- **Declare** constant wey go talk how many Fibonacci number we go generate +- **Initialize** two variables to track current and next number for sequence +- **Set up** starting values (0 and 1) wey define Fibonacci pattern +- **Show** one header message to identify our output + +```javascript +// Step 2: Make di sequence wit loop +for (let i = 0; i < fibonacciCount; i++) { + console.log(`Position ${i + 1}: ${current}`); + + // Calculate di next number for di sequence + const sum = current + next; + current = next; + next = sum; +} +``` + +**Make we break down wetin dey happen here:** +- **Loop** through every position for our sequence using `for` loop +- **Show** each number with im position using template literal formatting +- **Calculate** next Fibonacci number by adding current and next values +- **Update** our tracking variables to move to next number + +```javascript +// Step 3: How we dey do am wit new style +const generateFibonacci = (count) => { + const sequence = [0, 1]; + + for (let i = 2; i < count; i++) { + sequence[i] = sequence[i - 1] + sequence[i - 2]; + } + + return sequence; +}; + +// How you go take use am example +const fibSequence = generateFibonacci(10); +console.log(fibSequence); +``` + +**For this one, we:** +- **Create** reusable function using modern arrow function syntax +- **Build** array to store complete sequence instead of showing one by one +- **Use** array indexing to calculate each new number from previous ones +- **Return** complete sequence to use anyhow for other parts of program + +**Low-level language (ARM Assembly) – Computer-friendly:** + +```assembly + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Notice how JavaScript version read like English instructions, but Assembly version get secret commands wey control computer processor directly. Both do the exact same work, but the high-level language easy for humans to understand, write, and maintain. + +**Key difference wey you go notice:** +- **Readability**: JavaScript dey use names like `fibonacciCount` wey clear, but Assembly dey use codes like `r0`, `r1` +- **Comments**: High-level languages dey encourage explanatory comments wey dey make code self-documenting +- **Structure**: JavaScript logical flow dey match how humans dey think about problems step-by-step +- **Maintenance**: Updating the JavaScript version for different requirements easy and clear + +✅ **About the Fibonacci sequence**: Dis absolutely beautiful number pattern (where each number equals di sum of di two before am: 0, 1, 1, 2, 3, 5, 8...) dey show up literally *everywhere* for nature! You go find am for sunflower spirals, pinecone patterns, di way nautilus shells dey curve, and even for how tree branches grow. E dey pretty mind-blowing how math and code fit help us understand and recreate di patterns wey nature dey use to create beauty! + + +## The Building Blocks That Make the Magic Happen + +Alright, now wey you don see how programming languages dey act, make we break down di fundamental pieces wey dey make up literally every program wey dem don write. Think of these as di essential ingredients for your favorite recipe – once you sabi wetin each one dey do, you go fit read and write code for almost any language! + +Dis na like learning di grammar of programming. Remember for school when you learn about nouns, verbs, and how to put sentences together? Programming get him own version of grammar, and honestly, e dey way more logical and forgiving pass English grammar! 😄 + +### Statements: The Step-by-Step Instructions + +Make we start with **statements** – dem be like individual sentences wey you dey yarn with your computer. Each statement dey tell di computer to do one specific thing, just like giving directions: "Turn left here," "Stop for di red light," "Park for that spot." + +Wetin I like about statements na how dem dey readable most times. Check dis out: + +```javascript +// Simple talk wey dey do one kain work only +const userName = "Alex"; +console.log("Hello, world!"); +const sum = 5 + 3; +``` + +**Dis na wetin dis code dey do:** +- **Declare** one constant variable to store user name +- **Display** greeting message for di console output +- **Calculate** and store di result of one mathematical operation + +```javascript +// Di talk dem wey dey interact wit web pages +document.title = "My Awesome Website"; +document.body.style.backgroundColor = "lightblue"; +``` + +**Step by step, dis na wetin dey happen:** +- **Modify** di webpage title wey dey appear for di browser tab +- **Change** di background color of di whole page body + +### Variables: Your Program's Memory System + +Okay, **variables** be one of my absolute favorite concepts to teach because dem dey just like things you dey use everyday! + +Think about your phone contact list for one second. You no dey memorize everybody phone numbers – you dey save "Mom," "Best Friend," or "Pizza Place Wey Dey Deliver Till 2 AM" and your phone dey remember di actual numbers. Variables dey work like dat! Dem be like labeled containers where your program fit store info and retrieve am later with one name wey make sense. + +Wetin make am really cool: variables fit change as your program dey run (na why dem call am "variable" – you see wetin dem do there?). Just like how you fit update dat pizza place contact if you find better one, variables fit dey updated as your program learn new info or as situation change! + +Make I show you how simple e fit be: + +```javascript +// Step 1: Di creating basic variables +const siteName = "Weather Dashboard"; +let currentWeather = "sunny"; +let temperature = 75; +let isRaining = false; +``` + +**Make you understand dis concepts:** +- **Store** values wey no go change for `const` variables (like site name) +- **Use** `let` for values wey fit change during your program +- **Assign** different data types: strings (text), numbers, and booleans (true/false) +- **Choose** descriptive names wey explain wetin each variable get inside + +```javascript +// Step 2: Dey wok wit objects to group tings wey relate togeda +const weatherData = { + location: "San Francisco", + humidity: 65, + windSpeed: 12 +}; +``` + +**For di above, we:** +- **Create** one object to group related weather information +- **Organize** plenty pieces of data under one variable name +- **Use** key-value pairs to label each info clearly + +```javascript +// Step 3: Di way wey you go take use an update di variables +console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); +console.log(`Wind speed: ${weatherData.windSpeed} mph`); + +// How to update di variables wey fit change +currentWeather = "cloudy"; +temperature = 68; +``` + +**Make we understand each part:** +- **Display** info with template literals using `${}` syntax +- **Access** object properties with dot notation (`weatherData.windSpeed`) +- **Update** variables wey dem declare with `let` to show changing conditions +- **Combine** multiple variables to create meaningful messages + +```javascript +// Step 4: Modern destructuring make di code clean well well +const { location, humidity } = weatherData; +console.log(`${location} humidity: ${humidity}%`); +``` + +**Wetin you need sabi:** +- **Extract** specific properties from objects with destructuring assignment +- **Create** new variables automatically wey get same names as object keys +- **Simplify** code by avoiding repetitive dot notation + +### Control Flow: Teaching Your Program to Think + +Okay, na here programming go dey mind-blowing! **Control flow** na teaching your program how to make smart decisions, just like how you dey do every day without even think. + +Imagine dis: this morning you for do something like "If e dey rain, I go carry umbrella. If e cold, I go wear jacket. If I late, I go skip breakfast and grab coffee on di way." Your brain naturally dey follow dis if-then logic many times every day! + +Dis na wetin dey make programs dey feel intelligent and alive, no be only to follow boring, predictable script. Dem fit look situation, reason wetin dey happen, and respond well well. E be like giving your program brain wey fit adapt and make choices! + +You want see how dis work nicely? Make I show you: + +```javascript +// Step 1: Simple if-else ting dem +const userAge = 17; + +if (userAge >= 18) { + console.log("You can vote!"); +} else { + const yearsToWait = 18 - userAge; + console.log(`You'll be able to vote in ${yearsToWait} year(s).`); +} +``` + +**Dis na wetin dis code dey do:** +- **Check** if user age reach di voting requirement +- **Execute** different code blocks based on condition result +- **Calculate** and display how long before dem fit vote if dem still under 18 +- **Provide** specific, helpful feedback for each case + +```javascript +// Step 2: Plenty conditions wit logical operators +const userAge = 17; +const hasPermission = true; + +if (userAge >= 18 && hasPermission) { + console.log("Access granted: You can enter the venue."); +} else if (userAge >= 16) { + console.log("You need parent permission to enter."); +} else { + console.log("Sorry, you must be at least 16 years old."); +} +``` + +**Break down wetin dey happen:** +- **Combine** multiple conditions with `&&` (and) operator +- **Create** hierarchy of conditions with `else if` for many scenarios +- **Handle** all possible cases with final `else` statement +- **Provide** clear and actionable feedback for each different situation + +```javascript +// Step 3: Short condition wit ternary operator +const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; +console.log(`Status: ${votingStatus}`); +``` + +**Wetin you need remember:** +- **Use** ternary operator (`? :`) for simple two-option conditions +- **Write** condition first, then `?`, then true result, then `:`, then false result +- **Apply** dis pattern when you want assign values based on conditions + +```javascript +// Step 4: Dealing wit plenti particular kain cases +const dayOfWeek = "Tuesday"; + +switch (dayOfWeek) { + case "Monday": + case "Tuesday": + case "Wednesday": + case "Thursday": + case "Friday": + console.log("It's a weekday - time to work!"); + break; + case "Saturday": + case "Sunday": + console.log("It's the weekend - time to relax!"); + break; + default: + console.log("Invalid day of the week"); +} +``` + +**Dis code dey do:** +- **Match** variable value against multiple specific cases +- **Group** similar cases together (weekdays vs weekends) +- **Execute** correct code block when match dey +- **Include** `default` case to handle unexpected values +- **Use** `break` statements to prevent code from running to next case + +> 💡 **Real-world analogy**: Think of control flow like di world most patient GPS wey dey gimme directions. E go talk "If traffic dey Main Street, take highway instead. If construction block highway, try scenic route." Programs dey use same conditional logic make dem respond smartly to different things and always give user di best experience. + +### 🎯 **Concept Check: Building Blocks Mastery** + +**Make we see how you dey with fundamentals:** +- Fit explain difference between variable and statement with your own words? +- Think of real-world place where you fit use if-then decision (like our voting example) +- Wetin one thing about programming logic wey surprise you? + +**Quick confidence booster:** +```mermaid +flowchart LR + A["📝 Statements
(Instructions dem)"] --> B["📦 Variables
(Storage)"] --> C["🔀 Control Flow
(Decisions)"] --> D["🎉 Working Program!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Wet tin dey come next**: We go enjoy as we dive deeper into these concepts for this incredible journey! Right now, just focus on that excitement about all di amazing possibilities wey dey front of you. Di specific skills and techniques go naturally stick as we practice together – I promise say dis go sweet pass wetin you expect! + +## Tools of the Trade + +Okay, na here I dey really excited wey I fit barely contain! 🚀 We go talk about the amazing tools wey go make you feel like say dem don give you di keys to digital spaceship. + +You sabi how chef get knives wey balance well well wey feel like part of im hand? Or how musician get guitar wey dey sing the moment dem touch am? Well, developers get our own magical tools, and here na wetin go blow your mind – most of dem dey free! + +I dey bounce for my chair just dey think about to share this with you because dem don change how we dey build software completely. We dey talk about AI-powered coding assistants wey fit help write your code (I no dey joke!), cloud environments where you fit build complete applications from anywhere with Wi-Fi, and debugging tools so waka deep dem be like X-ray vision for your programs. + +And this one still get me chills: these no be beginner tools wey you go soon comot. Na the exact professional-grade tools wey developers for Google, Netflix, and that indie app studio wey you like dey use now now. You go feel like real pro using them! + +```mermaid +graph TD + A["💡 Your Idea"] --> B["⌨️ Code Editor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Testing & Debugging)"] + C --> D["⚡ Command Line
(Automation & Tools)"] + D --> E["📚 Documentation
(Learning & Reference)"] + E --> F["🚀 Amazing Web App!"] + + B -.-> G["🤖 AI Assistant
(GitHub Copilot)"] + C -.-> H["📱 Device Testing
(Responsive Design)"] + D -.-> I["📦 Package Managers
(npm, yarn)"] + E -.-> J["👥 Community
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Code Editors and IDEs: Your New Digital Best Friends + +Make we talk about code editors – dem go soon become your favorite places to hang out! Think of dem as your personal coding sanctuary where you go spend most of your time crafting and perfecting your digital work. + +But dis one dey magical about modern editors: no be only fine text editors. Dem be like having best, most supportive coding mentor sit right beside you 24/7. Dem go catch your typo before you even sabi dem, suggest ways to make you look genius, help you understand every piece of code, and some even fit predict wetin you wan type next and offer to finish your mind! + +I remember when I first find auto-completion – I feel like I dey live for future. You go start to type, then your editor go talk, "Hey, you dey think about dis function wey go do wetin you need?" E be like say your coding buddy sabi your mind before you talk am! + +**Wetin make these editors so incredible?** + +Modern code editors get plenty features wey go boost your work productivity: + +| Feature | What E Dey Do | Why E Dey Help | +|---------|--------------|--------------| +| **Syntax Highlighting** | Dey color different parts of your code | Make code easier to read and spot mistakes | +| **Auto-completion** | Dey suggest code as you type | Speed coding and reduce typos | +| **Debugging Tools** | Dey help find and fix errors | Save you many hours of troubleshooting | +| **Extensions** | Add special features | Customize your editor for any technology | +| **AI Assistants** | Suggest code and explanations | Fast learning and better productivity | + +> 🎥 **Video Resource**: Want see these tools for action? Check dis [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for full overview. + +#### Recommended Editors for Web Development + +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Free) +- Most popular for web developers +- Excellent extension ecosystem +- Built-in terminal and Git integration +- **Must-have extensions**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-powered code suggestions + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Real-time collaboration + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatic code formatting + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Catch typos inside your code + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Paid, free for students) +- Advanced debugging and testing tools +- Intelligent code completion +- Built-in version control + +**Cloud-Based IDEs** (Different pricing) +- [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code for your browser +- [Replit](https://replit.com/) - Great for learning and sharing code +- [StackBlitz](https://stackblitz.com/) - Instant, full-stack web development + +> 💡 **Getting Started Tip**: Start with Visual Studio Code – e free, e dey widely used for industry, and get big community wey dey create helpful tutorials and extensions. + + +### Web Browsers: Your Secret Development Laboratory + +Okay, get ready to get your mind blow! You know how you dey use browsers to scroll social media and watch videos? Well, e turn out say browsers hide incredible secret developer laboratory all dis time, just dey wait make you find am! + +Every time you right-click on webpage and choose "Inspect Element," na so you dey open one hidden world of developer tools wey really powerful pass some expensive software wey I use pay hundreds of dollars for before. E be like say your normal kitchen get professional chef laboratory behind secret panel! +Di fọs taim pesin show me browser DevTools, ah spent like three awas jus dey click around an dey talk "WAIT, E FIT DO DAT TOO?!" You fit edit any website for real-time, see exactly how fast everytin dey load, test how your site dey look for different devices, an even debug JavaScript like total pro. E really blow mind! + +**Na why browsers be your secret weapon:** + +When you dey create website or web application, you go need see how e dey look an behave for real life. Browsers no just show your work, dem dey give you detailed feedback about performance, accessibility, an potential wahala. + +#### Browser Developer Tools (DevTools) + +Modern browsers get full development suite: + +| Tool Category | Wetin E Dey Do | Example Use Case | +|---------------|----------------|------------------| +| **Element Inspector** | View an edit HTML/CSS for real-time | Change style make you see quick result | +| **Console** | View error messages an test JavaScript | Debug gbege an try code | +| **Network Monitor** | Track how resources dey load | Make performance an loading sharp | +| **Accessibility Checker** | Test for inclusive design | Make sure say your site dey work for everybody | +| **Device Simulator** | Preview on different screen sizes | Test responsive design without many devices | + +#### Recommended Browsers for Development + +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industry-standard DevTools wit full documentation +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Beta CSS Grid an accessibility tools +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Build on Chromium wit Microsoft developer resources + +> ⚠️ **Important Testing Tip**: Always test your websites inside multiple browsers! Wetin work well for Chrome fit look different for Safari or Firefox. Professional developers dey test for all major browsers so user experience go dey consistent. + +### Command Line Tools: Your Gateway to Developer Superpowers + +Okay, mek we dey real here about command line, because I want make you hear from person wey understand am well well. When I first see am – just dis scary black screen with blinking text – I really think, "Nope, no way! E be like witchcraft from 1980s hacker movie, and I no smart reach dat level!" 😅 + +But na wetin I wish person don tell me back then an wat I dey tell you now be: command line no dey scary – e be like direct talk with your computer. E be like differenc between ordering food from fancy app wit picture an menu (wey sweet an easy) versus enter your local restaurant where chef sabi wetin you like an fit make correct food when you just say "surprise me with something great." + +Command line na where developers go feel like real wizards. You just type few magic words (okay na commands, but e dey feel magic!), press enter, an BOOM – you don create whole project structure, install strong tools from anywhere, or deploy your app to internet for millions people to see. When you get first taste of dat power, e be like chain wey no fit break! + +**Why command line go be your best tool:** + +Even though GUI dey good for many tasks, command line dey excel for automation, precision, an speed. Plenty dev tools dey work mainly with command line interface, an learning how to use dem well fit boost your productivity no be small. + +```bash +# Step 1: Make and waka go project folder +mkdir my-awesome-website +cd my-awesome-website +``` + +**Dis code dey do:** +- **Create** one new directory wey dem call "my-awesome-website" for your project +- **Navigate** inside dat new directory to start work + +```bash +# Step 2: Start di project wit package.json +npm init -y + +# Install beta development tools +npm install --save-dev vite prettier eslint +npm install --save-dev @eslint/js +``` + +**Step by step, dis na wetin dey happen:** +- **Initialize** new Node.js project with default settings using `npm init -y` +- **Install** Vite as modern build tool for fast development and production build +- **Add** Prettier for automatic code formatting an ESLint for code quality check +- **Use** `--save-dev` flag to mark these as development-only dependencies + +```bash +# Step 3: Build di project structure and files +mkdir src assets +echo 'My Site

Hello World

' > index.html + +# Start di development server +npx vite +``` + +**For above, we don:** +- **Organize** our project by creating separate folders for source code an assets +- **Generate** basic HTML file wit correct document structure +- **Start** Vite development server for live reload an hot module replacement + +#### Essential Command Line Tools for Web Development + +| Tool | Purpose | Why You Need Am | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Version control | Track changes, collaborate an backup work | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & package management | Run JavaScript outside browser, install modern dev tools | +| **[Vite](https://vitejs.dev/)** | Build tool & dev server | Fast development wit hot module replacement | +| **[ESLint](https://eslint.org/)** | Code quality | Automatically find an fix problems for your JavaScript | +| **[Prettier](https://prettier.io/)** | Code formatting | Keep code consistent an easy to read | + +#### Platform-Specific Options + +**Windows:** +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern, feature-rich terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Powerful scripting environment +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditional Windows command line + +**macOS:** +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Built-in terminal app +- **[iTerm2](https://iterm2.com/)** - Enhanced terminal wit advanced features + +**Linux:** +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Advanced terminal emulator + +> 💻 = Pre-installed for operating system + +> 🎯 **Learning Path**: Start wit basic commands like `cd` (change directory), `ls` or `dir` (list files), an `mkdir` (create folder). Practice wit modern workflow commands like `npm install`, `git status`, an `code .` (opens current directory in VS Code). As you dey comfortable, you go naturally learn advanced commands an automation techniques. + +### Documentation: Your Always-Available Learning Mentor + +Okay, mek I share small secret wey go make you feel better about being beginner: even the most experienced developers spend plenty time dey read documentation. An no be because dem no sabi wetin dem dey do – e mean say dem dey wise! + +Think documentation like you get access to world most patient, knowledgeable teacher wey dey available 24/7. You jam gbege for 2 AM? Documentation dey give you warm virtual hug an exactly di answer wey you need. You want learn about beta new thing wey everybody dey talk? Documentation get your back wit step-by-step example. You dey try sabi why something dey work like dat? You don guess am – documentation ready to explain am so e go clear finally! + +Here na wetin change my mind: web development world dey move sharp sharp, an nobody (I mean nobody!) fit remember everything. I don watch senior devs with 15+ years experience dey look basic syntax, and you know? E no shame – na smart thing be dat! E no mean say memory perfect; na to sabi where to find correct answer fast an understand how to apply am. + +**Na here di real magic dey:** + +Professional developers spend big part of their time dey read documentation – no be because dem no sabi, but because web development landscape dey change fast so dem need dey learn continuously. Great documentation go help you understand not just *how* to use somtin, but *why* an *when* to use am. + +#### Essential Documentation Resources + +**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** +- Gold standard for web technology documentation +- Comprehensive guides for HTML, CSS an JavaScript +- Browser compatibility info inside +- Get practical examples an interactive demos + +**[Web.dev](https://web.dev)** (by Google) +- Modern web development best practices +- Performance optimization guides +- Accessibility an inclusive design principles +- Case studies from real projects + +**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** +- Edge browser development resources +- Progressive Web App guides +- Cross-platform dev insights + +**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** +- Structured learning curricula +- Video courses from industry experts +- Hands-on coding exercises + +> 📚 **Study Strategy**: No try memorize documentation – better learn how to navigate am well. Bookmark references you use dey-time to time an practice to find info fast with search. + +### 🔧 **Tool Mastery Check: Wetin Dey Resonate With You?** + +**Take small time to think:** +- Which tool you dey excited to try first? (No wrong answer!) +- Command line still dey scare you or you get curiosity about am? +- You go fit use browser DevTools to peek behind curtain for your favorite websites? + +```mermaid +pie title "How Developer Dey Spend Time Wit Tools" + "Code Editor" : 40 + "Browser Testing" : 25 + "Command Line" : 15 + "Reading Docs" : 15 + "Debugging" : 5 +``` +> **Fun insight**: Majority developers spend about 40% of their time for their code editor, but observe how much time dey go for testing, learning, an problem-solving. Programming no be only to write code – na to create experience! + +✅ **Food for thought**: Think about dis – how tools for building websites (development) dey different from tools for designing how dem go look (design)? E be like differenc between architect wey design beautiful house an contractor wey build am. Both important, but need different tools! Dis kind thinking go help you see bigger picture of how websites dem come alive. + +## GitHub Copilot Agent Challenge 🚀 + +Use Agent mode complete dis challenge: + +**Description:** Explore features of modern code editor or IDE an show how e fit improve your workflow as web developer. + +**Prompt:** Choose code editor or IDE (like Visual Studio Code, WebStorm, or cloud-based IDE). List three features or extensions wey help you write, debug, or maintain code fast. For each, give short explanation how e benefit your workflow. + +--- + +## 🚀 Challenge + +**Alright detective, you ready for your first case?** + +Now wey you get this solid foundation, I get adventure wey go help you see how diverse an fascinating programming world be. And listen – no be to write code yet, so no pressure! Think of yourself as programming language detective on your first exciting case! + +**Your mission, if you accept am:** +1. **Become language explorer**: Pick three programming languages wey from different worlds – maybe one for building websites, one for mobile apps, an one for crunching scientific data. Find example of same simple task written for every language. I promise you go shock how different dem go look but e still do same tins! + +2. **Discover dem origin story**: Wetin make each language special? One cool fact – every programming language come because pesin believe “I think sey beta way dey solve dis kind problem.” Fit you know wetin those problems be? Some story dey really interesting! + +3. **Meet the communities**: Check how friendly an passionate each language community be. Some get millions dev dey share knowledge an help each other, others small but tight an supportive. You go enjoy see dem different personalities! + +4. **Follow your gut feeling**: Which language you feel more comfortable wit? No stress to pick perfect one – just listen to your heart! No wrong answer here, you fit explore more later. + +**Bonus detective work**: Try find out which big websites or apps dem build with each language. I garranty sey you go shock to sabi wetin power Instagram, Netflix, or that mobile game wey you no fit stop to play! + +> 💡 **Remember**: You no dey try become expert for any language today. You just dey sabi neighborhood before you choose where you want build. Take your time, enjoy am, an follow your curiosity! + +## Make We Celebrate Wetin You Don Learn! + +Holy moly, you don absorb plenty correct info today! I happy to see how much of this journey don stick for your head. And remember – no be test wey you must get everything correct. Na celebration of all the beta tins you don learn about dis beautiful world you dey prepare to enter! + +[Take the post-lesson quiz](https://ff-quizzes.netlify.app/web/) +## Review & Self Study + +**Take your time to explore and have fun with it!** + +You don cover beta tins today, and dat one na beta tins to dey proud of! Now na di fun part – to explore di tins wey catch your mind. Make you remember, dis no be homework – na adventure! + +**Dive deeper into what excites you:** + +**Make you try di programming languages:** +- Visit di official websites of 2-3 languages wey catch your eye. Each get im own character and story! +- Try some online coding playgrounds like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Replit](https://replit.com/). No fear to try – you no fit spoil anything! +- Read how your favorite language take start. True true, some origin stories beta well well and e go help you understand why languages dey work like dat. + +**Make you sabi di new tools:** +- Download Visual Studio Code if you never download – e free and you go like am! +- Spend small time to waka inside di Extensions marketplace. E bi like app store for your code editor! +- Open your browser Developer Tools and just dey click around. No worry to sabi everything – just dey familiar with wetin dey. + +**Join di community:** +- Follow some developer communities for [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), or [GitHub](https://github.com/). Di programming community dey very friendly to new people! +- Watch beginner coding videos for YouTube. Plenty beta creators wey sabi how e be to just start. +- Think about to join local meetups or online communities. Believe me, developers love to help new pipo! + +> 🎯 **Listen, na wetin I want you to remember be dis**: No expect to become coding wizard overnight! Now, you just dey know dis amazing new world wey you about enter. Take your time, enjoy di journey, and remember – every developer wey you sabi dey admire, dem bin dey your same place before, excited and maybe small confuse. E normal, and e mean say you dey do well! + + + +## Assignment + +[Reading the Docs](assignment.md) + +> 💡 **Small push for your assignment**: I go like see you explore some tools we never talk before! No look editors, browsers, and command line tools wey we don yam – plenty beta development tools dey wey you fit discover. Find ones wey dey actively maintained and get strong, helpful communities (dem get best tutorials and most supportive pipo when you jam problem and need help). + +--- + +## 🚀 Your Programming Journey Timeline + +### ⚡ **Wetin you fit do for next 5 minutes** +- [ ] Bookmark 2-3 programming language websites wey catch your eye +- [ ] Download Visual Studio Code if you never download +- [ ] Open your browser DevTools (F12) and just click around any website +- [ ] Join one programming community (Dev.to, Reddit r/webdev, or Stack Overflow) + +### ⏰ **Wetin you fit complete this hour** +- [ ] Finish di post-lesson quiz and think about your answers +- [ ] Set up VS Code with di GitHub Copilot extension +- [ ] Try "Hello World" example for 2 different programming languages online +- [ ] Watch "Day in the Life of a Developer" video for YouTube +- [ ] Start your programming language detective work (from di challenge) + +### 📅 **Your week-long adventure** +- [ ] Finish di assignment and explore 3 new development tools +- [ ] Follow 5 developers or programming accounts for social media +- [ ] Try build small tin for CodePen or Replit (even just "Hello, [Your Name]!") +- [ ] Read one developer blog post about coding journey +- [ ] Join virtual meetup or watch one programming talk +- [ ] Start learning your chosen language with online tutorials + +### 🗓️ **Your month-long transformation** +- [ ] Build your first small project (even simple webpage counts!) +- [ ] Contribute to open-source project (start with documentation fixes) +- [ ] Mentor person wey just start their programming journey +- [ ] Create your developer portfolio website +- [ ] Connect with local developer communities or study groups +- [ ] Start to plan your next learning milestone + +### 🎯 **Final reflection check-in** + +**Before you move on, celebrate small:** +- Wetin be one thing about programming wey excited you today? +- Which tool or concept you want explore first? +- How you feel about starting dis programming journey? +- Wetin be one question you go like ask developer now? + +```mermaid +journey + title Your Confidence Building Journey + section Today + Curious: 3: You + Overwhelmed: 4: You + Excited: 5: You + section This Week + Exploring: 4: You + Learning: 5: You + Connecting: 4: You + section Next Month + Building: 5: You + Confident: 5: You + Helping Others: 5: You +``` +> 🌟 **Remember**: Every expert bin be beginner once. Every senior developer bin feel just like you dey feel now – excited, maybe small confuse, and sure about wetin fit happen. You dey beta company, and dis journey go sweet well well. Welcome to di wonderful world of programming! 🎉 + +--- + + +**Disclaimer**: +Dis document don get AI translation from [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e correct, abeg sabi say automated translation fit get mistake or no proper. Di original document for dia language na di correct one to trust. If na serious information, better make professional human person translate am. We no gree take responsibility if person no understand well or if person miss the meaning because of dis translation. + \ No newline at end of file diff --git a/translations/pcm/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md b/translations/pcm/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md new file mode 100644 index 000000000..974df9ea3 --- /dev/null +++ b/translations/pcm/1-getting-started-lessons/1-intro-to-programming-languages/assignment.md @@ -0,0 +1,78 @@ + +# Assignment: Exploring Modern Web Development Tools + +## Instructions + +The web development ecosystem include plenti special tools wey dey help developers build, test, and maintain applications well well. Your work na to research and sabi tools wey go complete the ones wey this lesson cover. + +**Your Mission:** Choose **three tools** wey **this lesson no talk about** (no choose code editors, browsers, or command line tools wey dem don list before). Make you focus on tools wey solve particular gbege for modern web development workflow. + +**For each tool, give:** + +1. **Tool name and category** (ex: "Figma - Design Tool" or "Jest - Testing Framework") +2. **Purpose and benefits** - Explain for 2-3 sentences why web developer go use this tool and which kind gbege e dey solve +3. **Official documentation link** - Put link to the tool official docs or website (no na just tutorial sites) +4. **Real-world context** - Talk one way wey this tool dey fit inside professional development workflow + +## Suggested Tool Categories + +Try explore tools from these categories: + +| Category | Examples | What They Do | +|----------|----------|--------------| +| **Build Tools** | Vite, Webpack, Parcel, esbuild | Dem bundle and optimize code for production with fast development servers | +| **Testing Frameworks** | Vitest, Jest, Cypress, Playwright | Dem make sure code correct and catch bugs before deployment | +| **Design Tools** | Figma, Adobe XD, Penpot | Dem dey create mockups, prototypes, and design systems together | +| **Deployment Platforms** | Netlify, Vercel, Cloudflare Pages | Dem host and distribute websites with automatic CI/CD | +| **Version Control** | GitHub, GitLab, Bitbucket | Dem manage code changes, collaboration, and project workflows | +| **CSS Frameworks** | Tailwind CSS, Bootstrap, Bulma | Dem quicken styling with pre-built component libraries | +| **Package Managers** | npm, pnpm, Yarn | Dem install and manage code libraries and dependencies | +| **Accessibility Tools** | axe-core, Lighthouse, Pa11y | Dem test for inclusive design and WCAG compliance | +| **API Development** | Postman, Insomnia, Thunder Client | Dem dey test and document APIs while development dey happen | + +## Format Requirements + +**For each tool:** +``` +### [Tool Name] - [Category] + +**Purpose:** [2-3 sentences explaining why developers use this tool] + +**Documentation:** [Official website/documentation link] + +**Workflow Integration:** [1 sentence about how it fits into development process] +``` + +## Quality Guidelines + +- **Choose current tools**: Pick tools wey dem still dey maintain and plenty people sabi for 2025 +- **Focus on value**: Talk the exact benefits, no be just wetin the tool dey do +- **Professional context**: Think about tools wey development teams dey use, no be only individual hobbyists +- **Diverse selection**: Choose tools from different categories to show wide ecosystem +- **Modern relevance**: Pick tools wey align with current web development trends and best practices + +## Rubric + +| Excellent | Good | Needs Improvement | +|-----------|------|-------------------| +| **Clear explain why developers dey use each tool and which problems e dey solve** | **Explained wetin the tool do but miss some context about e value** | **Only list tools no explain wetin dem dey do or benefits** | +| **Give official documentation links for all tools** | **Mostly give official links but 1-2 tutorial sites dey too** | **Mainly give tutorial sites no official docs** | +| **Pick current, professionally-used tools from wide categories** | **Pick good tools but category variety no too much** | **Choose old tools or only one category** | +| **Show understanding of how tools dey fit into development workflows** | **Show small understanding for professional context** | **Only focus on tool features no workflow context** | + +> 💡 **Research Tip**: Try find tools wey dey job postings for web developers, check popular developer surveys, or look through dependencies wey successful open-source projects use for GitHub! + +--- + + +**Disclaimer**: +Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. Even though we try to make am correct, make you sabi say automated translation fit get mistake or no too clear. Di original document wey e dey for im own language na di correct one. For important mata, make person wey sabi human translation do am. We no go responsible if anybody no understand well or if e mean different thing because of dis translation. + \ No newline at end of file diff --git a/translations/pcm/1-getting-started-lessons/2-github-basics/README.md b/translations/pcm/1-getting-started-lessons/2-github-basics/README.md new file mode 100644 index 000000000..43cda1e63 --- /dev/null +++ b/translations/pcm/1-getting-started-lessons/2-github-basics/README.md @@ -0,0 +1,777 @@ + +# Introduction to GitHub + +Hey dia, future developer! 👋 Ready to join millions of coders all over di world? I truly dey excited to introduce you to GitHub – make you think am as social media platform for programmers, but instead of dey share pictures of your lunch, we dey share code and dey build amazing tins together! + +Dis na wetin really anni blow my mind: every app for your phone, every website wey you dey visit, and most of di tools wey you go learn to use, na teams of developers collaborate for platforms like GitHub build dem. That music app wey you like? Person like you contribute for am. That game wey you no fit drop? Yes, e fit be sey dem build am with GitHub collaboration. And now YOU go learn how to join dat wonderful community! + +I sabi sey e fit feel like plenti tins at first – heck, I remember sey I look my first GitHub page dey wonder "Wetin dis tins mean for ground?" But here be di koko: every single developer start exactly where you dey right now. By di end of dis lesson, you go get your own GitHub repository (think am as your personal project showcase for cloud), and you go sabi how to save your work, share am with oda people, and even join contribute for projects wey millions of people dey use. + +We go take dis travel together, one step at a time. No rush, no pressure – na just you, me, and some really cool tools wey go turn your new best friends! + +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.pcm.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Your GitHub Adventure Today + section Setup + Install Git: 4: You + Create Account: 5: You + First Repository: 5: You + section Master Git + Local Changes: 4: You + Commits & Pushes: 5: You + Branching: 4: You + section Collaborate + Fork Projects: 4: You + Pull Requests: 5: You + Open Source: 5: You +``` +## Pre-Lecture Quiz +[Pre-lecture quiz](https://ff-quizzes.netlify.app) + +## Introduction + +Before we jump enter really exciting tins, make we ready your computer for some GitHub magic! Think am like sey you dey organize your art supplies before you begin create tori masterpiece – when your tools dey ready, everything go dey smooth and fun well well. + +I go waka you through every setup step personally, and I promise sey e no fit too scary as e fit look for first. If anything no clear immediately, no wahala! I remember sey I set up my first development environment and e be like sey I dey try read ancient hieroglyphics. Every single developer don dey exactly where you dey now, dey wonder if dem dey do am correct. Spoiler alert: if you dey here dey learn, you don dey do am correct already! 🌟 + +For dis lesson, we go cover: + +- how to track the work wey you do for your machine +- how to work on projects with oda people +- how to contribute to open source software + +### Prerequisites + +Make we ready your computer for some GitHub magic! No worry – dis setup na tin wey you go do once, then you go dey ready for your whole coding journey. + +Okay, make we start with di foundation! First, we need check if Git already dey your computer. Git na like super-smart assistant wey dey remember every change you make to your code – better well pass to dey press Ctrl+S every two seconds (we don all do am!). + +Make we see if Git don install by typing dis magic command for your terminal: +`git --version` + +If Git never dey there yet, no wahala! Just go [download Git](https://git-scm.com/downloads) and grab am. After you don install am, we need show Git who you be properly: + +> 💡 **First Time Setup**: These commands go tell Git who you be. Dis info go join every commit wey you make, so choose name and email wey you comfortable to show publicly. + +```bash +git config --global user.name "your-name" +git config --global user.email "your-email" +``` + +To check if Git don configure already you fit type: +```bash +git config --list +``` + +You go also need GitHub account, code editor (like Visual Studio Code), and you go need open your terminal (or: command prompt). + +Go [github.com](https://github.com/) and create account if you never create before, or log in and fill your profile. + +💡 **Modern tip**: Try set up [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) or use [GitHub CLI](https://cli.github.com/) to make authentication easy without need password. + +✅ GitHub no be di only code repository for world; others dey, but GitHub na di most known + +### Preparation + +You go need folder with code project for your local machine (laptop or PC), plus public repository for GitHub, wey go serve as example how to contribute to projects of others. + +### Keeping Your Code Safe + +Make we yan about security small – but no worry, we no go drown you for scary tins! Think of these security habits like you dey lock your car or house. Na simple habits wey go become part of your routine and go protect your hard work. + +We go show you modern, secure ways to work with GitHub from start. This way, you go develop good habits wey go serve you well for your whole coding career. + +When you dey work with GitHub, e important to follow security best practices: + +| Security Area | Best Practice | Why It Matters | +|---------------|---------------|----------------| +| **Authentication** | Use SSH keys or Personal Access Tokens | Passwords no too secure again and dem dey phase them out | +| **Two-Factor Authentication** | Enable 2FA for your GitHub account | E add extra protection layer for your account | +| **Repository Security** | No ever commit sensitive info | API keys and passwords no suppose dey public repos | +| **Dependency Management** | Enable Dependabot for updates | E dey keep your dependencies secure and updated | + +> ⚠️ **Critical Security Reminder**: No ever commit API keys, passwords, or any sensitive info to any repo. Use environment variables and `.gitignore` files to protect sensitive data. + +**Modern Authentication Setup:** + +```bash +# Make SSH key (new ed25519 algorithm) +ssh-keygen -t ed25519 -C "your_email@example.com" + +# Arrange Git make e use SSH +git remote set-url origin git@github.com:username/repository.git +``` + +> 💡 **Pro Tip**: SSH keys mean say you no need dey enter password every time and dem dey more secure than old-fashioned authentication ways. + +--- + +## Managing Your Code Like a Pro + +Okay, THIS na where tins dey get really exciting! 🎉 We go learn how to track and manage your code like pros, and honestly, na one of my favorite tins to teach because e dey change how you work well well. + +Imagine say you dey write amazing tori, and you want to keep track of every draft, every fine edit, and every "wait, na genius!" moment for di way. Na wetin Git dey do for your code! E be like say you get the best time-traveling notebook wey dey remember EVERYTHING – every keystroke, every change, every "oops, I spoil tins" moment wey you fit instantly undo. + +I go talk true – e fit feel overwhelming at first. When I start, I think "Why I no fit just save my files like normal?" But trust me: when Git start make sense to you (e go!), you go get one of those lightbulb moments wey you go think "How I EVER dey code without am?" E be like you discover say you fit fly after you dey waka everywhere your whole life! + +Make we say you get folder this side with some code project and you want start to track your progress with git - the version control system. Some people talk sey to use git na like write love letter to your future self. When you read your commit messages days/wks/months later, you go fit remember why you make decision, or "rollback" change – dat mean if you write good "commit messages". + +```mermaid +flowchart TD + A[📁 Your Project Files] --> B{Na Git Repository?} + B -->|No| C[git init] + B -->|Yes| D[Make Changes] + C --> D + D --> E[git add .] + E --> F["git commit -m 'message'"] + F --> G[git push] + G --> H[🌟 Code for GitHub!] + + H --> I{You wan collaborate?} + I -->|Yes| J[Fork & Clone] + I -->|No| D + J --> K[Create Branch] + K --> L[Make Changes] + L --> M[Pull Request] + M --> N[🎉 Contributing!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` +### Task: Create Your First Repository! + +> 🎯 **Your Mission (and I dey excited for you!)**: We go create your very first GitHub repository together! By the time we finish here, you go get your own little corner for internet wey your code dey live, and you go don make your first "commit" (na developer way to talk sey you save your work smart-smart). +> +> Dis na really special moment – you dey ready to officially join di global developers community! I still remember di joy when I create my first repo and think "Wow, I really dey do dis!" + +Make we waka through dis journey together, step by step. Take your time for each tin – no be who rush go win, and I promise every step go clear. Remember, every coding superstar wey you dey look up to, dem once dey exactly where you dey, about to create their first repository. How beta na dat? + +> Check video +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) + +**Make We Do Am Together:** + +1. **Create your repository for GitHub**. Go GitHub.com and find dat bright green **New** button (or the **+** sign for top right). Click am and select **New repository**. + + Here na wetin to do: + 1. Give your repository name – make am meaningful to you! + 1. Add description if you want (dis help oda people understand what your project be) + 1. Decide if you want am public (everybody fit see am) or private (na only you) + 1. I recommend make you check box to add README file – e be like project front page + 1. Click **Create repository** and celebrate – you don create your first repo! 🎉 + +2. **Go your project folder**. Now make we open your terminal (no worry, e no too scary). We need tell your computer where your project files dey. Type this command: + + ```bash + cd [name of your folder] + ``` + + **Wetin we dey do here:** + - We dey basically tell computer "Hey, carry me go my project folder" + - E be like you open specific folder for desktop but we dey do am with text commands + - Change `[name of your folder]` to your actual project folder name + +3. **Turn your folder to Git repository**. Na here the magic happen! Type: + + ```bash + git init + ``` + + **Here na wetin just happen (cool stuff!):** + - Git just create hidden `.git` folder inside your project – you no go see am but e dey + - Your normal folder don turn repository wey fit track every change you do + - Think am like you give folder superpowers to remember all tins + +4. **Check wetin dey happen**. Make we see wetin Git dey talk about your project now: + + ```bash + git status + ``` + + **Understand wetin Git dey talk:** + + You fit see something like dis: + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git restore ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + + **No panic! Dis na wetin e mean:** + - Files wey red mean say dem get changes but dem never ready to save yet + - Files wey green (if you see dem) mean dem ready for save + - Git dey help you by telling wetin you fit do next + + > 💡 **Pro tip**: `git status` na your best friend! Use am anytime you no sabi wetin dey happen. Na like you dey ask Git "Hey, how tings be now?" + +5. **Prepare your files to save** (dis na "staging"): + + ```bash + git add . + ``` + + **Wetin we just do:** + - We tell Git "Hey, I want include ALL my files for next save" + - `.` mean "everything for this folder" + - Now your files dey staged and ready for next step + + **You want more selective?** You fit add only specific files: + + ```bash + git add [file or folder name] + ``` + + **Why you fit want do dis?** + - Sometimes you want group related changes + - E help you organize work in logical chunks + - Make am easy to understand what change and when + + **Change your mind?** No wahala! You fit unstage files like dis: + + ```bash + # Comot everything from staging + git reset + + # Comot only one file from staging + git reset [file name] + ``` + + No worry – dis no go delete your work, e just remove files from "ready to save" group. + +6. **Save your work permanently** (make your first commit!): + + ```bash + git commit -m "first commit" + ``` + + **🎉 Congratulations! You just make your first commit!** + + **Here na wetin just happen:** + - Git take "snapshot" of all your staged files for this exact time + - Your commit message "first commit" explain wetin this save point mean + - Git give dis snapshot unique ID so you fit find am later + - You don officially start to track your project history! + + > 💡 **Future commit messages**: For next commits, try dey more descriptive! Instead of "updated stuff", fit try "Add contact form to homepage" or "Fix navigation menu bug". Your future self go thank you! + +7. **Connect your local project to GitHub**. Right now your project dey only for your computer. Make we connect am enter your GitHub repository so you fit share am with world! + + First, go your GitHub repository page and copy the URL. Then come back here and type: + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + (Replace dat URL with your actual repository URL!) + + **Wetin we just do:** + - We create one connection between your local project and your GitHub repository + - "Origin" na just one nickname for your GitHub repository – e be like if you add contact for your phone + - Now your local Git sabi where to send your code when you ready to share am + + 💡 **Easier way**: If you get GitHub CLI install, you fit do this for one command: + ```bash + gh repo create my-repo --public --push --source=. + ``` + +8. **Send your code go GitHub** (na the big moment!): + + ```bash + git push -u origin main + ``` + + **🚀 Na so e be! You dey upload your code go GitHub!** + + **Wetin dey happen:** + - Your commits dey travel from your computer go GitHub + - The `-u` flag dey set up permanent connection so future pushes go easier + - "main" na the name of your primary branch (like the main folder) + - After this, you fit just type `git push` for future uploads! + + 💡 **Quick note**: If your branch get different name (like "master"), use that name instead. You fit check am with `git branch --show-current`. + +9. **Your new daily coding rhythm** (na here e go start to dey addictive!): + + From now, anytime you make changes to your project, you get this simple three-step dance: + + ```bash + git add . + git commit -m "describe what you changed" + git push + ``` + + **Na this your coding heartbeat go be:** + - Make some correct changes to your code ✨ + - Stage dem with `git add` ("Hey Git, pay attention to these changes!") + - Save dem with `git commit` plus one descriptive message (future you go thank you!) + - Share dem with the world using `git push` 🚀 + - Rinse and repeat – no lie, e go become natural like to breathe! + + I like this workflow because e be like say you get multiple save points for video game. You change wey you like? Commit am! You wan try something wey risk? No wahala – you fit always go back to your last commit if thing spoil! + + > 💡 **Tip**: You fit also want use `.gitignore` file to stop files wey you no want track from dey appear for GitHub - like that notes file wey you keep for the same folder but no need for public repository. You fit find templates for `.gitignore` files for [.gitignore templates](https://github.com/github/gitignore) or make your own using [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **First Repository Check-in: How You Feel?** + +**Take small time celebrate and think:** +- How e take feel to see your code show for GitHub the first time? +- Which step confuse you pass, and which no dey hard at all? +- You fit explain the difference between `git add`, `git commit`, and `git push` with your own words? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Create project + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Success! 🎉 + + note right of Staged + Files don ready to save + end note + + note right of Committed + Snapshot don create + end note +``` +> **Remember**: Even experienced developers sef sometimes forget the correct commands. To make this workflow muscle memory need practice - you dey do well! + +#### Modern Git workflows + +Try adopt these modern ways: + +- **Conventional Commits**: Use one standardized commit message format like `feat:`, `fix:`, `docs:`, and so on. Learn more for [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atomic commits**: Make each commit represent only one logical change +- **Frequent commits**: Commit often with good messages rather than large, rare commits + +#### Commit messages + +The correct Git commit subject line complete this sentence: +If apply am, this commit go + +For the subject, use imperative, present tense: "change" no be "changed" or "changes". +Even for the body (optional), use imperative, present tense. The body suppose include why you make the change and compare am with how e be before. You dey explain the `why`, no be the `how`. + +✅ Take few minutes surf GitHub. Fit find one beta commit message? Fit find one wey short? Which kind info you think important pass to talk for commit message? + +## Working with Others (The Fun Part!) + +Hold your hat well because NA HERE GitHub go become magical! 🪄 You don master to manage your own code, but now we dey enter my favorite part – to collaborate with good people from all countries. + +Imagine say: tomorrow you wake up and see say person for Tokyo improve your code while you dey sleep. Then person for Berlin fix bug wey don jam you. By afternoon, developer for São Paulo don add one feature you never think of. That no be sci-fi – na normal Tuesday for GitHub universe! + +Wetin dey excite me be say the collaboration skills you go learn now? Na the very same workflows wey Google, Microsoft, and your favorite startups dey use every day. You no dey learn just cool tool – you dey learn the secret language wey make the whole software world work together. + +No joke, once you feel the rush wey person merge your first pull request, you go understand why developers like open source so much. E be like to dey part of the world biggest, most creative team project! + +> Check the video +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + +The main reason why we put things on GitHub na to make am possible to collaborate with other developers. + +```mermaid +flowchart LR + A[🔍 Find Project] --> B[🍴 Fork Repository] + B --> C[📥 Clone to Local] + C --> D[🌿 Create Branch] + D --> E[✏️ Make Changes] + E --> F[💾 Commit Changes] + F --> G[📤 Push Branch] + G --> H[🔄 Create Pull Request] + H --> I{Maintainer Review} + I -->|✅ Approved| J[🎉 Merge!] + I -->|❓ Changes Requested| K[📝 Make Updates] + K --> F + J --> L[🧹 Clean Up Branches] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +For your repository, go `Insights > Community` to see how your project take compare to recommended community standards. + +You want make your repository look professional and welcoming? Go your repository and click on `Insights > Community`. This cool feature go show you how your project take match wetin GitHub community consider "good repository practices." + +> 🎯 **Make Your Project Shine**: One well-organized repository with correct documentation na like one clean, welcoming storefront. E show say you dey serious about your work and e dey make others want to contribute! + +**These na wetin make repository beta:** + +| Wetin to Add | Why E Important | Wetin E Go Do For You | +|-------------|-----------------|-----------------------| +| **Description** | First impression dey important! | People go sabi quickly wetin your project dey do | +| **README** | Na your project's front page | Like friendly tour guide for new visitors | +| **Contributing Guidelines** | Show say you dey welcome help | People go understand how dem fit help you | +| **Code of Conduct** | Create friendly space | Everybody go feel welcome to participate | +| **License** | Legal clarity | Others go know how dem fit use your code | +| **Security Policy** | Show say you dey responsible | E dey show say you dey professional | + +> 💡 **Pro Tip**: GitHub get templates for all these files. When you dey create new repository, check the boxes to generate these files automatically. + +**Modern GitHub Features to Explore:** + +🤖 **Automation & CI/CD:** +- **GitHub Actions** for automated testing and deployment +- **Dependabot** for automatic dependency updates + +💬 **Community & Project Management:** +- **GitHub Discussions** for community conversations beyond issues +- **GitHub Projects** for kanban-style project management +- **Branch protection rules** to enforce code quality standards + + +All these things go help new team members settle well. And na these kind things new contributors dey check before dem even look your code, to find out if your project good place for their time. + +✅ README files, even though dem take time to prepare, busy maintainers dey sometimes neglect dem. Fit find example of one wey descriptive well? Note: some [tools to help create good READMEs](https://www.makeareadme.com/) fit interest you. + +### Task: Merge some code + +Contributing docs dey help people contribute to project. E explain the kind contributions wey you want and how the process go be. Contributors go need do some steps before dem fit contribute for your repo on GitHub: + + +1. **Forking your repo** You probably want people to _fork_ your project. Forking mean say dem create replica of your repository on their GitHub profile. +1. **Clone**. Dem go clone the project to their local machine. +1. **Create a branch**. You want tell dem to create _branch_ for their work. +1. **Focus their change on one area**. Tell contributors to put contributions together one matter at a time - so the chance to _merge_ their work go high. Imagine say dem write bug fix, add new feature, and update plenty tests - what if you want or fit only add 2 from 3 or 1 from 3? + +✅ Imagine situation where branches dey very important for writing and shipping good code. Which use cases you fit think of? + +> Note, be the change you want for world, create branches for your own work too. Any commit you make go happen for branch wey you dey "checked out" to. Use `git status` to see which branch that be. + +Make we go through contributor workflow. Assume say contributor don already _fork_ and _clone_ the repo so dem get Git repo to work on for their local machine: + +1. **Create a branch**. Use command `git branch` to create branch wey go hold the changes dem wan contribute: + + ```bash + git branch [branch-name] + ``` + + > 💡 **Modern Approach**: You fit also create and switch to new branch with one command: + ```bash + git switch -c [branch-name] + ``` + +1. **Switch to working branch**. Switch go the branch and update your working directory with `git switch`: + + ```bash + git switch [branch-name] + ``` + + > 💡 **Modern Note**: `git switch` na the new way replace `git checkout` when changing branches. E clear and safer for beginners. + +1. **Do work**. Now you wan add your changes. No forget tell Git about am with these commands: + + ```bash + git add . + git commit -m "my changes" + ``` + + > ⚠️ **Commit Message Quality**: Make sure give your commit correct name, for your own sake and maintainer of repo wey you dey help. Be specific about wetin you change! + +1. **Combine your work with the `main` branch**. When you finish work, you want combine your work with `main` branch. `main` branch fit don change meanwhile so first update am to latest with commands below: + + ```bash + git switch main + git pull + ``` + + Now you want make sure say any _conflicts_, where Git no fit easily _combine_ changes, happen for your working branch. So run these commands: + + ```bash + git switch [branch_name] + git merge main + ``` + + The `git merge main` command go bring all changes from `main` into your branch. Hope say you fit just continue. If no, VS Code go tell you where Git dey _confused_ so you go just change the files to show the correct content. + + 💡 **Modern alternative**: You fit try `git rebase` for cleaner history: + ```bash + git rebase main + ``` + E replay your commits on top of the latest main branch, make history linear. + +1. **Send your work to GitHub**. Sending work go GitHub mean two things. Push your branch to your repo and then open PR (Pull Request). + + ```bash + git push --set-upstream origin [branch-name] + ``` + + The above command go create the branch on your forked repo. + +### 🤝 **Collaboration Skills Check: Ready to Work with Others?** + +**Make we see how you feel about collaboration:** +- You understand forking and pull requests now? +- Which one about working with branches you wan practice more? +- How you feel about contributing to person else project? + +```mermaid +mindmap + root((Git Collaboration)) + Branching + Feature branches + Bug fix branches + Experimental work + Pull Requests + Code review + Discussion + Testing + Best Practices + Clear commit messages + Small focused changes + Good documentation +``` +> **Confidence booster**: Every single developer wey you admire bin nervous about their first pull request once. GitHub community dey very welcoming to newcomers! + +1. **Open a PR**. Next, you want open PR. You do that by going your forked repo for GitHub. You go see one indication for GitHub wey go ask if you want create new PR, click am and you go reach interface wey you fit change commit message title and give better description. Now maintainer of the repo you forked go see this PR and _fingers crossed_ dem go appreciate and _merge_ your PR. You don become contributor, yay :) + + 💡 **Modern tip**: You fit also create PRs with GitHub CLI: + ```bash + gh pr create --title "Your PR title" --body "Description of changes" + ``` + + 🔧 **Best practices for PRs**: + - Link related issues with keywords like "Fixes #123" + - Add screenshots for UI changes + - Request specific reviewers + - Use draft PRs for work-in-progress + - Make sure all CI checks pass before you ask for review +1. **Clean up**. E dey considered beta practice to _clean up_ afta you don merge PR well. You go wan clean up both your local branch and di branch wey you push go GitHub. First make we delete am for your local machine wit dis command: + + ```bash + git branch -d [branch-name] + ``` + + Make sure say you go the GitHub page for di forked repo next and comot di remote branch wey you just push reach. + +`Pull request` dey sound like joke but true talk be say you really wan push your changes go di project. But di maintainer (project owner) or core team need check your changes well before dem fit merge am with di project's "main" branch, so you really dey request say make maintainer decide about di change. + +Pull request na di place wey you fit compare and discuss di differences wey dem add for one branch wit reviews, comments, integrated tests, and more. Beta pull request dey follow roughly di same rules like commit message. You fit add reference to one issue for di issue tracker, wen your work for example fix one issue. Dis one na by using `#` plus di number of your issue. Example be `#97`. + +🤞Leg cross say all checks go pass and di project owner(s) go merge your changes to the project🤞 + +Update your current local working branch wit all new commits from di corresponding remote branch for GitHub: + +`git pull` + +## Contributing to Open Source (Your Chance to Make an Impact!) + +You ready for somtin wey go for blow your mind fully? 🤯 Make we yan about how to contribute to open source projects – and I dey get goosebumps just to think say I go share this with you! + +Na your chance to become part of somtin wey really special. Imagine say you fit betta di tools wey millions of developers dey use everyday, or fix bug for app wey your friends like. Dis no be only dream – na wetin open source contribution really mean! + +Dis na wetin dey give me chills anytime I think am: every tool wey you don dey learn wit – your code editor, di frameworks wey we go explore, even di browser wey you dey read dis one – start from somebody like you wey make dem first contribution. Dat better developer wey build your favorite VS Code extension? Dem be once beginner too wey dey click "create pull request" wit shaking hand, just like you dey go do. + +And di beta part be say: di open source community na like internet biggest group hug. Most projects dey find newcomers and get issues wey dem tag "good first issue" specially for people like you! Maintainers dey happy well well wen dem see new contributors because na dem dey remember their own first step. + +```mermaid +flowchart TD + A[🔍 Explore GitHub] --> B[🏷️ Find "good first issue"] + B --> C[📖 Read Contributing Guidelines] + C --> D[🍴 Fork Repository] + D --> E[💻 Set Up Local Environment] + E --> F[🌿 Create Feature Branch] + F --> G[✨ Make Your Contribution] + G --> H[🧪 Test Your Changes] + H --> I[📝 Write Clear Commit] + I --> J[📤 Push & Create PR] + J --> K[💬 Engage with Feedback] + K --> L[🎉 Don merge! You be Contributor!] + L --> M[🌟 Find Another Issue] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +You no just dey learn how to code here – you dey prepare to join worldwide family of builders wey dey wake up every day dey think "How we fit make digital world better small?" Welcome to di club! 🌟 + +First, make we find one repository (or **repo**) for GitHub wey you like and wey you want contribute change. You go wan copy di contents give your machine. + +✅ Better way to find 'beginner-friendly' repos na to [search by di tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copy a repo locally](../../../../translated_images/clone_repo.5085c48d666ead57.pcm.png) + +Plenti way dey to copy code. One way na to "clone" di contents of di repository, using HTTPS, SSH, or GitHub CLI (Command Line Interface). + +Open your terminal make you clone the repository like dis: +```bash +# Dey use HTTPS +git clone https://github.com/ProjectURL + +# Dey use SSH (need SSH key setup) +git clone git@github.com:username/repository.git + +# Dey use GitHub CLI +gh repo clone username/repository +``` + +To work on di project, switch go di right folder: +`cd ProjectURL` + +You fit also open di whole project using: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHub cloud development environment with VS Code for browser +- **[GitHub Desktop](https://desktop.github.com/)** - GUI app for Git operations +- **[GitHub.dev](https://github.dev)** - Press `.` key for any GitHub repo to open VS Code in browser +- **VS Code** wit GitHub Pull Requests extension + +Finally, you fit download di code inside zipped folder. + +### Small tin dem about GitHub wey interesting + +You fit star, watch and/or "fork" any public repository for GitHub. You fit find your starred repositories for di top-right drop-down menu. Na like bookmarking but na for code. + +Projects get issue tracker, mostly for GitHub for "Issues" tab unless dem talk otherwise, where people dey discuss issues wey concern di project. And Pull Requests tab na where people dey discuss and review changes wey dey progress. + +Projects fit also get discussions for forums, mailing lists, or chat channels like Slack, Discord or IRC. + +🔧 **Modern GitHub features**: +- **GitHub Discussions** - Inside forum for community talk +- **GitHub Sponsors** - Support maintainers with money +- **Security tab** - Make vulnerability reports and security advisories available +- **Actions tab** - See automated workflows and CI/CD pipelines +- **Insights tab** - Analytics about contributors, commits, and health of project +- **Projects tab** - GitHub built-in project management tools + +✅ Make you look your new GitHub repo well well and try few tings, like edit settings, add info for your repo, create project (like Kanban board), and set GitHub Actions for automation. Plenty tins you fit do! + +--- + +## 🚀 Challenge + +Okay, na time to test your new GitHub powers! 🚀 Here be challenge wey go make everything clear in one sweet way: + +Carry your friend (or dat family member wey always dey ask wetin you dey do with all dis "computer stuff") come do collaborative coding adventure together! Na dis one be where real magic dey happen – create project, mek dem fork am, make branches, and merge changes like pros wey you dey become. + +I no go lie – you go laugh for some moment (especially wen una both dey try change di same line), maybe scratch your head in confusion, but you go get all those "aha!" moments wey make all di learning worth am. Plus, something special dey for sharing dat first successful merge wit another person – na small celebration of how far you don waka! + +No get coding buddy yet? No wahala at all! GitHub community full with people wey dey super welcoming and remember how e be to dey new. Find repositories with "good first issue" labels – dem dey basically yan "Hey beginners, come learn with us!" How cool be that? + +## Post-Lecture Quiz +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) + +## Review & Keep Learning + +Whew! 🎉 Look you – you don conquer GitHub basics like champion! If your brain feel kinda full now, no worry, e normal and na good sign. You don learn tools wey e take me weeks to feel comfortable with when I start. + +Git and GitHub powerful well well (like, seriously powerful), and every developer wey I sabi – even those wey be like wizards now – dem bin need practice and stumble small before e make sense. The fact say you don pass this lesson mean say you dey on your way to sabi some of di most important tools for developer toolkit. + +Here some plenty beta resources to help you practice and become even more better: + +- [Contributing to open source software guide](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Your roadmap to make difference +- [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Keep am handy for quick reference! + +And remember: practice dey make progress, no be perfection! Di more you use Git and GitHub, di more e go dey natural. GitHub don create beta interactive courses wey go let you practice for safe environment: + +- [Introduction to GitHub](https://github.com/skills/introduction-to-github) +- [Communicate using Markdown](https://github.com/skills/communicate-using-markdown) +- [GitHub Pages](https://github.com/skills/github-pages) +- [Managing merge conflicts](https://github.com/skills/resolve-merge-conflicts) + +**Feel like adventure? Check out dis modern tools:** +- [GitHub CLI documentation](https://cli.github.com/manual/) – If you wan feel like command-line wizard +- [GitHub Codespaces documentation](https://docs.github.com/en/codespaces) – Code for cloud! +- [GitHub Actions documentation](https://docs.github.com/en/actions) – Automate all tings +- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) – Level up your workflow game + +## GitHub Copilot Agent Challenge 🚀 + +Use Agent mode to complete dis challenge: + +**Description:** Create collaborative web development project wey show di complete GitHub workflow wey you don learn for dis lesson. Dis challenge go help you practice repository creation, collaboration features, and modern Git workflows inside real-world scenario. + +**Prompt:** Create new public GitHub repository for simple "Web Development Resources" project. Di repository suppose get well-structured README.md file wey dey list beta web development tools and resources, organized by categories (HTML, CSS, JavaScript, etc.). Set up di repository wit proper community standards including license, contributing guidelines, and code of conduct. Create at least two feature branches: one for adding CSS resources and another one for JavaScript resources. Make commits for each branch wit descriptive commit messages, then create pull requests make e merge changes back go main. Enable GitHub features like Issues, Discussions, and setup basic GitHub Actions workflow for automated checks. + +## Assignment + +Your mission, if you choose accept am: Complete [Introduction to GitHub](https://github.com/skills/introduction-to-github) course for GitHub Skills. Dis interactive course go allow you practice everything wey you learn for safe, guided environment. Plus, you go collect beta badge when you finish! 🏅 + +**Feel ready for more challenges?** +- Set up SSH authentication for your GitHub account (no password again!) +- Try use GitHub CLI for your daily Git operations +- Create repository with GitHub Actions workflow +- Explore GitHub Codespaces by opening dis same repository in cloud-based editor + +--- + +## 🚀 Your GitHub Mastery Timeline + +### ⚡ **Wetin You Fit Do Next 5 Minutes** +- [ ] Star dis repository and 3 other projects wey interest you +- [ ] Set up two-factor authentication for your GitHub account +- [ ] Create simple README for your first repository +- [ ] Follow 5 developers wey their work inspire you + +### 🎯 **Wetin You Fit Accomplish This Hour** +- [ ] Complete post-lesson quiz and reflect on your GitHub journey +- [ ] Set up SSH keys for password-free GitHub authentication +- [ ] Create your first meaningful commit wit beta commit message +- [ ] Explore GitHub "Explore" tab to discover trending projects +- [ ] Practice forking repository and make small changes + +### 📅 **Your Week-Long GitHub Adventure** +- [ ] Complete GitHub Skills courses (Introduction to GitHub, Markdown) +- [ ] Make your first pull request to open source project +- [ ] Set up GitHub Pages site to showcase your work +- [ ] Join GitHub Discussions on projects wey you dey interested for +- [ ] Create repository wit proper community standards (README, License, etc.) +- [ ] Try GitHub Codespaces for cloud-based development + +### 🌟 **Your Month-Long Transformation** +- [ ] Contribute to 3 different open source projects +- [ ] Mentor new person for GitHub (pay am forward!) +- [ ] Set up automated workflows wit GitHub Actions +- [ ] Build portfolio wey showcase your GitHub contributions +- [ ] Participate for Hacktoberfest or similar community events +- [ ] Become maintainer for your own project wey others go contribute to + +### 🎓 **Final GitHub Mastery Check-in** + +**Celebrate how far you don waka:** +- Wetin be your favorite thing about using GitHub? +- Which collaboration feature dey excite you pass? +- How confident you dey feel about contributing to open source now? +- Wetin be di first project wey you want contribute to? + +```mermaid +journey + title Your GitHub Confidence Journey + section Today + Nervous: 3: You + Curious: 4: You + Excited: 5: You + section This Week + Practicing: 4: You + Contributing: 5: You + Connecting: 5: You + section Next Month + Collaborating: 5: You + Leading: 5: You + Inspiring Others: 5: You +``` +> 🌍 **Welcome to global developer community!** Now you get di tools to collaborate wit millions of developers worldwide. Your first contribution fit look small, but remember - every big open source project start wit somebody making their first commit. Di question no be if you go make impact, but wetin beta project go benefit from your unique perspective first! 🚀 + +Remember: every expert na once beginner. You get am! 💪 + +--- + + +**Disclaimer**: +Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make everything correct, abeg sabi say automated translation fit get mistakes or no too accurate. Di original document wey dey im own language na di correct one wey you suppose trust. If na important matter, e good make professional human translator do am. We no go take responsibility if person no understand well or misinterpret because of this translation. + \ No newline at end of file diff --git a/translations/pcm/1-getting-started-lessons/3-accessibility/README.md b/translations/pcm/1-getting-started-lessons/3-accessibility/README.md new file mode 100644 index 000000000..84a9afb64 --- /dev/null +++ b/translations/pcm/1-getting-started-lessons/3-accessibility/README.md @@ -0,0 +1,1501 @@ + +# Creating Accessible Webpages + +![All About Accessibility](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.pcm.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +```mermaid +journey + title Your Accessibility Learning Adventure + section Foundation + Understanding Users: 5: You + Testing Tools: 4: You + POUR Principles: 5: You + section Build Skills + Semantic HTML: 4: You + Visual Design: 5: You + ARIA Techniques: 4: You + section Master Practice + Keyboard Navigation: 5: You + Form Accessibility: 4: You + Real-world Testing: 5: You +``` +## Pre-Lecture Quiz +[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/) + +> Di power wey dey inside di Web na im universality be. Make everybody fit access am no matter say dem get any disability na very important tin. +> +> \- Sir Timothy Berners-Lee, W3C Director and inventor of di World Wide Web + +Dis one fit surprise you: wen you dey build accessible website dem, you no dey help only people wey get disability—na him dey make di web beta for everybody! + +You don ever notice those curb cuts for street corner dem? Dem originally design am for wheelchair users, but now dem dey help people wey get stroller, delivery people wey dey carry dolly, travelers wey dey carry rolling luggage, plus cyclists too. Na so accessible web design dey work—solution wey help one group fit help everybody. E sweet no be? + +For dis lesson, we go explore how to create website dem wey actually work for everybody, no matter how dem dey use di web. You go learn beta methods wey dem don already put for web standards, you go try testing tools, plus you go see how accessibility fit make your sites dey easy to use for all users. + +By di end of dis lesson, you go get confidence to make accessibility part of how you dey develop. You ready to see how correct design choices fit open di web to billions of people? Make we start! + +```mermaid +mindmap + root((Web Accessibility)) + Users + Screen readers + Keyboard navigation + Voice control + Magnification + Technologies + HTML semantics + ARIA attributes + CSS focus indicators + Keyboard events + Benefits + Wider audience + Better SEO + Legal compliance + Universal design + Testing + Automated tools + Manual testing + User feedback + Real assistive tech +``` +> You fit take dis lesson for [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! + +## Understanding Assistive Technologies + +Before we begin to code, make we take small time understand how people wey get different abilities dey experience di web. No be just theory—understanding how dem dey navigate for real life go make you beta developer! + +Assistive technologies na beta tools wey dey help people with disability interact with websites in ways wey fit surprise you. Once you understand how these technologies dey work, e go sweet you to create accessible web experience. Na like sey you dey see your code through another person eye. + +### Screen readers + +[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) na technology wey strong wella wey dey turn digital text into speech or braille output. Although na beta for people with visual impairment, dem still help people wey get learning disabilities like dyslexia. + +I like to think sey screen reader be like smart narrator wey dey read book to you. E dey read content aloud in correct order, e dey announcement interactive elements like "button" or "link," plus e get keyboard shortcuts wey make you fit jump around on top page. But na here e serious—screen reader fit only shine if we build website get correct structure and good content. Na you as developer go do dis work! + +**Popular screen readers wey dey for different platforms:** +- **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (free and di most popular), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (in-built) +- **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (in-built and powerful) +- **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (in-built) +- **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (free, open source) + +**How screen readers dey navigate web content:** + +Screen readers get plenty ways wey dem fit use navigate wey dey make am easy for experienced users: +- **Sequential reading**: E dey read from top reach bottom like sey you dey follow book +- **Landmark navigation**: You fit jump between page parts (header, nav, main, footer) +- **Heading navigation**: You fit skip between headings make you understand page structure +- **Link lists**: E fit generate list of all links make e quick to find +- **Form controls**: E fit navigate straight to input fields and buttons + +> 💡 **One tin wey shock me**: 68% of screen reader users dey navigate mostly by headings ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). This one mean sey your heading structure na like road map for users—if you do am well, you dey help people find their way quick for your content! + +### Building your testing workflow + +Here beta news—effective accessibility testing no suppose stress you! You go want combine automated tools (dem strong to catch obvious wahala) with some hands-on testing. Here na plan wey I don find wey dey catch most mata without waste your whole day: + +**Important manual testing workflow:** + +```mermaid +flowchart TD + A[🚀 Strat Testin] --> B{⌨️ Keyboard Navigation} + B --> C[Tab tru all interactive elements] + C --> D{🎧 Screen Reader Testin} + D --> E[Test wit NVDA/VoiceOver] + E --> F{🔍 Zoom Testin} + F --> G[Zoom to 200% an test functionality] + G --> H{🎨 Color/Contrast Check} + H --> I[Make sure all text meet contrast ratios] + I --> J{👁️ Focus Management} + J --> K[Make sure focus indicators dey visible] + K --> L[✅ Testin Don Finish] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 +``` +**Step-by-step testing checklist:** +1. **Keyboard navigation**: Use only Tab, Shift+Tab, Enter, Space, and Arrow keys +2. **Screen reader testing**: Turn on NVDA, VoiceOver, or Narrator and try navigate with eyes close +3. **Zoom testing**: Test for 200% and 400% zoom levels +4. **Color contrast verification**: Check all text and UI parts well +5. **Focus indicator testing**: Make sure all interactive parts get visible focus states + +✅ **Start with Lighthouse**: Open your browser DevTools, run Lighthouse accessibility audit, then use the results guide your manual testing focus. + +### Zoom and magnification tools + +You sabi how sometimes you dey pinch to zoom for your phone wen text too small, or you dey squint your eye for laptop screen wen sun too bright? Plenty people dey use magnification tools every day to make content readable. This one include people with low vision, old people, and anybody wey don try read website for outside. + +Modern zoom technology no just make things big again. If you understand how these tools dey work, e go help you create responsive design wey still dey function and fine at any magnification level. + +**Modern browser zoom features:** +- **Page zoom**: E dey scale all content proportional (text, pictures, layout) - na di best method +- **Text-only zoom**: E increase font size but keep layout original +- **Pinch-to-zoom**: Mobile gesture wey support temporary magnification +- **Browser support**: All modern browsers fit zoom up to 500% without breaking anything + +**Special magnification software:** +- **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (in-built), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) +- **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (in-built with advanced features) + +> ⚠️ **Design Consideration**: WCAG talk say make content still dey work well wen zoom reach 200%. For that level, horizontal scrolling suppose dey small, and all interactive things suppose still dey accessible. + +✅ **Test your responsive design**: Zoom your browser to 200% and 400%. Your layout still dey adapt well? You fit still access all functionality without too much scrolling? + +## Modern Accessibility Testing Tools + +Now wey you don understand how people dey use assistive technologies navigate web, make we look tools wey go help you build and test accessible website dem. + +Think am like dis: automated tools good to catch obvious wahala (like missing alt text), but hands-on testing make sure your site feel beta to use for real life. Both together go give you surety say your sites dey work for everybody. + +### Color contrast testing + +Beta news: color contrast na one of di commonest accessibility issues, but e easy wella to fix. Good contrast dey help everybody—from people wey get visual problems to people wey dey try read their phones for beach sun. + +**WCAG contrast requirements:** + +| Text Type | WCAG AA (Minimum) | WCAG AAA (Enhanced) | +|-----------|-------------------|---------------------| +| **Normal text** (under 18pt) | 4.5:1 contrast ratio | 7:1 contrast ratio | +| **Large text** (18pt+ or 14pt+ bold) | 3:1 contrast ratio | 4.5:1 contrast ratio | +| **UI components** (buttons, form borders) | 3:1 contrast ratio | 3:1 contrast ratio | + +**Important testing tools:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop app wey get color picker +- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Web-based with instant feedback +- [Stark](https://www.getstark.co/) - Design tool plugin for Figma, Sketch, Adobe XD +- [Accessible Colors](https://accessible-colors.com/) - Find accessible color palettes + +✅ **Build better color palettes**: Start with your brand colors and use contrast checkers to make accessible variations. Write them down as your design system's accessible color tokens. + +### Comprehensive accessibility auditing + +The best accessibility testing use plenty approach join. No one tool fit catch everything, so to build testing routine with different methods go make sure say you cover all tins. + +**Browser-based testing (inside DevTools):** +- **Chrome/Edge**: Lighthouse accessibility audit + Accessibility panel +- **Firefox**: Accessibility Inspector with detailed tree view +- **Safari**: Audit tab inside Web Inspector with VoiceOver simulation + +**Professional testing extensions:** +- [axe DevTools](https://www.deque.com/axe/devtools/) - Industry-standard automated testing tool +- [WAVE](https://wave.webaim.org/extension/) - Visual feedback with error highlights +- [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft comprehensive testing suite + +**Command-line and CI/CD integration:** +- [axe-core](https://github.com/dequelabs/axe-core) - JavaScript library for automated testing +- [Pa11y](https://pa11y.org/) - Command-line accessibility testing tool +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automated accessibility scoring + +> 🎯 **Testing Goal**: Try to aim Lighthouse accessibility score of 95+ as your baseline. Remember, automated tools fit only catch about 30-40% of accessibility issues—manual testing still dey very necessary! + +### 🧠 **Testing Skills Check: You Ready to See Issues?** + +**Make we check how you dey feel about accessibility testing:** +- Which testing method you feel say e easier to use now? +- You fit imagine to use keyboard only navigation for full day? +- Which one accessibility barrier you personally don experience online? + +```mermaid +pie title "Accessibility Wahala Wey Different Method Don Catch" + "Automated Tools" : 35 + "Manual Testing" : 40 + "User Feedback" : 25 +``` +> **Confidence booster**: Professional accessibility testers dey use exactly these methods join. You dey learn top industry practices! + +## Building Accessibility from the Ground Up + +To succeed for accessibility na to build am from ground floor. I know say e dey tempting to talk "I go add accessibility later," but na like try add ramp to house after e don built. Possible? Yes. Easy? No be so. + +Think of accessibility like planning house—e beta make you include wheelchair access for your first architectural plan than to add am later. + +### The POUR principles: Your accessibility foundation + +Web Content Accessibility Guidelines (WCAG) dey based on four important principles wey spell POUR. No worry—dem no be hard academic tins! Dem be real practical guidance to make content wey work for everybody. + +Once you understand POUR, decisions about accessibility go dey easier. Na like checklist wey dey guide your design choices. Make we break am: + +```mermaid +flowchart LR + A[🔍 WE FIT SEE AM
Abi people fit sense am?] --> B[🎮 WE FIT USE AM
Abi people fit use am?] + B --> C[📖 WE FIT SABI AM
Abi people fit understand am?] + C --> D[💪 STRONG TO USE
E dey work for everywhere?] + + A1[Alt text
Captions
Contrast] --> A + B1[Keyboard access
No seizures
Time limits] --> B + C1[Clear language
Predictable
Error help] --> C + D1[Valid code
Compatible
Future-proof] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Perceivable**: Information suppose to dey presentable in ways wey users fit perceive with their senses + +- Provide text alternatives for non-text content (pictures, videos, sound) +- Make sure color contrast enough for all text and UI parts +- Provide captions and transcripts for multimedia content +- Design content so e still dey work when resized till 200% +- Use plenty sensory signs (no only color) to give information + +**🎮 Operable**: All interface parts must fit operate with available input methods + +- Make all functions accessible through keyboard navigation +- Give users enought time to read and interact with content +- Avoid content wey fit cause seizures or vestibular problems +- Help users navigate well with clear structure and landmark +- Make interactive parts get big enough target size (minimum 44px) + +**📖 Understandable**: Information and UI operation must dey clear and make sense + +- Use clear, simple language wey fit your audience +- Make content appear and behave in expected, consistent way +- Give clear instructions and error messages when user enter data +- Help users understand and fix mistake for forms +- Organize content with logical reading order and good info hierarchy + +**💪 Robust**: Content must work properly across different technology and assistive devices + +- **Use correct, semantic HTML as your foundation** +- **Make sure e fit work with current and future assistive technologies** +- **Follow web standards and best practices for markup** +- **Test for different browsers, devices, and assistive tools** +- **Arrange content so e no go spoil well when advance features no dey supported** + +### 🎯 **POUR Principles Check: Make Am Stick** + +**Quick reflection on di foundation dem:** +- You fit think of website feature wey no dey follow each POUR principle? +- Which principle dey feel natural to you as developer? +- How these principles fit improve design for everybody, no be only disabled users? + +```mermaid +quadrantChart + title POUR Principles Impact Matrix + x-axis Low Effort --> High Effort + y-axis Low Impact --> High Impact + quadrant-1 Quick Wins + quadrant-2 Major Projects + quadrant-3 Consider Later + quadrant-4 Strategic Focus + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Remember**: Start with high-impact, low-effort improvements. Semantic HTML and alt text dey give you the biggest accessibility boost for the least effort! + +## How to Create Accessible Visual Design + +Good visual design and accessibility dey work hand in hand. When you design with accessibility for mind, you go discover say these constraints go lead to cleaner, better solutions wey benefit all users. + +Make we explore how to create designs wey dey nice to eye and work for everybody, no matter their visual ability or how dem dey view your content. + +### Color and visual accessibility strategies + +Color get power for communication, but no suppose be the only way you take convey important info. Designing wey no just rely on color go create better, inclusive experience wey go work for more situations. + +**Design for color vision differences:** + +About 8% of men and 0.5% of women get some form of color vision difference (dem dey call am "color blindness"). Di common type na: +- **Deuteranopia**: Wahala to sabi red and green +- **Protanopia**: Red dey look dim +- **Tritanopia**: Wahala with blue and yellow (rare) + +**Inclusive color strategies:** + +```css +/* ❌ Bad: Using only color to indicate status */ +.error { color: red; } +.success { color: green; } + +/* ✅ Good: Color plus icons and context */ +.error { + color: #d32f2f; + border-left: 4px solid #d32f2f; +} +.error::before { + content: "⚠️"; + margin-right: 8px; +} + +.success { + color: #2e7d32; + border-left: 4px solid #2e7d32; +} +.success::before { + content: "✅"; + margin-right: 8px; +} +``` + +**Beyond basic contrast requirements:** +- Test your color choices with color blind simulators +- Use patterns, textures, or shapes alongside color coding +- Make sure interactive states still clear even without color +- Think of how your design go look for high contrast mode + +✅ **Test your color accessibility**: Use tools like [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) to see how your site dey show for users with different types of color vision. + +### Focus indicators and interaction design + +Focus indicators na the digital version of cursor—dem dey show keyboard users where dem dey for di page. Good focus indicators dey make interaction clear and easy for everybody. + +**Modern focus indicator best practices:** + +```css +/* Enhanced focus styles that work across browsers */ +button:focus-visible { + outline: 2px solid #0066cc; + outline-offset: 2px; + box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); +} + +/* Remove focus outline for mouse users, preserve for keyboard users */ +button:focus:not(:focus-visible) { + outline: none; +} + +/* Focus-within for complex components */ +.card:focus-within { + box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); + border-color: #4A90A4; +} + +/* Ensure focus indicators meet contrast requirements */ +.custom-focus:focus-visible { + outline: 3px solid #ffffff; + outline-offset: 2px; + box-shadow: 0 0 0 6px #000000; +} +``` + +**Focus indicator requirements:** +- **Visibility**: Must get at least 3:1 contrast ratio with surrounding things +- **Width**: Minimum 2px thickness around the whole element +- **Persistence**: Must stay visible until focus move go another place +- **Distinction**: Must look different from other UI states + +> 💡 **Design Tip**: Better focus indicators dey use outline, box-shadow, and color changes to make sure dem clear for different backgrounds and context. + +✅ **Audit focus indicators**: Try tab through your website and check which elements get clear focus indicators. Any wey hard to see or missing? + +### Semantic HTML: Di foundation of accessibility + +Semantic HTML na like GPS system you dey give to assistive technologies for your website. When you use correct HTML element for their proper use, you dey provide screen readers, keyboards, and other tools detailed roadmap to help users navigate well. + +Here be analogy wey make sense: semantic HTML na like well-organized library with clear categories and helpful signs, no be warehouse wey books scatter anyhow. Both get same books but which one you go prefer use find book? Na exactly! + +```mermaid +flowchart TD + A[🏠 HTML Document] --> B[📰 header] + A --> C[🧭 nav] + A --> D[📄 main] + A --> E[📋 footer] + + B --> B1[h1: Site Name
Logo & branding] + C --> C1[ul: Navigation
Primary links] + D --> D1[article: Content
section: Subsections] + D --> D2[aside: Sidebar
Related content] + E --> E1[nav: Footer links
Copyright info] + + D1 --> D1a[h1: Page title
h2: Major sections
h3: Subsections] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Building blocks of accessible page structure:** + +```html + +
+

Your Site Name

+ +
+ +
+
+
+

Article Title

+

Published on

+
+ +
+

First Section

+

Content that relates to this section...

+
+ +
+

Second Section

+

More related content...

+
+
+ + +
+ + +``` + +**Why semantic HTML dey transform accessibility:** + +| Semantic Element | Purpose | Screen Reader Benefit | +|------------------|---------|----------------------| +| `
` | Page or section header | "Banner landmark" - quick navigation to top | +| `