Yakuniy loyiha: faqat HTML'da ko'p sahifali portfolio sayt

Qisqacha: Bu darsda o'zingizning portfolio saytingizni qurasiz: bosh sahifa, "Men haqimda", loyihalar, aloqa formasi va 404 sahifasi. Sayt faqat HTML'da, lekin professional talablarga javob beradi: semantik tuzilma, accessible forma, SEO va Open Graph, validator va Lighthouse'dan o'tgan, internetga chiqarilgan. Tayyor skelet va 100 ballik baholash ro'yxati berilgan.

Bu darsda

• Loyihani rejadan deploy'gacha to'qqiz bosqichda o'zingiz qurasiz.
• Tayyor skeletni o'z ma'lumotlaringiz bilan to'ldirasiz.
• Saytni html-validate'ning qat'iy qoidalari, klaviatura va Lighthouse bilan tekshirasiz.
• Saytni GitHub Pages'ga chiqarib, havolasini rezyumega qo'shasiz.
• Ishingizni 100 ballik ro'yxat bo'yicha o'zingiz baholaysiz.

Oldin bilishingiz kerak: Semantik sahifa skeletini noldan qurish, HTML kod uslubi, Lighthouse va PageSpeed, Birinchi deploy.

1. Nega bu kerak?

Butun qism davomida «Bahor» choyxonasi uchun sayt qurdik. U Jasur akaning sayti edi. Endi galma-gal o'zingizniki.

Portfolio — dasturchining ishlari jamlangan shaxsiy sayti. Rassomning ko'rgazmasi kabi: "men nima qila olaman" degan savolga gap bilan emas, ish bilan javob beradi. Ish beruvchi rezyumedagi "HTML bilaman" degan qatorga ishonmasligi mumkin. Lekin ishlayotgan, toza kodli saytga ishonadi.

Bitta e'tiroz bo'lishi mumkin: "CSS'siz sayt xunuk bo'ladi-ku". Ha, hozircha u oq fonda qora matn. Uy qurilishini eslang: avval poydevor va devorlar, suvoq va bo'yoq keyin. Bugun devorlarni mustahkam qurasiz. Keyingi qismda CSS bilan aynan shu saytni chiroyli qilasiz — HTML'ni deyarli o'zgartirmasdan. Yaxshi HTML'ning belgisi ham shu.

2. Loyiha talablari

2.1 Sahifalar

2.2 Majburiy elementlar

Har bir modul loyihada kamida bir marta ishlatilsin:

• Matn: sarlavhalar daraxti sakrashsiz, ro'yxatlar (ul, ol, dl), time, strong/em ma'no bilan.
• Havolalar: nisbiy yo'llar, toza URL'lar, aria-current="page", mailto:, skip link.
• Rasmlar: ma'noli alt, width va height, figure + figcaption, asosiy rasmda fetchpriority="high".
• Semantika: header, nav (nomlangan), main, footer, article, section.
• Jadval: caption, thead, th scope.
• Forma: label, mos type va autocomplete, required, fieldset + legend, yo'riqnoma aria-describedby bilan.
• Interaktiv: details va summary.
• head: noyob title, meta description, canonical, favicon, Open Graph (bosh sahifada).

2.3 Sifat mezonlari

• html-validate — qat'iy to'plamlar bilan 0 xato. Nu HTML Checker — 0 xato.
• Buzilgan havola — 0 ta.
• Lighthouse (Mobile, inkognito): Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 95, SEO 100.
• Faqat klaviatura bilan hamma havola va maydonga yetib borish mumkin.
• Sayt internetda, HTTPS bilan ochiladi.

Accessibility'da nega 100 emas, 95? Bitta tekshiruv — "Touch targets do not have sufficient size or spacing" — faqat CSS bilan tuzatiladi (Audit darsida ko'rgan edik). CSS'siz sahifada u doim qizil bo'ladi. Qolgan hamma accessibility tekshiruvlari o'tishi shart.

2.4 Cheklovlar

• Faqat HTML. style atributi, style tegi va JavaScript — yo'q.
• Rasmlar yengil: har biri 200 KB dan kichik (Rasm unumdorligi).
• Shaxsiy ma'lumotda ehtiyot bo'ling: uy manzili, shaxsiy telefon va pasport ma'lumotlari — yo'q (Deploy darsidagi "Hujumchi nigohi").

Tekshirib ko'ring: Nega loyihada style atributi taqiqlangan, axir u bilan saytni biroz chiroyli qilsa bo'lardi?

3. Ish tartibi: to'qqiz bosqich

Mo'ljal: 2–4 kun, kuniga 2–3 soat. Shoshilmang — sifat tezlikdan muhim.

4. 1-bosqich: reja

