6.2-dars: Kurs yakunlari

Kursda nimalarni o'rgandingiz

Keling, bosib o'tgan butun yo'lni eslaylik. Har bir modul — bilimlaringiz poydevoridagi g'ishtdir.

Endi siz nimalarni bilasiz

Bu shunchaki ro'yxat emas — bu sizning haqiqiy ko'nikmalaringiz. Ularni rezyume va portfolioingizda dadil ko'rsatishingiz mumkin:

Endi siz tushunadigan kod namunasi

Ushbu kodga qarang. Kursdan oldin u sehrli belgilardek ko'rinardi. Endi siz har bir qatorni tushunasiz:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening loyiham</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <h1>Mening saytim</h1>
            <nav>
                <a href="/">Bosh sahifa</a>
                <a href="/about">Biz haqimizda</a>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h2>Xush kelibsiz!</h2>
                <p>Bu semantik va moslashuvchan sahifa.</p>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <h2>Bizning afzalliklarimiz</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <h3>Tezlik</h3>
                        <p>Optimallashtirilgan kod</p>
                    </div>
                    <div class="feature-card">
                        <h3>Sifat</h3>
                        <p>Semantik versta</p>
                    </div>
                    <div class="feature-card">
                        <h3>Adaptiv</h3>
                        <p>Barcha ekranlarda ishlaydi</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2026 Barcha huquqlar himoyalangan</p>
        </div>
    </footer>

</body>
</html>

Mana shu sahifaga tegishli CSS. Siz uni oson o'qiysiz va nima bo'layotganini tushunasiz:

/* Stillarni tozalash */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}

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

/* Shapka */
header {
    background: #2d2d2d;
    color: white;
    padding: 16px 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
}

/* Hero bo'limi */
.hero {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-align: center;
    padding: 80px 20px;
}

.hero h2 {
    font-size: 2.5em;
    margin-bottom: 16px;
}

/* Afzalliklar panjarasi */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0;
}

.feature-card {
    background: #f8f8f8;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Adaptiv */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        gap: 12px;
    }
    nav a {
        margin: 0 10px;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .hero {
        padding: 60px 20px;
    }
    .hero h2 {
        font-size: 1.8em;
    }
}

/* Footer */
footer {
    background: #2d2d2d;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

Qancha vaqt sarfladingiz?

Keling, taxminan hisoblab ko'ramiz. Agar siz kursni ketma-ket, darslarni o'tkazib yubormasdan va topshiriqlarni bajarib o'tgan bo'lsangiz:

• 1-modul (HTML asoslari) — ~6–8 soat
• 2-modul (CSS — stillashtirish) — ~8–10 soat
• 3-modul (Flexbox) — ~5–7 soat
• 4-modul (CSS Grid) — ~6–8 soat
• 5-modul (Moslashuvchan versta) — ~5–7 soat
• 6-modul (Amaliyot va xulosa) — ~4–5 soat

Jami: taxminan 35–45 soat sof vaqt. Plyus mustaqil loyihalar, tajribalar, ma'lumot izlash uchun vaqt. Amalda — 50–60 soat zich ish.

Bu ko'pmi? Bu ozmi? Solishtirish uchun: JavaScript'ni boshlang'ich darajada o'rganish uchun taxminan 200–300 soat kerak. Professional frontend-dasturchi bo'lish uchun esa — 2000+ soat.

Siz birinchi, ammo juda muhim bosqichni o'tdingiz. Poydevor qo'yildi.

Minnatdorchilik

Ushbu kursni oxirigacha o'tganingiz uchun rahmat! Ko'pchilik yarim yo'lda tashlab ketadi — charchaydi, chalg'iydi, motivatsiyasini yo'qotadi. Siz finishga yetib keldingiz, bu esa sizda intizom va qat'iyat borligini anglatadi. Bu fazilatlar har qanday texnik ko'nikmadan muhimroq.

Endi sizda quyidagilar uchun hamma narsa bor:

• O'zingizning birinchi portfolio-saytingizni versta qilish
• Do'stingiz yoki tanishingiz uchun lending qilish
• JavaScript'ni o'rganishni boshlash va to'liq huquqli frontend-dasturchi bo'lish
• Hatto junior-verstalshchik sifatida ish topish (ha, bunday vakansiyalar mavjud!)

Keyingi o'rganish uchun havolalar

Kurs tugadi, lekin o'rganish davom etadi. Mana bilimlaringizni chuqurlashtirishga yordam beradigan eng yaxshi resurslar:

📘 MDN Web Docs (Mozilla Developer Network)

Dunyodagi veb-texnologiyalar bo'yicha eng yaxshi hujjatlar. Agar sizda HTML yoki CSS bo'yicha savol tug'ilsa — javob 99% MDN'da bor. Barcha maqolalar tushunarli tilda, kod misollari va interaktiv namoyishlar bilan yozilgan.

developer.mozilla.org

HTML, CSS, JavaScript va boshqa veb-texnologiyalar bo'yicha to'liq hujjatlar. Ruscha versiyasi mavjud.

🎓 HTML Academy

HTML va CSS bo'yicha interaktiv trenajyorlarga ega rossiyalik platforma. Nazariyani amaliyot bilan mustahkamlashning ajoyib usuli. Ko'plab bepul kurslar va topshiriqlar mavjud.

HTML Academy

HTML, CSS, JavaScript bo'yicha interaktiv kurslar. Kodni zudlik bilan tekshiradigan trenajyorlar.

🌍 freeCodeCamp

Dasturlashni o'rganish uchun eng yirik bepul platformalardan biri. Moslashuvchan versta bo'yicha to'liq kurs, uni tugatgach sertifikat olasiz.

freeCodeCamp

Sertifikatli bepul veb-dasturlash kurslari. Minglab soatlik amaliy topshiriqlar.

📹 YouTube-kanallar

Ba'zan yuz marta o'qigandan ko'ra bir marta ko'rgan afzalroq. Mana bir nechta ajoyib kanallar:

• Vladilen Minin — frontend bo'yicha tushunarli darslar
• WebDesign Master — saytlarni noldan versta qilish, ko'p amaliyot
• Frilanser po jizni (Jenya Andrikanich) — real loyihalarni versta qilish
• Traversy Media — ingliz tilidagi kanal, ajoyib darsliklar
• Kevin Powell — CSS'ga chuqur sho'ng'ish

📚 Kitoblar

• «HTML va CSS. Veb-saytlar dizayni va verstasi» — Jon Dakett (yangi boshlovchilar uchun ajoyib kitob)
• «CSS: To'liq ma'lumotnoma» — Erik Meyer (CSS'ni mukammal bilishni istaganlar uchun)
• «CSS haqida yangi katta kitob» — Devid Makfarland

🛠 Amaliyot uchun vositalar

• CodePen (codepen.io) — HTML/CSS/JS uchun onlayn qumloq (sandbox). Kod yozib, natijani darhol ko'rish mumkin. Tajribalar uchun juda mos.
• JSFiddle (jsfiddle.net) — yana bir onlayn qumloq.
• Figma (figma.com) — maketlar bo'yicha versta qilish uchun dizayn vositasi.
• Can I Use (caniuse.com) — brauzerlarda CSS-xususiyatlar qo'llab-quvvatlanishini tekshirish.
• Google PageSpeed Insights — sayt yuklanish tezligini tekshirish.
• W3C Validator — W3C konsorsiumining HTML validatori.

Keyin nima?

Bu kurs — faqat boshlanish. Keyingi darsda (6.3) biz qayerga siljish kerakligi va HTML hamda CSS'dan keyin qaysi texnologiyalarni o'rganish haqida gaplashamiz. Ammo siz hozirdanoq yo'nalishlardan birini tanlashingiz mumkin:

• CSS'ga chuqurroq kirish — animatsiyalar, transformatsiyalar, prepretsessorlar (Sass)ni o'rganish
• JavaScript'ni boshlash — sahifalarga interaktivlik qo'shish uchun
• Freymvorkni sinab ko'rish — versta qilishni tezlashtirish uchun Tailwind CSS, Bootstrap
• Dizayn bilan shug'ullanish — Figma, rang sxemalari, tipografikani o'rganish

Qanday yo'lni tanlamang — sizda allaqachon mustahkam baza bor. Siz shunchaki «teglarni bilasiz» emas — siz veb qanday ishlashini tushunasiz. Bu — qolgan hamma narsa quriladigan poydevordir.

---