Vibe coding nima va nima emas
AI bilan mas’uliyatli ishlashni o‘rganib, birinchi shaxsiy saytingizni yarating.
Nazariya
Dars natijasi
Bugun siz o'zingizni tanishtiradigan, telefon va kompyuter ekranida ishlaydigan bir sahifalik sayt yaratasiz. Unda mazmunli sarlavha, uchta bo'lim va aloqa havolasi bo'ladi. Muhim natija chiroyli rasmning o'zi emas: siz AI taklif qilgan o'zgarishni tushuntirib, tekshirib va kerak bo'lsa qaytarib olishingiz kerak. Dars uchun oldindan dasturlash tajribasi talab qilinmaydi. Ismingiz o'rniga taxallus ishlatishingiz mumkin; shaxsiy telefon, uy manzili yoki parolni mashq loyihasiga kiritmang.
AI bilan ishlashda mas'uliyat kimda?
AI yordamida kodlashda siz maqsadni va chegarani belgilaysiz, yordamchi esa yechim taklif qiladi. Masalan, siz «O'zim haqimdagi saytning aloqa bo'limiga o'tadigan tugma kerak» deysiz. AI HTML va CSS taklif qilishi mumkin. Uning javobi ishonchli ohangda yozilgani kod to'g'ri ekanini isbotlamaydi. Tugma bosilganda qayerga o'tishi, klaviaturada ishlashi va kichik ekranga sig'ishi tekshiruv orqali aniqlanadi. Mas'uliyatni yordamchiga topshirib qo'ymang: foydalanuvchi natijani sizning mahsulotingiz sifatida ko'radi.
Bu kursda «AI yozadi, men hech narsani tushunmayman» yo'lidan bormaymiz. Har darsda kichik tushunchani o'rganib, ishlayotgan koddan uning dalilini topamiz. Birinchi kuni barcha teglarni yodlash shart emas. Lekin sarlavha qayerda, rang qayerda, havola qayerga borishini ko'rsata olishingiz kerak. Tushunmagan joyingizda yordamchining tushuntirish rejimidan foydalaning: «Bu uch qator nima qiladi? Bitta oddiy misol bilan tushuntir» deb so'rang.
Ish muhiti va uchta asosiy fayl
KodlaAI IDE brauzerda ochiladi. Fayllar paneli loyihangiz tarkibini, kod muharriri tanlangan faylni, Preview esa natijani ko'rsatadi. HTML mazmun va tuzilmani belgilaydi. CSS ko'rinishni boshqaradi. JavaScript hodisa va hisoblash kabi xatti-harakatlarni bajaradi. Hozir oddiy HTML/CSS loyihasidan boshlaymiz; yangi paket, to'lovli xizmat yoki server kerak emas. IDE ichidagi saqlash holatini kuzating: Preview yangilangani barcha o'zgarishlar serverda saqlanganini o'zi isbotlamaydi.
Dars amaliyotidagi «IDE'da ochish» tugmasi sizga tegishli loyiha yaratadi. Bu shunchaki bo'sh mashq oynasi emas: loyiha topshiriq bilan bog'lanadi va tekshiruv aynan undagi fayllarni ko'radi. Alohida yangi loyiha yaratsangiz, u dars topshirig'iga avtomatik bog'lanmasligi mumkin. Faylni tahrirlaganingizdan keyin saqlangan holatni kuting, so'ng Preview'ni ko'ring. HTML ichidagi uslub havolasi fayl nomiga mos bo'lishi kerak: /style.css va /styles.css ikki boshqa nom.
Yaxshi birinchi prompt
«Zo'r sayt yasab ber» o'rniga ko'rinadigan mezonlarni yozing. Quyidagi topshiriqni o'zingizga moslang:
Men dasturlashni endi o'rganayapman. O'zbekcha bir sahifalik portfolio yarating. Ismim o'rniga «Yangi dasturchi» yozing. Men haqimda, loyihalar va aloqa bo'limlari bo'lsin. Faqat mavjud index.html va style.css fayllarini tahrirlang. Telefon ekranida yon tomonga siljish bo'lmasin. Tashqi kutubxona, haqiqiy parol va to'qima mijozlar qo'shmang. Avval qisqa reja va qaysi fayllar o'zgarishini tushuntiring.
Bu promptda auditoriya, mazmun, fayllar, cheklov va tekshiruv bor. AI barcha talabni bir urinishda bajarmasa, butun loyihani qayta yozishni so'ramang. «Loyihalar bo'limida ikki karta bor, uchinchi kartani xuddi shu uslubda qo'sh» kabi tor o'zgarish bering. Kichik qadamni tekshirish ham, bekor qilish ham osonroq. Asossiz maqtov, soxta sertifikat va haqiqiy bo'lmagan natijalarni portfolioga qo'shmang.
Kodni birga o'qiymiz
<main>
<section id="about">
<h1>Salom, men yangi dasturchiman</h1>
<p>AI yordamida foydali veb-ilovalar yaratishni o'rganaman.</p>
<a href="#projects">Loyihalarimni ko'rish</a>
</section>
<section id="projects">
<h2>Mening loyihalarim</h2>
<p>Birinchi portfolio saytim ustida ishlayapman.</p>
</section>
</main>
main sahifaning asosiy mazmunini ajratadi. section mavzu bo'yicha bo'lim, h1 asosiy sarlavha, h2 esa bo'lim sarlavhasi. Havoladagi #projects shu sahifadagi id="projects" elementiga boradi. Nomlar mos kelmasa, havola kerakli joyga o'tmaydi. Bu misol tayyor yakuniy topshiriq emas: siz aloqa bo'limini qo'shasiz, matnni o'zingizga moslaysiz va uslub berasiz. Kodni nusxalashdan ko'ra, bitta nomni almashtirib uning natijasini kuzatish ko'proq narsani o'rgatadi.
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; }
main { width: min(100% - 32px, 960px); margin: 0 auto; }
section { padding: 32px 0; }
a:focus-visible { outline: 3px solid #6c4cf1; outline-offset: 4px; }
Bu yerda markaziy mazmun kengligi cheklanadi, kichik ekranda ikki yonidan joy qoladi. focus-visible klaviatura bilan havolaga kelganda uni ko'rishga yordam beradi. Rang chiroyli bo'lishi yetarli emas: matn fon ustida o'qilishi, havola esa oddiy matndan ajralishi kerak. Natijani kamida telefon va kompyuter o'lchamida ko'ring; faqat katta monitordagi Preview bilan kifoyalanmang.
Tekshiruv, xato va qayta ishlash
To'rtta savol bering: nima o'zgardi, nima uchun o'zgardi, qaysi faylda o'zgardi va qayeri buzilishi mumkin? Keyin Preview'da har bir havolani bosing. Tab bilan boshqarib ko'ring. Uzoq ism yoki uzun jumla yozib, qatorlar buzilmasligini kuzating. Aloqa havolasi haqiqiy manzilga yuborish o'rniga namunaviy mailto:hello@example.com bo'lishi mumkin; bu namuna ekanini matnda ayting. Console xatosi ko'rinsa, birinchi xatoning fayli va qatorini o'qing, bitta tuzatish qiling, yana tekshiring.
Ko'p uchraydigan xato — AI o'zgartirishni taklif qilganini uning allaqachon qo'llanganiga tenglashtirish. Taklifni qabul qilish, saqlanish va Preview yangilanishi alohida bosqichlar. Yana bir xato — barcha matnni rasm ichiga joylash. Bunday matnni qidirish, kattalashtirish va ekran o'quvchi bilan o'qish qiyin. Matn HTML bo'lib qolsin. Dars oxirida mezonlar bo'yicha tekshiruvni ishga tushiring, tavsiyani o'qing, sababini tushunib tuzating va topshiring. Avtomatik tekshiruv ustoz ko'rigini almashtirmaydi; u keyingi foydali qadamni ko'rsatadi.