10-sinf (UX/UI)

Advanced UX/UI dizayn va Advanced Front-end

34 hafta102 darshaftasiga 3 dars · 80 daqiqa6 / 34 hafta tayyor

I chorak

1–9-haftalar

I-bob · UX/UI dizaynning zamonaviy konsepsiyasi

1-darsUX dizaynning strategik roli va biznes maqsadlari bilan uyg‘unlashuvi
2-darsFoydalanuvchiga yo‘naltirilgan dizayn (User-Centered Design — UCD)
3-darsInterfeys dizaynida asosiy tamoyillar: usability, accessibility, simplicity

II-bob · UX tadqiqotlari va foydalanuvchi ehtiyojlarini aniqlash

4-darsFoydalanuvchi tadqiqot usullari: intervyu, so‘rovnoma, kuzatish
5-darsPersona va empatiya xaritasini yaratish
6-darsFoydalanuvchi tarixi va senariysini yozish (User Story & User Journey Map)

III-bob · UI dizayn elementlari va vizual ierarxiya

7-darsRanglar psixologiyasi va tipografiya
8-darsGrid tizimlari va kompozitsiya
9-darsIkonka, tugma va navigatsiya elementlarini dizayni (UI Kit)

IV-bob · Prototiplash va Wireframe yaratish

10-darsPrototip va ularning turlari (Low-fidelity vs High-fidelity)
11-darsUX flow diagrammalari va axborot arxitekturasi
12-darsFigma / Adobe XD da interaktiv Wireframe yaratish

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

13-darsSemantik HTML5 teglari va accessibility (WCAG) asoslari
14-darsFormalar, validatsiya va interfeys elementlari semantikasi
15-darsSEO tamoyillari va meta teglarni to'g'ri qo'llash

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

16-darsCSS3 selektorlari, kaskadlik va Box Model arxitekturasi
17-darsFlexbox layout tizimi va bir o'lchamli joylashuv
18-darsCSS Grid layout tizimi va murakkab sahifa to'rlari

7hafta

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

19-darsResponsiv dizayn tamoyillari va Media Queries (Mobile First)
20-darsAdaptiv tipografiya va elastik o'lchov birliklari (rem, em, vh, vw)
21-darsZamonaviy CSS o'zgaruvchilari (CSS Variables) va Dark/Light mavzular

8hafta

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

22-darsCSS Transitions va mikro-interaksiyalar
23-darsCSS Keyframe animatsiyalari va transformatsiyalar
24-darsSVG grafika va CSS yordamida vektorli ikonkalarni animatsiya qilish

9hafta

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

25-darsJavaScript asoslari: sintaksis, o'zgaruvchilar va ma'lumot turlari
26-darsFunksiyalar, shartli operatorlar va massivlar bilan ishlash
27-darsDOM bilan tanishuv: elementlarni qidirish va mazmunini o'zgartirish

II chorak

10–16-haftalar

10hafta

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

28-darsDOM hodisalari (Events): click, submit, input, keydown
29-darsInteraktiv elementlar: Modal darcha va Accordion menyu yaratish
30-darsFormani JavaScript orqali tekshirish (Real-time Validation)

11hafta

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

31-darsDinamik filtrlar va qidiruv tizimini yaratish
32-darsKarusel (Slider) va tabs komponentlarini dasturlash
33-darsLocalStorage bilan ishlash: foydalanuvchi ma'lumotlarini saqlash

12hafta

V-bob · Front-End asoslari (HTML5, CSS3, JavaScript)

34-darsBrauzer API vositalari: Geolocation va Notification API
35-darsVeb-ilova interfeysini to'liq yig'ish va xatolarni tuzatish
36-dars1-chorak loyihasi taqdimoti va kod tahlili

13hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

37-darsZamonaviy JavaScript (ES6+): let/const, arrow functions, destructuring
38-darsSpread/Rest operatorlari, Template Literals va Default parametrlari
39-darsMassivlarning yuqori tartibli metodlari: map, filter, reduce

14hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

40-darsObyektlar bilan ishlash, chuqur nusxalash va JSON formati
41-darsJavaScript Event Loop, Call Stack va asinxronlik tamoyili
42-darsCallback funksiyalari va ularning cheklovlari (Callback Hell)

15hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

43-darsAsinxron JavaScript: Promise mexanizmi va uning holatlari
44-darsAsync / Await sintaksisi va try-catch orqali xatolarni tutish
45-darsFetch API orqali serverdan ma'lumot olish (GET so'rovlari)

16hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

46-darsModulyar JavaScript (ES Modules): import va export tamoyillari
47-darsKomponent yondashuvi: qayta ishlatiluvchi UI qismlarini yaratish
48-darsDinamik kartochkalar va sahifani qayta chizmasdan yangilash

III chorak

17–26-haftalar

17hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

49-darsJavaScript orqali interaktiv UI yaratish: savatcha (Cart) mexanikasi
50-darsSahifalash (Pagination) va Cheksiz aylantirish (Infinite Scroll)
51-darsDrag-and-Drop interfeyslarini JavaScriptda dasturlash

18hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

52-darsFigma prototip dizaynini HTML/CSS/JavaScriptda kodlash (1-qism)
53-darsFigma prototip dizaynini HTML/CSS/JavaScriptda kodlash (2-qism)
54-darsFigma prototip dizaynini HTML/CSS/JavaScriptda kodlash (3-qism)

