# CSS amaliy loyiha — responsive portfolio

> HTML va CSS bilimlarini birlashtirib Flexbox, Grid, box model, position va media query yordamida responsive portfolio sahifasini yarating.

Manba: https://learncode.uz/html-css/css-amaliy-loyiha/
Sana: 2026-05-23

Bu amaliy ishda HTML tuzilmasini haqiqiy responsive sahifaga aylantirasiz.
Maqsad tayyor kodni yodlash emas: layout vazifasiga Flexbox yoki Gridni ongli
tanlash, kenglikni cheklash, holat stillarini yozish va mobil qurilmada
kontentni o'qiladigan saqlash.

Loyiha yakunida bir sahifali portfolio yaratasiz. Yuqoridagi qurilma
tugmalari orqali uni mobil, planshet va desktop kengliklarida tekshirasiz.

## Loyiha talabi

Portfolio quyidagi qismlardan iborat bo'ladi:

- logotip va navigatsiyali header;
- ism, kasb va chaqiruv tugmasi joylashgan kirish qismi;
- uchta loyiha kartasi;
- ko'nikmalar ro'yxati;
- aloqa havolasi va footer;
- klaviatura uchun ko'rinadigan fokus;
- 700px dan tor ekranda bir ustunli layout.

## 1-qadam: semantik HTML

Avval CSSsiz ham o'qiladigan hujjat yarating. `header`, `main`, `section` va
`footer` sahifaning asosiy qismlarini, sarlavhalar esa mazmun iyerarxiyasini
ifodalaydi.

Kartalarni alohida `article` qilish mumkin: har biri sarlavha, izoh va havola
bilan mustaqil loyiha tavsifidir.

## 2-qadam: umumiy qoidalar

Brauzerning standart bo'shliqlarini boshqarish va element kengligini
kutiladigan qilish uchun:

```css
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #172033;
  background: #f8fafc;
}

.konteyner {
  width: min(100% - 32px, 1040px);
  margin-inline: auto;
}
```

`width: min(100% - 32px, 1040px)` konteynerni katta ekranda 1040px dan
oshirmaydi, kichik ekranda esa ikki tomonda 16px bo'shliq qoldiradi.

## 3-qadam: Flexbox va Grid vazifasi

Header bir qatorli joylashuv bo'lgani uchun Flexbox mos. Loyiha kartalari esa
qator va ustunlardan iborat ikki o'lchamli tizim — bu yerda Grid qulay:

```css
.bosh-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.loyihalar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
```

`minmax(0, 1fr)` uzun kontent sabab ustun kutilmaganda kengayib ketishini
kamaytiradi. Kartalar orasidagi masofa item marginlari bilan emas, konteyner
`gap`i bilan boshqariladi.

## 4-qadam: interaktiv holatlar

Havola va tugmada hover yagona holat bo'lmasin. Klaviatura bilan yuradigan
foydalanuvchi uchun aniq fokus yozing:

```css
a:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}
```

Fokusni `outline: none` bilan olib tashlamang. Dizayn sabab standart outline
mos kelmasa, uning o'rniga kontrastli, aniq ko'rinadigan stil bering.

## 5-qadam: responsive breakpoint

Layout kontent siqila boshlagan joyda breakpoint qo'shing. Muayyan telefon
modeliga emas, mazmun ehtiyojiga qarab qaror qiling:

```css
@media (max-width: 700px) {
  .kirish {
    grid-template-columns: 1fr;
  }

  .loyihalar-grid {
    grid-template-columns: 1fr;
  }
}
```

## Tayyor loyiha va jonli natija

```html
<header class="sayt-boshi">
  <div class="konteyner bosh-nav">
    <a class="logo" href="#asosiy">Dilshod.dev</a>
    <nav aria-label="Asosiy navigatsiya">
      <a href="#loyihalar">Loyihalar</a>
      <a href="#konikmalar">Ko'nikmalar</a>
      <a href="#aloqa">Aloqa</a>
    </nav>
  </div>
</header>

<main id="asosiy">
  <section class="konteyner kirish">
    <div>
      <p class="belgi">Frontend o'rganuvchi</p>
      <h1>Foydali va tushunarli interfeyslar quraman.</h1>
      <p>Semantik HTML, zamonaviy CSS va accessibility asosida kichik web loyihalar yarataman.</p>
      <a class="tugma" href="#loyihalar">Loyihalarni ko'rish</a>
    </div>
    <aside aria-label="Qisqa ma'lumot">
      <strong>Hozir o'rganyapman</strong>
      <span>Responsive layout va Grid</span>
    </aside>
  </section>

  <section class="konteyner bolim" id="loyihalar">
    <p class="belgi">Tanlangan ishlar</p>
    <h2>Loyihalar</h2>
    <div class="loyihalar-grid">
      <article class="karta">
        <span>HTML</span><h3>Sayohat sahifasi</h3>
        <p>Semantik tuzilma, jadval va forma ishlatilgan qo'llanma.</p>
        <a href="#">Loyihani ochish</a>
      </article>
      <article class="karta">
        <span>Flexbox</span><h3>Mahsulot kartasi</h3>
        <p>Turli kenglikka moslashadigan sodda savdo komponenti.</p>
        <a href="#">Loyihani ochish</a>
      </article>
      <article class="karta">
        <span>Grid</span><h3>Maqolalar sahifasi</h3>
        <p>Responsive ustunlar va tartibli tipografiyaga ega layout.</p>
        <a href="#">Loyihani ochish</a>
      </article>
    </div>
  </section>

  <section class="konteyner bolim" id="konikmalar">
    <h2>Ko'nikmalar</h2>
    <ul class="konikmalar"><li>Semantik HTML</li><li>Flexbox</li><li>CSS Grid</li><li>Responsive dizayn</li></ul>
  </section>
</main>

<footer id="aloqa">
  <div class="konteyner pastki">
    <p>Yangi loyiha haqida gaplashamiz.</p>
    <a href="mailto:salom@example.com">salom@example.com</a>
  </div>
</footer>
```

```css
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; color: #172033; background: #f8fafc; }
a { color: #3730a3; }
a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.konteyner { width: min(100% - 32px, 1040px); margin-inline: auto; }
.sayt-boshi { padding: 16px 0; background: #fff; border-bottom: 1px solid #dbe2ea; }
.bosh-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { color: #172033; font-size: 1.15rem; font-weight: 800; text-decoration: none; }
nav { display: flex; gap: 16px; flex-wrap: wrap; }
nav a { font-weight: 650; text-decoration: none; }
.kirish { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .7fr); align-items: center; gap: 32px; padding-block: 64px; }
h1 { max-width: 16ch; font-size: clamp(2rem, 6vw, 3.7rem); line-height: 1.05; margin: 8px 0 20px; }
h2 { font-size: 1.65rem; }
.belgi { color: #4338ca; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tugma { display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 8px; background: #3730a3; color: #fff; font-weight: 750; text-decoration: none; }
aside { display: grid; gap: 4px; padding: 22px; border: 1px solid #c7d2fe; border-radius: 12px; background: #eef2ff; }
.bolim { padding-block: 36px; }
.loyihalar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.karta { padding: 20px; border: 1px solid #dbe2ea; border-radius: 12px; background: #fff; }
.karta span { color: #475569; font-size: .8rem; font-weight: 700; }
.karta h3 { margin: 8px 0; }
.konikmalar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.konikmalar li { padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; }
footer { margin-top: 32px; padding: 28px 0; background: #172033; color: #fff; }
.pastki { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: #c7d2fe; }
@media (max-width: 700px) {
  .kirish, .loyihalar-grid { grid-template-columns: 1fr; }
  .kirish { padding-block: 40px; }
}
```

## Sinov tartibi

1. Desktop rejimida uchta karta bir qatorda ekanini tekshiring.
2. Planshet rejimida matn yoki navigatsiya paneldan chiqmasin.
3. Mobil rejimida kirish va kartalar bitta ustunga o'tsin.
4. `Tab` bilan barcha havolalarni aylanib, fokusni ko'ring.
5. Brauzer zoomini 200% qilib, mazmun yo'qolmasligini tekshiring.
6. DevTools orqali bir karta matnini uzaytirib, Grid qanday ishlashini kuzating.

> **Faqat screenshotga qarab baholamang**
>
> Responsive sahifa bitta o'lchamda chiroyli ko'rinishi bilan tugamaydi. Kontent
> uzayganda, zoom oshganda, klaviatura bilan yurganda va tor oynada ham ishlashi
> kerak.

## Mustaqil variant

Rang, matn va loyiha nomlarini to'liq almashtiring. Bitta kartani
`grid-column` bilan kengaytiring, ammo mobil breakpointda uni yana bir ustunga
qaytaring. Natijani CSSni o'chirgan holatda ham o'qib bo'lishini tekshiring.

Keyingi sahifada [CSS cheatsheet](https://learncode.uz/html-css/css-cheatsheet) orqali loyihadagi
asosiy xossalarni tez takrorlaysiz.