DarslarWeb dasturlash

Amaliyot — CSS bilimlarini mustahkamlash

15 ta darsda o'rganilgan barcha bilimni 3 ta haqiqiy mini-loyihada amalda sinab ko'ramiz.

90 daqiqa

CSS Advanced — Dars 15

Amaliyot darsi

Endi bilim yetarli. Bugun biz uchta haqiqiy loyiha bilan bilimni qo'llamizga «biriktiramiz».

practiceprojectportfolioship

Bugungi loyihalar

5 ta mavzu

01Nimani takrorlaymiz — xaritasini ko'rish
02Loyiha 1 — Profil karta
03Loyiha 2 — Narx kartalari (pricing)
04Loyiha 3 — Shaxsiy Landing Page
05Yakuniy test

Nimani takrorlaymiz?

Ranglar & matn

color, font-family, Google Fonts, text-shadow.

Box model

margin, padding, border, border-radius.

Joylashuv

Flexbox, Grid, position, float.

Effektlar

box-shadow, gradient, transform, transition.

Animatsiya

@keyframes, animation, hover.

Semantik HTML

header, main, article, section, aside.

Loyiha 1 — Profil karta

Avatar, ism, kasb, 3 ta tugma va ijtimoiy tarmoq iconkalaridan iborat chiroyli karta. Flexbox + shadow + hover.

Profil karta — qolip

HTML

<div class="karta">
  <div class="avatar">A</div>
  <h2>Ali Valiyev</h2>
  <p class="kasb">Frontend dasturchi</p>
  <div class="tugmalar">
    <button class="btn birlamchi">Yozish</button>
    <button class="btn ikki">Kuzatish</button>
  </div>
</div>

Natijajonli

Loyiha 2 — Narx kartalari

3 ta tarif (pricing) kartasi — eng mashhur «middle» tarif ko'tarilgan. Grid + shadow + hover.

Pricing bo'limi — qolip

HTML

