Chapter 14 — Yakuniy Loyihalar

Handbook davomida o'rgangan barcha HTML bilimlarini birlashtiruvchi progressiv loyihalar.

---

14.1 🟢 Level 1-2: Bio Card va Blog Posti

Loyiha 1 — Personal Bio Card

Talablar: Rasm (to'g'ri alt bilan), ism, qisqacha tavsif, ijtimoiy tarmoq linklari. Konseptlar: semantik matn, rasm, linklar.

Loyiha 2 — Blog Post Sahifasi

Talablar: Sarlavha ierarxiyasi, paragraflar, rasm, iqtibos. Konseptlar: matn elementlari, <article>, <figure>.

14.2 🟡 Level 3-4: Multi-Page Sayt va Restoran Menyusi

Loyiha 3 — Ko'p Sahifali Sayt Skeleton

Talablar: Bosh sahifa, Biz haqimizda, Aloqa — umumiy <nav> bilan bog'langan. Konseptlar: semantik struktura, navigatsiya, linklar.

Loyiha 4 — Restoran Menyusi

Talablar: Kategoriyalar bo'yicha guruhlangan taomlar, narxlar jadvali. Konseptlar: ro'yxatlar yoki jadval, semantik guruhlash.

14.3 🔴 Level 5-6: Portfolio Sayt va E-commerce Mahsulot Sahifasi

Loyiha 5 — Portfolio Sayt

Talablar: Hero bo'lim, loyihalar galereyasi (figure/figcaption), aloqa formasi, to'liq SEO meta teglar. Konseptlar: semantik struktura, rasm optimallashtirish, formalar, SEO.

Loyiha 6 — E-commerce Mahsulot Sahifasi

Talablar: Mahsulot rasmlari (srcset bilan responsive), tavsif, narx, "savatga qo'shish" formasi, bog'liq mahsulotlar. Konseptlar: responsive images, formalar, semantik struktura, Open Graph.

14.4 🟣 Final Project: To'liq Accessible va SEO-Optimallashtirilgan Sayt

Talablar

• To'liq semantik HTML5 struktura (PART 7)
• Barcha rasmlar to'g'ri alt, width/height bilan (PART 4)
• Barcha formalar to'g'ri labellangan va validatsiya qilingan (PART 6)
• To'liq SEO va Open Graph meta teglar (PART 10)
• ARIA atributlari kerakli joylarda (PART 9)
• Xavfsiz tashqi linklar (PART 3)

📝 Practice Exercises

🟣 Exercise 1 — Final Challenge

Task: Yuqoridagi loyihalardan birini (masalan Portfolio Sayt) to'liq amalga oshiring, va uni brauzer DevTools Accessibility paneli yoki Lighthouse orqali tekshirib, aniqlangan muammolarni tuzating.

🐛 Debugging Challenge (Loyiha Darajasida)

Stsenariy: Portfolio saytingizni Lighthouse orqali tekshirganingizda: Accessibility — 65, SEO — 70, Performance — 80 ball chiqdi.

Your Task: Bu uchta muammoni handbookdagi qaysi boblar yordamida yechish mumkin?

<details> <summary>Solution</summary> 1. **Accessibility (65)** → PART 4, 6, 9: rasmlarga `alt`, formalarga `label`, kerakli joylarga ARIA qo'shish. 2. **SEO (70)** → PART 10: `title`, `meta description`, semantik struktura (PART 7) va sarlavha ierarxiyasini tekshirish. 3. **Performance (80)** → PART 4: rasmlarga `width`/`height`, `srcset` bilan optimallashtirish. </details>

📌 Chapter Summary

Capstone loyihalar — bio card'dan to'liq accessible, SEO-optimallashtirilgan production sayt'gacha, handbookda o'rgangan barcha HTML tushunchalarini (struktura, matn, media, jadvallar, formalar, semantika, accessibility, SEO, xavfsizlik) birlashtiradi.

🎯 Key Takeaways

• Har bir loyiha oldingi bilimlar ustiga quriladi
• Real loyihalarda accessibility, SEO va xavfsizlik — alohida "qo'shimcha ish" emas, HTML yozishning ajralmas qismi
• Audit vositalari (Lighthouse) — muammolarni tizimli aniqlashga yordam beradi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01🟢 Bio Card, Blog Post → matn, rasm, linklar
02🟡 Multi-page sayt, Menyu → navigatsiya, jadval/ro'yxat
03🔴 Portfolio, E-commerce → semantika, formalar, responsive rasm, SEO
04🟣 Final Project → Barcha konseptlar + to'liq accessibility/SEO audit

---