✍️ CSS Text Shadow – Matnga soya berish
Matnni yanada chiroyli ko‘rsatish uchun text-shadow xususiyatidan foydalaniladi. Bu matn atrofida soya hosil qiladi.
1️⃣ Oddiy text-shadow
Bu yerda:
🔹 2px – gorizontal siljish
🔹 2px – vertikal siljish
🔹 5px – tumanlik darajasi
🔹 gray – soya rangi
2️⃣ Rangli soya bilan o‘ynash
🔸 Ranglar matnni yorqinroq yoki chuqurroq ko‘rsatadi.
3️⃣ Bir nechta soya qo‘llash
🔹 Har bir soya vergul bilan ajratiladi
🔹 Har xil yo‘nalishdagi soyalar dizaynga ko‘rk beradi
Bonus: text-shadow effektlari bannerlar, logolar, sarlavhalarda ko‘p ishlatiladi.
Keyingi post: Gradient – o‘tish ranglari haqida! (Background gradient)
Matnni yanada chiroyli ko‘rsatish uchun text-shadow xususiyatidan foydalaniladi. Bu matn atrofida soya hosil qiladi.
1️⃣ Oddiy text-shadow
h1 {
text-shadow: 2px 2px 5px gray;
} Bu yerda:
🔹 2px – gorizontal siljish
🔹 2px – vertikal siljish
🔹 5px – tumanlik darajasi
🔹 gray – soya rangi
2️⃣ Rangli soya bilan o‘ynash
p {
text-shadow: 1px 1px 3px red;
} 🔸 Ranglar matnni yorqinroq yoki chuqurroq ko‘rsatadi.
3️⃣ Bir nechta soya qo‘llash
h2 {
text-shadow: 2px 2px 4px blue, -2px -2px 4px green;
} 🔹 Har bir soya vergul bilan ajratiladi
🔹 Har xil yo‘nalishdagi soyalar dizaynga ko‘rk beradi
Bonus: text-shadow effektlari bannerlar, logolar, sarlavhalarda ko‘p ishlatiladi.
Keyingi post: Gradient – o‘tish ranglari haqida! (Background gradient)
👍4🔥3🤯2👏1
Forwarded from Webmakon | AI
#kimiai #deepseek
Xitoyliklar yangi DeepSeek ya'ni Kimi k1.5 neyron tarmog‘ini taqdim etishdi va u barcha uchun bepul.
@webmakon
Xitoyliklar yangi DeepSeek ya'ni Kimi k1.5 neyron tarmog‘ini taqdim etishdi va u barcha uchun bepul.
- 50 tagacha (!) faylni yuklash imkoniyati bor va neyron tarmoq hammasini qayta ishlaydi;
- Darhol qidiruv va "fikrlovchi rejim" mavjud - sun’iy intellekt barcha dolzarb ma’lumotlarni biladi va matematik masalalarni a’lo darajada yechadi;
- OpenAI o1 testlarida yuqori natijalarni ko‘rsatmoqda;
- 200 000 ta belgilik ulkan kontekst oynasiga ega.
@webmakon
🥰5🤯2🎉1🐳1
🌟 ID va Class - Asosiy CSS Sehrgarlarimiz!
🆔 ID Selektori
ID – bu faqat bitta maxsus element uchun tanilgan narsa, xuddi "VIP chipta" kabi! 🎫 Har bir ID noyob bo’lishi kerak va sahifada bir marta ishlatiladi.
Qanday foydalanamiz? # belgisi yordamida!
💼 Class Selektori
Class – bu bir nechta elementlarga qo‘llanadigan oddiy selektor. Bu esa "cheksiz kirish" kartasi 🎟️, shuning uchun istalgancha elementga bitta class berishimiz mumkin!
Qanday foydalanamiz? . (nuqta) belgisi bilan!
📌 Oson qoidalar bilan esda tuting:
ID = Yagona, Noyob (VIP)
Class = Bir nechta, Cheksiz qo'llanadi (Hamma kirish kartasi)
@Mushtariydeveloper
🆔 ID Selektori
ID – bu faqat bitta maxsus element uchun tanilgan narsa, xuddi "VIP chipta" kabi! 🎫 Har bir ID noyob bo’lishi kerak va sahifada bir marta ishlatiladi.
Qanday foydalanamiz? # belgisi yordamida!
<div id="vip-box">VIP Kontent</div>
#vip-box {
background-color: #FFD700; /* Oltin! 💛 */
font-weight: bold;}
💼 Class Selektori
Class – bu bir nechta elementlarga qo‘llanadigan oddiy selektor. Bu esa "cheksiz kirish" kartasi 🎟️, shuning uchun istalgancha elementga bitta class berishimiz mumkin!
Qanday foydalanamiz? . (nuqta) belgisi bilan!
<div class="normal-box">Konteyner A</div>
<div class="normal-box">Konteyner B</div>
.normal-box {
background-color: #87CEEB; /* Osmonday ko'k! 💙 */
padding: 10px;
}
📌 Oson qoidalar bilan esda tuting:
ID = Yagona, Noyob (VIP)
Class = Bir nechta, Cheksiz qo'llanadi (Hamma kirish kartasi)
@Mushtariydeveloper
👍3🥰2💯2👏1🤯1😇1
Front-end magic, back-end logic.
Assalomu aleykum.
IT dunyosiga qiziqqan do'stlar Bu yerda frontend, dasturlash, texnologiyalar, trendlari haqida eng qiziqarli va foydali postlarni topasiz. 😎🔥
🔥 Sizni oldinda ajoyib kontentlar kutmoqda! Obuna bo‘ling, qiziqarli postlarni o‘tkazib yubormang! Kanaldan chiqib ketmang, faqat oldinga! 🚀
@Mushtariydeveloper👩💻
Assalomu aleykum.
IT dunyosiga qiziqqan do'stlar Bu yerda frontend, dasturlash, texnologiyalar, trendlari haqida eng qiziqarli va foydali postlarni topasiz. 😎🔥
🔥 Sizni oldinda ajoyib kontentlar kutmoqda! Obuna bo‘ling, qiziqarli postlarni o‘tkazib yubormang! Kanaldan chiqib ketmang, faqat oldinga! 🚀
@Mushtariydeveloper👩💻
👍4🔥2👏2
🔥 FRONTEND VS BACKEND – FARQI NIMADA? 🔥
Front-end magic, back-end logic.
Dasturlash olamida Frontend va Backend tushunchalari juda muhim! Lekin, ularning farqini hamma ham to‘g‘ri tushuna olmaydi. Bugun aniq farqlarni tushuntirib beraman! 🎯
🔹 FRONTEND – Foydalanuvchi ko‘radigan qismi
✅ Sayt yoki ilova dizayni
✅ HTML, CSS, JavaScript yordamida yaratiladi
✅ Animatsiyalar, tugmalar, sahifalar ✅ Texnologiyalar: React.js, Vue.js, Angular, Bootstrap
🛠 BACKEND – Server tomoni, ma’lumotlar bazasi
✅ Saytning ishlashi, ma’lumotlarni qayta ishlash
✅ Serverlar, ma’lumotlar bazasi, autentifikatsiya
✅ Texnologiyalar: Node.js, Python (Django), PHP, Java, MySQL
🎯 O‘xshatish: Frontend – restoran dizayni, menyu va ofitsiant. Backend esa oshpaz va oshxona! 🍽️
🧐 Qaysi birini tanlash kerak?
👉 Vizual dizayn va interaktiv elementlarni yoqtirsangiz – Frontend
👉 Kod orqali ma’lumotlarni boshqarishni yoqtirsangiz – Backend 👉 Ikkisini ham o‘rganib, Full-Stack dasturchi bo‘lish mumkin!
💬 Sizga qaysi yo‘nalish qiziqroq? Fikrlaringni izohda yozib qoldir!
🚀 Ertaga: "HTML, CSS – Boshlovchilar uchun yo‘l xaritasi!"
Front-end magic, back-end logic.
Dasturlash olamida Frontend va Backend tushunchalari juda muhim! Lekin, ularning farqini hamma ham to‘g‘ri tushuna olmaydi. Bugun aniq farqlarni tushuntirib beraman! 🎯
🔹 FRONTEND – Foydalanuvchi ko‘radigan qismi
✅ Sayt yoki ilova dizayni
✅ HTML, CSS, JavaScript yordamida yaratiladi
✅ Animatsiyalar, tugmalar, sahifalar ✅ Texnologiyalar: React.js, Vue.js, Angular, Bootstrap
🛠 BACKEND – Server tomoni, ma’lumotlar bazasi
✅ Saytning ishlashi, ma’lumotlarni qayta ishlash
✅ Serverlar, ma’lumotlar bazasi, autentifikatsiya
✅ Texnologiyalar: Node.js, Python (Django), PHP, Java, MySQL
🎯 O‘xshatish: Frontend – restoran dizayni, menyu va ofitsiant. Backend esa oshpaz va oshxona! 🍽️
🧐 Qaysi birini tanlash kerak?
👉 Vizual dizayn va interaktiv elementlarni yoqtirsangiz – Frontend
👉 Kod orqali ma’lumotlarni boshqarishni yoqtirsangiz – Backend 👉 Ikkisini ham o‘rganib, Full-Stack dasturchi bo‘lish mumkin!
💬 Sizga qaysi yo‘nalish qiziqroq? Fikrlaringni izohda yozib qoldir!
🚀 Ertaga: "HTML, CSS – Boshlovchilar uchun yo‘l xaritasi!"
🥰5🔥3🎉2⚡1👏1
📌 HTML va CSS – Boshlovchilar uchun yo‘l xaritasi 🛤️
Agar dasturlash olamiga qadam qo‘yayotgan bo‘lsangiz va frontend bo‘yicha yo‘nalishni tanlagan bo‘lsangiz, unda HTML va CSS ni o‘rganishingiz shart!😎
Agar dasturlash olamiga qadam qo‘yayotgan bo‘lsangiz va frontend bo‘yicha yo‘nalishni tanlagan bo‘lsangiz, unda HTML va CSS ni o‘rganishingiz shart!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤2🕊2🤯1
📌 HTML – Asos Bu veb-sahifaning tuzilishini yaratish uchun ishlatiladi. Bu bino qurishda fundament qo‘yishga o‘xshaydi. ✅ Asosiy teglar: <div>, <p>, <h1>, <img>, <a> va boshqalar. ✅ Formalar, jadval va semantik teglarni o‘rganing.
🎨 CSS – Chiroy Bu saytingizning dizayni va bezagi. Uni stil beruvchi sifatida tushunish mumkin. ✅ Ranglar, shriflar, fonlar. ✅ Flexbox va Grid – layout uchun eng muhim tushunchalar. ✅ Responsiv dizayn: mobil va desktop versiyalar.
🔥 Bu yo‘l xaritasi bo‘yicha harakat qilib, kuchli frontendchi bo‘lishingiz mumkin!
🎨 CSS – Chiroy Bu saytingizning dizayni va bezagi. Uni stil beruvchi sifatida tushunish mumkin. ✅ Ranglar, shriflar, fonlar. ✅ Flexbox va Grid – layout uchun eng muhim tushunchalar. ✅ Responsiv dizayn: mobil va desktop versiyalar.
🔥 Bu yo‘l xaritasi bo‘yicha harakat qilib, kuchli frontendchi bo‘lishingiz mumkin!
👍4🎉3🔥2
📌 HTML asosiy teglar bilan tanishing!
Veb-sahifa yaratishda ishlatiladigan eng muhim HTML teglar bilan tanishing!
1. <html> – Hujjatning boshlanishi. ✨
2. <head> – Meta ma'lumotlar (title, link, style). 🧠
3. <body> – Ko‘zga ko‘rinadigan asosiy qism. 👁️
4. <h1> dan <h6> gacha – Sarlavhalar. 🏷️
5. <p> – Paragraf. ✍️
6. <a> – Havola (link). 🔗
7. <img> – Rasm qo‘shish. 🖼️
8. <ul>, <ol>, <li> – Ro‘yxatlar. ✅
9. <div> – Blok konteyner. 📦
10. <span> – Inline konteyner. 🧩
Bu teglar – har bir dasturchining ilk qurollari!
Ularni yaxshi tushunish – HTMLni zabt etish sari birinchi qadam!
Veb-sahifa yaratishda ishlatiladigan eng muhim HTML teglar bilan tanishing!
1. <html> – Hujjatning boshlanishi. ✨
2. <head> – Meta ma'lumotlar (title, link, style). 🧠
3. <body> – Ko‘zga ko‘rinadigan asosiy qism. 👁️
4. <h1> dan <h6> gacha – Sarlavhalar. 🏷️
5. <p> – Paragraf. ✍️
6. <a> – Havola (link). 🔗
7. <img> – Rasm qo‘shish. 🖼️
8. <ul>, <ol>, <li> – Ro‘yxatlar. ✅
9. <div> – Blok konteyner. 📦
10. <span> – Inline konteyner. 🧩
Bu teglar – har bir dasturchining ilk qurollari!
Ularni yaxshi tushunish – HTMLni zabt etish sari birinchi qadam!
👍4🔥2👏2❤1🥰1
HTMLda a tegini ishlatish
📎 A tеgi (anchor tag) — bu gipermurojaat (havola) hosil qiluvchi teg.
Bu teg orqali:
➡️ Biror boshqa saytga o'tishingiz mumkin
✅ Sahifa ichida pastga yoki yuqoriga harakat qilishingiz mumkin
✉️ E-mail manzilga yozish uchun ochiladigan havola yaratishingiz mumkin
Sintaksisi:
<a href="https://example.com">Bu havola</a>
Muhim atributlar:
😀 href – manzilni ko‘rsatadi
😀 target="_blank" – yangi oynada ochish
😀 title – kursor ustiga borganingizda ko‘rinadigan matn
😀 download – faylni yuklab olishga mo‘ljallangan havola
Masalan:html
<a href="https://mushtariy.uz" target="_blank" title="Saytga o'tish">Saytimga o'ting</a>
Bu teg orqali:
Sintaksisi:
<a href="https://example.com">Bu havola</a>
Muhim atributlar:
Masalan:html
<a href="https://mushtariy.uz" target="_blank" title="Saytga o'tish">Saytimga o'ting</a>
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2👏2
Forwarded from Daler Axtamov | Channel (Daler Axtamov)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥4🤯2🤩1🏆1
📌 Rasm qo‘shish uchun biz <img> tegidan foydalanamiz. Bu teg "self-closing", ya’ni yopilmaydi.
Sintaksisi:
<img src="manzil" alt="Tavsif">
Muhim atributlar:
🖼 src — rasmning manzili (URL yoki lokal)
📐 width va height — o‘lchamlarini belgilaydi
Misol:
<img src="https://example.com/photo.jpg" alt="Chiroyli rasm" width="300">
Diqqat:
Rasm URLsi to‘g‘ri bo‘lmasa, alt yozuvi chiqadi!
🧲 Kanalda qoling — Obuna bo‘lishni unutmang!
@MushtariyDeveloper
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥3🤯2👏1
Forwarded from Kelajak Granti | Shift Academy
Anonymous Poll
86%
Ha albatta👍
14%
Yo'q👎
👍7
🔗 HTMLda HAVOLA — <a> tegi bilan tanishing!
📌 Saytingizda boshqa sahifalarga, saytga, telefon raqamga yoki emailga havola berish uchun <a> tegi ishlatiladi.
Ko‘rinishi:
<a href="yo‘l">Bu yerga bosing</a>
Asosiy atributlar:
🔗 href — qayerga yo‘naltirilsin
🆕 target="_blank" — havolani yangi oynada ochadi
🔒 rel="noopener noreferrer" — xavfsizlik (ayniqsa target bilan birga ishlatiladi)
📌 Saytingizda boshqa sahifalarga, saytga, telefon raqamga yoki emailga havola berish uchun <a> tegi ishlatiladi.
Ko‘rinishi:
<a href="yo‘l">Bu yerga bosing</a>
Asosiy atributlar:
🔗 href — qayerga yo‘naltirilsin
🆕 target="_blank" — havolani yangi oynada ochadi
🔒 rel="noopener noreferrer" — xavfsizlik (ayniqsa target bilan birga ishlatiladi)
🔥3⚡1👍1
"Ro‘yxat tuzishni bilmaydigan developer — chalkash sahifalarni yaratuvchi!"
Shunaqa bo‘lmasligi uchun, HTML ro‘yxatlari bilan tanishing:
1. 🟦 Tartibsiz ro‘yxat (<ul>)
– Belgilar nuqta shaklida chiqadi
<ul>
<li>Frontend</li>
<li>Backend</li>
</ul>
2. 🔢 Tartibli ro‘yxat (<ol>)
– Belgilar raqamlar bilan chiqadi
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
3. 📘 Ta’rifli ro‘yxat (<dl>)
– Termin + izoh ko‘rinishda
<dl>
<dt>HTML</dt>
<dd>Web sahifalar tuzilmasi</dd>
</dl>
Tavsiyam: Har bir sahifada strukturani aniq qilish uchun to‘g‘ri ro‘yxat turini tanlang!
Shunaqa bo‘lmasligi uchun, HTML ro‘yxatlari bilan tanishing:
1. 🟦 Tartibsiz ro‘yxat (<ul>)
– Belgilar nuqta shaklida chiqadi
<ul>
<li>Frontend</li>
<li>Backend</li>
</ul>
2. 🔢 Tartibli ro‘yxat (<ol>)
– Belgilar raqamlar bilan chiqadi
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
3. 📘 Ta’rifli ro‘yxat (<dl>)
– Termin + izoh ko‘rinishda
<dl>
<dt>HTML</dt>
<dd>Web sahifalar tuzilmasi</dd>
</dl>
Tavsiyam: Har bir sahifada strukturani aniq qilish uchun to‘g‘ri ro‘yxat turini tanlang!
⚡1👍1👏1