Frontend dasturlashni noldan o'rganish: boshlovchilar uchun to'liq yo'l xaritasi (2026)


Qisqa javob: Frontend dasturlash — bu saytlar va ilovalarning siz ko'radigan qismini (tugmalar, menyular, sahifalar) yaratish. Uni noldan o'rganish uchun avval HTML (sahifa tuzilmasi), keyin CSS (ko'rinish), keyin JavaScript (harakat), keyin React (zamonaviy ilovalar) o'rganiladi. Ushbu maqoladagi reja bo'yicha, kuniga 1,5–2 soat muntazam shug'ullanganda, birinchi ishga tayyor darajaga taxminan 8–9 oyda chiqiladi. Bu maqola hech narsa bilmaydigan odam uchun yozilgan: oldingi bilim talab qilinmaydi.
Frontend dasturlashni noldan o'rganish yo'l xaritasi 2026 — HTML, CSS, JavaScript, React bosqichlari
Rasm: yo'l xaritasining 8 qadami bir ko'rinishda.
1. Bu maqola kim uchun
Agar siz:
- hech qachon kod yozmagan bo'lsangiz,
- "HTML", "JavaScript" so'zlarini eshitgan-u, nima ekanini bilmasangiz,
- dasturlashga qiziqasiz, lekin qayerdan boshlashni bilmasangiz,
- yoki boshlab ko'rib, birinchi qiyinchilikda to'xtab qolgan bo'lsangiz —
bu maqola siz uchun. Bu yerda "har kim biladigan" narsalar ham tushuntiriladi. Hech qanday atama izohsiz qoldirilmaydi.
Agar siz allaqachon JavaScript yozasiz, bu maqola siz uchun sekin bo'ladi — u faqat noldan birinchi ishgacha bo'lgan yo'lni qamrab oladi.
2. Frontend nima? Sahna va sahna orqasi
Teatrga bordingiz. Siz nimani ko'rasiz? Sahna, aktyorlar, dekoratsiya, chiroqlar. Nimani ko'rmaysiz? Sahna orqasidagi rejissyor, kostyumlar bo'limi, chiroqlarni boshqaradigan odam, ssenariy.
Har qanday sayt yoki ilova ham shunday ikki qismdan iborat:
- Frontend — sahna. Siz ko'radigan va bosadigan hamma narsa: tugmalar, rasmlar, matnlar, menyular, formalar.
- Backend — sahna orqasi. Ma'lumotlar saqlanadigan va hisoblanadigan, siz ko'rmaydigan qism.
Telegram'ni ochganingizda chatlar ro'yxati, xabar yozish maydoni, "yuborish" tugmasi — frontend. Xabaringiz do'stingizga yetib borishi — backend.
Frontend dasturchi — "sahna"ni yasaydigan odam. U dizayner chizgan rasmni haqiqiy, ishlaydigan sahifaga aylantiradi.
Buning uchun u uchta "til"dan foydalanadi. Ularni uy qurish bilan solishtiring:
| Til | Vazifasi | Uy misolida |
|---|---|---|
| HTML | Sahifada nima bor: sarlavha, matn, rasm, tugma | Devorlar, xonalar, eshiklar |
| CSS | Bu narsalar qanday ko'rinadi: rang, o'lcham, joylashuv | Bo'yoq, mebel, pardalar |
| JavaScript | Tugma bosilganda nima bo'ladi | Elektr: tugma bossangiz chiroq yonadi |
Hozircha shuni eslab qoling: HTML — nima bor, CSS — qanday ko'rinadi, JavaScript — nima qiladi. Butun frontend shu uchta narsaning ustiga quriladi.
Agar umuman "dasturlash" nima va u sizga hayotda nima berishi haqida tasavvur hali yo'q bo'lsa, avval dasturlash nima va u sizga nima beradi maqolasini o'qing — ko'p savolingiz yo'qoladi.
3. Frontend dasturchi aslida nima qiladi
Ko'pchilik dasturchini "kun bo'yi qorong'i xonada kod yozadigan odam" deb tasavvur qiladi. Haqiqat boshqacha. Oddiy ish kuni:
Ertalab. Jamoa bilan 10 daqiqalik gaplashuv: kecha nima qildim, bugun nima qilaman.
Kunduzi. Dizayner Figma degan dasturda "buyurtmalar sahifasi" chizib bergan. Siz uni kodga aylantirasiz: sahifa telefonda ham, kompyuterda ham chiroyli ko'rinishi, tugmalar ishlashi, ro'yxat serverdan kelishi kerak.
Kunning bir qismi. Kimdir yozgan: "iPhone'da tugma ko'rinmayapti". Siz sababini topib tuzatasiz.
Yana bir qismi. Hamkasbingizning kodini o'qib, fikr bildirasiz. Sizning kodingizni ham o'qishadi.
Ko'rdingizmi — bu ishning katta qismi "muammoni tushunish" va "odamlar bilan gaplashish". Shuning uchun frontend dasturchi bo'lish uchun "daho" bo'lish shart emas. Sabr va muntazamlik kerak.
4. Sizga nima kerak — va nimasiz ham boshlash mumkin
Boshlash uchun shart
Oddiy kompyuter. Har qanday noutbuk. O'yin kompyuteri kerak emas. 4 GB xotira bilan ham boshlash mumkin, 8 GB bo'lsa qulayroq.
Internet. Darsliklar, videolar, dasturlarni yuklash uchun.
Kuniga 1,5–2 soat. Har kuni. Haftada bir marta 10 soat emas — har kuni 1,5 soat. Miya takrorlash bilan o'rganadi.
Bo'lsa — katta ustunlik, bo'lmasa — yo'lda o'rganasiz
Quyidagilar boshlash uchun shart emas. Lekin ularni bilgan odam ancha tez va ancha chuqur o'rganadi. Shuning uchun "menda yo'q" deb to'xtamang, "yo'lda qo'shib boraman" deb boshlang.
Ingliz tili. Boshlash uchun kerak emas — birinchi oylarda o'zbek va rus tilidagi materiallar yetadi. Lekin dunyodagi eng yaxshi darsliklar, rasmiy hujjatlar, xato xabarlari va dasturchilar savol-javob qiladigan saytlar — inglizcha. Inglizcha o'qiy oladigan odam muammoning javobini to'g'ridan-to'g'ri birinchi manbadan topadi; o'qiy olmaydigan odam tarjimaga yoki boshqalarga bog'liq bo'lib qoladi. Shuning uchun 2–3 oydan keyin inglizchani (avvalo o'qishni) parallel boshlang. Bu — o'sishingizni eng ko'p tezlashtiradigan narsa.
Matematika. Frontend uchun oliy matematika shart emas: qo'shish, ayirish, foiz bilan boshlash mumkin. Lekin matematika bilan yaxshi bo'lgan odamning mantiqiy fikrlashi rivojlangan bo'ladi — u shartlar, sikllar va algoritmlarni tezroq tushunadi. Keyinchalik animatsiya, grafik, ma'lumotlarni vizual ko'rsatish kabi sohalarga kirsangiz, matematika to'g'ridan-to'g'ri kerak bo'ladi. Xulosa: maktab matematikasi bilan boshlang, mantiq masalalarini yechishni odat qiling.
Diplom. Ish beruvchi avvalo sizning yasagan narsalaringizga qaraydi, diplomga emas — shuning uchun diplomsiz ham ishga kirish mumkin. Ammo informatika yoki muhandislik ta'limi bo'lsa, u sizga algoritmlar, ma'lumotlar tuzilmasi va tizimli fikrlash bo'yicha poydevor beradi — bu ayniqsa keyinchalik, tajribali dasturchi darajasiga o'sishda sezilarli yordam beradi. Bor bo'lsa — foydalaning, yo'q bo'lsa — to'sqinlik qilmaydi.
Kompyuter savodxonligi. Ko'pchilik IT va dasturlashni bir narsa deb o'ylaydi. Aslida dasturlash — IT'ning bir bo'lagi, va boshlash uchun kompyuterni "ichidan" bilish shart emas. Lekin fayl tizimi, terminal, tarmoq asoslari bilan tanish odam ko'p vaqtini tejaydi. Farqi haqida: IT va dasturlash bir-biridan nimasi bilan farq qiladi?
Umuman kerak emas
- Pullik dasturlar. Boshlash uchun kerak bo'lgan hamma narsa bepul.
- Ma'lum bir yosh. 13 yoshda ham, 45 yoshda ham boshlash mumkin. Kattalar intizom bilan yutadi, yoshlar — tezlik bilan.
- "Daho" bo'lish. Sabr va muntazamlik qobiliyatdan ko'proq hal qiladi.
5. Boshlashdan oldin 3 ta muhim haqiqat
1. Birinchi 2–3 oy "hech narsani tushunmayapman" hissi bo'ladi. Bu normal. Bu siz "qobiliyatsiz" degani emas, bu miyangiz yangi tilni o'rganayotgani degani.
2. Xato — dushman emas. Kod yozganda ekranda qizil xato chiqadi. Boshlovchilar undan qo'rqadi. Aslida xato — sizga "aynan shu joyda muammo bor" deb aytadigan yordamchi. Uni o'qing.
3. Google'da qidirish — bilmaslik emas, kasbning bir qismi. Tajribali dasturchilar ham har kuni qidiradi. Siz ham qidirasiz.
6. Yo'l xaritasi: 8 ta qadam
Butun yo'l bir ko'rinishda. Muddatlar — kuniga 1,5–2 soat shug'ullanadigan boshlovchi uchun taxminiy mo'ljal, qat'iy qoida emas:
| Qadam | Nima o'rganasiz | Taxminiy vaqt | Natija |
|---|---|---|---|
| 1 | Internet qanday ishlaydi | 1 hafta | Sayt qayerdan keladi — tushunasiz |
| 2 | HTML | 3 hafta | Birinchi sahifangiz |
| 3 | CSS | 6 hafta | Chiroyli, telefonga mos sahifa |
| 4 | JavaScript | 12 hafta | Tugmalar ishlaydigan ilova |
| 5 | Git | 1 hafta | Ishingiz saqlangan va ko'rsatishga tayyor |
| 6 | React | 12 hafta | Zamonaviy ilova |
| 7 | Portfolio | yo'l davomida | 4–5 ta ko'rsatadigan loyiha |
| 8 | Birinchi ish | — | Junior frontend dasturchi |
Jami: 35 hafta — taxminan 8–9 oy. Tezroq o'rgansangiz kamroq, ishlab o'qisangiz ko'proq vaqt ketadi. Ikkalasi ham normal.
Eng muhim qoida: qadamlarni o'tkazib yubormang. "HTML zerikarli, React'dan boshlayman" — bu qo'shishni o'rganmasdan ko'paytirishga o'tish. Ishlamaydi.
7. 1-qadam: Internet qanday ishlaydi (1 hafta)
Brauzerga fintechhub.uz deb yozib Enter bosdingiz. Nima bo'ladi?
- Kompyuteringiz "fintechhub.uz qayerda?" deb so'raydi. Internetning "telefon kitobi" (DNS) unga manzil beradi.
- Kompyuteringiz o'sha manzildagi serverga (dunyoning qayeridadir turgan kuchli kompyuter) xat yuboradi: "menga bosh sahifani ber".
- Server javob qaytaradi: fayllar to'plami.
- Brauzeringiz bu fayllarni o'qib, sahifani ekranda chizadi.
O'sha "fayllar to'plami" — aynan HTML, CSS va JavaScript. Frontend dasturchi shu fayllarni yozadi.
Shu hafta qiling
Brauzerning ichini oching. Chrome'da istalgan saytda F12 tugmasini bosing. Chap tomonda kod chiqadi — bu o'sha sahifaning HTML'i. "Elements" bo'limida biror matnga ikki marta bosib o'zgartirib ko'ring. Sahifa o'zgaradi! (Faqat sizning kompyuteringizda; yangilasangiz qaytadi.) Bu 5 daqiqalik tajriba HTML nima ekanini har qanday darsdan yaxshi tushuntiradi.
VS Code'ni o'rnating. Bu — kod yozadigan dastur. Bepul, eng ko'p ishlatiladi. Word matn uchun qanday bo'lsa, VS Code kod uchun shunday.
Bilib oling: sayt, server, brauzer, fayl, papka nima. Shu 5 ta so'z yetadi.
8. 2-qadam: HTML — sahifaning skeleti (3 hafta)
HTML — brauzerga "bu sarlavha, bu matn, bu rasm" deb aytadigan til. Bu dasturlash emas, belgilash: siz shunchaki har bir narsaga yorliq yopishtirasiz.
Mana to'liq sahifa:
<!DOCTYPE html>
<html>
<head>
<title>Mening sahifam</title>
</head>
<body>
<h1>Salom! Men Aziz</h1>
<p>Men frontend dasturlashni o'rganyapman.</p>
<img src="rasm.jpg" alt="Mening rasmim">
<a href="https://fintechhub.uz">Mening sevimli saytim</a>
</body>
</html>
Qarang: <h1> — katta sarlavha. <p> — abzats. <img> — rasm. <a> — havola. Har bir yorliq <...> bilan ochiladi va </...> bilan yopiladi. Bo'ldi — HTML'ning katta qismi shu.
Hoziroq qiling: yuqoridagi kodni VS Code'ga ko'chiring, index.html nomi bilan saqlang, faylni brauzerda oching. Siz sayt yasadingiz. Haqiqatan.
VS Code'da yozilgan birinchi HTML sahifa va uning brauzerdagi ko'rinishi
Rasm: chap tomonda kod, o'ng tomonda natija.
3 haftada nima o'rganasiz
- Sarlavhalar (
h1–h6), matn (p), ro'yxatlar (ul,li). - Rasm, havola.
- Sahifaning bo'limlari:
header(yuqori qism),nav(menyu),main(asosiy),footer(pastki qism). Bu — Google sahifangizni tushunishi uchun muhim. - Formalar: matn kiritish, parol, tugma, katakcha. Har bir ro'yxatdan o'tish sahifasi — bu forma.
- Jadvallar.
Loyihalar
- O'zingiz haqingizda sahifa — ism, rasm, 3 ta qiziqish, ijtimoiy tarmoq havolalari. Xunuk bo'ladi — normal, bezash keyingi qadamda.
- Sevimli taom retsepti — sarlavha, masalliqlar ro'yxati, bosqichlar.
- Ro'yxatdan o'tish formasi — ism, email, parol, tug'ilgan sana, "roziman" katakchasi.
9. 3-qadam: CSS — sahifaning kiyimi (6 hafta)
HTML sahifangiz hozir juda sodda ko'rinadi. CSS uni chiroyli qiladi: rang, shrift, joylashuv, telefonga moslashish.
h1 {
color: #1a73e8;
font-size: 40px;
text-align: center;
}
Bu — "barcha h1 sarlavhalarni ko'k, 40 piksel, o'rtada qil". Shunchalik oddiy.
Bu qadamda eng muhim tushuncha: quti
CSS'da har bir narsa — quti. Matn quti, rasm quti, tugma quti. Har bir qutining ichida narsa bor, atrofida bo'sh joy (padding), keyin chegara (border), keyin tashqi bo'sh joy (margin). Sovg'a qutisini tasavvur qiling: ichida sovg'a, atrofida o'rama qog'oz, tashqarida boshqa qutilargacha masofa. Buni tushunsangiz, CSS'ning yarmi tushunilgan.
6 haftada nima o'rganasiz
1–2-hafta: ranglar, shriftlar, o'lchamlar, "quti" tushunchasi.
3–4-hafta: joylashtirish. "Nega bu tugma o'ngga ketdi?" — boshlovchilarning eng ko'p savoli. Javob ikkita vositada:
- Flexbox — narsalarni bir qatorda yoki bir ustunda tartiblash. Kitob tokchasidagi kitoblar kabi.
- Grid — butun sahifani kataklarga bo'lish. Butun javonni loyihalash kabi.
5-hafta: telefonga moslash. Sayt kompyuterda chiroyli, telefonda buzilgan — bu ish beruvchi darhol sezadigan kamchilik. "Media query" degan narsa: "agar ekran tor bo'lsa, menyuni ustma-ust qo'y".
6-hafta: tayyor vositalar. Bootstrap — tayyor tugmalar, menyular. Tailwind — ko'plab jamoalar ishlatadigan tez uslub. Ikkalasini ham bir ko'rib qo'ying, chuqur emas.
Loyihalar
- "O'zim haqimda" sahifangizni bezang.
- Xayoliy qahvaxona uchun sayt — bitta sahifa: sarlavha, rasm, menyu, aloqa. Telefonda ham, kompyuterda ham to'g'ri ko'rinsin.
- Dizayndan sayt. Internetdan bepul Figma dizayn oling va uni aynan o'shanday qilib kodga aylantiring. Bu — real ishda sizdan so'raladigan aynan o'sha narsa.
10. 4-qadam: JavaScript — sahifaning miyasi (12 hafta)
Eng muhim va eng uzun qadam. Hozirgacha siz "rasm" yasadingiz. Endi rasm "jonlanadi".
Ogohlantirish: ko'pchilik shu yerda to'xtaydi. Chunki HTML/CSS "nima ko'rinadi" edi, JavaScript esa "qanday o'ylash" — boshqa turdagi fikrlash. Agar 3-haftada "hech narsa tushunmayapman" desangiz — bu tabiiy. Davom eting. Bir necha haftadan keyin "tushundim" lahzasi keladi.
JavaScript nima qiladi?
let yosh = 17;
if (yosh >= 18) {
alert("Xush kelibsiz!");
} else {
alert("Kechirasiz, 18 yoshdan kichiklar uchun emas");
}
O'qing: "yosh 17. Agar yosh 18 yoki katta bo'lsa — 'xush kelibsiz' de, aks holda — 'kechirasiz' de." Bu — dasturlash. Kompyuterga oddiy, aniq ko'rsatmalar berish.
12 haftada nima o'rganasiz
1–4-hafta: til asoslari.
- O'zgaruvchilar — qiymatni saqlaydigan "quti" (
let yosh = 17). - Shartlar — "agar... bo'lsa" (
if). - Takrorlash — "100 marta qil" (
for). - Funksiyalar — "shu ishni bir marta yozib, keyin nomi bilan chaqirish".
- Ro'yxatlar (massivlar) — "mahsulotlar: noutbuk, sichqoncha, klaviatura".
- Obyektlar — "mahsulot: nomi Noutbuk, narxi 8 million, mavjud".
5–7-hafta: sahifa bilan gaplashish. JavaScript sahifadagi narsalarni topadi va o'zgartiradi. "Tugmani top. Bosilganda matnni o'zgartir." Bu — DOM deyiladi, lekin nomi muhim emas, mohiyati muhim: JavaScript HTML'ni boshqaradi.
Loyiha: vazifalar ro'yxati — vazifa yozasiz, qo'shiladi, bajarilganini belgilaysiz, o'chirasiz. Klassik birinchi ilova.
8–10-hafta: serverdan ma'lumot olish. Do'konda kassaga navbat turibsiz. Kassir "hozir omborga qarab kelaman" dedi. Siz qotib turmaysiz — telefon ko'rasiz. Kassir qaytganda davom etasiz. JavaScript ham serverdan ma'lumot so'raganda kutib turmaydi, javob kelganda ko'rsatadi. Bu asinxronlik. Shu yerda siz ob-havo, valyuta kursi, filmlar ro'yxati kabi haqiqiy ma'lumotlarni ilovangizga olib kelishni o'rganasiz.
11–12-hafta: zamonaviy vositalar. Node.js va npm o'rnatish (kutubxonalar "do'koni"). Ma'lumotni brauzerda saqlash (sahifa yangilanganda ro'yxat yo'qolmasin).
Loyihalar
- Vazifalar ro'yxati — sahifa yangilanganda ham saqlanadigan.
- Ob-havo ilovasi — shahar yozasiz, haqiqiy harorat chiqadi.
- Viktorina — 10 ta savol, javob, natija.
- Mahsulotlar katalogi — ro'yxat, qidiruv, filtr.
Bu qadamni tugatganingizda siz haqiqiy dasturchisiz. Qolgani — vositalar.
11. 5-qadam: Git — ishingizni saqlash (1 hafta)
Buni JavaScript'ning o'rtalarida boshlang.
Tanish holat: kurs_ishi.docx, kurs_ishi_2.docx, kurs_ishi_oxirgi.docx, kurs_ishi_oxirgi_HAQIQIY.docx. Git shu muammoni hal qiladi: har bir o'zgarishni "surat"ga oladi, istalgan vaqtga qaytish mumkin.
GitHub — bu suratlarni internetda saqlaydigan sayt. Va eng muhimi: GitHub — sizning ish daftaringiz. Ish beruvchi rezyumedan oldin GitHub'ingizga qaraydi: "bu odam nima yasagan?"
O'rganish kerak bo'lgan 6 ta buyruq: saqlash, yuklash, olib kelish, nusxalash, shox ochish, birlashtirish. Bir hafta yetadi.
Qoida: shu kundan boshlab har bir loyihangizni GitHub'ga yuklang. Xunuk bo'lsa ham. Yo'l oxirida sizda o'nlab loyiha bo'ladi — bu portfolio.
12. 6-qadam: React — zamonaviy ilovalar (12 hafta)
Siz endi oddiy JavaScript bilan ilova yoza olasiz. Lekin katta ilovalar (yuzlab sahifa) uchun bu og'irlashadi. Shuning uchun React paydo bo'ldi — katta ilovalarni tartibli yasash vositasi.
Nega aynan React?
Chunki u eng ko'p ishlatiladi va ish e'lonlarida eng ko'p uchraydi. Stack Overflow'ning 2025-yilgi dasturchilar so'rovnomasiga ko'ra, veb-vositalar orasida React'ni professional dasturchilarning 46,9% ishlatadi; Angular — 19,8%, Vue — 18,4%. Boshqalari ham yaxshi vositalar, lekin birinchi ishni topish React bilan osonroq. React'ni bilgan odam keyin boshqasini bir necha haftada o'rganadi — g'oyalar bir xil.
Asosiy g'oya: qolip
Somsa yopayotganingizda har bir somsani noldan shakllantirmaysiz — bitta qolip olasiz, 100 ta bir xil somsa chiqadi, faqat ichidagi qiyma boshqa bo'lishi mumkin. React'da ham: "tugma", "kartochka", "menyu" — har biri alohida qolip (komponent). Bir marta yasaysiz, ko'p marta ishlatasiz.
function MahsulotKartasi({ nom, narx }) {
return (
<div>
<h3>{nom}</h3>
<p>{narx} so'm</p>
<button>Savatga qo'shish</button>
</div>
);
}
Bu — bitta "kartochka" qolipi. Uni 100 ta mahsulot uchun ishlatasiz, har safar nom va narx boshqa.
12 haftada nima o'rganasiz
- 1–3-hafta: komponentlar, ularga ma'lumot uzatish, "xotira" (tugma necha marta bosildi?).
- 4–6-hafta: serverdan ma'lumot olish, sahifalar orasida yurish, formalar.
- 7–9-hafta: katta ilovada ma'lumotni tartibli saqlash (Redux Toolkit degan vosita), tayyor chiroyli komponentlar (Material UI, shadcn/ui, Tailwind).
- 10–12-hafta: katta loyiha va uni internetga chiqarish (Vercel yoki Netlify — boshlovchilar uchun bepul tarifi bor).
Loyihalar
- Vazifalar ro'yxatini React'da qayta yasang — farqni his qilasiz.
- Film qidiruv — qidirasiz, sevimlilar ro'yxatiga qo'shasiz.
- Internet-do'kon — mahsulotlar, savat, filtr, sahifalar. Bu — portfolio'ning asosiy loyihasi. Internetda ochiladigan bo'lsin.
Bu qadamni tugatganingizda siz junior frontend dasturchisiz. Ko'p kompaniyalar aynan shu to'plamni so'raydi: HTML, CSS, JavaScript, React, Git.
Keyin nima?
Ishga chiqqandan keyin (yoki oxirgi 2 oyda) ikki narsa o'rganasiz: TypeScript (xatolarni yozayotganda ushlaydigan JavaScript) va Next.js (React'ni tezroq va Google'ga tushunarli qiladigan vosita). Bular — birinchi ishdan keyin ham bo'ladi. Hozir bosh qotirmang.
13. 7-qadam: Portfolio — ishlaringizni ko'rsatish
Ish beruvchi sizga bir necha daqiqa ajratadi. Shu vaqtda u ko'rishi kerak: "bu odam ishlaydigan narsa yasay oladi".
Minimal portfolio:
- 1 ta katta loyiha — internet-do'kon React'da, internetda ochiladigan.
- 2–3 ta o'rta loyiha — ob-havo, film qidiruv, vazifalar ro'yxati.
- 1 ta dizayndan aniq kodlangan sayt — Figma'dan.
- Har biri GitHub'da, qisqa tavsif bilan: nima qiladi, qanday ishga tushirish.
Qilmang: 20 ta bir xil vazifalar ro'yxati. Birovning kodini "meniki" deb qo'yish (intervyuda bir-ikki savoldan keyin bilinadi). "Kompyuterimda ishlaydi" — internetga chiqarilmagan loyiha portfolio emas.
Junior frontend dasturchi portfolio'sining namunaviy tuzilmasi — GitHub va deploy qilingan loyihalar
Rasm: minimal portfolio qanday ko'rinishi kerak.
Eng qimmatli tajriba: jamoada loyiha
Yakka loyihalar "bilaman"ni ko'rsatadi. Ish beruvchining asosiy savoli esa boshqa: "bu odam jamoada ishlay oladimi?" Vazifalarni bo'lish, muddatga ulgurish, backend dasturchi bilan kelishish, boshqaning kodini o'qish — bularni yolg'iz o'rganib bo'lmaydi.
Shuning uchun yo'lingizning oxirida 2–3 kishi bo'lib bitta loyiha qiling: aniq rollar, haftalik muddatlar, vazifalar ro'yxati. Kursdoshlar, Telegram guruhidagi tanishlar yoki do'stlar — kim bo'lsa ham. Bu tajriba intervyuda eng ko'p so'raladigan "jamoada ishlaganmisiz?" savoliga haqiqiy javob beradi.
14. 8-qadam: Birinchi ish
Qachon boshlash? React tugagan va internet-do'kon internetga chiqqan zahoti. "Yana ozgina o'rganay" — tuzoq. Hech qachon "to'liq tayyor" bo'lmaysiz. Intervyudan olgan tajriba — eng tez o'rganish.
Rezyume: 1 sahifa. Ism, aloqa, GitHub havolasi. Bilgan texnologiyalaringiz. 3–4 ta loyiha, har biri 2 qator va havola. "Mas'uliyatli, o'rganishga tayyor" — o'chiring, buni hamma yozadi.
Intervyuda so'raladi: JavaScript asoslari, CSS'da joylashtirish, React'da komponent nima, Git'da shox nima, va — eng ko'p — loyihalaringiz haqida: "nega bunday qildingiz?", "eng qiyin joyi qayer edi?". Har loyiha uchun 2 daqiqalik hikoya tayyorlang.
Qayerdan: Toshkentdagi IT kompaniyalar va startaplar, stajirovka (maosh kam, tajriba tez), freelance (birinchi buyurtmalar), tanishlar va o'qigan joyingiz orqali.
IT'da lavozimlar qanday tuzilgan — junior'dan boshliqlargacha — va sizni nima kutayotgani haqida: Junior, Team Lead, CTO, CEO — farqi nimada?
15. Bepul o'rganish manbalari
"Qayerdan o'qiyman?" — eng ko'p beriladigan savol. Quyidagi uchta manba butun dunyoda tan olingan, to'liq bepul va aynan noldan boshlaydiganlar uchun:
- MDN Web Docs (developer.mozilla.org) — HTML, CSS, JavaScript bo'yicha rasmiy ma'lumotnoma va boshlovchilar uchun darsliklar. Firefox brauzerini yaratgan Mozilla tashkiloti yuritadi. Bu — dasturchilarning "lug'ati".
- freeCodeCamp (freecodecamp.org) — brauzerning o'zida vazifa bajarib o'rganiladigan interaktiv kurslar. Video emas, qo'lingiz bilan yozasiz.
- The Odin Project (theodinproject.com) — noldan to'liq veb-dasturchi bo'lgunga qadar ketma-ket dastur. Bu maqoladagi yo'l xaritasiga juda yaqin.
Uchalasi ham inglizcha — shu sababli 4-bo'limda ingliz tili haqida aytilgan. Boshlash uchun brauzerning tarjima funksiyasi yetadi; 2–3 oydan keyin asl tilida o'qishga o'ting.
16. Sun'iy intellekt bo'lsa, o'rganish kerakmi?
To'g'ri savol. 2026-yilda AI oddiy sahifani bir necha daqiqada yozib beradi. Unda nega 8–9 oy o'rganish?
Tarjima dasturlari paydo bo'lganda tarjimonlar yo'qolmadi. Oddiy matnni har kim tarjima qila oladigan bo'ldi, lekin shartnoma, kitob yoki muzokara uchun hali ham tilni biladigan odam kerak — chunki dastur xato qilganda buni faqat u sezadi.
AI kod yozadi. Lekin:
- buyurtmachi aslida nima xohlayotganini tushunmaydi (buyurtmachining o'zi ham ko'pincha bilmaydi);
- yozgan kodi to'g'rimi-noto'g'rimi — bilmaydigan odam farqlay olmaydi;
- yuzlab fayl bir-biriga qanday bog'langanini ushlab turmaydi.
Boshlovchi uchun amaliy qoida: birinchi 4 oy (HTML, CSS, JavaScript) AI'dan kod so'ramang. Faqat tushuntirish so'rang: "bu xato nima degani?". Kodni o'zingiz yozing. Asoslar mustahkam bo'lgach, AI ishingizni sezilarli tezlashtiradi. Asoslarsiz AI — tilni bilmasdan tarjima dasturiga ishonib shartnoma imzolash.
AI dasturlashni qanday o'zgartirayotgani: Vibe Coding nima?. AI'ning o'zi haqida umumiy tasavvur: Sun'iy intellekt: to'liq qo'llanma.
17. O'zim o'rganaymi yoki kursga boraymi?
Ikkalasi ham ishlaydi. Halol taqqoslash:
O'zim
Yaxshi tomoni: bepul, o'z tezligingizda, mustaqil izlash ko'nikmasi shakllanadi (bu dasturchi uchun juda muhim).
Qiyin tomoni:
- Internetda minglab darslik bor. Qaysi biri? Qaysi tartibda? Bu maqola va 15-bo'limdagi manbalar shu savolga javob beradi, lekin har qadamda yana tanlov chiqadi.
- Kodingiz ishlaydi — lekin to'g'ri yozilganmi? Buni faqat tajribali odam aytadi.
- Bitta xato ustida kunlab o'tirib, keyin uni bir necha daqiqada hal qilish mumkin edi deb bilish.
- Motivatsiya. Natija sekin ko'rinadi, hisob beradigan odam yo'q — to'xtab qolish oson.
- Jamoada ishlash tajribasi yo'q.
Kurs
Yaxshi tomoni: tayyor ketma-ketlik; ustoz kodingizni o'qib, xatoni ko'rsatadi (bu eng qimmat narsa — uzoq izlanishni almashtiradi); guruh — motivatsiya; jamoaviy loyiha; belgilangan vaqt — intizom.
Qiyin tomoni: pul; kurs tezligiga moslashish; yomon kurs — pul va vaqt isrofi.
Kursni tanlashda 5 ta savol
- Dastur ochiqmi — har bir mavzu va muddati yozilganmi?
- Ustoz kim — ismi, tajribasi ochiqmi, amaliyotda ishlaydimi?
- Guruh nechta odam? Katta guruhda ustoz sizga yetmaydi.
- Uy vazifasini kimdir tekshiradimi, yoki shunchaki "bajardi" belgilanadimi?
- Jamoaviy loyiha bormi?
Bu savollarni istalgan kursga bering. Misol uchun, FintechHub frontend kursi sahifasida bularning hammasi ochiq yozilgan: dastur HTML va CSS asoslaridan boshlanadi va 5 modulga bo'lingan (HTML/CSS — 2 oy, JavaScript — 3 oy, React — 3 oy, TypeScript/Next.js — 2 oy, jamoaviy loyiha praktikumi — 2 oy), jami 159 dars, haftasiga 3 marta 120 daqiqalik dars, 12 nafargacha guruh, har bir mavzudan keyin uy vazifasi va mentorning code review'i, darslar yozuvi saqlanadi, 13 yoshdan qabul, offline va online guruhlar bir xil narxda. Praktikum sertifikati faqat jamoa loyihani serverda to'liq ishlaydigan holatga keltirganda beriladi — bu 13-bo'limda aytilgan "jamoada loyiha" tajribasini beradi. Batafsil: Frontend dasturlash kursi — FintechHub. Boshqa kurslarni ham shu 5 savol bilan solishtiring — qaror sizniki.
Eng oqilona yo'l
1 va 2-qadamni (Internet asoslari, HTML) o'zingiz o'rganing. 1 oy, bepul, 15-bo'limdagi manbalar bilan. Shunda "bu ish menga yoqadimi?" degan savolga javob olasiz. Yoqsa — JavaScript va React'da (eng qiyin, eng ko'p tashlab ketiladigan joy) ustoz bilan davom eting. Vaqt ham, pul ham tejaladi.
18. Boshlovchilar qiladigan 7 ta xato
- Video ketidan video ko'rish, o'zi yozmaslik. Har 1 soat video — kamida 2 soat o'z qo'lingiz bilan kod.
- HTML/CSS/JavaScript'ni o'tkazib React'ga sakrash. Ishlamaydi.
- Bir vaqtda hamma narsani o'rganish. Bittasini chuqur.
- Xatodan qo'rqish. Qizil xabarni o'qing — u sizga aynan nima noto'g'riligini aytadi.
- Haftada bir marta ko'p o'tirish. Har kuni 1,5 soat > haftada bir 10 soat.
- Yolg'iz o'rganish. Telegram guruh, kursdoshlar — savolingizga tez javob olasiz.
- Portfolio'ni oxiriga qoldirish. O'rganish davomida yasang, oxirida emas.
19. Frontend dasturchi qancha oladi?
Maosh kompaniya, tajriba va ingliz tiliga qarab juda farq qiladi. FintechHub kurs sahifasida keltirilgan 2026-yil O'zbekiston bo'yicha o'rtacha raqamlar:
| Daraja | Tajriba | O'rtacha oylik |
|---|---|---|
| Junior | 1+ yil | 3 500 000 so'm |
| Middle | 2+ yil | 8 000 000 so'm |
| Senior | 4+ yil | 15 000 000+ so'm |
Manba: FintechHub, frontend kursi sahifasi. Bu o'rtacha mo'ljal; xalqaro kompaniyalarda masofaviy ishlaganda raqamlar sezilarli yuqori bo'lishi mumkin.
Muhimi: o'sish "yil o'tirish" bilan emas, "mustaqil ishlay olish" bilan keladi.
20. Ko'p beriladigan savollar
Frontend dasturlashni noldan o'rganish qancha vaqt oladi?
Ushbu maqoladagi reja bo'yicha, kuniga 1,5–2 soat bilan birinchi ishga tayyor darajaga taxminan 8–9 oy. Tezroq o'rgansangiz kamroq, ishlab o'qisangiz ko'proq.
Nimadan boshlash kerak?
HTML'dan. Keyin CSS, keyin JavaScript, keyin React. Tartibni o'zgartirmang.
Matematika kerakmi?
Boshlash uchun maktab matematikasi (qo'shish, ayirish, foiz) yetadi. Lekin matematikani yaxshi bilsangiz, mantiq va algoritmlarni tezroq tushunasiz va keyinchalik grafika, animatsiya kabi sohalarga oson kirasiz. Bilmasangiz — to'sqinlik qilmaydi, boshlang.
Kompyuterim kuchsiz, bo'ladimi?
Bo'ladi. 4 GB xotirali oddiy noutbuk yetarli.
Ingliz tilini bilmayman, boshlay olamanmi?
Ha, boshlash mumkin. Lekin ingliz tilini bilgan odam ancha tez o'sadi — eng yaxshi darsliklar va hujjatlar inglizcha. Shuning uchun 2–3 oydan keyin inglizcha o'qishni parallel boshlang; bu o'rganishingizni sezilarli osonlashtiradi.
Necha yoshdan boshlash mumkin?
Har qanday. 13 yoshdagi maktab o'quvchisi ham, kasb o'zgartirayotgan 40 yoshli odam ham.
Diplom kerakmi?
Shart emas — ish beruvchi avvalo yasagan loyihalaringizga qaraydi. Lekin informatika yoki muhandislik ta'limi bo'lsa, u sizga algoritmlar va tizimli fikrlash bo'yicha poydevor beradi, bu keyingi o'sishda yordam beradi.
Frontend va backend farqi nima?
Frontend — siz ko'radigan qism (sahna). Backend — ma'lumotlar saqlanadigan ko'rinmas qism (sahna orqasi).
Qaysi bepul manbalardan o'rganish mumkin?
MDN Web Docs, freeCodeCamp va The Odin Project — uchalasi bepul, dunyoda tan olingan va noldan boshlaydiganlar uchun.
Sun'iy intellekt frontend dasturchini almashtiradimi?
Oddiy ishlarni qisman. Lekin nima kerakligini tushunish, sifatni tekshirish va AI yozgan kodni baholash uchun odam kerak. Asosni bilib, AI'ni ishlata oladigan dasturchi eng qimmatli.
Birinchi loyiham nima bo'lsin?
O'zingiz haqingizda oddiy HTML sahifa. Bugun.
Kursga borish shartmi?
Yo'q. Lekin JavaScript va React bosqichlarida ustoz va guruh ko'pchilikka to'xtab qolmaslikka yordam beradi. 17-bo'limda taqqoslash bor.
21. Bugun nima qilish kerak
O'qigan narsangiz tez unutiladi, agar qilmasangiz. Shuning uchun bugun, hoziroq:
- VS Code'ni o'rnating (10 daqiqa).
- 8-bo'limdagi HTML kodini ko'chirib,
index.htmldeb saqlang, brauzerda oching (5 daqiqa). - Ismingizni o'zgartiring, yana bitta abzats qo'shing (5 daqiqa).
20 daqiqa — va siz endi "boshlamoqchi" emas, "boshlagan" odamsiz.
Yo'l aniq: HTML → CSS → JavaScript → Git → React → portfolio → ish. Uch narsa hal qiladi: har kuni, o'z qo'lingiz bilan, va kimdir tekshirsin.
O'zingiz yurmoqchi bo'lsangiz — yuqoridagi 8 qadam va 15-bo'limdagi bepul manbalar sizning xaritangiz. Ustoz, guruh va tayyor dastur bilan yurmoqchi bo'lsangiz — FintechHub frontend kursi aynan shu yo'ldan, HTML asoslaridan jamoaviy loyihagacha, 12 oyda olib boradi; sahifada bepul maslahat uchun raqam qoldirish mumkin.
Bir yildan keyin bugunni "boshlagan kunim" deb eslaysiz — yoki "boshlashim kerak edi" deb. Tanlov sizniki.
Ushbu mavzuga oid boshqa maqolalar
- Dasturlash nima va u sizga nima beradi?
- IT va dasturlash bir-biridan nimasi bilan farq qiladi?
- Vibe Coding nima? Kod yozmasdan AI bilan ilova yaratish (2026)
- Junior, Team Lead, CTO, CEO — IT lavozimlari bo'yicha to'liq qo'llanma
- Dasturchilar uchun o'qish shart bo'lgan 8 ta kitob
- FintechHub blogidagi barcha maqolalar
