FintechHub IT akademiyasi logotipi
  • Bosh sahifa
  • Kurslarimiz
  • Aloqa
  • Blog
+998 (71) 203 88 00
FintechHub IT akademiyasi logotipi

Kurslarimiz

  • Frontend dasturlash kursi
  • Python Backend dasturlash kursi
  • Go Backend dasturlash kursi
  • Mobile Flutter dasturlash kursi
  • DevOps Engineering kursi
  • Junior KIDS kursi
  • Junior WebCoders kursi
  • Kiberxavfsizlik kursi

Bo`limlar

  • Aloqa
  • Blog

Biz haqimizda qisqacha

FintechHub - kompyuter dasturlari va startap loyihalarni ishlab chiqaradigan yurtimizdagi yirik IT laboratoriya hisoblanadi. Dunyo darajasidagi raqamli loyihalarni amaliyotga tadbiq etish bilan birga, o'z sohasida kuchli bo'lgan dasturchilarni tayyorlash bilan ham shug'ullanadi.

Biz bilan bog'lanish
© Copyright 2026 by fintechhub.uz
Bosh sahifa
Blog
Frontend dasturlashni noldan o'rganish: boshlovchilar uchun…

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

09/09/2026
23 daqiqa
3 marta ko'rildi
FinTechHub Akademiyasi muallif rasmi
FinTechHub Akademiyasi
Frontend dasturlashni noldan o'rganish: boshlovchilar uchun to'liq yo'l xaritasi (2026)
Ulashish
Ulashish

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 bosqichlariFrontend 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:

TilVazifasiUy misolida
HTMLSahifada nima bor: sarlavha, matn, rasm, tugmaDevorlar, xonalar, eshiklar
CSSBu narsalar qanday ko'rinadi: rang, o'lcham, joylashuvBo'yoq, mebel, pardalar
JavaScriptTugma bosilganda nima bo'ladiElektr: 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:

QadamNima o'rganasizTaxminiy vaqtNatija
1Internet qanday ishlaydi1 haftaSayt qayerdan keladi — tushunasiz
2HTML3 haftaBirinchi sahifangiz
3CSS6 haftaChiroyli, telefonga mos sahifa
4JavaScript12 haftaTugmalar ishlaydigan ilova
5Git1 haftaIshingiz saqlangan va ko'rsatishga tayyor
6React12 haftaZamonaviy ilova
7Portfolioyo'l davomida4–5 ta ko'rsatadigan loyiha
8Birinchi 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?

  1. Kompyuteringiz "fintechhub.uz qayerda?" deb so'raydi. Internetning "telefon kitobi" (DNS) unga manzil beradi.
  2. Kompyuteringiz o'sha manzildagi serverga (dunyoning qayeridadir turgan kuchli kompyuter) xat yuboradi: "menga bosh sahifani ber".
  3. Server javob qaytaradi: fayllar to'plami.
  4. 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'rinishiVS 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

  1. O'zingiz haqingizda sahifa — ism, rasm, 3 ta qiziqish, ijtimoiy tarmoq havolalari. Xunuk bo'ladi — normal, bezash keyingi qadamda.
  2. Sevimli taom retsepti — sarlavha, masalliqlar ro'yxati, bosqichlar.
  3. 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

  1. "O'zim haqimda" sahifangizni bezang.
  2. Xayoliy qahvaxona uchun sayt — bitta sahifa: sarlavha, rasm, menyu, aloqa. Telefonda ham, kompyuterda ham to'g'ri ko'rinsin.
  3. 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

  1. Vazifalar ro'yxati — sahifa yangilanganda ham saqlanadigan.
  2. Ob-havo ilovasi — shahar yozasiz, haqiqiy harorat chiqadi.
  3. Viktorina — 10 ta savol, javob, natija.
  4. 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

  1. Vazifalar ro'yxatini React'da qayta yasang — farqni his qilasiz.
  2. Film qidiruv — qidirasiz, sevimlilar ro'yxatiga qo'shasiz.
  3. 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 loyihalarJunior 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

  1. Dastur ochiqmi — har bir mavzu va muddati yozilganmi?
  2. Ustoz kim — ismi, tajribasi ochiqmi, amaliyotda ishlaydimi?
  3. Guruh nechta odam? Katta guruhda ustoz sizga yetmaydi.
  4. Uy vazifasini kimdir tekshiradimi, yoki shunchaki "bajardi" belgilanadimi?
  5. 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

  1. Video ketidan video ko'rish, o'zi yozmaslik. Har 1 soat video — kamida 2 soat o'z qo'lingiz bilan kod.
  2. HTML/CSS/JavaScript'ni o'tkazib React'ga sakrash. Ishlamaydi.
  3. Bir vaqtda hamma narsani o'rganish. Bittasini chuqur.
  4. Xatodan qo'rqish. Qizil xabarni o'qing — u sizga aynan nima noto'g'riligini aytadi.
  5. Haftada bir marta ko'p o'tirish. Har kuni 1,5 soat > haftada bir 10 soat.
  6. Yolg'iz o'rganish. Telegram guruh, kursdoshlar — savolingizga tez javob olasiz.
  7. 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:

DarajaTajribaO'rtacha oylik
Junior1+ yil3 500 000 so'm
Middle2+ yil8 000 000 so'm
Senior4+ yil15 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:

  1. VS Code'ni o'rnating (10 daqiqa).
  2. 8-bo'limdagi HTML kodini ko'chirib, index.html deb saqlang, brauzerda oching (5 daqiqa).
  3. 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

Eng ko'p beriladigan savollar

Frontend o'rganishda orqada qolib qolsam, nima qilish kerak?
Bu tabiiy holat — hamma birdek tezlikda o'rganmaydi. Orqada qolib ketsangiz, yangi mavzuga o'tishdan oldin avvalgi bosqichga qayting va kichik amaliy loyiha bilan mustahkamlang. Muhimi — "hammasidan xabardor bo'lish" emas, "qo'lda ishlay olish".
Frontend va UI/UX dizayn farqi nima?
Dizayner sahifaning qanday ko'rinishi va foydalanuvchi qanday harakat qilishini Figma'da chizadi — bu dizayn. Frontend dasturchi esa o'sha chizmani haqiqiy, brauzerda ishlaydigan sahifaga aylantiradi — bu kod. Ikkalasi turli kasb, lekin yaqindan hamkorlik qiladi.
Bir vaqtning o'zida bir nechta til yoki freymvork o'rganish kerakmi?
Yo'q, tavsiya etilmaydi. HTML, CSS, JavaScript, React'ni ketma-ket, bittadan chuqur o'rganing. Bir nechtasini parallel boshlash chalkashlik va tez charchashga olib keladi — chuqurlik tezlikdan muhimroq.
Frontend dasturchi masofadan (remote) ishlashi mumkinmi?
Ha, frontend — eng ko'p masofadan ishlanadigan yo'nalishlardan biri. Kodni istalgan joydan yozish, GitHub orqali topshirish va video-qo'ng'iroqda muhokama qilish mumkin, shuning uchun ko'plab kompaniyalar frontend dasturchilarni butunlay masofadan ishga oladi.
TypeScript o'rganishim kerakmi?
Boshida shart emas — avval JavaScript'ni yaxshi bilib oling. TypeScript aslida JavaScript'ning "xatolarni oldindan ko'rsatadigan" versiyasi bo'lib, React'ni o'rgangandan keyin, real ish joylarida tez-tez uchraydi. Shuning uchun uni 6-qadamdan keyin, ixtiyoriy qo'shimcha sifatida o'rganish mantiqiy.

Mundarija

1. Bu maqola kim uchun2. Frontend nima? Sahna va sahna orqasi3. Frontend dasturchi aslida nima qiladi4. Sizga nima kerak — va nimasiz ham boshlash mumkinBoshlash uchun shartBo'lsa — katta ustunlik, bo'lmasa — yo'lda o'rganasizUmuman kerak emas5. Boshlashdan oldin 3 ta muhim haqiqat6. Yo'l xaritasi: 8 ta qadam7. 1-qadam: Internet qanday ishlaydi (1 hafta)Shu hafta qiling8. 2-qadam: HTML — sahifaning skeleti (3 hafta)3 haftada nima o'rganasizLoyihalar9. 3-qadam: CSS — sahifaning kiyimi (6 hafta)Bu qadamda eng muhim tushuncha: quti6 haftada nima o'rganasizLoyihalar10. 4-qadam: JavaScript — sahifaning miyasi (12 hafta)JavaScript nima qiladi?12 haftada nima o'rganasizLoyihalar11. 5-qadam: Git — ishingizni saqlash (1 hafta)12. 6-qadam: React — zamonaviy ilovalar (12 hafta)Nega aynan React?Asosiy g'oya: qolip12 haftada nima o'rganasizLoyihalarKeyin nima?13. 7-qadam: Portfolio — ishlaringizni ko'rsatishEng qimmatli tajriba: jamoada loyiha14. 8-qadam: Birinchi ish15. Bepul o'rganish manbalari16. Sun'iy intellekt bo'lsa, o'rganish kerakmi?17. O'zim o'rganaymi yoki kursga boraymi?O'zimKursKursni tanlashda 5 ta savolEng oqilona yo'l18. Boshlovchilar qiladigan 7 ta xato19. Frontend dasturchi qancha oladi?20. Ko'p beriladigan savollarFrontend dasturlashni noldan o'rganish qancha vaqt oladi?Nimadan boshlash kerak?Matematika kerakmi?Kompyuterim kuchsiz, bo'ladimi?Ingliz tilini bilmayman, boshlay olamanmi?Necha yoshdan boshlash mumkin?Diplom kerakmi?Frontend va backend farqi nima?Qaysi bepul manbalardan o'rganish mumkin?Sun'iy intellekt frontend dasturchini almashtiradimi?Birinchi loyiham nima bo'lsin?Kursga borish shartmi?21. Bugun nima qilish kerakUshbu mavzuga oid boshqa maqolalar

Boshqalar

Kiberxavfsizlikni noldan o'rganish: yo'l xaritasi (2026) | FintechHub

Kiberxavfsizlikni noldan o'rganish: yo'l xaritasi (2026) | FintechHub

04/09/2026

Vibe Coding nima? Kod yozmasdan AI bilan ilova yaratish — to'liq qo'llanma va real misollar (2026)

Vibe Coding nima? Kod yozmasdan AI bilan ilova yaratish — to'liq qo'llanma va real misollar (2026)

25/08/2026

IT va dasturlash bir-biridan nimasi bilan farq qiladi?

IT va dasturlash bir-biridan nimasi bilan farq qiladi?

22/08/2026

Dasturlash nima va u sizga nima beradi?

Dasturlash nima va u sizga nima beradi?

14/08/2026

Junior, Team Lead, CTO, CEO — farqi nimada? IT lavozimlari bo‘yicha to‘liq qo‘llanma

Junior, Team Lead, CTO, CEO — farqi nimada? IT lavozimlari bo‘yicha to‘liq qo‘llanma

12/08/2026

Barchasini ko'rish

O'xshash maqolalar

Dunyodagi eng zo'r dasturlash va IT universitetlari

Ta'lim

Dunyodagi eng zo'r dasturlash va IT universitetlari

📅 31/07/2026