# CSS പുനഃസംഘടന അസൈൻമെന്റ്

## ലക്ഷ്യം

നിങ്ങളുടെ ടെറിയറിയം പ്രോജക്ട് ആധുനിക CSS ലെയ്ഔട്ട് സാങ്കേതിക വിദ്യകൾ ഉപയോഗിക്കുന്നതുണ്ടാക്കുക! നിലവിലുള്ള അപ്സല്യൂട്ട് പോസിഷനിങ്ങ് സമീപനം പുനഃസംഘടിപ്പിച്ച് **Flexbox** അല്ലെങ്കിൽ **CSS Grid** ഉപയോഗിച്ച് കൂടുതൽ സംരക്ഷണയോഗ്യവും പ്രതികരണക്ഷമമായ ഡിസൈനും നടപ്പിലാക്കുക. ഈ അസൈൻമെന്റ് നിങ്ങളുടെ ടെറിയറിയംയുടെ ദൃശ്യ ആകര്‍ഷണം നിലനിർത്തിക്കൊണ്ട് ആധുനിക CSS സ്റ്റാൻഡേർഡുകൾ പ്രയോഗിക്കാൻ നിങളെ പ്രേരിപ്പിക്കുന്നു.

വിവിധ ലെയ്ഔട്ട് രീതികൾ എപ്പോൾ എങ്ങനെ ഉപയോഗിക്കണമെന്ന് മനസ്സിലാക്കുക ആധുനിക വെബ് ഡെവലപ്പ്മെന്റിന് അത്യന്താപേക്ഷിതമായ കഴിവാണ്. ഈ പ്രക്രിയ പരമ്പരാഗത പോസിഷനിങ്ങ് സാങ്കേതിക വിദ്യകളും സമകാലിക CSS ലെയ്ഔട്ട് സിസ്റ്റങ്ങളും തമ്മിലുള്ള പാലമാവുന്നു.

## അസൈൻമെന്റ് നിർദ്ദേശങ്ങൾ

### ഘട്ടം 1: വിശകലനവും പദ്ധതി തയ്യാറെടുപ്പും
1. **നിങ്ങളുടെ നിലവിലെ ടെറിയറിയം കോഡ് അവലോകനം ചെയ്യുക** - എവിടെ എവിടെ ആൽസല്യൂട്ട് പോസിഷനിങ്ങ് ഉപയോഗിച്ചിരിക്കുന്നുണ്ട് എന്ന് തിരിച്ചറിയുക
2. **നിങ്ങളുടെ ലെയ്ഔട്ട് രീതിയ തിരഞ്ഞെടുക്കുക** - Flexbox അല്ലെങ്കിൽ CSS Grid നിങ്ങളുടെ ഡിസൈൻ ലക്ഷ്യങ്ങൾക്ക് എവിടെ യോജിക്കുന്നുവെന്ന് തീരുമാനിക്കുക
3. **പുതിയ ലെയ്ഔട്ട് ഘടന സ്കെച്ചുചെയ്യുക** - കണ്ടെയ്‌നറുകളും പ്ലാന്റ് ഘടകങ്ങളും എങ്ങിനെയാണ് ക്രമീകരിക്കപ്പെടുന്നത് എന്ന് പദ്ധതി തയ്യാറാക്കുക

### ഘട്ടം 2: നടപ്പിലാക്കൽ
1. **നിങ്ങളുടെ ടെറിയറിയം പ്രോജക്ടിന്റെ പുതിയ ഒരു പതിപ്പ്** വേര്‍പെടുത്തിയ ഫോൾഡറിൽ സൃഷ്ടിക്കുക
2. ** എച്ച്ടിഎംഎൽ ഘടന** താങ്കളുടെ തെരഞ്ഞെടുക്കപ്പെട്ട ലെയ്ഔട്ട് രീതിക്ക് അനുസരിച്ച് അപ്‌ഡേറ്റ് ചെയ്യുക
3. **CSS പുനഃസംഘടിപ്പിക്കുക** - അപ്സല്യൂട്ട് പോസിഷനിങ്ങ് ഒഴിവാക്കി Flexbox അല്ലെങ്കിൽ CSS Grid ഉപയോഗിക്കുക
4. **ദൃശ്യ ഏകീകൃതത നിലനിർത്തുക** - പ്ലാന്റുകളും ടെറിയറിയം ജാറും ഏകദേശം അതേ സ്ഥാനങ്ങളിൽ കാണിക്കുന്നതായി ഉറപ്പാക്കുക
5. **പ്രതികരണശേഷി നടപ്പിലാക്കുക** - വിവിധ സ്ക്രീൻ വലുപ്പങ്ങളിൽ നിങ്ങളുടെ ലെയ്ഔട്ട് സ്മൂതായി അനുയോജ്യമായി മാറണം