Kompyuterni yoqishdan oldin qog'oz oling. Semantik skelet darsidagi qoida: birinchi uch qadamda bitta ham teg yozilmaydi.

Sayt xaritasi — sahifalar va ularning bog'lanishi:

Bosh sahifa (/)
├── Men haqimda (/haqimda/)
├── Loyihalar (/loyihalar/)
│   └── Choyxona «Bahor» (/loyihalar/bahor/)
├── Aloqa (/aloqa/)
└── 404

Keyin matnlarni oddiy matnda yozing: o'zingiz haqingizda 3–4 gap, har loyiha uchun 2–3 gap. Matn tayyor bo'lmasa, HTML'ni yozish qiyin: qaysi teg kerakligi matnga qarab tanlanadi.

Maslahat: "Lorem ipsum" — dizaynerlar ishlatadigan ma'nosiz lotincha to'ldiruvchi matn. Emmet uni lorem deb chaqiradi (Emmet darsi). Portfolioda uni ishlatmang — haqiqiy matn bilan boshlang. Aks holda "keyin almashtiraman" degan joy internetga chiqib ketadi.

5. 2-bosqich: tuzilma va sozlamalar

5.1 Papkalar

Loyiha ildizida sozlama fayllari, sayt/ ichida esa faqat internetga chiqadigan fayllar (Deploy darsidagi qoida):

• portfolio/
  • .prettierrc, .htmlvalidate.json, .htmlvalidateignore, package.json
  • sayt/
    • index.html, 404.html, favicon.svg
    • haqimda/index.html
    • loyihalar/index.html
    • loyihalar/bahor/index.html, bosh-sahifa.png
    • aloqa/index.html
    • assets/images/

Git Bash, macOS yoki Linux'da:

mkdir -p portfolio/sayt/{haqimda,aloqa,assets/images,loyihalar/bahor}
cd portfolio
touch sayt/index.html sayt/404.html sayt/haqimda/index.html
touch sayt/aloqa/index.html sayt/loyihalar/index.html
touch sayt/loyihalar/bahor/index.html

{haqimda,aloqa,...} — bitta buyruqda bir nechta papka. Windows PowerShell'da:

mkdir portfolio/sayt/haqimda, portfolio/sayt/aloqa
mkdir portfolio/sayt/assets/images, portfolio/sayt/loyihalar/bahor
cd portfolio
New-Item sayt/index.html, sayt/404.html, sayt/haqimda/index.html
New-Item sayt/aloqa/index.html, sayt/loyihalar/index.html
New-Item sayt/loyihalar/bahor/index.html

5.2 Sozlamalar

.prettierrc va package.json — Kod uslubi darsidagidek. Faqat skriptlarda yo'l sayt/ ga qaratiladi:

{
  "scripts": {
    "format": "prettier --write sayt",
    "lint": "html-validate \"sayt/**/*.html\"",
    "check": "prettier --check sayt && npm run lint"
  }
}

check ichida npm run lint — bir skript boshqasini chaqirishi mumkin. Shunda html-validate buyrug'i bitta joyda yoziladi.

.htmlvalidate.json — endi eng qat'iy variant, to'rtta to'plam bilan:

{
  "extends": [
    "html-validate:recommended",
    "html-validate:document",
    "html-validate:a11y",
    "html-validate:prettier"
  ],
  "rules": {
    "id-pattern": ["error", { "pattern": "kebabcase" }],
    "class-pattern": ["error", { "pattern": "kebabcase" }]
  }
}

• html-validate:document — to'liq sahifa uchun: DOCTYPE, sarlavhalar tartibi, har maydonda label, mavjud bo'lmagan id ga havola.
• html-validate:a11y — accessibility qoidalari.

.htmlvalidateignore ga bitta qator: node_modules/. Keyin:

npm init -y
npm install --save-dev prettier html-validate

6. 3-bosqich: tayyor skelet

Quyidagi to'rtta fayl — to'liq, ishlaydigan skelet. Ular yuqoridagi qat'iy .htmlvalidate.json bilan 0 xato beradi. Nusxalang, keyin "Aziz Karimov" va boshqa namunalarni o'z ma'lumotlaringiz bilan almashtiring.