.pro {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
    transform: translateY(-10px);
  }
  .pro h3, .pro .narx { color: white; }
  .pro li { color: #cbd5e1; border-color: rgba(255,255,255,0.1); }
  .pro .btn { background: #fbbf24; color: #0f172a; }
  .pro .btn:hover { background: white; }
  .yorliq {
    background: #fbbf24;
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
  }
</style>

<h1>Tariflarimiz</h1>

<div class="wrap">
  <div class="tarif">
    <h3>Oddiy</h3>
    <div class="narx">$9 <small>/oy</small></div>
    <ul>
      <li>5 ta loyiha</li>
      <li>Asosiy qo'llab-quvvatlash</li>
      <li>1 GB xotira</li>
    </ul>
    <button class="btn">Tanlash</button>
  </div>

<div class="tarif pro">
    <span class="yorliq">ENG MASHHUR</span>
    <h3>Pro</h3>
    <div class="narx">$29 <small>/oy</small></div>
    <ul>
      <li>Cheksiz loyiha</li>
      <li>24/7 qo'llab-quvvatlash</li>
      <li>50 GB xotira</li>
      <li>Maxsus shablonlar</li>
    </ul>
    <button class="btn">Tanlash</button>
  </div>

<div class="tarif">
    <h3>Team</h3>
    <div class="narx">$79 <small>/oy</small></div>
    <ul>
      <li>Hamma narsa Pro'da</li>
      <li>10 ta foydalanuvchi</li>
      <li>200 GB xotira</li>
    </ul>
    <button class="btn">Tanlash</button>
  </div>
</div>

Natijajonli

Loyiha 3 — Shaxsiy Landing Page

Eng katta topshiriq: o'zingiz haqingizdagi bitta sahifalik sayt. Semantik HTML5 + gradient hero + 3 ustunli grid + animatsiya + forma.

Landing Page — to'liq qolip

HTML

/* Header */
  header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    z-index: 10;
  }
  .logo { font-weight: 800; font-size: 18px; }
  nav a {
    color: #475569;
    text-decoration: none;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  nav a:hover { color: #0f172a; }

/* Hero */
  .hero {
    background: linear-gradient(135deg, #0f172a, #334155);
    color: white;
    padding: 80px 24px;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    margin: 0 0 16px;
    font-weight: 800;
  }
  .hero p {
    color: #cbd5e1;
    max-width: 560px;
    margin: 0 auto 28px;
  }
  .btn {
    display: inline-block;
    padding: 14px 28px;
    background: #fbbf24;
    color: #0f172a;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
  }
  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(251, 191, 36, 0.4);
  }

/* Features */
  section.features {
    padding: 60px 24px;
    max-width: 1000px;
    margin: 0 auto;
  }
  section.features h2 {
    text-align: center;
    font-size: 32px;
    margin: 0 0 40px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }
  .card {
    padding: 24px;
    border-radius: 16px;
    background: white;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
    border-color: #0f172a;
  }
  .card .ikon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0f172a;
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 14px;
  }

/* Contact */
  section.contact {
    background: #f8fafc;
    padding: 60px 24px;
  }
  form {
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
  }
  input, textarea {
    padding: 12px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    font-size: 14px;
    font-family: inherit;
  }
  input:focus, textarea:focus {
    outline: none;
    border-color: #0f172a;
  }
  button[type="submit"] {
    padding: 14px;
    background: #0f172a;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
  }
  button[type="submit"]:hover { background: #fbbf24; color: #0f172a; }

footer {
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    border-top: 1px solid #e2e8f0;
  }
</style>

<header>
  <div class="logo">Ali.dev</div>
  <nav>
    <a href="#features">Xizmatlar</a>
    <a href="#contact">Aloqa</a>
  </nav>
</header>

<section class="hero">
  <h1>Salom, men Ali</h1>
  <p>Men frontend dasturchiman. Tez, chiroyli va qulay web saytlar yarataman.</p>
  <a href="#contact" class="btn">Bog'lanish</a>
</section>

<section class="features" id="features">
  <h2>Nimalar qila olaman?</h2>
  <div class="grid">
    <article class="card">
      <div class="ikon">H</div>
      <h3>HTML + CSS</h3>
      <p>Semantik, tez va qulay saytlar yozaman.</p>
    </article>
    <article class="card">
      <div class="ikon">JS</div>
      <h3>JavaScript</h3>
      <p>Sahifani jonlantiradigan interaktivlik.</p>
    </article>
    <article class="card">
      <div class="ikon">R</div>
      <h3>React</h3>
      <p>Zamonaviy katta web ilovalar.</p>
    </article>
  </div>
</section>

<section class="contact" id="contact">
  <h2 style="text-align:center; margin:0 0 28px">Yozib qoldiring</h2>
  <form>
    <input type="text" placeholder="Ismingiz" required>
    <input type="email" placeholder="Email" required>
    <textarea rows="4" placeholder="Xabaringiz"></textarea>
    <button type="submit">Yuborish</button>
  </form>
</section>

Natijajonli

Yakuniy test

0 / 6

1.Saytni sarlavha + menyu qismi uchun qaysi teg to'g'ri?

2.Elementni tekis o'rtaga olib chiqadigan eng zamonaviy usul?

3.Responsiv grid uchun sehrli qator?

4.Tugmaga silliq hover animatsiya berish uchun qaysi xususiyat kerak?

5.Google Fonts'ni ulashning eng tez usuli?

6.Saytga chuqurlik (soya) berish uchun nima ishlatamiz?

Yakuniy mustaqil ish

0 / 7

Keyingi bosqich

TailwindCSS

CSS'ni tezroq va zamonaviy yozish usuli. Siz o'rgangan hamma narsa shu yerda klass sifatida bor.

Portfolio uchun

Vercel — saytingizni 30 soniyada joylang

GitHub'dagi saytni bir tugma bosib internetga chiqaring. Bepul va eng tezi.