CSS amaliy loyiha — responsive portfolio

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:

* {
  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:

.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 gapi bilan boshqariladi.

4-qadam: interaktiv holatlar

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

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:

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

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

Tayyor loyiha va jonli natija

Kod
<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>

<style>
* { 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; }
}
</style>
Natija

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.

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 orqali loyihadagi asosiy xossalarni tez takrorlaysiz.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi