vibecodingby qairuhub
0/ 1960 XP
ENҚАЗ

Осыдан баста · 10 минут

Оқуды қой.Жаза бастa.

Мұны бет оқып ешкім үйренген емес. Қолыңда барына сай жолды таңда, он минут бөл де, кішкентай бірақ нақты нәрсе жаса. Сайттағы қалғанының бәрі содан кейін әлдеқайда түсінікті болады.

Он минут неге маңызды

Agent туралы оқу мен agent-ті қолданудың арасы көрінгеннен әлдеқайда үлкен. Модель сенімді түрде қате нәрсе жазғанын, содан соң оны өзің түзегеніңді көрмейінше, бұл курстағы ескертулер жай сөз болып қала береді. Он минуттық нақты байланыс бір сағаттық видеодан көп береді.

Жолыңды таңда

Орнатусыз · Тегін5 мин

Браузерде

Қолыңда телефон немесе шектеулі компьютер бар, не болмаса алдымен жұмыс істейтінін көргің келеді.

  1. Тегін ЖИ чатын ашclaude.ai, chatgpt.com немесе gemini.google.com — қайсысы болса да. Бәрінде осыған жететін тегін мүмкіндік бар.
  2. Бір толық файл сұраТөмендегі prompt-ты көшір. Бір өзі жеткілікті HTML файлын сұрау маңызды: нәтижені ешқандай дайындықсыз іске қоса аласың.
  3. Сақтап, ашып көрКодты мәтін редакторына көшір, countdown.html деп сақта да, файлды екі рет бас. Бұл — өзің жасаған жұмыс істейтін веб-бет.
  4. Енді бір нәрсені өзгертҚайта барып бір өзгеріс сұра — басқа түс, өз күнің, нөлге жеткенде дыбыс. Оны қалай сипаттағаныңа назар сал. Бар шеберлік осында.
Осы prompt-ты көшір
2027 жылдың 1 қаңтарына дейін санайтын толық, бір файлдан тұратын HTML бет жаз.

Талаптар:
- Бір файл. Барлық CSS пен JavaScript ішінде. Сыртқы кітапхана жоқ.
- Ірі, оқуға ыңғайлы сандар: күн, сағат, минут, секунд — әр секунд сайын жаңарады.
- Қараңғы фон, телефон экранында жақсы көрінеді.
- Жоғарғы жағына менің атымды қой: <атың>

Тек файл мазмұнын қайтар, басқа ештеңе жазба.

Аяқталды деп есепте, егер Сипаттап отырып жасаған, жұмыс істейтін бетің бар. Бастапқы мағынасындағы vibe coding — дәл осы.

Ноутбук · Нағыз нұсқа10 мин

Нағыз coding agent

Бағдарлама орната алатын ноутбугың бар. Курстың қалған бөлігі осы жолдың үстіне құрылады.

  1. Node жоқ болса, орнатnodejs.org сайтынан LTS нұсқасын ал. Содан соң тексер: төмендегі команда нұсқа нөмірін шығаруы керек.
  2. Coding agent орнатБұл курс Claude Code-ты қолданады. Әзірге ештеңеге төлегің келмесе, Gemini CLI тегін әрі дәл солай жұмыс істейді.
  3. Бос қалта жасап, ішіне кірAgent-ті ешқашан бүкіл компьютеріңе бағыттама. Оған тек осы тәжірибе жатқан бір кішкентай қалта бер.
  4. Іске қосып, нақты нәрсе сұраAgent-ті жүргіз де, қарапайым тілмен сұрауыңды жаз. Бірдеңені қабылдамас бұрын қандай файл жасамақ екенін қара.
  5. Не істегенін оқыӨз жұмысын түсіндіруін сұра. Таңдауын түсіндіре алатын agent-ті түзете де аласың. Бұл әдет кез келген prompt айласынан құнды.
terminal
$ node -v# check Node
$ npm install -g @anthropic-ai/claude-code# Claude Code
$ npm install -g @google/gemini-cli# or Gemini CLI (free)
$ mkdir countdown && cd countdown# a clean folder
$ claude# start it
Осы prompt-ты көшір
2026 жылдың 1 желтоқсанындағы QairuHub іс-шарасына арналған бір беттік countdown сайтын құрастыр.

- Таза HTML, CSS және JavaScript. Framework жоқ, build қадамы жоқ.
- Ірі countdown, іс-шара атауы және қысқа сипаттама.
- Қараңғы тақырып, алдымен мобильді.

Ештеңе жазбас бұрын: қандай файл жасамақ екеніңді және неге екенін айт. Мен «жарайды» дегенше күт.

Аяқталды деп есепте, егер Нағыз agent-ті іске қостың, жоспарын қарадың, файл шығардың. 01-практика дәл осы жерден жалғасады.

Бонус · Тегін5 мин

Интернетке шығар

Жоғарыдағы екі жолдың бірін бітірдің де, біреуге жіберетін сілтеме алғың келеді.

  1. Тегін хостинг ашapp.netlify.com/drop немесе pages.cloudflare.com. Шағын статикалық сайт үшін екеуіне де карта керек емес.
  2. Қалтаңды сүйреп апарNetlify Drop ішінде index.html бар қалтаны қабылдап, саған URL береді. Алдымен файлыңның атын index.html деп өзгерт.
  3. Сілтемені біреуге жіберДәл осы сәтте ол ноутбугыңдағы файл болудан қалып, шынымен бар нәрсеге айналады. Бұл қадамды өткізіп жіберме.

Аяқталды деп есепте, егер Сөзбен сипаттаған нәрсең енді нақты URL-де тұр. 12-модуль мұның бәрі қалай жұмыс істейтінін түсіндіреді.

Бірдеңе дұрыс болмаса

Берген коды жұмыс істемейді.

Жақсы — бұл сәтсіздік емес, қалыпты жағдай. Қатенің дәл мәтінін және не күткеніңді жазып, оған қайта жібер. Қатені өз сөзіңмен айтпа; ең пайдалысы — толық мәтіні.

Сұрағаныма мүлде ұқсамайтын нәрсе беріп жатыр.

Мәселе түсінбеуінде емес, сұрауыңның толық болмауында шығар. Ойыңда бар, бірақ жазбаған шартты қос. 07-модуль түгелдей осы туралы.

Ештеңеге төлей алмаймын.

Gemini CLI-де тегін мүмкіндік бар, ал браузер жолына мүлде ештеңе керек емес. Құралдар бетінде әр тегін нұсқа және оның нақты шектеулері адал жазылған.

Команда жүргізуді сұрады, бірақ қауіпсіз бе — білмеймін.

Мақұлдамас бұрын команданы оқы. Егер ол жойса, күштеп push жасаса немесе тест қалтаңнан тыс жерге тисе — жоқ де. 11-модуль осы ереженің толық нұсқасы.