𝑃𝑟𝑜𝑔𝑟𝑎𝑚𝑚𝑒𝑟

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

#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

HTML form — foydalanuvchidan maʼlumot (ism, email, parol, tanlovlar va h.k.) olish uchun ishlatiladigan element. Form <form> tegi ichiga turli kirish (input) elementlari joylanadi va serverga yuboriladi.

Asosiy tuzilma

<form action="/submit" method="post" enctype="application/x-www-form-urlencoded">

<input type="text" name="username" />
<button type="submit">Yuborish</button>
</form>

action — maʼlumot yuboriladigan URL (server manzili). Agar boʻsh qoldirilsa, joriy sahifaga yuboradi.

method — yuborish usuli: get yoki post.

get — maʼlumotlar URL query string sifatida yuboriladi (korsatiladi). Kichik, xavfsiz bo‘lmagan maʼlumotlar uchun.

post — maʼlumotlar so‘rov tanasida yuboriladi (ko‘proq maʼlumot va maxfiy maʼlumotlar uchun).

enctype — maʼlumotning formatini aniqlaydi:

application/x-www-form-urlencoded (default)

multipart/form-data — fayl yuklash uchun kerak (input type="file").

text/plain — kam ishlatiladi.

Muhim input turlari va misollari

<label for="name">Ism:</label>
<input type="text" id="name" name="name" required maxlength="50">

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

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

<label><input type="checkbox" name="agree" required> Shartlarga roziman</label>

<label>Jinsi:
<input type="radio" name="gender" value="male"> Erkak
<input type="radio" name="gender" value="female"> Ayol
</label>

<label for="file">Rasm yuklash:</label>
<input type="file" id="file" name="photo" accept="image/*">

<label for="msg">Xabar:</label>
<textarea id="msg" name="message" rows="4"></textarea>

name atributi — server tomoni uchun juda muhim; form yuborilganda shu nom bilan qiymat joʻnatiladi.

id va <label for="..."> — kirish maydonlari uchun yetarlicha qulaylik va aksessibiliti (screen reader va klik qilish uchun).

Submit va reset tugmalari

<button type="submit">Yuborish</button>
<button type="reset">Tozalash</button>

Brauzer validatsiyasi va HTML5 atributlari

required — maydon majburiy.

pattern — regex bilan moslikni tekshiradi: pattern="[A-Za-z]{3,}".

min, max, step — raqamli maydonlarda.

maxlength, minlength — matn uzunligi cheklovi. Brauzer avtomatik xatolik xabarlari chiqaradi, lekin server tomonida ham har doim tekshirish kerak.

Fayl yuklash (multipart)

<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="photo" accept="image/*" required>
<button type="submit">Yuklash</button>
</form>

Accessibility (kirish imkoniyati)

Har doim <label> ishlating.

aria-* atributlari kerak bo‘lsa qo‘shing (masalan aria-describedby).

Tab tartibini (tabindex) asosan o‘zgartirmang — brauzer tartibi yaxshi bo‘ladi.

Xavfsizlik va amaliy maslahatlar

Hech qachon faqat brauzer validatsiyasiga tayanmang — serverda ham tekshiring (sanitizatsiya, uzunlik, format).

Parollarni type="password" bilan oling; serverda esa hashing (bcrypt yoki shunga o‘xshash) qiling.

CSRFdan himoya: server tomonda CSRF token ishlating (SPA emas oddiy formlarda ham).

Fayl yuklanishda fayl turi va hajmni serverda tekshiring va yuklangan fayl nomini tozalang.

JavaScript bilan ishlash (misol: AJAX yuborish)

<form id="myForm">
<input name="email" type="email" required>
<button type="submit">Yuborish</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const resp = await fetch('/submit', { method: 'POST', body: formData });
const data = await resp.json();
console.log(data);
});
</script>

FormData fayllar va boshqa maydonlarni oson yuborishga mos.

AJAX yuborishda fetch yoki XMLHttpRequest ishlatish mumkin.

Tez eslatmalar — tez va yaxshi amaliyotlar

Har bir inputga name berish shart.

Keraksiz autocomplete="off" ishlatmang — foydalanuvchi uchun aniqlik yaxshiroq.

Katta formalarni qadam-qadam (multi-step) qilish sahifani qulay qiladi.

@_code_hub_01

🔥1

41 views08:57

0:06

@code_hub_01

🔥1

31 views04:09

OpenAI ChatGPT'dan foydalanish statistikasi: 1 yil ichida nimalar o‘zgardi?

OpenAI 2024-yil mayidan 2025-yil iyunigacha bo‘lgan davrda ChatGPT bilan o‘tkazilgan 1,1 millionta suhbatni tahlil qildi.
va quyidagi natijalarga keldi:

Foydalanuvchilar eng ko‘p amaliy maslahatlar (29%), matn yozish (24%) va ma'lumot izlash (24%) uchun ChatGPT’dan foydalanadi.

Multimediyali funksiyalar ishga tushirilgach, suratlar bilan ishlash hajmi 7% gacha oshdi.

Texnik yordam so‘rash esa 5% gacha kamaydi.

Asosiy xulosa:
Ish bilan bog‘liq foydalanish holatlariga qaraganda, shaxsiy va kundalik ehtiyojlar ustunlik qila boshlagan. Hozirda ChatGPT’dagi suhbatlarning 70% dan ortig‘i aynan shaxsiy va kundalik masalalarga oid.

Foydalanuvchilarning deyarli yarmi — 26 yoshgacha bo‘lgan yoshlar.