19hafta

VI-bob · JavaScript va Prototip dizaynini ishlab chiqish

55-darsInteraktiv prototipni testlash va foydalanuvchi sinovlari
56-darsResponsive UI prototipini turli ekranlarda tekshirish
57-dars2-chorak amaliy loyihasini himoya qilish

20hafta

VII-bob · Front-End frameworklari: React asoslari

58-darsSingle Page Application (SPA) tushunchasi va React ga kirish
59-darsVite yordamida React loyihasini yaratish va fayllar strukturasi
60-darsJSX sintaksisi va komponentlar arxitekturasi

21hafta

VII-bob · Front-End frameworklari: React asoslari

61-darsKomponentlarga parametr uzatish: Props va bolalar (children)
62-darsState bilan ishlash: useState hooki va reaktivlik
63-darsHodisalarni qayta ishlash va formalarni boshqarish (Controlled Forms)

22hafta

VII-bob · Front-End frameworklari: React asoslari

64-darsShartli renderlash (Conditional Rendering) va ro'yxatlarni chizish
65-darsNojo'ya ta'sirlar bilan ishlash: useEffect hooki asoslari
66-darsuseEffect yordamida API dan ma'lumot yuklash

23hafta

VII-bob · Front-End frameworklari: React asoslari

67-darsRouting va navigatsiya: React Router DOM asoslari
68-darsDinamik marshrutlar (URL params) va sahifalararo o'tish
69-dars404 sahifasi va himoyalangan marshrutlar (Protected Routes)

24hafta

VII-bob · Front-End frameworklari: React asoslari

70-darsZamonaviy UI kutubxonalar: Tailwind CSS bilan React integratsiyasi
71-darsMaterial UI yoki Shadcn UI komponentlaridan foydalanish
72-darsReact-da modal, tab va dropdown kabi tayyor UI elementlarini ulash

25hafta

VII-bob · Front-End frameworklari: React asoslari

73-darsMurakkab holat boshqaruvi: Context API asoslari
74-darsCustom Hooklar yozish: mantiqni komponentdan ajratish
75-darsReact ilovasi unumdorligini oshirish: useMemo va useCallback

26hafta

VIII-bob · API va dinamik interfeyslar

76-darsREST API arxitekturasi: Endpointlar, metodlar (GET, POST, PUT, DELETE)
77-darsHTTP holat kodlari (200, 201, 400, 404, 500) va sarlavhalar (Headers)
78-darsGraphQL asoslari: Query va Mutation tushunchasi

IV chorak

27–34-haftalar

27hafta

VIII-bob · API va dinamik interfeyslar

79-darsAxios kutubxonasi bilan ishlash va uning Fetch dan afzalliklari
80-darsServerga ma'lumot yuborish (POST) va shakllarni jo'natish
81-darsMa'lumotlarni tahrirlash (PUT/PATCH) va o'chirish (DELETE)

28hafta

VIII-bob · API va dinamik interfeyslar

82-darsYuklanish (Loading Skeleton) va xatolik (Error State) interfeyslari
83-darsDinamik qidiruv va server darajasidagi filtrlash
84-darsAPI javoblarini keshlashtirish va qayta so'rovlarni boshqarish

29hafta

VIII-bob · API va dinamik interfeyslar

85-darsReal-time ma'lumotlar bilan ishlash: WebSocket asoslari
86-darsFoydalanuvchi autentifikatsiyasi: JWT tokenlar va saqlash xavfsizligi
87-dars3-chorak dinamik React loyihasini yakunlash

30hafta

IX-bob · Advanced Front-End optimallashtirish va xavfsizlik

88-darsVeb-sahifa tezligi va unumdorligi (Performance Optimization)
89-darsRasmlarni optimallashtirish, WebP formati va Lazy Loading
90-darsCode Splitting va React.lazy bilan paket hajmini kamaytirish

31hafta

IX-bob · Advanced Front-End optimallashtirish va xavfsizlik

91-darsVeb accessibility (a11y) testlari: Lighthouse va WAVE tahlili
92-darsEkran o'quvchilar (Screen Readers) va ARIA atributlari
93-darsVeb-xavfsizlik asoslari: XSS (Cross-Site Scripting) hujumlari va himoya

32hafta

IX-bob · Advanced Front-End optimallashtirish va xavfsizlik

94-darsCSRF (Cross-Site Request Forgery) va xavfsiz autentifikatsiya
95-darsFoydalanuvchi ma'lumotlarini qat'iy tekshirish (Data Validation)
96-darsVeb-ilovaning SEO auditini o'tkazish va optimallashtirish

33hafta

X-bob · Yakuniy loyiha va taqdimot

97-darsYakuniy loyiha g'oyasi, UX tadqiqotlari va Figma dizayni
98-darsLoyihaning to'liq Front-End arxitekturasini kodlash (1-qism)
99-darsLoyihaning to'liq Front-End arxitekturasini kodlash (2-qism)

34hafta

X-bob · Yakuniy loyiha va taqdimot

100-darsFoydalanuvchi sinovlari (Usability Testing) va xatolarni tuzatish
101-darsLoyihani Vercel / Netlify platformalariga joylashtirish (Deploy)
102-darsYakuniy bitiruv loyihasi taqdimoti va himoya qilish