### ഘട്ടം 3: പരീക്ഷണം ಮತ್ತು ഡോക്യുമെന്റേഷൻ
1. **ക്രോസ്-ബ്രൗസർ പരിശോധന** - Chrome, Firefox, Edge, Safari എന്നിവയിൽ ഡിസൈൻ ശരിയായി പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുക
2. **പ്രതികരണപരിശോധന** - മൊബൈൽ, ടാബ്‌ലെറ്റ്, ഡെസ്‌ക്ടോപ്പ് സ്ക്രീൻ വലുപ്പങ്ങളിൽ ലെയ്ഔട്ട് പരിശോധിക്കുക
3. **ഡോക്യുമെന്റേഷൻ** - CSS-ൽ നിങ്ങളുടെ ലെയ്ഔട്ട് തിരഞ്ഞെടുപ്പിന്റെ കാരണങ്ങൾ വിശദീകരിക്കുന്ന കമന്റുകൾ ചേർക്കുക
4. **സ്ക്രീൻഷോട്ടുകൾ** - വിവിധ ബ്രൗസറുകളിലും സ്ക്രീൻ വലുപ്പങ്ങളിലും ടെറിയറിയം സ്ക്രീൻഷോട്ടുകൾ എടുക്കുക

## സാങ്കേതിക ആവശ്യകതകൾ

### ലെയ്ഔട്ട് നടപ്പിലാക്കൽ
- **ഒന്ന് തിരഞ്ഞെടുക്കുക**: Flexbox അല്ലെങ്കിൽ CSS Grid (ഒരു ഘടകത്തിനുള്ളിൽ ഇരട്ട ഉപയോഗം ഒഴിവാക്കുക)
- **പ്രതികരണ ഡീസൈൻ**: സ്ഥിരമായ പിക്‌സലുകൾക്കു പകരമായി എസ്-അനുപാതക യൂണിറ്റുകൾ (`rem`, `em`, `%`, `vw`, `vh`) ഉപയോഗിക്കുക
- **പ്രവേശനക്ഷമത**: ശരിയായ സെമാന്റിക് HTML ഘടനയും alt ടെക്സ്റ്റും നിലനിർത്തുക
- **കോഡ് ഗുണനിലവാരം**: ഏകീകൃത നാമകരണം പാലിച്ച് CSS ലജിക് പ്രകാരം ക്രമീകരിക്കുക

### ഉൾപ്പെടുത്തേണ്ട ആധുനിക CSS സവിശേഷതകൾ
```css
/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}
```

### ബ്രൗസർ പിന്തുണ ആവശ്യകതകൾ
- **Chrome/Edge**: ഏറ്റവും പുതിയ 2 പതിപ്പുകൾ
- **Firefox**: ഏറ്റവും പുതിയ 2 പതിപ്പുകൾ  
- **Safari**: ഏറ്റവും പുതിയ 2 പതിപ്പുകൾ
- **മൊബൈൽ ബ്രൗസറുകൾ**: iOS Safari, Chrome Mobile

## ഡെലിവറബിൾസ്

1. **അപ്ഡേറ്റു ചെയ്ത എച്ച്ടിഎംഎൽ ഫയൽ** മെച്ചപ്പെടുത്തിയ സെമാന്റിക് ഘടനയോടുകൂടി
2. **പുനഃസംഘടിപ്പിച്ച CSS ഫയൽ** ആധുനിക ലെയ്ഔട്ട് സാങ്കേതിക വിദ്യകൾ ഉപയോഗിച്ച്
3. **ക്രോസ്-ബ്രൗസർ പൊരുത്തം കാണിക്കുന്ന സ്ക്രീൻഷോട്ടുകളുടെ ശേഖരം**:
   - ഡെസ്‌ക്ടോപ്പ് ദൃശ്യങ്ങൾ (1920x1080)
   - ടാബ്‌ലെറ്റ് ദൃശ്യങ്ങൾ (768x1024) 
   - മൊബൈൽ ദൃശ്യങ്ങൾ (375x667)
   - കുറഞ്ഞത് 2 വ്യത്യസ്ത ബ്രൗസറുകളിൽ നിന്നും