6.1 Bosh sahifa — sayt/index.html

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aziz Karimov — boshlovchi frontend dasturchi</title>
  <meta name="description"
        content="Aziz Karimovning portfoliosi: HTML'da yozilgan
        saytlar, o'qish rejasi va aloqa uchun ma'lumot.">
  <link rel="canonical" href="https://example.com/">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Aziz Karimov — portfolio">
  <meta property="og:description"
        content="HTML'da yozilgan loyihalarim va o'qish rejam.">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:image"
        content="https://example.com/assets/images/og-rasm.jpg">
  <meta property="og:locale" content="uz_UZ">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <a href="#asosiy">Asosiy kontentga o'tish</a>

  <header>
    <p><a href="./">Aziz Karimov</a></p>
    <nav aria-label="Asosiy menyu">
      <ul>
        <li><a href="./" aria-current="page">Bosh sahifa</a></li>
        <li><a href="haqimda/">Men haqimda</a></li>
        <li><a href="loyihalar/">Loyihalar</a></li>
        <li><a href="aloqa/">Aloqa</a></li>
      </ul>
    </nav>
  </header>

  <main id="asosiy">
    <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
    <p>
      Veb-saytlarni noldan o'rganyapman. Hozir HTML'ni to'liq
      bilaman: semantika, formalar, accessibility va SEO.
      Keyingi qadam — CSS.
    </p>
    <img src="assets/images/ish-joyi.jpg"
         alt="Noutbukda ochiq turgan HTML kod"
         width="480" height="320" fetchpriority="high">

    <section>
      <h2>So'nggi loyihalar</h2>
      <ul>
        <li>
          <a href="loyihalar/bahor/">Choyxona «Bahor» sayti</a> —
          menyu, stol band qilish formasi va 404 sahifasi.
        </li>
        <li><a href="loyihalar/">Barcha loyihalar</a></li>
      </ul>
    </section>

    <section>
      <h2>Nimalarni bilaman</h2>
      <ul>
        <li>Semantik HTML va sahifa landmarklari</li>
        <li>Accessible formalar va brauzer validatsiyasi</li>
        <li>SEO va Open Graph meta teglari</li>
        <li>Lighthouse bilan audit va deploy</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>
      <a href="mailto:aziz@example.com">aziz@example.com</a> ·
      <a href="https://t.me/sizning_kanal">Telegram</a>
    </p>
    <p><small>© 2026 Aziz Karimov. Sayt faqat HTML'da.</small></p>
  </footer>
</body>
</html>

Bir nechta qarorning sababi:

• Skip link (Asosiy kontentga o'tish) — body dagi birinchi havola. Klaviatura foydalanuvchisi navigatsiyani har sahifada qayta bosib o'tirmaydi (Klaviatura va fokus). CSS'siz u ko'rinib turadi — bu normal, CSS qismida uni faqat fokusda ko'rinadigan qilamiz.
• Ism h1 emas, p ichida. h1 — sahifaning mavzusi, logotip emas (Semantik skelet darsidagi xato).
• example.com manzillari — canonical va og: teglari absolyut URL talab qiladi (Open Graph). Haqiqiy manzilingizni deploy'dan keyin bilasiz, o'shanda almashtirasiz (10-bosqich).
• Asosiy rasm — width, height va fetchpriority="high" bilan, loading="lazy" siz.

6.2 Loyihalar — sayt/loyihalar/index.html

Bu sahifa bir papka ichkarida. Shuning uchun hamma yo'llar bitta ../ ga uzaygan.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Loyihalar — Aziz Karimov</title>
  <meta name="description"
        content="Aziz Karimovning HTML loyihalari: choyxona sayti,
        semantik blog sahifasi va ularning tavsifi.">
  <link rel="canonical" href="https://example.com/loyihalar/">
  <link rel="icon" href="../favicon.svg" type="image/svg+xml">
</head>
<body>
  <a href="#asosiy">Asosiy kontentga o'tish</a>

  <header>
    <p><a href="../">Aziz Karimov</a></p>
    <nav aria-label="Asosiy menyu">
      <ul>
        <li><a href="../">Bosh sahifa</a></li>
        <li><a href="../haqimda/">Men haqimda</a></li>
        <li><a href="./" aria-current="page">Loyihalar</a></li>
        <li><a href="../aloqa/">Aloqa</a></li>
      </ul>
    </nav>
  </header>

  <main id="asosiy">
    <h1>Loyihalar</h1>
    <p>HTML qismida qilgan ishlarim: har birida qisqa tavsif,
    sana va havolalar.</p>

    <article>
      <h2>Choyxona «Bahor» sayti</h2>
      <p><time datetime="2026-09">2026-yil sentabr</time></p>
      <p>
        To'rt sahifali sayt: menyu jadvali, stol band qilish
        formasi va 404 sahifasi. Validatordan xatosiz o'tgan.
      </p>
      <ul>
        <li><a href="bahor/">Loyiha haqida batafsil</a></li>
        <li>
          <a href="https://example.com/bahor/">Saytni ochish</a>
        </li>
      </ul>
    </article>

    <article>
      <h2>Semantik blog maqolasi</h2>
      <p><time datetime="2026-08">2026-yil avgust</time></p>
      <p>
        "Osh sirlari" maqolasi: landmarklar, sarlavhalar daraxti
        va izohli rasmlar.
      </p>
      <ul>
        <li>
          <a href="https://example.com/blog/">Saytni ochish</a>
        </li>
      </ul>
    </article>
  </main>

  <footer>
    <p><small>© 2026 Aziz Karimov.</small></p>
  </footer>
</body>
</html>

Har bir loyiha — article: u mustaqil, alohida ulashsa bo'ladigan kontent (article, section yoki div). time datetime="2026-09" — faqat yil va oy, bu ham to'g'ri format.

6.3 Aloqa — sayt/aloqa/index.html

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Aloqa — Aziz Karimov</title>
  <meta name="description"
        content="Aziz Karimov bilan bog'lanish: email, Telegram va
        xabar yuborish formasi. Odatda bir kun ichida javob beraman.">
  <link rel="canonical" href="https://example.com/aloqa/">
  <link rel="icon" href="../favicon.svg" type="image/svg+xml">
</head>
<body>
  <a href="#asosiy">Asosiy kontentga o'tish</a>

  <header>
    <p><a href="../">Aziz Karimov</a></p>
    <nav aria-label="Asosiy menyu">
      <ul>
        <li><a href="../">Bosh sahifa</a></li>
        <li><a href="../haqimda/">Men haqimda</a></li>
        <li><a href="../loyihalar/">Loyihalar</a></li>
        <li><a href="./" aria-current="page">Aloqa</a></li>
      </ul>
    </nav>
  </header>

  <main id="asosiy">
    <h1>Aloqa</h1>
    <p>
      Eng tez yo'l —
      <a href="https://t.me/sizning_kanal">Telegram</a>.
      Email: <a href="mailto:aziz@example.com">aziz@example.com</a>.
    </p>

    <h2>Xabar yuborish</h2>
    <form action="https://example.com/aloqa" method="post">
      <p>
        <label for="ism">Ismingiz</label>
        <input id="ism" name="ism" type="text"
               autocomplete="name" required maxlength="60">
      </p>
      <p>
        <label for="email">Email</label>
        <input id="email" name="email" type="email"
               autocomplete="email" required
               aria-describedby="email-yordam">
        <span id="email-yordam">Javobni shu manzilga yozaman.</span>
      </p>
      <fieldset>
        <legend>Qaysi mavzuda?</legend>
        <p>
          <input id="mavzu-ish" name="mavzu" type="radio"
                 value="ish" required>
          <label for="mavzu-ish">Ish taklifi</label>
        </p>
        <p>
          <input id="mavzu-savol" name="mavzu" type="radio"
                 value="savol">
          <label for="mavzu-savol">Savol</label>
        </p>
      </fieldset>
      <p>
        <label for="xabar">Xabar</label>
        <textarea id="xabar" name="xabar" rows="5"
                  required maxlength="1000"></textarea>
      </p>
      <button type="submit">Yuborish</button>
    </form>

    <h2>Ko'p so'raladigan savollar</h2>
    <details name="savollar">
      <summary>Qancha vaqtda javob berasiz?</summary>
      <p>Odatda bir kun ichida.</p>
    </details>
    <details name="savollar">
      <summary>Buyurtma olasizmi?</summary>
      <p>Kichik HTML sahifalar uchun — ha.</p>
    </details>
  </main>

  <footer>
    <p><small>© 2026 Aziz Karimov.</small></p>
  </footer>
</body>
</html>

Diqqat: Formaning action i — namuna manzil. Xabarlarni qabul qiladigan server hali yo'q: uni backend qismida, Express'ga kirish darsidan boshlab o'zingiz yozasiz. Hozir baholanadigan narsa — formaning HTML'i: label, type, autocomplete, required. Shuning uchun sahifada Telegram va email havolalari birinchi o'rinda turibdi — ular bugun ishlaydi. Tayyor forma xizmatlari ham bor (masalan, Formspree), lekin ular xabarlaringizni begona serverga yuboradi — hozir shart emas.

details name="savollar" — bir guruhdagi details lardan faqat bittasi ochiq turadi (details va summary).

6.4 404 — sayt/404.html

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sahifa topilmadi — Aziz Karimov</title>
  <meta name="robots" content="noindex">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>
<body>
  <main>
    <h1>Kechirasiz, bu sahifa topilmadi</h1>
    <p>Manzil noto'g'ri yozilgan yoki sahifa ko'chirilgan
    bo'lishi mumkin.</p>
    <ul>
      <li><a href="/">Bosh sahifaga qaytish</a></li>
      <li><a href="/loyihalar/">Loyihalarim</a></li>
    </ul>
  </main>
</body>
</html>

noindex — 404 sahifasi Google natijalariga tushmasin (Qidiruv tizimlari uchun meta teglar). Yo'llar / bilan boshlanadi, chunki bu sahifa istalgan xato manzilda ko'rsatiladi (Sayt tuzilmasi). Saytni login.github.io repozitoriysiga joylasangiz, ular to'g'ri ishlaydi.

7. 4–6-bosqichlar: kontent, forma va head

Skeletdagi namunalarni o'zingiznikiga almashtiring va qolgan ikki sahifani yozing — "Men haqimda" va loyiha sahifasi (ular 12-bo'limdagi 2- va 3-mashqlar). Har sahifa uchun tekshiruv savollari:

• title noyobmi? Formula: "Sahifa nomi — Ismingiz".
• meta description 140–160 belgi atrofidami va sahifa mazmunini aytadimi?
• Navigatsiyada aria-current="page" aynan shu sahifadami? Nusxa ko'chirganda buni unutish oson.
• Har rasmda ma'noli alt bormi? Rasm 200 KB dan kichikmi?
• Sarlavhalar h1 → h2 → h3 tartibidami?
• og:image uchun 1200×630 o'lchamli rasm (sayt/assets/images/og-rasm.jpg) tayyormi (Open Graph)?

Favicon uchun eng oddiy yo'l — SVG. Masalan, ismingizning bosh harfi (Favicon darsi):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#1f6f4a"/>
  <text x="16" y="23" font-size="20" text-anchor="middle"
        fill="#ffffff">A</text>
</svg>

Buni sayt/favicon.svg fayliga saqlang. Bu HTML emas, SVG fayl — shuning uchun /> bu yerda odatiy yozuv.

8. 7-bosqich: validatsiya

npm run format
npm run check
npx linkinator sayt --recurse --skip "example.com"

• npm run format — hamma fayllarni tekislaydi. Skelet fayllari biroz boshqacha ko'rinishga keladi: <meta ... />, uzun teglarda har atribut alohida qatorda. Bu normal — ma'no o'zgarmaydi.
• npm run check — Prettier va html-validate. Ikkalasi ham jim bo'lsa — tayyor.
• linkinator — buzilgan havolalar (Sayt tuzilmasi). --skip "example.com" — namuna manzillarni hozircha tekshirmaslik. Ularsiz linkinator https://example.com/aloqa/ kabi manzillarni [404] deb ko'rsatadi: bunday sahifalar haqiqatan yo'q. Deploy'dan keyin ularni haqiqiy manzilga almashtirasiz va linkinator'ni --skip siz qayta ishga tushirasiz.

Keyin har sahifani Nu HTML Checker'da (validator.w3.org/nu, File Upload) bir marta tekshiring. Ikki validator ba'zan turli narsani topadi (Validatsiya).

9. 8-bosqich: accessibility va audit

Vositalar faqat bir qismini topadi (A11y tekshiruvi). Shuning uchun uch qatlam:

1. Klaviatura. Sichqonchani chetga suring. Bosh sahifada Tab bosing:

• Birinchi fokus — skip link. Enter bosing — fokus main ga o'tishi kerak.
• Hamma havola va maydonga Tab bilan yetib borasizmi? Fokus doim ko'rinadimi?
• Formani faqat klaviatura bilan to'ldirib, bo'sh yuborib ko'ring: brauzer birinchi xato maydonga fokusni qaytaradimi?

2. Ekran o'quvchi. Windows'da NVDA, iPhone'da VoiceOver. Sarlavhalar ro'yxatini oching (NVDA'da Insert + F7). Ro'yxat sahifa mazmunini aytib bera oladimi?

3. Lighthouse. Inkognito, Mobile, har sahifada 3 marta (Audit). Skeletning o'zi shunday natija beradi:

Accessibility'dagi yagona qizil qator — "Touch targets..." (CSS ishi, 2.3-bo'limda aytdik). Boshqa qizil qator bo'lsa — uni tuzatasiz.

Tekshirib ko'ring: Lighthouse Accessibility 95 berdi, lekin sahifangizda "bu yerda" degan havola bor. Lighthouse nega uni ushlamadi va nima qilasiz?

10. 9-bosqich: deploy

Portfolio uchun eng yaxshi joy — GitHub Pages'dagi login.github.io repozitoriysi (Birinchi deploy). Sayt manzili GitHub profilingiz bilan bir xil bo'ladi va 404 sahifadagi / yo'llari to'g'ri ishlaydi.

1. sayt/ papkasining ichidagi hamma narsani repoga yuklang.
2. Settings → Pages → main, / (root).
3. Sayt ochilgach, example.com ni haqiqiy manzilingizga almashtiring: hamma canonical, og:url va og:image da. VS Code'da buni bitta amal bilan qilasiz: Ctrl + Shift + H — butun loyiha bo'yicha qidirish va almashtirish.
4. O'zgargan fayllarni qayta yuklang.
5. npx linkinator sayt --recurse ni endi --skip siz ishga tushiring — hamma havola [200] bo'lishi kerak.

