Assalomu aleykum 🌞

Siz foydalanuvchidan ma’lumot olishni xohlaysizmi?
Unda HTMLda forma yaratishni boshlaymiz!

  <!-- inputlar shu yerga yoziladi -->
</form>

Siz bilishingiz kerak bo‘lgan atributlar:
✔️ action – Ma’lumot qayerga yuboriladi
✔️ method – Qanday usulda: GET yoki POST

Siz formangizni inputlar bilan to‘ldirishingiz mumkin!

<input type="email" placeholder="Emailingiz" />
<input type="submit" value="Yuborish" />

Siz ishlatishingiz mumkin bo‘lgan input turlari:
✏️ text – matn uchun
✉️ email – email uchun
🔒 password – parol uchun
📤 submit – forma yuborish uchun

Oddiy, ammo kuchli!
Siz ushbu elementlar bilan kuchli forma yarata olasiz!

Front-end magic, back-end logic.
Kanalda qoling, sizni yana zo‘r postlar kutmoqda!😎

Label bilan Foydalanuvchi Uchun Qulaylik Yaratamiz

Foydalanuvchi input nima uchun ekanini ko‘rsinmi? Unda labeldan foydalaning!

<input type="text" id="name" />

Nega bu muhim?
✔️ label – foydalanuvchiga input nima uchun ekanini tushuntiradi
✔️ for – inputdagi id bilan bir xil bo‘lishi kerak

Bonus: Label ustiga bosilsa, input avtomatik tanlanadi!
Bu esa — foydalanuvchiga qulay interfeys demak!

Front-end magic, back-end logic.
Kanalga obuna bo‘ling, siz uchun eng zarur HTML sirlar oldinda!

@Mushtariydeveloper

Tanlovga qulaylik – Radio & Checkbox bilan tanishing!

1. RADIO BUTTON – Bir variant tanlash uchun

<input type="radio" id="age1" name="age" value="18-25" />
<label for="age1">18-25</label>

<input type="radio" id="age2" name="age" value="26-35" />
<label for="age2">26-35</label>

🟢 Radio — Faqat bitta variant tanlash uchun ideal!
🧠 name atributi bir xil bo‘lsa, faqat bittasi tanlanadi!

2. CHECKBOX – Bir nechta variant uchun

<input type="checkbox" id="html" />
<label for="html">HTML</label>

<input type="checkbox" id="css" />
<label for="css">CSS</label>

☑️ Checkbox — Nechta xohlasang, tanla!
⚡ Mustaqil ishlaydi, tanlash cheklanmagan.

"Dizayner ko‘zlari bilan hayot"

👨‍💼Oddiy odam: Oh bu chiroyli tugma ekan.
👨‍💻Frontend Developer:

•Bu border-radius 12px

•Background: linear-gradient

•Hoverda transition: 0.3s

•Font: Poppins 600

•Shadow bor... hmm... box-shadow!

🧠 | Ko‘zingiz kodni ko‘radi, qalbingiz esa UIni sezadi.

Frontend faqat kod emas – bu san’at!
Agar siz har bir tugmada dizayn ko‘rayotgan bo‘lsangiz — sizda UX qalbi bor!

✨"Front-end magic, back-end logic."✨
@Mushtariydeveloper

CSS POSITION: Joylashuv sehrgarlari!
Elementlarni sahifada qanday joylashishini nazorat qilish — dizaynning yuragi!

1. static (standart):
— Hech qanday joylashuv o‘zgarishi yo‘q.
— HTML oqimiga mos keladi.


2. relative :
— Staticga o‘xshaydi, lekin top/right/bottom/left bilan siljishi mumkin.


3. absolute (butunlay mustaqil):
— Eng yaqin positionga ega “ota”siga qarab joylashadi.
— Oqimdan chiqib ketadi.


4. fixed (ekranga yopishadi):
— Scroll qilinsa ham, doim ko‘rinib turadi.
— Header yoki chat tugmalari kabi.


5. sticky (yopishqoq):
— Scrollda bir joygacha odatdagidek yuradi,
— So‘ngra ekranga “yopishib” turadi.

CSS position — bu dizaynerning koordinatalar sehridir!
To‘g‘ri joylashuv = toza dizayn.

📐CSS: overflow – tartibli interfeys siri

Ba'zida element ichidagi matn yoki rasm konteynerdan ortib ketadi. Bunday holatda overflow yordamga keladi.

Kod namunasi:

  width: 300px;
  height: 150px;
  overflow: auto;
}

overflow qiymatlari:

☆ visible – kontent chetga chiqadi, hech narsa yashirilmaydi.

☆ hidden – konteynerdan chiqib ketgan qism ko‘rinmaydi.

☆ scroll – har doim scroll chizig‘i paydo bo‘ladi.

☆ auto – faqat zarur bo‘lsa, scroll chiqadi.

📏 CSSda o‘lchov birliklari (Units)

Element o‘lchamini belgilashda to‘g‘ri birlik tanlash juda muhim!

🔹 px – Aniq piksel
width: 100px;

🔹 % – Ota elementga nisbatan
width: 50%;

🔹 em – Ota element shriftiga nisbatan
font-size: 2em;

🔹 rem – Root (html) shriftiga nisbatan
font-size: 1.5rem;

🔹 vw / vh – Ekran kengligi / balandligiga nisbatan
width: 50vw; – ekran kengliginingo62m✨ Maslahat:
Responsiv dizayn uchun rem, %, vw, vh juda qulay!
px esa aniq o‘lcham kerak bo‘lganda ishlatiladi.
@Mushtariydeveloper

⚡️ CSS Transition haqida

Elementning o‘zgarishini silliq va chiroyli qiladi!

  transition: all 0.3s ease;
}

Bu nima qiladi?
➡️ Masalan, rang o‘zgarishini tez emas, asta ko‘rsatadi.

🔹 all – hamma o‘zgarishlarga taalluqli
🔹 0.3s – vaqt (0.3 sekund)
🔹 ease – silliqlik turi (soft boshlanadi va tugaydi)

✨ Maslahat:
Button, hover effektlar, animatsiyalar uchun transition ajralmas yordamchi!

📱 Media Query nima?
Media Query — saytni har xil ekranlar (telefon, planshet, kompyuter) uchun moslab beradi!

Oddiy aytganda:
Telefon ekrani kichkina bo'lsa, sayt ko‘rinishi ham moslashadi.

Qanday ishlaydi?

  body {
    background-color: yellow;
  }
}

➡️ Ma'nosi:
Agar ekran eni 460px dan kichik bo‘lsa, sayting fon rangi sarg‘ayadi.

Asosiy Media Query o'lchamlar:

🔹 Mobil: max-width: 460px
🔹 Planshet: max-width: 768px
🔹 Kompyuter: min-width: 1024px

😎Front-end magic, back-end logic ✨
@Mushtariydeveloper

🌱 | :root + Variables — Kodni toza va tartibli qiling!
CSSda 1 xil rang yoki qiymatni 100 marta yozishdan charchadingizmi?
Endi :root bilan 1 marta yozing, xohlagancha ishlating!

🔗 Qanday yoziladi?

  --main-color: #3498db;
  --gap: 20px;
}
.box {
  color: var(--main-color);
  margin: var(--gap);
}

✨ Nega kerak?
✅ 1 joyda o‘zgartirasan — hamma yerda yangilanadi
✅ Katta loyihalarda tartib va qulaylik beradi
✅ Rang, padding, fontlar boshqaruvi osonlashadi

🧠 Life Hack:
Rang nomini --main_color, --secondary_color deb yozing
—Keyin o‘qishda ham o‘zingizga tushunarli bo‘ladi!

@MushtariyDeveloper
Front-end magic, back-end logic.

🎞 | CSS Animation — Saytingizga jonli effektlar qo‘shing!

Oddiy hover yetarli emasmi?
animation bilan harakatlantiring elementlarni!
💡 Asosiy tarkib:

  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.box {
  animation: yurish 2s infinite;
}

🔄 Tugmalar:
▫️ @keyframes – harakatlar ketma-ketligi
▫️ animation-name – qaysi animatsiya
▫️ animation-duration – davomiylik
▫️ animation-iteration-count – necha marta

✨ Misollar:

animation: shake 0.5s linear 3;

🔥 Hayot kirgizing!
Logo aylansin, tugma tebransin, blok siljisin!
Hammasi uchun animation bor!

@MushtariyDeveloper
Front-end magic, back-end logic.

Assalomu alaykum!
Men — Mushtariy Davlatova, front-end dasturchiman.
Bu kanal — mening shaxsiy hududim.

Bu yerda siz:
▫️ Kodlarim,
▫️ O‘rganayotgan texnologiyalarim,
▫️ Va hayotimdagi real voqealar bilan tanishib borasiz.

Men uchun bu kanal — oddiygina blog emas, balki yo‘limni yozib boradigan sahifam,ilhomim, orzularim va o‘sishim guvohi.

Аллоҳ сизга раво корган нарса сиз орзу қилган нарсадан яхщи эканлигига доим ишонинг💯

@Mushtariydeveloper

Web Development , Software Development, Machine Learning sohalarini o'rganishda ishlatiladigan texnologiyalar.

👩‍💻 @Mushtariydeveloper