Chapter 21 — Yakuniy Loyiha: Profil Kartasi va Modal

Bu — butun kursda o'rganilgan Box Model, Flexbox, Grid, Position, Transition, Transform, Animation va CSS Variables bilimlarini birlashtirgan yakuniy amaliy loyiha.

---

21.1 Profile Card (BEM + CSS Variables + Flexbox)

Example

styles.css
CSSNusxalash
01:root {
02  --card-radius: 16px;
03  --primary: #3b82f6;
04}
05 
06.profile-card {
07  display: flex;
08  flex-direction: column;
09  align-items: center;
10  max-width: 300px;
11  padding: 24px;
12  border-radius: var(--card-radius);
13  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
14  transition: transform 0.3s ease;
15}
16 
17.profile-card:hover {
18  transform: translateY(-8px);
19}
20 
21.profile-card__avatar {
22  width: 96px;
23  height: 96px;
24  border-radius: 50%;
25  object-fit: cover;
26  border: 4px solid var(--primary);
27}
28 
29.profile-card__name {
30  font-size: 1.25rem;
31  font-weight: 700;
32  margin-top: 16px;
33}
34 
35.profile-card__role {
36  color: gray;
37  font-size: 0.9rem;
38}

21.2 Modal (Position + Flexbox + Animation)

Example

styles.css
CSSNusxalash
01@keyframes fadeIn {
02  from { opacity: 0; }
03  to { opacity: 1; }
04}
05@keyframes slideUp {
06  from { transform: translateY(20px); opacity: 0; }
07  to { transform: translateY(0); opacity: 1; }
08}
09 
10.modal-overlay {
11  position: fixed;
12  inset: 0;
13  background: rgba(0,0,0,0.5);
14  display: flex;
15  align-items: center;
16  justify-content: center;
17  animation: fadeIn 0.2s ease;
18}
19 
20.modal {
21  background: white;
22  border-radius: 12px;
23  padding: 24px;
24  max-width: 400px;
25  width: 90%;
26  animation: slideUp 0.3s ease;
27}

⚠️ Common Mistake
.modal-overlayga position: fixed bermasdan markazlashtirishga urinish — natijada modal scroll bilan birga harakatlanadi va noto'g'ri joylashadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Profile Card'ni to'liq yozing va brauzerda hover effektini tekshiring.

🟡 Exercise 2 — Medium

Task: Modal'ni to'liq yozing, uni yopish tugmasi (position: absolute; top: 8px; right: 8px;) bilan boyiting.

🔴 Exercise 3 — Hard

Task: Profile Card'ga dark mode qo'shing (CSS variables orqali), va Modal'ga responsive breakpoint qo'shib, mobil ekranda to'liq kenglikda ko'rinishini ta'minlang.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.modal-overlay { display: flex; align-items: center; justify-content: center; }

Your Task: Overlay markazlashtirish ishlamayapti, chunki position yo'q. Nima yetishmayapti va nega bu muhim?

<details> <summary>Solution</summary> `position: fixed; inset: 0;` yetishmayapti. Bularsiz `.modal-overlay` oddiy block element sifatida DOM oqimida qoladi, butun ekranni QOPLAMAYDI — shuning uchun `align-items`/`justify-content` uning ICHIDAGI (juda kichik) hudud bo'yicha ishlaydi, butun ekran bo'yicha emas. </details>

---

📌 Chapter Summary

Bu capstone loyiha orqali siz Box Model, Flexbox, Position, Transform, Animation va CSS Variables'ni bitta yaxlit, real-world UI komponentida (Profile Card + Modal) birlashtirdingiz.

🎯 Key Takeaways

• Real componentlar kamdan-kam bitta CSS konseptiga tayanadi — ular ko'p qismlarning kombinatsiyasi
• transform — hover/animatsiya uchun performant standart
• position: fixed + inset: 0 + flex — modal overlay uchun klassik formula
• CSS Variables katta componentlarda ranglarni markazlashtirilgan boshqarish imkonini beradi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01/* Card hover */
02transition: transform 0.3s ease;
03transform: translateY(-8px);
04 
05/* Modal overlay */
06position: fixed; inset: 0;
07display: flex; align-items: center; justify-content: center;
08background: rgba(0,0,0,0.5);

---