Frontend Roadmap
Bu nima
Frontend dasturlashni o’rganish uchun qo’lda saralangan 1200+ ta bepul resurs — mavzular bo’yicha guruhlangan va taxminan duch keladigan tartibda joylashtirilgan. Har bir yozuv — ishlayotgan dasturchi haqiqatan ham tavsiya qiladigan narsa: pullik devorlar yo’q, ro’yxatdan o’tish talab qilinmaydi, boshqalarning maqolalarini yig’adigan bloglar yo’q. Ro’yxat mustaqil o’rganayotganlar, bilimidagi bo’shliqni to’ldirayotgan bootcamp bitiruvchilari va qidiruv natijalari sahifasi o’rniga qisqa ro’yxat xohlaydigan har bir kishi uchun.
Bu darslik emas — u materialga yo’naltiradi, o’zi o’rgatmaydi. Bu to’liq ro’yxat ham emas — ro’yxat ishlatsa bo’ladigan darajada qisqa qolishi uchun ko’plab yaxshi resurslar ataylab kiritilmagan. Va bu ish kafolati ham emas; bu — xarita, yo’lni baribir o’zingiz bosib o’tasiz.
[!TIP] Shu yerdan boshlang. Agar tayyor yo’l kerak bo’lsa, ROADMAP.uz.md fayliga o’ting — beshta ketma-ket bosqich, har birida shartlar, quriladigan loyihalar, o’z-o’zini tekshirish ro’yxati va vaqt taxminlari bor. Agar ma’lumotnoma kerak bo’lsa, quyidagi Mundarija jadvalidan kerakli mavzu fayliga to’g’ridan-to’g’ri o’ting.
Mundarija
| Mavzu | Nima bor | Daraja |
|---|---|---|
| 🧱 Poydevor | ||
| HTML | Semantika, formalar, zamonaviy elementlar va metadata, hamda validatorlar va mashqlar. | Boshlang’ich |
| CSS | Cascade, layout, moslashuvchan tipografika va ranglar, animatsiya, hamda layout o’yinlari va generatorlar. | Boshlang’ich → O’rta |
| JavaScript | Kurslar va kitoblar, so’ng zamonaviy sintaksis, async, modullar, debugging va playground’lar. | Boshlang’ich → Yuqori |
| 🔤 Til va tiplar | ||
| TypeScript | Boshlash uchun qo’llanmalar, so’ng tip tizimi, loyiha sozlamalari va React’ni tiplash. | O’rta |
| ⚛️ Framework’lar | ||
| React | Asosiy tushunchalar, hook’lar, React 19 va Server Components, hamda routing, state va data fetching. | O’rta |
| Boshqa framework va meta-framework’lar | Qaysi birini tanlash, rendering strategiyalari hamda Vue, Svelte, Angular, Solid va Astro ekotizimlari. | O’rta |
| 🛠 Mahorat | ||
| Accessibility | WCAG, semantika, klaviatura va fokus, ekran o’quvchilar, kontrast va avtomatik tekshiruvlar. | Barcha darajalar |
| Performance | Core Web Vitals, field va lab ma’lumotlari, yuklanish va runtime narxi, profiling vositalari. | O’rta → Yuqori |
| Xavfsizlik | Origin modeli, XSS, CSP, CORS, autentifikatsiya va sessiyalar, header’lar va supply chain. | O’rta → Yuqori |
| Test | Unit, komponent va end-to-end testlar, mocking, vizual regressiya va CI. | O’rta |
| Browser API’lar | DOM, observer’lar, storage, tarmoq, worker’lar, service worker’lar va feature detection. | O’rta → Yuqori |
| ⚙️ Asboblar | ||
| Git | Git modeli, kundalik ish jarayoni, branching, code review va xatolarni tuzatish. | Boshlang’ich |
| Build vositalari | Package manager’lar, bundler’lar, linter’lar, tip tekshiruvi, monorepo’lar va dependency salomatligi. | O’rta |
| Deployment | Statik va serverless hosting, domenlar va TLS, CI/CD, keshlash va monitoring. | Boshlang’ich → O’rta |
| 🎨 Dizayn va UI | ||
| Dizayn | Rang va tipografika, ikonkalar, illyustratsiyalar, rasm vositalari, Figma resurslari va AI yordamidagi dizayn. | Barcha darajalar |
| UI Framework’lar | Dizayn tizimlari, utility-first CSS, headless primitivlar va komponent kutubxonalari. | O’rta |
| 📺 Koddan tashqari | ||
| O’rganish | O’quv dasturlari, hujjatlar, kanallar, kurslar, kitoblar va hamjamiyatlar. | Barcha darajalar |
| AI vositalari | Kod yozuvchi yordamchilar, ulardan to’g’ri foydalanish odatlari, xatolari va AI funksiyalarini qurish. | Barcha darajalar |
| Amaliyot va ishga kirish | Qabul mezonlari bilan o’n beshta loyiha topshirig’i, intervyuga tayyorgarlik va ish e’lonlari qayerda. | Barcha darajalar |
[!NOTE] Mavzu fayllari (
docs/*.md) ingliz tilida — nega faqat shu ikki fayl tarjima qilingani docs/TRANSLATIONS.md da tushuntirilgan.
Qanday foydalanish kerak
- Tartib bilan, bir marta o’ting. Framework’dan oldin poydevor. Zaif JavaScript ustiga React qo’yish — tiqilib qolishning eng keng tarqalgan yo’li, va uni hech qancha darslik tuzatmaydi.
- Har bo’limdan bitta resurs tanlang, hammasini emas. Har bir faylda bir nechta variant bor, chunki odamlar har xil o’rganadi — bular alternativalar, bajariladigan ro’yxat emas.
- Mavzular orasida biror narsa quring. Bo’lim o’qib chiqilganda emas, u bilan biror narsa yaratib, chiqarib qo’yganingizda tugaydi.
Hissa qo’shish
Ishlamayotgan havola topdingizmi yoki bu yerga mos resursni bilasizmi? PR yoki issue oching — bitta havolali kichik PR’lar eng tez merge qilinadi.
Ochishdan oldin nima mos kelishini CONTRIBUTING.md da, yozuv formatini esa docs/STYLE.md da o’qing — ikkalasi ham ingliz tilida. Barcha ishtirok Code of Conduct qoidalariga bo’ysunadi.
Litsenziya
CC BY 4.0 © 2021–2026 Shuhratbek Qobulov