𝑃𝑟𝑜𝑔𝑟𝑎𝑚𝑚𝑒𝑟

#MaxsusIntervyu

🔔iTlive o’quv markaziga Faxriy ustoz Mavlonov Dilshod Ummatovich
tashrif buyurib,
iTlive haqidagi o’zi fikrlari bilan bo’lishdilar.▶️

(To’liq Intervyu Video)

✅Bizni ijtimoiy tarmoqlarda kuzatib boring

📱

Instagram

Please open Telegram to view this post

VIEW IN TELEGRAM

👍2🔥1

29 views14:15

𝑃𝑟𝑜𝑔𝑟𝑎𝑚𝑚𝑒𝑟

Front-end dasturlash — bu veb-sayt yoki dasturda foydalanuvchi ko‘radigan va ishlatadigan qismini yaratish jarayoni. Oddiy qilib aytganda, sayt yoki ilova ochganingizda ko‘z oldingizda ko‘rinadigan dizayn, tugmalar, matn, ranglar, animatsiyalar — bularning hammasi front-end orqali amalga oshiriladi.

Asosiy tushunchalar:

Front-end = Foydalanuvchi interfeysi (UI)
Ya’ni, brauzerda ochiladigan ko‘rinish.

Back-end = Server tomoni
Ma’lumotlar bazasi, hisob-kitoblar, tizim ichidagi jarayonlar.

Front-end texnologiyalari:

1. HTML (HyperText Markup Language)
Veb-sahifaning skeleti, matn va tuzilishini belgilaydi.
Masalan, sarlavha, paragraf, jadval, rasm joylashtirish.

2. CSS (Cascading Style Sheets)
Saytni chiroyli qiladi: ranglar, shriftlar, joylashuv, animatsiya.

3. JavaScript (JS)
Saytni interaktiv qiladi: tugma bosilganda amal bajarilishi, shaklni tekshirish, dinamik menyular.

4. Framework va kutubxonalar

React.js, Vue.js, Angular — murakkab web-ilovalarni tezroq va samaraliroq qilish uchun.

Bootstrap, Tailwind CSS — tayyor dizayn komponentlari.

Front-end dasturchining vazifalari:

Dizayner chizgan maketni kod orqali jonlantirish.

Saytni mobil, planshet va kompyuter ekraniga moslash (responsive design).

Foydalanuvchi uchun qulay interfeys yaratish.

Back-end bilan API orqali bog‘lanib, ma’lumotlarni ko‘rsatish.

Misol:

Agar siz onlayn do‘kon ochmoqchi bo‘lsangiz:

Front-end: Mahsulot rasmi, narxi, “Savatga qo‘shish” tugmasi.

Back-end: Savatga qo‘shilgan mahsulotni saqlash, hisob-kitob qilish, foydalanuvchi ma’lumotlarini bazaga yozish.

@code_hub_01

🔥1

32 views00:24

𝑃𝑟𝑜𝑔𝑟𝑎𝑚𝑚𝑒𝑟

0:05

This media is not supported in your browser

VIEW IN TELEGRAM

#joking_time

1 martada tushunganlar bormi😂
Tushunmagalar --- qoldiring

Ochishga ochdingiz endi reaksiya bosib keting🐳😁😍

@code_hub_01

😁2🤣1

31 views10:55

𝑃𝑟𝑜𝑔𝑟𝑎𝑚𝑚𝑒𝑟

1. HTML nima?

HTML (HyperText Markup Language) — veb-sahifa tuzilishini belgilash uchun ishlatiladigan belgilash tili. U matn, rasm, link, shakl (form), jadval va boshqa elementlarni brauzerga qanday ko‘rsatishni aniqlaydi. HTML “funktsional” emas (ya’ni hisoblashlarni bajarmaydi) — tuzilish va mazmunni belgilaydi; dizayn uchun CSS, interaktivlik uchun JavaScript qoʻshiladi.

---

2. Qisqa tarix

Boshlangʻich versiyalari 1990-yillarda Tim Berners-Lee tomonidan paydo boʻlgan.

2014 yildan soʻng HTML5 rasmiy standarti: multimedia va semantik elementlar yaxshilandi.

---

3. Asosiy tuzilish (HTML hujjat shabloni)

Quyidagi minimal HTML hujjat barcha sahifalarda boshlangʻich sifatida ishlatiladi:

<!doctype html>
<html lang="uz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sarlavha — Sahifa nomi</title>

<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Salom, dunyo!</h1>
</header>

<main>
<p>Bu mening birinchi HTML sahifam.</p>
</main>

<footer>
<p>Muallif: Ism</p>
</footer>


<script src="script.js"></script>
</body>
</html>

---

4. Teglar (tags) va atributlar

Teglar <teg>...</teg> yoki yopilmaydigan <img />, <input /> shaklida boʻladi.

Atributlar teglarga qoʻshimcha xususiyat beradi: <a href="https://example.com" target="_blank">Link</a>.

Eng koʻp ishlatiladigan teglar:

Strukturaviy: <html>, <head>, <body>, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

Matn: <h1>–<h6>, <p>, <br>, <strong>, <em>, <small>, <blockquote>

