Web-Dev-For-Beginners/translations/ml/3-terrarium/2-intro-to-css/assignment.md

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 സവിശേഷതകൾ

/* 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-ന് സമഗ്ര ഗൈഡ്
• 📖 CSS Grid-ന് സമഗ്ര ഗൈഡ്
• 📖 Flexbox vs Grid - ശരിയായ ഉപകരണം തിരഞ്ഞെടുക്കുക

ബ്രൗസർ പരിശോധന ഉപകരണങ്ങൾ

• 🛠️ Browser DevTools പ്രതികരണ മുഖം
• 🛠️ Can I Use - സവിശേഷത പിന്തുണ
• 🛠️ BrowserStack - ക്രോസ്-ബ്രൗസർ പരിശോധന

കോഡ് ഗുണമേൻമ ഉപകരണങ്ങൾ

• ✅ CSS വാലിഡേറ്റർ
• ✅ HTML വാലിഡേറ്റർ
• ✅ WebAIM കോൺട്രാസ്റ്റ് പരിശോധകൻ

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

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

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

---

സ്പഷ്ടീകരണം:
ഈ രേഖ AI വിവർത്തനസേവനമായ Co-op Translator ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിക്കുന്നതിനുപേറ്റും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകളും തെറ്റുകളും കാണപ്പെടാമെന്ന് ശ്രദ്ധയിൽ വയ്ക്കുക. മാതൃഭാഷയിലെ യഥാർഥ രേഖ മാത്രമാണ് കൂടുതൽ വിശ്വാസയോഗ്യമായ ഉറവിടം. നിർണായകമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം അനുയോജ്യമാണ്. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കോ ദുരവബോധങ്ങൾക്ക് ഞങ്ങൾ ഉത്തരവാദികൾ അല്ല.