Yakuniy modul: kurs davomida o’rganilganlar bitta loyihada birlashadi va yo’lning davomi belgilanadi.
Loyiha — uch qismda
Loyiha darslari to’liq sayt sahifasini bosqichma-bosqich yig’adi. Odatiy tartib:
- Skelet va navigatsiya — container, navbar, hero bo’lim (katta sarlavha + tugma).
- Kontent — grid’da card’lar, rasm va jadvallar, forma bo’limi.
- Pardoz — spacing utility’lar bilan nafaslar, ikonkalar, footer, mobil tekshiruv.
Videoni ko’rib bo’lgach, loyihani nusxalamasdan o’z mavzuingizda qaytaring: boshqa kontent, boshqa ranglar — struktura o’sha. Mustaqil qaytarishda chiqqan savollar kursning asl imtihoni.
Tipik xato. Loyihani faqat keng ekranda yig’ib, mobilni oxiriga qoldirish. Har bo’limdan keyin DevTools qurilma rejimida (Ctrl+Shift+M) tekshirib boring — grid’dagi xato erta topilsa, bir daqiqada tuzaladi.
Qo’shimcha CSS freymvorklar
Bootstrap — yagona freymvork emas; bozorni bilib qo’ying:
| Freymvork | Yondashuvi |
|---|---|
| Bootstrap | Tayyor komponentlar + utility’lar |
| Tailwind CSS | Faqat utility — har narsani mayda class’lardan yig’asiz |
| Bulma | Bootstrap’ga o’xshash, JS’siz, yengilroq |
| Materialize | Google Material dizayni asosida |
Yaxshi yangilik: Bootstrap’ni o’zlashtirgan odamga bularning har biri bir hafta ichida "tanish" tuyuladi — tushunchalar (grid, utility, komponent) hamma yerda bir xil, faqat class nomlari boshqa.
Kurs yakuni va keyingi qadam
Endi qo’lingizda to’liq zanjir bor: HTML (struktura) → CSS (uslub) → Bootstrap (tezlik). Frontend yo’nalishidagi keyingi bekatlar — JavaScript (agar hali o’tmagan bo’lsangiz) va undan so’ng ReactJS: u yerda sahifa endi "hujjat" emas, to’laqonli ilova sifatida quriladi.
Maslahat: shu kurs loyihasini GitHub’ga yuklab qo’ying — portfolio shu kabi ishlardan boshlanadi.
Amaliyot
- Kurs loyihasini o’z mavzuingizda noldan qaytaring (portfolio, restoran menyusi, o’quv markaz sayti...).
- Sahifaning uchala holatini (telefon/planshet/monitor) skrinshot qilib solishtiring.
- Tailwind CSS saytiga kirib, bitta tugma misolini o’qing — yondashuv farqini o’z ko’zingiz bilan ko’ring.
- Tayyor loyihani GitHub repozitoriyga joylang (Git kursidagi add/commit sikli bilan).
Yakuniy testni ishlang — va frontend yo’nalishining keyingi kursiga o’ting.