1-modul: HTML & CSS

1-dars. HTML kirish, teglarga kirish

HTML sahifaning mazmunini belgilaydi: matn, rasm, havola, tugma. Uni uy qurilishidagi g'isht va devorga o'xshating: CSS keyin bo'yaydi, JS esa eshik-derazani ishlatadi.

Har bir element teg bilan yoziladi. Ko'pchiligi ochiluvchi va yopiluvchi juftlikdan iborat. Teg ichidagi qo'shimcha ma'lumot atribut deyiladi (masalan, href). img, br kabi teglar yopilmaydi.

<h1>Bosh sarlavha</h1>
<p>Bu oddiy <strong>paragraf</strong>.</p>
<a href="https://uz.wikipedia.org">Havola</a>
<img src="rasm.jpg" alt="Rasm tavsifi">

2-dars. HTML struktura

Har bir HTML hujjat bir xil skeletga ega. <head> ichida foydalanuvchiga ko'rinmaydigan sozlamalar, <body> ichida ko'rinadigan narsa turadi.

lang="uz" brauzer va qidiruv tizimiga til haqida xabar beradi. viewport telefonda to'g'ri ko'rinish uchun shart.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mening sahifam</title>
</head>
<body>
  <h1>Salom!</h1>
</body>
</html>

3-dars. Semantik HTML

Semantik teg o'z ma'nosini bildiradi. <div> hamma narsa bo'lishi mumkin, lekin <nav> aniq menyu ekanini bildiradi.

Foyda: qidiruv tizimlari (SEO) saytni yaxshi tushunadi, ekran o'qiydigan dasturlar ko'zi ojizlarga yordam beradi, kodni o'qish osonlashadi.

<header>Logo va menyu</header>
<nav><a href="/">Bosh sahifa</a></nav>
<main>
  <article><h2>Maqola</h2></article>
  <section><h2>Xizmatlar</h2></section>
</main>
<footer>© 2026</footer>

4-dars. CSS asoslari

CSS elementga qanday ko'rinish berishni aytadi. Qoida: selektor + { xususiyat: qiymat; }. CSS ni ulashning 3 yo'li bor: inline, <style> va alohida fayl. Amalda alohida fayl ishlatiladi.

<link rel="stylesheet" href="style.css">

/* style.css */
h1 {
  color: tomato;
  font-size: 32px;
}

5-dars. Selectorlar

Selektor qaysi elementga uslub berishni tanlaydi. Class (.) qayta ishlatiladi, id (#) sahifada bitta bo'ladi. Ziddiyat bo'lsa kuchliroq selektor g'alaba qiladi: id > class > teg.

p { color: gray; }            /* barcha p */
.card { padding: 16px; }      /* class="card" */
#logo { width: 80px; }        /* id="logo" */
.menu a { color: blue; }      /* menyu ichidagi a */
button:hover { opacity: .8; } /* kursor ustida */

6-dars. Box model

Har bir element to'rtburchak quti: content (ichki mazmun), padding (ichki bo'shliq), border (chegara), margin (tashqi bo'shliq).

Muhim: box-sizing: border-box bo'lsa width ga padding va border ham kiradi. Aks holda 300px kenglik 340px bo'lib qoladi.

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 16px auto; /* markazlash */
}

7-dars. Flexbox

Flexbox elementlarni bir qatorda yoki ustunda joylashtiradi. Ota elementga display: flex beriladi, bolalari avtomatik tartiblanadi.

justify-content asosiy o'q bo'yicha (odatda gorizontal), align-items kesishuvchi o'q bo'yicha tekislaydi. Navbar, kartalar qatori uchun ideal.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

8-dars. Grid

Grid 2 o'lchamli (qator va ustun) maket uchun. Flex bir o'qli, Grid ikki o'qli. Mahsulotlar galereyasi uchun juda qulay.

repeat(auto-fit, minmax(220px, 1fr)) — ekran kengligiga qarab ustunlar soni o'zi o'zgaradi, media query shart emas.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

9-dars. CSS Reset & Normalize

Brauzerlar standart uslublarni (masalan, body ning 8px margini) turlicha beradi. Reset ularni nolga tushiradi, Normalize esa farqlarni tenglashtiradi. Boshlang'ich uchun quyidagi qisqa reset yetadi.

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }
img { max-width: 100%; display: block; }

10-dars. Responsiv dizayn

Sayt telefon, planshet va kompyuterda to'g'ri ko'rinishi kerak. Qoidalar: mobile-first (avval telefon uchun yozing), piksel o'rniga %, rem, max-width ishlating, rasmlarga max-width: 100% bering.

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
h1 { font-size: clamp(1.6rem, 4vw, 3rem); }

11-dars. Media queries

Media query ekran kengligiga qarab uslubni o'zgartiradi. Mobile-first uslubda min-width ishlatiladi: asosiy kod telefon uchun, kattaroq ekranlarga qo'shimchalar yoziladi.

.cards { display: grid; gap: 16px; }          /* telefon: 1 ustun */

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

12-dars. Mini loyiha (Landing page)

O'rgangan hamma narsani birlashtiring. Misol: yaxshi ko'rgan kafe yoki o'quv markazi uchun bir sahifali sayt yarating.

Bo'limlar: header + menyu, hero (sarlavha va tugma), xizmatlar (Grid), narxlar, aloqa formasi, footer.
Talablar: semantik teglar, reset, Flex va Grid, 3 ta breakpointda to'g'ri ko'rinish. Tugagach GitHub Pages ga joylang.

landing/
├── index.html
├── css/
│   └── style.css
└── img/