Deploy'dan keyingi tekshiruv — Birinchi deploy darsining 9-bo'limi: telefonda ochish, PageSpeed Insights, Nu Checker'ning Address usuli va Telegram'da havola kartasini ko'rish.

11. Baholash ro'yxati

Loyihani o'zingiz baholang. Yaxshisi — do'stingiz yoki kursdoshingiz baholasin: begona ko'z ko'proq narsani ko'radi.

Majburiy shartlar. Bittasi bajarilmasa, loyiha qabul qilinmaydi:

• Sayt internetda HTTPS bilan ochiladi.
• npm run check — 0 xato.
• Har sahifada lang="uz", noyob title va bitta h1.

Ballar (jami 100, o'tish — 80):

Har bo'limda: hammasi bajarilgan — to'liq ball, bitta kamchilik — yarmi, ko'p kamchilik — 0.

Natija:

• 90–100 — a'lo. Havolani rezyumega qo'shing.
• 80–89 — yaxshi. Kamchiliklar ro'yxatini yozib, keyingi qism davomida tuzating.
• 80 dan kam — qaysi bo'limda ball yo'qolganini toping va o'sha modul darslariga qayting. Bu mag'lubiyat emas — xuddi shu takrorlash bilimni mustahkamlaydi.

12. Ko'p uchraydigan xatolar

12.1 Nusxa ko'chirilgan navigatsiya

Sahifani nusxalab, aria-current="page" ni ko'chirishni unutish. Natijada "Loyihalar" sahifasida ham "Bosh sahifa" joriy deb e'lon qilinadi. Har yangi sahifadan keyin navigatsiyani tekshiring.

12.2 Hamma sahifada bir xil title

Brauzer yorlig'ida va Google'da hamma sahifa "Portfolio" deb chiqadi. Har sahifaga o'z nomi.

12.3 Nisbiy og:image

content="assets/images/og.jpg" — Telegram rasmni topa olmaydi. Open Graph faqat to'liq manzilni tushunadi: https://....

12.4 Telefondan olingan 5 MB lik rasm

Portret yoki skrinshot to'g'ridan-to'g'ri yuklanadi va LCP 10 soniyadan oshadi. Rasmni Squoosh'da kichraytiring va WebP'ga o'tkazing.

12.5 Shaxsiy ma'lumot

Shaxsiy telefon raqami, uy manzili, tug'ilgan sana — portfolioda kerak emas. Aloqa uchun Telegram va alohida email yetarli.

12.6 "CSS'siz xunuk — keyin qilaman" deb to'xtab qolish

Loyiha tugamay qoladi. HTML'ni oxirigacha yetkazing, internetga chiqaring. Chiroyli qilish — keyingi qismning ishi, va u aynan shu saytda bo'ladi.

13. Mashqlar

1-mashq (oson): Reja

O'z portfoliongiz uchun sayt xaritasini va har sahifaning sarlavhalar daraxtini yozing. Hali teg yozmang — faqat matn.

Bosh sahifa
  h1  Salom, men Aziz — boshlovchi frontend dasturchiman
    h2  So'nggi loyihalar
    h2  Nimalarni bilaman

Men haqimda
  h1  Men haqimda
    h2  Bilimlarim
    h2  O'qish rejam

2-mashq (o'rta): "Men haqimda" sahifasi

sayt/haqimda/index.html ni yozing. Unda bo'lsin: qisqa hikoya, bilimlar — ta'rif ro'yxati (dl), o'qish rejasi — jadval (caption, thead, th scope). Navigatsiya va head — boshqa sahifalardagidek.

Ishora: ta'rif ro'yxati — Ro'yxatlar, jadval sarlavhalari — Accessible jadvallar.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Men haqimda — Aziz Karimov</title>
  <meta name="description"
        content="Aziz Karimov kim: dasturlashga qanday kelgani,
        bilimlari, o'qish rejasi va keyingi maqsadlari.">
  <link rel="canonical" href="https://example.com/haqimda/">
  <link rel="icon" href="../favicon.svg" type="image/svg+xml">
</head>
<body>
  <a href="#asosiy">Asosiy kontentga o'tish</a>

  <header>
    <p><a href="../">Aziz Karimov</a></p>
    <nav aria-label="Asosiy menyu">
      <ul>
        <li><a href="../">Bosh sahifa</a></li>
        <li><a href="./" aria-current="page">Men haqimda</a></li>
        <li><a href="../loyihalar/">Loyihalar</a></li>
        <li><a href="../aloqa/">Aloqa</a></li>
      </ul>
    </nav>
  </header>

  <main id="asosiy">
    <h1>Men haqimda</h1>
    <p>
      Men Toshkentdanman. Kollejni tugatib, bir yil savdoda
      ishladim. 2026-yil yozida dasturlashni noldan boshladim.
    </p>

    <section>
      <h2>Bilimlarim</h2>
      <dl>
        <dt>HTML</dt>
        <dd>Semantika, formalar, jadvallar, accessibility, SEO.</dd>
        <dt>Vositalar</dt>
        <dd>VS Code, terminal, DevTools, Prettier, html-validate.</dd>
        <dt>O'rganyapman</dt>
        <dd>CSS, keyin JavaScript.</dd>
      </dl>
    </section>

    <section>
      <h2>O'qish rejam</h2>
      <table>
        <caption>2026-yilgi o'qish rejasi</caption>
        <thead>
          <tr>
            <th scope="col">Oy</th>
            <th scope="col">Mavzu</th>
            <th scope="col">Holat</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Sentabr</th>
            <td>HTML</td>
            <td>Tugadi</td>
          </tr>
          <tr>
            <th scope="row">Oktabr</th>
            <td>CSS</td>
            <td>Boshlandi</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>

  <footer>
    <p><small>© 2026 Aziz Karimov.</small></p>
  </footer>
</body>
</html>

3-mashq (qiyin): Loyiha sahifasi va JSON-LD

1. sayt/loyihalar/bahor/index.html ni yozing: non yo'li (breadcrumb) navigatsiyasi, article ichida h1, sana, izohli skrinshot, "Vazifa", "Nima qildim", "Natija" bo'limlari.
2. Bosh sahifaning head iga siz haqingizda JSON-LD qo'shing (Person turi) va uni Google'ning Rich Results Test'ida tekshiring.

Ishora: JSON-LD — Strukturalangan ma'lumot darsi. Loyiha sahifasi ikki papka ichkarida — yo'llar ../../ bilan boshlanadi.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Choyxona «Bahor» sayti — loyiha — Aziz Karimov</title>
  <meta name="description"
        content="Choyxona «Bahor» uchun to'rt sahifali HTML sayt:
        vazifa, yechim, ishlatilgan teglar va audit natijalari.">
  <link rel="canonical" href="https://example.com/loyihalar/bahor/">
  <link rel="icon" href="../../favicon.svg" type="image/svg+xml">
</head>
<body>
  <a href="#asosiy">Asosiy kontentga o'tish</a>

  <header>
    <p><a href="../../">Aziz Karimov</a></p>
    <nav aria-label="Asosiy menyu">
      <ul>
        <li><a href="../../">Bosh sahifa</a></li>
        <li><a href="../../haqimda/">Men haqimda</a></li>
        <li><a href="../">Loyihalar</a></li>
        <li><a href="../../aloqa/">Aloqa</a></li>
      </ul>
    </nav>
  </header>

  <main id="asosiy">
    <nav aria-label="Non yo'li">
      <ol>
        <li><a href="../../">Bosh sahifa</a></li>
        <li><a href="../">Loyihalar</a></li>
        <li>
          <a href="./" aria-current="page">Choyxona «Bahor»</a>
        </li>
      </ol>
    </nav>

    <article>
      <h1>Choyxona «Bahor» sayti</h1>
      <p>
        <time datetime="2026-09-27">2026-yil 27-sentabr</time>
      </p>

      <figure>
        <img src="bosh-sahifa.png"
             alt="Sayt bosh sahifasi: sarlavha, menyu va osh rasmi"
             width="600" height="400">
        <figcaption>Bosh sahifa telefon ekranida.</figcaption>
      </figure>

      <h2>Vazifa</h2>
      <p>
        Choyxonaga menyu, manzil va stol band qilish formasi
        bo'lgan oddiy sayt kerak edi.
      </p>

      <h2>Nima qildim</h2>
      <ul>
        <li>To'rt sahifa va toza URL'lar.</li>
        <li>Menyu — <code>caption</code> va <code>scope</code>
          bilan jadval.</li>
        <li>Forma — <code>label</code>, validatsiya va
          <code>autocomplete</code> bilan.</li>
      </ul>

      <h2>Natija</h2>
      <p>
        Lighthouse (Mobile): Performance 100, Accessibility 95,
        Best Practices 96, SEO 100.
      </p>
      <p><a href="https://example.com/bahor/">Saytni ochish</a></p>
    </article>
  </main>

  <footer>
    <p><small>© 2026 Aziz Karimov.</small></p>
  </footer>
</body>
</html>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Aziz Karimov",
  "jobTitle": "Boshlovchi frontend dasturchi",
  "url": "https://example.com/",
  "sameAs": ["https://t.me/sizning_kanal"]
}
</script>

14. 04-qism yakuni: endi nimalarni qila olasiz

Tabriklaymiz — HTML qismi tugadi! 86 darsni bosib o'tdingiz. Boshida "HTML nima?" degan savol bilan kelgan edingiz. Endi:

• Ish jarayoni: sahifani yaratasiz, Live Server'da ko'rasiz, Emmet bilan tez yozasiz, Prettier va html-validate bilan tartibda saqlaysiz.
• Matn: sarlavhalar, ro'yxatlar, iqtibos, kod, sana va maxsus belgilarni ma'nosiga qarab belgilaysiz.
• Havolalar: nisbiy va absolyut yo'llar, fragmentlar, mailto:/tel:, ko'p sahifali sayt tuzilmasi.
• Media: ma'noli alt, responsive rasmlar, picture, SVG, video va subtitrlar, xavfsiz iframe.
• Semantika: landmarklar, article/section, kontent modeli va brauzer parseri.
• Jadval va formalar: accessible jadval, to'liq, qulay, xavfsiz va zamonaviy forma.
• Interaktiv elementlar: details, dialog, popover va invoker commands — JavaScript'siz.
• head va SEO: meta teglar, Open Graph, favicon, skriptlar, resurs maslahatlari, JSON-LD.
• Accessibility: accessibility daraxti, klaviatura, ARIA, jonli hududlar, qo'lda va avtomat tekshiruv.
• Kasb: xavfsizlik, brauzer mosligi, kod uslubi, Lighthouse auditi va deploy.

Eng muhimi — siz faqat teglarni emas, fikrlash tartibini o'rgandingiz: avval ma'no, keyin teg; avval hamma uchun ishlaydigan asos, keyin qo'shimcha; har doim vosita bilan tekshirish.

Oldinda nima bor

Portfoliongiz hozir oq fonda qora matn. U to'g'ri, lekin chiroyli emas. 05-qismda CSS'ni boshlaymiz — ranglar, shriftlar, joylashuv, telefon va kompyuterga moslashuv. Birinchi darsdan boshlab aynan shu portfolio'ni bezay boshlaysiz. HTML'ni yaxshi yozganingiz uchun CSS ishi ancha oson bo'ladi: class nomlari tayyor, tuzilma toza.

Keyinroq, Git va GitHub qismida, fayllarni qo'lda yuklash o'rniga bitta buyruq bilan yangilashni o'rganasiz. JavaScript qismida esa aloqa formasi haqiqatan xabar yuboradigan bo'ladi.

15. Real ishda

• Rezyume va vakansiyalar. Junior frontend vakansiyasiga ariza berganda portfolio havolasi — birinchi qarab chiqiladigan narsa. Ko'p ish beruvchilar uni rezyumedan oldin ochadi.
• Intervyuda "portfolio'ingizdagi bitta loyihani tushuntirib bering" degan savol albatta bo'ladi. Siz rejadan deploy'gacha har bir qarorning sababini ayta olasiz: nega article, nega fetchpriority, nega nisbiy yo'l.
• Frilans. O'zbekistonda kichik bizneslar — choyxona, do'kon, o'quv markazi — oddiy sayt uchun frilanserga murojaat qiladi. «Bahor» kabi loyiha — aynan shunday buyurtmaning namunasi.
• Doimiy yangilanish. Portfolio hech qachon "tugamaydi". Har yangi qismdan keyin unga bitta loyiha qo'shing — bir yildan keyin u sizning o'sishingiz tarixi bo'ladi.

Xulosa

• Portfolio — ishingizning isboti: 6 sahifa, semantik, accessible, SEO va OG tayyor, internetda.
• To'qqiz bosqich: reja → tuzilma → skelet → kontent → forma → head → validatsiya → a11y va audit → deploy.
• Qat'iy tekshiruv: to'rt to'plamli html-validate, Nu Checker, linkinator, klaviatura, Lighthouse.
• CSS'siz Accessibility 95 — normal; "Touch targets"dan boshqa qizil qator bo'lmasin.
• Deploy'dan keyin example.com ni haqiqiy manzilga almashtiring va qayta tekshiring.
• HTML qismi tugadi — endi har yangi bilim shu poydevor ustiga quriladi.

Keyingi dars: CSS nima, uni sahifaga ulash va qoida sintaksisi — 05-qism boshlanadi: portfoliongizga birinchi rang va shriftni beramiz.

Manbalar

• MDN: "Publishing your website" va "Structuring a page of content" — developer.mozilla.org
• html-validate: "Presets" — html-validate.org
• Google Search Central: "Person structured data" va Rich Results Test — developers.google.com/search
• web.dev: "Learn HTML" va "Learn Accessibility" — web.dev/learn