4. **README.md ഫയൽ** രേഖപ്പെടുത്തുന്നത്:
   - നിങ്ങളുടെ ലെയ്ഔട്ട് തിരഞ്ഞെടുപ്പ് (Flexbox vs Grid) ആയും കാരണങ്ങളും
   - പുനഃസംഘടനയിടുമ്പോൾ നേരിട്ട വെല്ലുവിളികൾ
   - ബ്രൗസർ പൊരുത്തം കുറിപ്പുകൾ
   - കോഡ് പണിയേണ്ട വിധികൾ

## വിലയിരുത്തൽ റൂബ്രിക്ക്

| മാനദണ്ഡം | ഉത്തമം (4) | പ്രോഫിഷ്യന്റ് (3) | വികസനം (2) | തൊട്ടു തുടങ്ങിയവ (1) |
|----------|--------------|----------------|--------------|--------------|
| **ലെയ്ഔട്ട് നടപ്പിലാക്കൾ** | Flexbox/Grid എഡ്വാൻസഡ് ഫീച്ചറുകളോടെ സമ്പൂർണമായി പ്രതികരണക്ഷമമായി ഉപയോഗിച്ചത് | ശരിയായ നടപ്പിലാക്കലും നല്ല പ്രതികരണക്ഷമതയുമുള്ളത് | അടിസ്ഥാന നടപ്പിലാക്കൽ, ചെറിയ പ്രതികരണാശ്വാസ പ്രശ്നങ്ങൾ | അപൂർണ്ണമായോ തെറ്റായ ലെയ്ഔട്ട് നടപ്പിലാക്കൽ |
| **കോഡ് ഗുണമേൻമ** | പരിപൂര്‍ണവും വിലയേറിയ കമന്റുകളും ഏകീകൃത നാമകരണവും ഉള്ള ശുഭ്രമായ CSS | നല്ല ക്രമീകരണവും ചില കമന്റുകളും ഉള്ളത് | പര്യാപ്തമായ ക്രമീകരണം, കുറവ് കമന്റുകൾ | കുഴപ്പമുള്ള ക്രമീകരണവും ബുദ്ധിമുട്ടുള്ള് വിവരണം |
| **ക്രോസ്-ബ്രൗസർ പൊരുത്തം** | ആവശ്യമായ എല്ലാ ബ്രൗസറുകളിലും പൂർണ പൊരുത്തവും സ്ക്രീൻഷോട്ടുകളുമായി | നല്ല പൊരുത്തവും കുറച്ച് വ്യത്യാസങ്ങൾ രേഖപ്പെടുത്തി | ചില പൊരുത്ത പ്രശ്നങ്ങൾ, ജോലിയെ ബാധിക്കാത്തവ | പ്രധാന പൊരുത്ത പ്രശ്നങ്ങളും പരിശോധനയുടെ അഭാവം |
| **പ്രതികരണ ഡിസൈൻ** | അകമഴിഞ്ഞ മൊബൈൽ-ഫസ്റ്റ് സമീപനവും സ്മൂത്ത് ബ്രേക്ക് പോയിന്റുകളും | നല്ല പ്രതികരണ ക്ഷമത, യോജിച്ച ബ്രേക്ക് പോയിന്റുകൾ | അടിസ്ഥാന പ്രതികരണ സ്വഭാവം, ചില ലെയ്ഔട്ട് പ്രശ്നങ്ങൾ | പരിമിതമോ തകരാറുള്ള പ്രതികരണം |
| **ഡോക്യുമെന്റേഷൻ** | വിശദവും വിമർശനപരവുമായ README, വിശദീകരണങ്ങൾക്കും洞见കൾക്കും | ആവശ്യമായ എല്ലാ ഘടകങ്ങളും ഉൾക്കൊള്ളുന്ന നല്ല ഡോക്യുമെന്റേഷൻ | അടിസ്ഥാന രേഖപ്പെടുത്തലും കുറഞ്ഞ വിശദാംശങ്ങളും | അപൂർണ്ണമായോ ഇല്ലാത്ത ഡോക്യുമെന്റേഷൻ |

