6.3-dars: Keyingi Roadmap

Tabriklayman, siz finishdasiz!

Siz HTML va CSS bo'yicha to'liq kursni tugatdingiz. Endi sizda mustahkam baza bor. Ammo veb-dasturlash — bu ulkan olam, va oldinda hali ko'p qiziqarli narsalar bor. Bu dars — sizga qayerga siljish mumkinligini ko'rsatadigan xarita.

Hammasini birdaniga o'rganishga urinmang. Bitta yo'nalishni tanlang va unga izchil harakatlaning. Beshtasini yuzaki bilgandan ko'ra, bittasini chuqur bilgan afzalroq.

JavaScript — sahifaga jon kiritamiz

HTML/CSS'dan keyingi birinchi va eng mantiqiy qadam — bu JavaScript. Agar HTML — skelet, CSS — kiyim bo'lsa, JavaScript — bu mushaklardir. U sahifani harakatga keltiradi, foydalanuvchi harakatlariga javob beradi, server bilan muloqot qiladi.

Mana sahifaga jon kirituvchi oddiy JavaScript-kod qanday ko'rinishi. HTML/CSS'dan keyin siz razmetkani allaqachon tushunasiz — mantiq qo'shish qoldi:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript — birinchi qadam</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 0 20px;
            text-align: center;
        }
        button {
            background: #ea580c;
            color: white;
            border: none;
            padding: 12px 28px;
            font-size: 1.1em;
            border-radius: 8px;
            cursor: pointer;
            margin: 12px;
        }
        button:hover {
            background: #c2410c;
        }
        .counter {
            font-size: 4em;
            font-weight: 800;
            color: #fb923c;
            margin: 20px 0;
        }
    </style>
</head>
<body>

    <h1>Salom, JavaScript!</h1>
    <p id="message">Bu matnni o'zgartirish uchun tugmani bosing</p>
    <button onclick="changeText()">Matnni o'zgartirish</button>

    <hr>

    <h2>Bosishlar sanog'ichi</h2>
    <div class="counter" id="counter">0</div>
    <button onclick="increment()">+1</button>
    <button onclick="resetCounter()">Qayta boshlash</button>

    <script>
        // Matnni o'zgartirish uchun funksiya
        function changeText() {
            const message = document.getElementById('message');
            const texts = [
                'Siz tugmani bosdingiz!',
                'JavaScript ishlayapti!',
                'Barakalla, davom eting!',
                'CSS chiroyli qildi, JS — aqlli!'
            ];
            const randomIndex = Math.floor(Math.random() * texts.length);
            message.textContent = texts[randomIndex];
            message.style.color = '#22c55e';
        }

        // Sanog'ich
        let count = 0;

        function increment() {
            count++;
            document.getElementById('counter').textContent = count;
        }

        function resetCounter() {
            count = 0;
            document.getElementById('counter').textContent = count;
        }
    </script>

</body>
</html>

Bu yerda nima sodir bo'lyapti?

• document.getElementById — sahifadagi elementni uning id'si bo'yicha topamiz
• textContent — element ichidagi matnni o'zgartiramiz
• onclick — bosish uchun ishlov beruvchi (o'rnatilgan, keyinroq siz addEventListener'dan foydalanishni o'rganasiz)
• Math.random() — tasodifiy son generatsiya qilamiz

Bu faqat aysbergning uchi. JavaScript yordamida siz quyidagilarni qila olasiz:

• Ochiladigan menyular, akkordeonlar, tablar, modal oynalar yaratish
• Formalarni yuborishdan oldin validatsiya qilish
• Sahifani qayta yuklamasdan serverdan ma'lumot yuklash (AJAX, fetch)
• Canvas yordamida animatsiya va o'yinlar chizish
• To'liq huquqli veb-ilovalar yaratish

Zamonaviy konstruksiyalar misoli:

// Strelka funksiyalar
const greet = (name) => `Salom, ${name}!`;

// Destrukturizatsiya
const user = { name: 'Anna', age: 25 };
const { name, age } = user;

// Spread-operator
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

// Shablon satrlar (siz ularni allaqachon ko'rgansiz)
const message = `Foydalanuvchi ${name}, yoshi: ${age}`;

// Async/await
async function loadUsers() {
    const response = await fetch('/api/users');
    const users = await response.json();
    return users;
}

React / Vue — zamonaviy freymvorklar

Sof JavaScript'ni o'zlashtirgandan so'ng, freymvorkni o'rganish vaqti keldi. Bu murakkab foydalanuvchi interfeyslarini yaratishni osonlashtiradigan kutubxona.

React

React — interfeyslar yaratish uchun eng mashhur kutubxona. Facebook tomonidan ishlab chiqilgan, millionlab saytlarda ishlatiladi. React komponentlar kontseptsiyasiga asoslangan — bu qayta ishlatiladigan interfeys bo'laklari bo'lib, ularning har biri sahifaning o'z qismiga javob beradi.

// React-komponent misoli
function Greeting({ name }) {
    return (
        <div className="greeting">
            <h1>Salom, {name}!</h1>
            <p>React olamiga xush kelibsiz.</p>
        </div>
    );
}

// Foydalanish
<Greeting name="Anna" />

Nega aynan React?

• Ulkan hamjamiyat va ekotizim
• Ko'plab vakansiyalar — React'ni hamma biladi
• React Native — mobil ilovalar yaratish mumkin
• Next.js — to'liq huquqli saytlar uchun React asosidagi freymvork

Vue

Vue — mashhurlik bo'yicha ikkinchi o'rindagi freymvork. U React'dan kirishga osonroq va yangi boshlovchilar uchun juda mos. Google'ning sobiq xodimi Evan Yu tomonidan ishlab chiqilgan.

<!-- Vue-komponent misoli -->
<template>
    <div class="greeting">
        <h1>Salom, {{ name }}!</h1>
        <p>Vue olamiga xush kelibsiz.</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: 'Anna'
        }
    }
}
</script>

Nega aynan Vue?

• Yumshoq kirish chegarasi — HTML'ning o'zida, Vue'ni CDN orqali qo'shib boshlash mumkin
• Ajoyib hujjatlar (rus tilida ham mavjud)
• Moslashuvchanlik — oddiy sahifalardan murakkab SPA'largacha
• Nuxt.js — Vue uchun Next.js analogi

Tailwind CSS — utility-first CSS

Tailwind CSS — bu Bootstrap kabi navbatdagi freymvork emas. Bu CSS yozishga boshqacha yondashuv: utility-first. Maxsus klasslar yozib, nomlarni uzoq o'ylab topish o'rniga, siz tayyor utilitar klasslardan to'g'ridan-to'g'ri HTML'da foydalanasiz.

Mahsulot kartochkasi misolida yondashuvlarni solishtiring:

Oddiy CSS:

<!-- HTML -->
<div class="product-card">
    <img class="product-image" src="phone.jpg" alt="Telefon">
    <h3 class="product-title">Smartfon XYZ</h3>
    <p class="product-price">29 990 ₽</p>
    <button class="product-btn">Sotib olish</button>
</div>

/* CSS */
.product-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.product-image {
    width: 100%;
    border-radius: 8px;
}
.product-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #1a1a2e;
}
.product-price {
    font-size: 1.5em;
    color: #ea580c;
    font-weight: 700;
}
.product-btn {
    background: #ea580c;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

Tailwind CSS bilan:

<div class="bg-white rounded-xl p-4 shadow-md">
    <img class="w-full rounded-lg" src="phone.jpg" alt="Telefon">
    <h3 class="text-lg font-semibold text-gray-900 mt-3">Smartfon XYZ</h3>
    <p class="text-2xl font-bold text-orange-600 mt-1">29 990 ₽</p>
    <button class="bg-orange-600 text-white px-5 py-2 rounded-lg mt-3 hover:bg-orange-700">
        Sotib olish
    </button>
</div>

Tailwind'ning afzalliklari nimada?

• Ishlab chiqish tezligi — HTML va CSS orasida almashish shart emas, klass nomlarini o'ylab topish shart emas
• Bir xillik — barcha bo'shliqlar, ranglar, shriftlar konfiguratsiyada belgilangan, "har xillik" yo'q
• Kichik CSS — Tailwind ishlatilmagan klasslarni kesib tashlaydi (PurgeCSS), yakuniy fayl minimal bo'ladi
• Moslashuvchanlik — adaptiv to'g'ridan-to'g'ri klasslarda qilinadi: md:flex, lg:text-2xl
• Qorong'i mavzu — dark:bg-gray-900

Tailwind ko'pincha React/Vue bilan birga ishlatiladi — bu zamonaviy frontend-dasturlashning standartidir. Yirik kompaniyalar (GitHub, Netflix, OpenAI) o'z loyihalarida Tailwind'dan foydalanadi.

Git — versiyalarni nazorat qilish tizimi

Git — bu kodingiz o'zgarishlari tarixini saqlaydigan vosita. Tasavvur qiling, siz kitob yozyapsiz va har kuni ertalab yangi versiyani saqlaysiz. Agar biror narsa noto'g'ri ketsa, siz har doim istalgan oldingi versiyaga qaytishingiz mumkin.

Git — dasturlashdagi standart. Usiz birorta ham jiddiy loyiha ishlamaydi. Mana bilishingiz kerak bo'lgan asosiy buyruqlar:

# Loyihani kuzatishni boshlash
git init

# Fayllarni «indeks»ga qo'shish
git add index.html style.css
# Yoki barcha fayllar
git add .

# O'zgarishlarni saqlash (commit yaratish)
git commit -m "Bosh sahifani qo'shdim"

# Tarixni ko'rish
git log --oneline

# Nima o'zgarganini ko'rish
git status
git diff

# Oldingi versiyaga qaytish
git checkout <commit-xeshi>

# Yangi tarmoq (branch) yaratish
git branch feature-header

# Tarmoqqa o'tish
git checkout feature-header

# Tarmoqni asosiy tarmoqqa birlashtirish
git checkout main
git merge feature-header

Lokal Git'dan keyin sizga GitHub (yoki GitLab, Bitbucket) kerak bo'ladi — repozitoriylarni saqlash uchun bulutli xizmat. Bu — loyihalaringiz portfoliosi, ish beruvchilar uchun ko'rgazma.

Quyidagilarni o'rganing:

• GitHub'da repozitoriy yaratish
• Kodni pushlash (yuklash): git push
• Kodni pull qilish (yuklab olish): git pull
• Pull request (PR) bilan ishlash — boshqalarning loyihalariga o'zgarish taklif qilish
• GitHub Pages'ni sozlash — statik saytlar uchun bepul hosting

O'z yo'lingizni qanday tanlash kerak?

Veb-dasturlash — bu bitta kasb emas, balki butun bir kasblar oilasi. Keling, o'zingizga mosini tanlashingiz uchun asosiy yo'nalishlarni ko'rib chiqamiz.

6 oylik taxminiy o'quv rejasi

Sizda aniq mo'ljal bo'lishi uchun, mana o'qishni qanday davom ettirish bo'yicha taxminiy reja:

Keyingi o'rganish uchun resurslar

📖 JavaScript

learn.javascript.ru / JavaScript.ru

Zamonaviy JavaScript darsligi. Asoslardan ilg'or mavzulargacha to'liq kurs. Rus tilidagi eng yaxshi resurslardan biri.

JavaScript bo'yicha qo'shimcha resurslar:

• The Odin Project (theodinproject.com) — fullstack-dasturlash bo'yicha bepul to'liq kurs
• freeCodeCamp (freecodecamp.org) — JavaScript Algorithms and Data Structures
• Codewars (codewars.com) — amaliyot uchun JavaScript masalalari

⚛️ React

reactdev.ru

Reactning ruscha hujjatlari. Boshlash uchun kerak bo'lgan hamma narsa: komponentlar, huklar, routing, holat.

Qo'shimcha resurslar:

• react-tutorial.app — interaktiv React darsligi
• React Docs (Beta) — yangi rasmiy hujjatlar (react.dev)

🎨 CSS/Tailwind

tailwindcss.com

Tailwind'ning rasmiy hujjatlari. Juda tushunarli, jonli misollar bilan.

CSS bo'yicha qo'shimcha resurslar:

• CSS-Tricks (css-tricks.com) — CSS bo'yicha ingliz tilidagi eng yaxshi bloglardan biri
• codepen.io — millionlab kod misollari, ko'rib chiqish va tajriba qilish mumkin
• web.dev — Google'ning zamonaviy CSS bo'yicha maqolalari

🗺 Roadmaps

roadmap.sh

Barcha yo'nalishlar uchun interaktiv yo'l xaritalari: frontend, backend, DevOps. O'tilgan mavzularni belgilang va o'z yo'lingizni quring.

Front-End Developer Handbook

Frontend-dasturlash bo'yicha katta qo'llanma: texnologiyalar, vositalar, ish qanday qidirish kerak.

📹 Rus tilidagi YouTube-kanallar

• Vladilen Minin — React, TypeScript, Node.js bo'yicha ajoyib kurslar
• AyTi Boroda — IT olamidagi yangiliklar, karyera bo'yicha maslahatlar
• Anton Larichev — JavaScript va React bo'yicha kurs
• Timofey Xilchuk — versta va frontend-dasturlash

📚 Davom etish uchun kitoblar

• «Ifodali JavaScript» — Marein Xaverbeke (eloquentjavascript.net'da bepul)
• «Bolalar uchun JavaScript» — Nik Morgan (ha, nomi aldamchi, lekin kitob ajoyib)
• «Siz JS'ni bilmaysiz» — Kayl Simpson (JS'ni chuqur tushunish uchun kitoblar seriyasi)
• «React'ni o'rganamiz» — Aleks Benks, Eva Porchello

Yakunida: nasihat

Siz ushbu kursni boshidan oxirigacha o'tdingiz. Bu jiddiy yutuq. Veb-dasturlashni o'rganishni boshlagan har bir kishi ham finishga yetib bormaydi.

Mana esda tutish muhim bo'lgan narsalar:

• Amaliyot nazariyadan muhimroq. Hammasini o'rganishga urinmang — qilishni boshlang. O'z loyihangiz, hatto kichkina bo'lsa ham — bu eng yaxshi darslik.
• Xatolar — bu normal. Kod ishlamayaptimi? Ajoyib, hozir siz yangi narsa bilib olasiz. Hamma xato qiladi — junior'lardan tortib 10 yillik tajribaga ega tim-lidlargacha.
• Google — eng yaxshi do'stingiz. Professional dasturchilar kuniga o'nlab marta google'laydi. Hammasini boshda saqlash shart emas — javobni qanday topishni bilish kerak.
• O'zingizni boshqalar bilan solishtirmang. Har kim o'z yo'lini bosib o'tadi. Kimdir JS'ni bir oyda o'rganadi, kimdir — bir yilda. Bu poyga emas.
• Har kuni kod yozing. Kamida 30 daqiqa. Muntazamlik intensivlikdan muhimroq.

---