Roʻyxatlar: <ul>, <ol>, <li>

Media: <img src="..." alt="...">, <audio>, <video>

Link va nav: <a href="...">

Formlar: <form>, <input>, <textarea>, <select>, <button>, <label>

Jadval: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>

---

5. Semantik HTML (nima uchun muhim)

HTML5 bilan kelgan semantik teglar (masalan, <header>, <nav>, <article>, <footer>) sahifa tuzilishini aniq koʻrsatadi — bu SEO, accessibility (kirish imkoniyati), va kodni tushunishni yaxshilaydi.

---

6. Formlar va input turlari

<form action="/send" method="post">
<label for="name">Ism:</label>
<input id="name" name="name" type="text" required>

<label for="email">Email:</label>
<input id="email" name="email" type="email" required>

<label for="age">Yosh:</label>
<input id="age" name="age" type="number" min="1" max="120">

<button type="submit">Yuborish</button>
</form>

type atributi: text, email, password, number, date, checkbox, radio, file, hidden, submit va boshqalar.

---

7. Multimedia (rasm, audio, video)

Rasm: <img src="image.jpg" alt="Description"> — alt ekran o‘qiydigan qurilmalar va SEO uchun muhim.

Video: <video controls src="video.mp4"></video>

Audio: <audio controls src="song.mp3"></audio>

---

8. Linklar va navigatsiya

<nav>
<ul>
<li><a href="index.html">Bosh sahifa</a></li>
<li><a href="#about">Biz haqimizda</a></li>
<li><a href="https://google.com" target="_blank" rel="noopener">Google</a></li>
</ul>
</nav>

rel="noopener noreferrer" — yangi oynada ochilganda xavfsizlik uchun tavsiya etiladi.

---

9. SEO (asosiy meta teglar)

<meta name="description" content="Sayt haqida qisqacha ta'rif">
<meta name="keywords" content="kalit so'z1, kalit so'z2">
<meta name="author" content="Ism">

<title> esa brauzer sarlavhasi va qidiruv natijalaridagi asosiy matn.

---

10. Accessibility (kirish imkoniyati) — muhim maslahatlar

Har doim <img> uchun alt qoʻyish.

Form elementlariga label bogʻlash: <label for="id"> va input id="id".

Semantik teglar bilan ishlash (screen reader uchun yaxshi).

Rang kontrasti va klaviatura navigatsiyasini eʼtiborga olish.

---

11. CSS va JavaScript bilan aloqasi

HTML — tuzilish.

CSS (Cascading Style Sheets) — koʻrinish: rang, joylashuv, shriftlar.

JavaScript — interaktivlik: tugmalar, validatsiya, DOM manipulyatsiyasi.

🔥2

26 views06:12

𝑃𝑟𝑜𝑔𝑟𝑎𝑚𝑚𝑒𝑟

CSS bogʻlash: <link rel="stylesheet" href="style.css">
JS bogʻlash: <script src="script.js"></script>

---

12. Responsive dizayn (mobil moslashuv)

<meta name="viewport" content="width=device-width, initial-scale=1"> — mobil qurilmalarda sahifa oʻlchamini boshqarish uchun kerak. CSS media queries bilan turli ekranlarga moslashish mumkin:

@media (max-width: 600px) {
/* mobil uslublar */
}

---

13. Yaxshi amaliyotlar va xatoliklardan saqlanish

Har doim toʻgʻri doctype va charset ishlating.

Ichma-ich (nesting) qoidalariga rioya qiling: ochilgan tegi yopilsin.

Inline CSS/JSni kam ishlating; alohida fayllarga joylashtiring.

Katta rasm fayllarini optimallashtiring (vazni kamaytirish).

alt va title atributlarini foydali yozing.

Kodni validators (W3C) orqali tekshiring.

---

14. Misol: blog post (oddiy)

<article>
<header>
<h2>Post sarlavhasi</h2>
<p>Muallif: <a href="/author">Ism</a> | 2025-09-07</p>
</header>
<p>Bu postning birinchi paragrafi...</p>
<figure>
<img src="photo.jpg" alt="Tabiat rasmi">
<figcaption>Rasm izohi</figcaption>
</figure>
<footer>
<p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/web">Web</a></p>
</footer>
</article>

---

15. Qayerlardan oʻrganish (tavsiyalar)

Amaliyot juda muhim: kichik loyihalar (shaxsiy sahifa, blog, portfolio).

“Inspect element” — brauzerda boshqa saytlarni tahlil qiling.

Online darslar, interaktiv kurslar, va dokumentatsiyani oʻqing. (Agar xohlasangiz, sizga boshlovchilar uchun 30 kunlik mashq-reja tuzib bera olaman.)

---

16. Tez eslatma — cheat-sheet

HTML fayl kengaytmasi: .html

Browserda ochish: ikki marta bosish yoki Live Server (VS Code).

Eng muhim teglar: <!doctype html>, <html>, <head>, <meta>, <title>, <body>, <a>, <img>, <form>, <input>, <button>, <link>, <script>.

@code_hub_01

👍1🔥1

19 views06:12

About

Blog

Apps

Platform