## സഹായകരമായ സ്രോതസ്സുകൾ

### ലെയ്ഔട്ട് മാർഗ്ഗനിർദേശങ്ങൾ
- 📖 [Flexbox-ന് സമഗ്ര ഗൈഡ്](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- 📖 [CSS Grid-ന് സമഗ്ര ഗൈഡ്](https://css-tricks.com/snippets/css/complete-guide-grid/)
- 📖 [Flexbox vs Grid - ശരിയായ ഉപകരണം തിരഞ്ഞെടുക്കുക](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)

### ബ്രൗസർ പരിശോധന ഉപകരണങ്ങൾ
- 🛠️ [Browser DevTools പ്രതികരണ മുഖം](https://developer.chrome.com/docs/devtools/device-mode/)
- 🛠️ [Can I Use - സവിശേഷത പിന്തുണ](https://caniuse.com/)
- 🛠️ [BrowserStack - ക്രോസ്-ബ്രൗസർ പരിശോധന](https://www.browserstack.com/)

### കോഡ് ഗുണമേൻമ ഉപകരണങ്ങൾ
- ✅ [CSS വാലിഡേറ്റർ](https://jigsaw.w3.org/css-validator/)
- ✅ [HTML വാലിഡേറ്റർ](https://validator.w3.org/)
- ✅ [WebAIM കോൺട്രാസ്റ്റ് പരിശോധകൻ](https://webaim.org/resources/contrastchecker/)

## ബോണസ് വെല്ലുവിളികൾ

🌟 **അടുക്കളവായ ലെയ്ഔട്ടുകൾ**: നിങ്ങളുടെ ഡിസൈനിലെ വ്യത്യസ്ത ഭാഗങ്ങളിൽ Flexbox ഉം Grid ഉം കൂടി നടപ്പിലാക്കുക  
🌟 **അനിമേഷൻ ഏകീകരണം**: പുതിയ ലെയ്ഔട്ടിനോട് അനുയോജ്യമായ CSS ട്രാൻസിഷനുകൾ അല്ലെങ്കിൽ അനിമേഷനുകൾ ചേർക്കുക  
🌟 **ഡാർക്ക് മോഡ്**: CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ ആധാരമാക്കി തീം സ്വിച്ച് ചെയ്യാനുള്ള സംവിധാനങ്ങൾ നടപ്പിലാക്കുക  
🌟 **കണ്ടെയ്‌നർ ക്വെരീസ്**: ഘടക-നിരത പ്രതികരണക്ഷമതക്കായി ആധുനിക കണ്ടെയ്‌നർ ക്വെരി സാങ്കേതിക പാടികൾ ഉപയോഗിക്കുക

> 💡 **ഓർക്കുക**: പ്രവർത്തിപ്പിക്കാനുള്ള ലക്ഷ്യമല്ല, നിങ്ങളുടെ തെരഞ്ഞെടുത്ത ലെയ്ഔട്ട് രീതി ഈ പ്രത്യേക ഡിസൈൻ വെല്ലുവിളിക്ക് ഏറ്റവും മികച്ച പരിഹാരമാണെന്ന് മനസ്സിലാക്കുകയാണ് വാസ്തവത്തിൽ വേണ്ടത്!

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**സ്പഷ്ടീകരണം**:  
ഈ രേഖ AI വിവർത്തനസേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിക്കുന്നതിനുപേറ്റും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകളും തെറ്റുകളും കാണപ്പെടാമെന്ന് ശ്രദ്ധയിൽ വയ്ക്കുക. മാതൃഭാഷയിലെ യഥാർഥ രേഖ മാത്രമാണ് കൂടുതൽ വിശ്വാസയോഗ്യമായ ഉറവിടം. നിർണായകമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം അനുയോജ്യമാണ്. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കോ ദുരവബോധങ്ങൾക്ക് ഞങ്ങൾ ഉത്തരവാദികൾ അല്ല.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->