"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
👨💼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
🔥4❤1⚡1👍1
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.
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.
👍3🔥1👏1
📐CSS: overflow – tartibli interfeys siri
Ba'zida element ichidagi matn yoki rasm konteynerdan ortib ketadi. Bunday holatda overflow yordamga keladi.
Kod namunasi:
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.
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.
❤4👍1🔥1
📏 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
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
👍4👏2🔥1🎉1
⚡️ CSS Transition haqida
Elementning o‘zgarishini silliq va chiroyli qiladi!
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!
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!
👍5🔥2🎉1🕊1
📱 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?
➡️ 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
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
👍5🔥4👌3
🌱 | :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?
✨ 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.
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.
🔥5👍4💯1
🎞 | CSS Animation — Saytingizga jonli effektlar qo‘shing!
Oddiy hover yetarli emasmi?
animation bilan harakatlantiring elementlarni!
💡 Asosiy tarkib:
🔄 Tugmalar:
▫️ @keyframes – harakatlar ketma-ketligi
▫️ animation-name – qaysi animatsiya
▫️ animation-duration – davomiylik
▫️ animation-iteration-count – necha marta
✨ Misollar:
🔥 Hayot kirgizing!
Logo aylansin, tugma tebransin, blok siljisin!
Hammasi uchun animation bor!
@MushtariyDeveloper
Front-end magic, back-end logic.
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.
🔥5👏5🤯1
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.
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.
1👍4🐳3🏆2🔥1🤯1🎉1
Forwarded from Daler Axtamov | Channel (Daler Axtamov)
Birinchi tanlagan kitobimiz “Ilm olish sirlari”
Kitobdan olgan insaytlarni kanalga tashlab boraman!
@daleraxtamov
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯4👏3❤2🎉2👍1
Forwarded from .
ELON MUSK vs BILL GEYTS
Zamonaviy texnologiya gigantlari to‘qnashuvi!
1. Kompaniyalari
🏎 Elon Musk — Tesla, SpaceX, Neuralink, The Boring Company
💻 Bill Gates — Microsoft, Bill & Melinda Gates Foundation
2. Boyligi
💰 Elon Musk — $200+ mlrd (raketalar va elektromobillar orqali)
💵 Bill Gates — $130+ mlrd (dunyoni Windows bilan o‘zgartirdi)
3. Maqsadi
🛰 Musk — Odamlarni Marsga olib chiqish!
🌐 Gates — Global sog‘liqni saqlash va ta’limni yaxshilash
@developer_madina - "Frontend catches the eye, backend powers the soul"
Zamonaviy texnologiya gigantlari to‘qnashuvi!
1. Kompaniyalari
2. Boyligi
3. Maqsadi
@developer_madina - "Frontend catches the eye, backend powers the soul"
Please open Telegram to view this post
VIEW IN TELEGRAM
💯3❤1🔥1🥰1👏1🤯1🐳1
Аллоҳ сизга раво корган нарса сиз орзу қилган нарсадан яхщи эканлигига доим ишонинг💯
@Mushtariydeveloper
@Mushtariydeveloper
👏8🔥2
Forwarded from Shift Academy | Dasturchilar maktabi
Media is too big
VIEW IN TELEGRAM
Endi siz dasturlashni grant asosida 100%gacha bepul o'rganishingiz mumkin!
- Frontend;
- FullStack (frontend+backend):
- SMM (ijtimoiy tarmoqdagi marketing):
Ro'yxatdan o'tish uchun adminga murojaat qiling!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2👏1
Web Development , Software Development, Machine Learning sohalarini o'rganishda ishlatiladigan texnologiyalar.
👩💻 @Mushtariydeveloper
👩💻 @Mushtariydeveloper
👍8❤1🔥1👏1
Forwarded from Otabek Bobomurodov | Blog
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
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
👍5❤2
Forwarded from Shift Academy | Dasturchilar maktabi
Media is too big
VIEW IN TELEGRAM
Endi siz SMM sohasini Grant asosida o'rganishingiz mumkin!
Siz 30%, 50%, 70% va 100%lik grant yutishingiz mumkin!
Grant yutish ikki bosqichdan iborat, "So'rovnoma" va "Rahbar bilan suhbat"
- 100%lik grant yutsangiz = Ikki oy bepul o’qiysiz;
- 70%lik grant yutsangiz = 450 000 so'mdan ikki oy o’qiysiz;
- 50%lik grant yutsangiz = 750 000 so'mdan ikki oy o’qiysiz;
- 30%lik grant yutsangiz = 1 050 000 so'mdan ikki oy o’qiysiz;
Ro'yxatdan o'tish uchun adminga murojaat qiling!
Please open Telegram to view this post
VIEW IN TELEGRAM
👏4👍1
✨ 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
👨💼> “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
👍6❤4🔥1