8-dars. Amaliy loyiha: Landing page yaratish noldan
Bu darsda siz real natija ko'rasiz: professional ko'rinishdagi landing page ni AI yordamida noldan yaratasiz. Hero section, xususiyatlar, narxlar, FAQ va footer — barchasi responsive va zamonaviy dizaynda. Bu sizning birinchi portfolio loyihangiz bo'ladi.
Mavzu izohi
Landing page (shu jumladan 'lending', 'sahifa') — bu bitta sahifali veb sayt bo'lib, bitta maqsadga xizmat qiladi: foydalanuvchini harakatga undash (tugma bosish, forma to'ldirish, sotib olish). Bizneslar uchun eng asosiy marketing vositasi.
An'anaviy usulda landing page yaratish 3-7 kun vaqt oladi: dizayn (Figma), frontend (HTML/CSS/JS), responsive (mobil moslashtirish), deploy (hosting). Vibe coding bilan buni 1-2 soatda qilish mumkin — AI barcha texnik ishni bajaradi.
Bu darsda biz bosqichma-bosqich: 1) Loyiha strukturasini yaratamiz, 2) Hero section, 3) Xususiyatlar bo'limi, 4) Narxlar jadvali, 5) FAQ accordion, 6) Footer, 7) Responsive moslashtirish, 8) Deploy qilish. Har bosqichda AI bilan ishlaysiz.
Texnologiya: HTML + CSS + JavaScript (framework siz). Bu eng oddiy va tez variant. Keyingi darslarda React va Next.js bilan ishlashni ham o'rganasiz. Hozir maqsad — natijani ko'rish va jarayonni tushunish.
Bu darsdan nima olasiz
- Professional landing page ni noldan yarata olasiz
- AI ga dizayn va layout talablarini to'g'ri ifodalaysiz
- Responsive dizayn (mobil + desktop) ni AI bilan amalga oshirasiz
- Iterativ yondashuv — qadam-qadam yaxshilash texnikasini egallaysiz
- Tayyor sahifani internetda joylashtirish (deploy) usulini bilasiz
Chuqurroq tushuntirish
Landing page yaratishda eng muhim narsa — foydalanuvchi uchun aniq yo'nalish. Har bir bo'lim foydalanuvchini pastga (scroll) va oxirida harakatga (CTA — Call to Action) olib borishi kerak. AI bu tuzilmani biladi, lekin siz aniq ko'rsatishingiz kerak: qaysi tugma eng muhim, qaysi matn birinchi ko'zga tashlansin.
Responsive dizayn — bu sahifaning turli ekran o'lchamlarida to'g'ri ko'rinishi. Mobile-first yondashuv: avval 320-375px ekran uchun dizayn qilasiz, keyin tablet (768px) va desktop (1024px+) ga moslashtirasiz. AI CSS media queries yozadi, lekin siz natijani DevTools da turli o'lchamlarda tekshirishingiz kerak.
Deploy (joylashtirish) variantlari: 1) Netlify Drop — eng oddiy, papkani brauzerga tashlaysiz va 30 sekundda sayt tayyor. 2) Vercel — GitHub bilan bog'lash, har push da avtomatik deploy. 3) GitHub Pages — bepul, lekin faqat static saytlar uchun. Boshlovchilar uchun Netlify Drop eng yaxshi tanlov.
Iterativ yondashuv amaliyotda: Birinchi prompt bilan 70-80% natija olasiz. Keyin 3-5 ta qo'shimcha prompt bilan yaxshilaysiz: 'gradient boshqacha bo'lsin', 'FAQ ochilganda animatsiya qo'sh', 'tugma hover effekti bor qo'sh'. Bu normal — professional dasturchilar ham shunday ishlaydi. Mukammal birinchi natija kutmang.
Tayyor prompt shabloni
Ko'chirib moslashtiringProfessional landing page yaratib ber. Mavzu: AI kurslar platformasi. Sahifa tarkibi: 1) Hero: sarlavha 'AI bilan kelajakni qur', qisqa tavsif, 'Boshlash' tugmasi, 2) Xususiyatlar: 4 ta karta (bepul, amaliy, o'zbek tilida, sertifikat), 3) Narxlar: 3 ta reja (bepul, pro, premium), 4) FAQ: 5 ta savol-javob accordion, 5) Footer: logo, ijtimoiy tarmoqlar, copyright. Dizayn: dark theme, gradient accent, Inter font, mobile-first responsive.
Nega ishlaydi
Mavzu: 'AI kurslar platformasi' — AI kontentni shu mavzuga moslaydi
Tuzilma: 5 ta bo'lim aniq sanab o'tilgan — AI ketma-ketlikni biladi
Kontent: har bo'limda nima bo'lishi kerakligi ko'rsatilgan
Dizayn: 'dark theme, gradient, Inter font, mobile-first' — vizual qoidalar
Responsive: 'mobile-first' — avval mobil, keyin desktop uchun moslashtirish
Amaliy mashq
- Yangi papka yarating: 'my-landing-page'
- Cursor Agent mode da (Cmd+I) yuqoridagi prompt ni kiriting
- Agent fayllar yaratganini kuzating va Accept qiling
- index.html ni brauzerda oching — natijani ko'ring
- Agar biror narsa yoqmasa — Chat da (Cmd+L) o'zgartirish so'rang: 'Hero dagi tugma kattaroq bo'lsin va gradient rang boshqacha bo'lsin'
- Mobil ko'rinishni tekshirish uchun brauzer DevTools (F12) da telefon rejimini yoqing
- Netlify Drop (app.netlify.com/drop) ga papkani drag-and-drop qilib deploy qiling
Ko'p uchraydigan xatolar
- Birinchi natijani mukammal kutish — vibe coding iterativ: yaratish → ko'rish → yaxshilash → takrorlash
- Mobil responsive ni unutish — 70%+ traffic mobil qurilmalardan, doim tekshiring
- Dizayn talablarini ko'rsatmaslik — 'sayt yasa' emas, aniq rang, font, layout ko'rsating
- Deploy qilmaslik — saytni faqat o'z kompyuteringizda ko'rish yetarli emas, internetga joylashtiring
- SEO ni e'tiborsiz qoldirish — title, meta description, alt textlar muhim
Dars bo'yicha savol-javob
Landing page yaratish uchun qancha vaqt ketadi?
Vibe coding bilan 30-60 daqiqa. An'anaviy usulda 3-7 kun. Asosiy vaqt dizayn tanlash va kontentni to'g'rilashga ketadi — kod yozish AI ga 5 daqiqa.
Framework (React, Vue) ishlatish shartmi?
Oddiy landing page uchun shart emas. HTML + CSS + JavaScript yetarli va eng tez. Framework lar katta loyihalar (10+ sahifa, dinamik kontent) uchun kerak.
SEO uchun nima qilish kerak?
AI ga ayting: 'SEO uchun title, meta description, heading hierarchy (h1→h2→h3), alt text va semantic HTML ishlatsin'. Cursor bularni yaxshi biladi.
Hosting bepulmi?
Ha, Netlify va Vercel da bepul reja mavjud — oyiga 100GB traffic va unlimited static saytlar. Oddiy landing page uchun to'liq yetarli.