Past va o‘rta daromadli davlatlardan kelayotgan so‘rovlar soni boy hududlarga qaraganda tezroq o‘smoqda.

Foydalanuvchilar orasida erkaklar va ayollar soni deyarli teng: 48% erkaklar, 52% ayollar.

@code_hub_01

⚡1🔥1

50 views10:38

Google’ning sun’iy intellekti — Gemini endi televizorlarda ham mavjud.

Dushanba kuni kompaniya Gemini’ni Google TV uchun ishga tushirganini e’lon qildi. Bu esa televizor egalari sun’iy intellekt bilan tabiiy til orqali muloqot qilishlariga imkon beradi.

To‘liq joriy etilgach, Gemini’ning yangi platformaga kengayishi Google’ning sun’iy intellektidan 300 milliondan ortiq faol Google TV va Android TV tizimidagi qurilmalarda foydalanish imkonini beradi.

@code_hub_01

🔥1

46 views12:58

Loyihaga CSS yozishni (kodlashni) boshlaganimda, hammasi tog'ri ishlayotgandek tuyuldi😁

@code_hub_01

😁1😢1🤣1👨‍💻1

42 views03:08

#just_funny😁

@code_hub_01

😁1

29 views14:35

🇺🇿 Til – millatning ruhi!

21-oktyabr – o‘zbek xalqining faxr va g‘urur manbai bo‘lgan Davlat tili kuni!
Bu kun ona tilimizga ehtirom, milliy qadriyatlarimizni asrab-avaylash va yosh avlodni ona tiliga muhabbat ruhida tarbiyalashning ramzidir.

Ona tilimiz barhayot, ravnaq topayotgan, dunyo sahnasida o‘z o‘rniga ega bo‘lgan til sifatida avloddan-avlodga meros bo‘lib qolsin!

Tilimiz – g‘ururimiz, boyligimiz va birligimiz ramzi!

@code_hub_01

👏1

38 views08:34

Back-end dasturlash — bu veb-sayt yoki ilovaning "ichki qismi", ya’ni foydalanuvchiga ko‘rinmaydigan, ammo hamma ma’lumot va jarayonlarni boshqaradigan qismni yaratishdir.

🧠 1. Back-end nima?

Foydalanuvchi sahifani ochganda yoki tugmani bossada — serverda ma’lum jarayonlar sodir bo‘ladi: ma’lumotlar bazasidan so‘rov yuboriladi, hisob-kitob qilinadi, natija tayyorlanib, foydalanuvchiga qaytariladi.
Mana shu jarayonlarni back-end boshqaradi.

---

⚙️ 2. Back-endning asosiy qismlari

Qism Vazifasi

Server Foydalanuvchi so‘rovlarini qabul qiladi va javob qaytaradi.
Database (Ma’lumotlar bazasi) Ma’lumotlarni saqlaydi (masalan, foydalanuvchi, postlar, mahsulotlar).
API (Application Programming Interface) Front-end va back-end orasidagi aloqa tili.
Server-side logika Hisob-kitoblar, autentifikatsiya (kirish/chiqish), biznes-qoidalar.

---

💻 3. Mashhur back-end dasturlash tillari

Til Afzalliklari

JavaScript (Node.js) Tez, front-end bilan bir tilda, yangi loyihalar uchun mashhur.
Python (Django, Flask) Oson o‘rganiladi, kuchli va xavfsiz.
PHP (Laravel) WordPress va ko‘p saytlar shu tilda.
Java (Spring) Katta kompaniyalar, bank tizimlarida ishlatiladi.
C# (.NET) Microsoft texnologiyalarida ishlatiladi.
Go (Golang) Tezlik va samaradorlik yuqori.

---

🗃 4. Ma’lumotlar bazasi turlari

Turi Misollar Izoh

Relatsion (SQL) MySQL, PostgreSQL, SQLite Jadval shaklidagi ma’lumotlar
NoSQL MongoDB, Firebase Moslashuvchan, hujjat (document) ko‘rinishida saqlanadi

---

🔐 5. Back-endda qilinadigan ishlar

Foydalanuvchi ro‘yxatdan o‘tishi / tizimga kirishi

Ma’lumotlarni saqlash va olish

API yaratish (masalan, GET /users, POST /login)

Fayllarni yuklash / saqlash

To‘lov tizimlarini ulash

Xavfsizlikni ta’minlash (parollar, tokenlar)

---

🧩 6. Oddiy misol (Node.js + Express)

const express = require('express');
const app = express();

app.get('/', (req, res) => {
res.send('Salom, bu back-end server!');
});

app.listen(3000, () => console.log('Server 3000-portda ishlayapti'));

➡️ Bu kod localhost:3000 da server yaratadi va sahifaga kirganda “Salom” deb chiqadi.

---

🚀 7. O‘rganish yo‘nalishi (bosqichma-bosqich)

1. HTML, CSS, JavaScript asoslarini bilish

2. Bitta back-end tilini tanlash (masalan, Node.js yoki Python)

3. Ma’lumotlar bazasini o‘rganish (MySQL yoki MongoDB)

4. API yaratish va test qilish (Postman bilan)

5. Loyihani deploy qilish (Render, Vercel, Railway, yoki VPS serverga)

Yanada qiziqarli ma'lumotlar

🔥2

33 views14:59

DASTURLASH

1⃣ Foundation nima?

2⃣ Front-end, unda nimalar o'rganiladi?

3⃣ Back-end, unda qanday vazifalar bajariladi?

Savollarga javob olish uchun yozuv ustiga bosing

👍1

38 viewsedited 15:17

1:42

1:25

1:50

2:00