HTML & CSS β 0 dan Expertgacha (o'zbek tilida)¶
Bu qo'llanma HTML va CSS ni mutlaqo noldan professional darajagacha o'rgatadi. Hech qanday oldingi tajriba shart emas β birinchi bob "internet qanday ishlaydi?" dan boshlanadi, oxirgi bob esa to'liq responsive sayt quradi.
π¨ Har bob SVG diagramlar bilan boyitilgan β box model, flexbox, grid, specificity, positioning kabi tushunchalar ko'z bilan ko'rib o'rganiladi. Jami 22 bob, 86+ diagramma.
Qanday o'qish kerak¶
- Boblarni tartib bilan o'q (01 β 02 β ...). Har biri oldingisiga tayanadi.
- Kod misollarini o'zing yozib ko'r β faqat o'qib ketma. Bitta
.htmlfayl yarat, brauzerΠ΄Π° och. - Har bob oxiridagi Mashqlarni o'zing yech, keyin
<details markdown="1">ichidagi yechimga qara. - Diagrammalar tushunchani tezroq singdiradi β ularga e'tibor ber.
Talab¶
| Kerak | Daraja |
|---|---|
| Kompyuter va brauzer (Chrome/Firefox/Edge) | Shart |
| Matn muharriri (VS Code tavsiya etiladi) | Shart |
| Oldingi dasturlash tajribasi | Shart emas |
I qism β HTML (struktura)¶
| # | Bob | Nima o'rganasan |
|---|---|---|
| 01 | 01 β Web va HTML asoslari | internet va web qanday ishlashini (klient-server, brauzer, HTTP so'rov-javob, DNS, URL), HTML nimaligini va nima uchun kerakligini, brauzer sahifani qanday chizishini o'rganamiz, birinchi HTML faylimizni yaratib brauzerda ochamiz, hujjat strukturasini (doctype, html, head, body), element/teg/atribut anatomiyasini, bo'sh joy va izohlarni ko'rib chiqamiz, oxirida DevTools bilan tanishamiz. |
| 02 | 02 β Matn elementlari | sarlavhalar, paragraflar, ro'yxatlar va matnni belgilash elementlari yordamida matnga tuzilma va ma'no berishni o'rganamiz. |
| 03 | 03 β Havolalar va media | havolalar (a) yordamida sahifalarni bog'lashni, rasmlarni (img) to'g'ri va tez ko'rsatishni, responsive (moslashuvchan) rasm texnikalarini, hamda audio, video, figure va iframe elementlarini noldan ekspert darajagacha o'rganamiz. |
| 04 | 04 β Jadvallar | ma'lumot jadvallari: table, qator, ustun va birlashtirish. |
| 05 | 05 β Formalar | foydalanuvchidan ma'lumot olishni o'rganamiz β form elementi, barcha input turlari va brauzer ichidagi validatsiya (tekshiruv). |
| 06 | 06 β Semantik HTML va accessibility | ma'noli teglar (header/nav/main/article) bilan sahifa qurish va uni hamma β shu jumladan ko'zi ojiz, klaviatura bilan ishlovchi β odam uchun hammabop (a11y) qilish. |
| 07 | 07 β Head, meta va SEO | sahifaning ko'rinmas qismi β <head> ichidagi meta teglar, viewport, favicon, CSS/JS ulash, hamda saytni Google va ijtimoiy tarmoqlar uchun tayyorlaydigan SEO va ulashish sozlamalari. |
II qism β CSS (ko'rinish va layout)¶
| # | Bob | Nima o'rganasan |
|---|---|---|
| 08 | 08 β CSS asoslari | CSS nima ekanini, uning sintaksisi (selector, e'lon, property, value) hamda CSS ni HTMLga ulashning uch usulini (inline, internal, external) o'rganib, birinchi sahifangizni o'z qo'lingiz bilan bezaysiz. |
| 09 | 09 β Selektorlar | elementlarni aniq tanlash: tur, klass, id, kombinatorlar va psevdolar. |
| 10 | 10 β Cascade, specificity va inheritance | bir nechta CSS qoidasi bitta elementga teginganda qaysi qoida g'olib chiqishini hal qiladigan uchta mexanizm β kaskad (cascade), aniqlik (specificity) va meros (inheritance) β to'liq o'rganamiz. |
| 11 | 11 β Box model | har bir HTML element aslida to'rt qatlamli quti ekanini (content, padding, border, margin) o'rganib, ularning o'lchami qanday hisoblanishini (box-sizing), margin/padding/border qisqa yozuvlarini, margin'lar birlashishini (margin collapse), display turlarini (block/inline/inline-block) va overflow ni to'liq tushunib olasiz. |
| 12 | 12 β O'lchovlar, tipografiya va ranglar | CSS o'lchov birliklari (px, em, rem, %, vw/vh va boshqalar), rang modellari (nomli, hex, rgb, hsl, oklch) va matnni boshqaradigan tipografiya xossalari hamda web shriftlarni to'liq, "nega"si bilan o'rganamiz. |
| 13 | 13 β Fon, chegara va soyalar | elementlarni jonlantiramiz β background (fon rangi, rasm, gradient), border va border-radius (chegara va yumaloq burchaklar), box-shadow (chuqurlik beruvchi soyalar), outline hamda filter bilan vizual effektlar yaratamiz. |
| 14 | 14 β Positioning va z-index | elementlarni joylashtirish β static, relative, absolute, fixed, sticky β hamda qatlamlarni boshqaruvchi z-index va stacking context. |
| 15 | 15 β Flexbox | bir o'lchovli layout vositasi Flexbox bilan tanishamiz β flex konteyner, ikki o'q (main va cross) va elementlarni shu o'qlar bo'ylab tekislash hamda taqsimlashni 0 dan o'rganamiz. |
| 16 | 16 β CSS Grid | sahifani ikki o'lchovda β ustun va qator panjarasi sifatida β qurishni o'rganamiz: grid-template-columns/rows, fr birligi, repeat(), gap, chiziqlarga joylashtirish, nomli sohalar (grid-template-areas), tekislash va auto-fill/auto-fit bilan moslashuvchan layout. |
| 17 | 17 β Responsive dizayn | bitta sahifani har qanday ekranga β telefon, planshet, desktop β moslashtirishni o'rganamiz: media query, mobile-first yondashuv, fluid layout va clamp() bilan moslashuvchan tipografiya. |
| 18 | 18 β Transitions, transforms va animatsiyalar | harakat va o'zgarishlar β transform bilan elementni siljitish/aylantirish/kattalashtirish, transition bilan o'zgarishlarni silliq qilish va @keyframes bilan to'liq animatsiyalar yaratishni 0 dan o'rganamiz. |
| 19 | 19 β Zamonaviy CSS | custom properties (CSS o'zgaruvchilar), calc()/clamp(), CSS nesting, :has() "ota" selektor, @layer kaskad qatlamlari va logical properties kabi zamonaviy CSS imkoniyatlarini 0 dan o'rganib, kodimizni qisqa, moslashuvchan va boshqarsa oson qilamiz. |
| 20 | 20 β CSS arxitekturasi va uslublar | katta loyihada CSS'ni tartibli, boshqarib bo'ladigan qilib yozish β global scope va specificity muammolari nega kelib chiqishi, BEM kabi nomlash konventsiyalari, reset va normalize, fayllarni komponentlarga bo'lish, DRY, design tokens hamda utility-first (Tailwind) yondashuvini semantik usul bilan taqqoslash. |
| 21 | 21 β Formalar, UI holatlari va kirish imkoniyati | formalarni chiroyli bezashni, interaktiv holatlarni (:hover, :focus-visible, :checked va boshqalar), dark mode'ni va kirish imkoniyatini (accessibility) o'rganamiz β sayt nafaqat ko'rkam, balki har bir foydalanuvchi uchun qulay bo'lishi uchun. |
| 22 | 22 β Yakuniy loyiha β responsive landing page | shu paytgacha o'rgangan hamma narsani β semantik HTML, custom properties bilan dizayn tizimi, Grid va Flexbox, responsive, dark mode, hover/focus va animatsiya β birlashtirib, noldan to'liq ishlaydigan, ko'chirib qo'yib ishlatsa bo'ladigan responsive landing page quramiz. |
HTML va CSS β bir og'iz (kontekst uchun)¶
- HTML β sahifaning skeleti (sarlavha, paragraf, rasm, forma). "Nima?" degan savolga javob beradi.
- CSS β sahifaning ko'rinishi (rang, joylashuv, masofa, animatsiya). "Qanday ko'rinadi?" degan savolga javob beradi.
Analogiya: HTML β uyning g'ishtlari va xonalari; CSS β bo'yoq, mebel va dizayn. Avval struktura (01β07), keyin ko'rinish (08β22).
Tayyor bo'lsang β 01-web-html-asoslari.md dan boshla.