Vibecoding · 5-dars · 7-8 sinflar

Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 1Неделя: 1Week: 1

Mening Birinchi Veb Sahifam

Kvest o'yiningiz va AI rasmlaringiz tayyor! Endi ularni butun dunyoga ko'rsatish uchun shaxsiy geymer portfoliangizni quramiz.

Raqamli Viza

Geymer Portfoliosi Nima?

Dasturchilar va geymerlar o'z loyihalarini (o'yinlar, artlar, yutuqlar) bitta chiroyli sahifada saqlashadi.

Avatar & Nikneym

Sizning o'yindagi brendingiz va ramzingiz.

Mening Loyihalarim

O'tgan darslarda qilgan rasmlar va kvest o'yini.

Bog'lanish (Socials)

Discord, Telegram yoki YouTube havolalari.

Sahifa Skeleti

HTML va CSS: Sahifaning 2 Qatlami

Veb sahifani uy qurishga o'xshatamiz:

HTML (G'ishtlar)

Sarlavha, rasm va tugmalarning o'rni. Agar faqat HTML bo'lsa, sayt oq fondagi qora xunuk yozuv bo'lib qoladi.

CSS (Bo'yoq va Neon)

To'q qora fon, neon yoritgichlar, tugmalarning dumaloq chetlari va zamonaviy shriftlar.

Geymer UI

Geymer Saytining 3 Ta Asosiy Bloki

1. Hero Banner: Katta avatar rasmingiz, nikneymingiz va "Vibecoder & Game Dev" yozuvi.
2. Galereya (Grid): AI da yaratgan 3 ta eng zo'r suratlaringiz kiber-ramkalarda.
3. Play Tugmasi: O'tgan darsdagi kvest o'yiningizni ochuvchi interaktiv katta tugma.

Vizual Stilistika

Cyberpunk Dizayn Qoidalari

Geymerlar zerikarli oq saytlarni yoqtirishmaydi! Buning o'rniga:

Deep Dark Bg

#0a0b10 to'q kiber fon.

Neon Glow

Pushti va moviy neon soyalar.

Pixel Font

JetBrains Mono yoki retro shrift.

Interaktivlik

Hover Effekti: Sichqoncha Sehrisi

Sichqoncha kartochka yoki tugma ustiga kelganda (Hover bo'lganda) sayt jonlanishi shart:

Kattalashish: Rasm ozgina (1.05 barobar) kattalashadi (Scale).
Yorug'lik: Tugma chetidan kuchli neon nur taraladi (Box-shadow glow).

Kod Generatsiyasi

v0 yoki Claude da Saytni Generatsiya Qilish

"Menga kiberpank uslubida to'q rangli (dark theme) shaxsiy Geymer Portfoliossi sahifasini (HTML/CSS) yaratib ber.
- Tepa qismida dumaloq neon ramkali Avatar, Nikneym va qisqa status bo'lsin.
- Markazda 3 ta galereya kartochkasi (hover effekti bilan kattalashsin).
- Pastda 'Mening Kvest O'yinimni O'ynang' degan katta yaltiroq tugma bo'lsin!"

Haqiqiy Rasmlar

O'zingiz Yaratgan AI Rasmlarini Qo'yish

AI generatsiya qilgan kodda xira kulrang rasmlar bo'ladi. Ularni 3-darsda qilgan rasmlaringizga qanday almashtiramiz?

    <img src="mening_rasmim.png" alt="Cyber Wolf">
  

Fayl nomi to'g'ri ko'rsatilsa, saytingiz haqiqiy shaxsiy muzeyga aylanadi!

Moslashuv

Telefonda Sinab Ko'rish

Do'stlaringiz saytingizni kompyuterda emas, telefonlarida ochishadi!

Ctrl + Shift + M orqali ekran torayganda rasmlar ustma-ust (chiroyli ustun) bo'lib joylashishini tekshiring.

Takomillashtirish

Saytga "Ovoz" va "Effekt" Qo'shish

AI ga qo'shimcha vazifa bering:

    "Tugma bosilganda 8-bitli retro geymer ovozi (Click audio effect) eshitilsin va orqa fonda matrix uslubidagi yashil kodlar oqsin!"
  

Ijodiy Jarayon

Amaliy Vazifa: Shaxsiy Geymer Saytingiz

1. To'q rangli kiberpank fon va neon elementlarni yaratish
2. Avatar va kamida 2 ta AI rasmini galereyaga joylash
3. Kvest o'yiniga olib boruvchi "Play" tugmasining ishlashi

10 ballik mezon

To'q rangli kiberpank fon va neon elementlarni yaratish3

Avatar va kamida 2 ta AI rasmini galereyaga joylash4

Kvest o'yiniga olib boruvchi "Play" tugmasining ishlashi3

Jami10

Dars Yakuni

Dars Xulosasi: Siz Endi Veb Ijodkorsiz!

Siz o'z rasmlaringiz, o'yiningiz va shaxsiy brendingizni bitta Veb-saytga birlashtirdingiz.
Ertaga — Katta Turnir Kuni! Har biringiz o'z saytingizni butun sinfga taqdim etasiz va eng zo'r loyiha g'olib bo'ladi!