DarslarWeb dasturlash

Amaliyot — Responsive portfolio

Media query'lar, grid, flex, responsive typography va dark mode — hammasini birlashtirib to'liq portfolio sayt quramiz.

90 daqiqa

CSS Advanced — Dars 18

Responsive amaliyot

Bugun siz qurgan sayt — har qanday qurilmada, har qanday temada chiroyli ko'rinadi.

portfolioresponsivedark modeship it

Bugun quramiz

5 ta mavzu

01Nima o'rgandik — qisqa xarita
02Mashq 1 — Responsive Gallery
03Mashq 2 — Stats dashboard
04Mashq 3 — Portfolio (final)
05Yakuniy test

Qisqa takrorlash

@media query

min-width, max-width bilan qoidalarni ekranga bog'lash.

Mobile-first

Default CSS — telefon; min-width bilan qo'shimcha qilish.

Nisbiy birliklar

%, em, rem, vw, vh va clamp().

Auto grid

repeat(auto-fit, minmax(...)) — @media siz responsive.

Dark mode

CSS o'zgaruvchilari + prefers-color-scheme.

Responsive media

max-width: 100%, object-fit: cover.

Mashq 1 — Responsive Gallery

Rasmlar galereyasi: mobile'da 1 ustun, tablet'da 2, noutbukda 3, katta ekranda 4. Hover bo'lganda rasm biroz kattalashadi.

Gallery — qolip

HTML

<h1>Mening ishlarim</h1>

Natijajonli

Mashq 2 — Stats dashboard

4 ta raqamli statistika va progressbarlar. Mobile'da 1 ustun, tablet'da 2, desktop'da 4 ustun.

Stats dashboard — qolip

HTML

@media (prefers-color-scheme: dark) {
    body { background: #0f172a; color: #f1f5f9; }
    .stat { background: #1e293b; }
    .bar { background: #334155; }
  }
</style>

<h1>Statistika</h1>

<div class="stats">
  <div class="stat s1">
    <div class="label">Loyihalar</div>
    <div class="num">24</div>
    <div class="bar"><i style="width: 80%"></i></div>
  </div>
  <div class="stat s2">
    <div class="label">Mijozlar</div>
    <div class="num">17</div>
    <div class="bar"><i style="width: 65%"></i></div>
  </div>
  <div class="stat s3">
    <div class="label">Tajriba</div>
    <div class="num">3 yil</div>
    <div class="bar"><i style="width: 45%"></i></div>
  </div>
  <div class="stat s4">
    <div class="label">Reyting</div>
    <div class="num">4.9</div>
    <div class="bar"><i style="width: 96%"></i></div>
  </div>
</div>

Natijajonli

Mashq 3 — To'liq portfolio sayt

Eng katta topshiriq. To'liq responsive + dark mode portfolio: hero, xizmatlar, portfolio grid, aloqa formasi, footer.

Portfolio — final qolip

HTML

body {
    font-family: sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
  }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header */
  header {
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 10;
  }
  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
  }
  .logo { font-weight: 800; font-size: 18px; }
  nav {
    display: flex;
    gap: 18px;
  }
  nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
  }
  nav a:hover { color: var(--text); }

@media (max-width: 560px) {
    nav { display: none; }
  }

/* Hero */
  .hero {
    padding: clamp(48px, 10vw, 120px) 0;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(32px, 6vw, 64px);
    line-height: 1.1;
    margin-bottom: 16px;
    font-weight: 800;
  }
  .hero p {
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 24px;
    font-size: clamp(14px, 2vw, 18px);
  }
  .btn {
    display: inline-block;
    padding: 14px 28px;
    background: var(--brand);
    color: var(--bg);
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
  }
  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.2);
  }

/* Sections */
  section { padding: 60px 0; border-top: 1px solid var(--border); }
  section h2 {
    font-size: clamp(24px, 4vw, 36px);
    margin-bottom: 24px;
    text-align: center;
  }

/* Services */
  .services {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .service {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 22px;
    border-radius: 14px;
    transition: all 0.3s;
  }
  .service:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
  }
  .service .ik {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--brand);
    color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    margin-bottom: 12px;
  }

/* Works */
  .works {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .work {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
  .work img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .work:hover img { transform: scale(1.08); }

/* Contact */
  form {
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
  }
  input, textarea {
    background: var(--card);
    color: var(--text);
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
  }
  button {
    padding: 14px;
    background: var(--brand);
    color: var(--bg);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
  }

footer {
    padding: 24px 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--border);
  }
</style>

<header>
  <div class="wrap bar">
    <div class="logo">Ali.dev</div>
    <nav>
      <a href="#services">Xizmatlar</a>
      <a href="#works">Portfolio</a>
      <a href="#contact">Aloqa</a>
    </nav>
  </div>
</header>

<section class="hero">
  <div class="wrap">
    <h1>Chiroyli saytlar yasayman</h1>
    <p>Frontend dasturchi. HTML, CSS va JavaScript'da har qanday qurilmada chiroyli ishlaydigan saytlar quraman.</p>
    <a href="#contact" class="btn">Buyurtma berish</a>
  </div>
</section>

<section id="services">
  <div class="wrap">
    <h2>Xizmatlarim</h2>
    <div class="services">
      <article class="service">
        <div class="ik">L</div>
        <h3>Landing Page</h3>
        <p>Tezkor va konvertatsiya beradigan bir sahifali saytlar.</p>
      </article>
      <article class="service">
        <div class="ik">D</div>
        <h3>Dashboard</h3>
        <p>Ma'lumotlarni qulay ko'rsatuvchi admin paneller.</p>
      </article>
      <article class="service">
        <div class="ik">E</div>
        <h3>E-commerce</h3>
        <p>Telefon va kompyuterda ideal ishlaydigan onlayn do'konlar.</p>
      </article>
    </div>
  </div>
</section>

<section id="works">
  <div class="wrap">
    <h2>Portfolio</h2>
    <div class="works">
      <div class="work"><img src="https://picsum.photos/seed/w1/500/400" alt=""></div>
      <div class="work"><img src="https://picsum.photos/seed/w2/500/400" alt=""></div>
      <div class="work"><img src="https://picsum.photos/seed/w3/500/400" alt=""></div>
      <div class="work"><img src="https://picsum.photos/seed/w4/500/400" alt=""></div>
    </div>
  </div>
</section>

<section id="contact">
  <div class="wrap">
    <h2>Aloqa</h2>
    <form>
      <input type="text" placeholder="Ismingiz" required>
      <input type="email" placeholder="Email" required>
      <textarea rows="4" placeholder="Loyiha haqida qisqacha"></textarea>
      <button type="submit">Yuborish</button>
    </form>
  </div>
</section>

Natijajonli

Yakuniy test

0 / 5

1.Eng toza responsive grid retsepti?

2.Dark mode'ni oson qilishning yo'li?

3.clamp(16px, 2vw, 22px) — nima qiladi?

4.Rasm nisbati buzilmasdan quti to'ldirsin — nima beramiz?

5.Mobile-first degani?

Yakuniy mustaqil ish

0 / 8

Keyingi qadam

JavaScript — Kirish

Saytingizga mantiq va interaktivlik qo'shamiz. Tugmalar ishlay boshlaydi, formalar jonlanadi.

Yoki oldin

TailwindCSS bilan tezlashuv

Siz bilgan barcha CSS shu yerda klass sifatida bor. Sayt yozish 3-4 baravar tezroq bo'ladi.