"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

Kimdir kod yozayotgan bo‘ladi. ⏳

Barca Realni yutadi, Real Barcani yutadi deb bir birimizga nimanidir isbotlashga urunib yurgan bir paytimizda,
kimdir kod yozayotgan,
yana kimdir esa ilm olayotgan bo‘ladi.

5–10 yil o‘tib, ana shu “kimdir”larni katta lavozimlarda, yirik kompaniyalarda ishlayotganini ko‘rib qolamiz.
Shunda esa savollar boshlanadi:

“Qanday qilib u shunga erishdi?”
“Qayerdan keldi bu bola?”

Javob esa juda oddiy:

O‘sha paytda u Real-Barca o‘rniga — vaqtini tanlagan edi.

Hayotda ko‘p narsa shunaqa mayda qarorlar orqasida yotadi.
Ko‘rinmas detallar, lekin katta farq qiladi.

Har bir daqiqani g‘animat bilaylik.
Buning uchun “Atomic Habits”ni o‘qish shart emas —
faqat vaqtimizni pulimizni qizg‘anayotgandek qizg‘anishni odat qilaylik.

📌Blog: @otabekbobomurodov99

10-15 daqiqalik qonun⏱

@Mushtariydeveloper

✨ Hayotingizni o‘zgartiruvchi fikr:

👨‍💼> “Kod yozishni o‘rganayotgan har bir inson — kelajakni o‘zgartirishga urinayotgan qahramondir.”👩‍💼


💡Bugun bitta yangi narsa o‘rganing — u kichkina ko‘rinsa ham, ertangi katta o‘zgarishlar uchun zamin bo‘ladi.

👩‍💻@Mushtariydeveloper
#Motivatsiya

🔥Frontend
⚡Backend
✨Fullstack


@Mushtariydeveloper