📌 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
Siz foydalanuvchidan ma’lumot olishni xohlaysizmi?
Unda HTMLda forma yaratishni boshlaymiz!
Siz bilishingiz kerak bo‘lgan atributlar:
✔️ action – Ma’lumot qayerga yuboriladi
✔️ method – Qanday usulda: GET yoki POST
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
👍2🔥2⚡1
Siz formangizni inputlar bilan to‘ldirishingiz mumkin!
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!😎
<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!😎
👍2🔥2👏1
Label bilan Foydalanuvchi Uchun Qulaylik Yaratamiz
Foydalanuvchi input nima uchun ekanini ko‘rsinmi? Unda labeldan foydalaning!
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
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
👏3👍1🔥1
Tanlovga qulaylik – Radio & Checkbox bilan tanishing!
1. RADIO BUTTON – Bir variant tanlash uchun
🟢 Radio — Faqat bitta variant tanlash uchun ideal!
🧠 name atributi bir xil bo‘lsa, faqat bittasi tanlanadi!
2. CHECKBOX – Bir nechta variant uchun
☑️ Checkbox — Nechta xohlasang, tanla!
⚡ Mustaqil ishlaydi, tanlash cheklanmagan.
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.
🔥5👍1👏1
"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