Kirish Frontend Development kursi

---

1-OY.
Kirish Frontend Development kursi
1.1. Web dasturlash. Web texnologiyalari, ishlash prinsiplari, ishlatilish sohalari
(
Web dasturlash nima? Ishlash prinsiplari.
)
1.2. HTML frontend dasturlashning asosiy texnologiyasi
(*
Loyiha yaratish. Mening birinchi loyiham. *HTML asoslari. *Matnlar bilan ishlash. *HTMLda
ro'yxatlar, rasm va linklar. *Jadval elementlari
)
1.3. HTML form elementlari, video, media ma’lumotlari bilan ishlash
(*
HTML form elementlari. *Media fayllar bilan ishlash
)
1.4. CSS (Cascading Style Sheets – stillarning kaskadli jadvali). Selektorlar, html bilan
o’zaro ishlash prinsiplari.
{*
CSS ga kirish. CSS ning HTML ga ta'siri. Inline ko'rinishida ta'sir ko'rsatish. *CSS ning HTML ga
ta'siringing internal, inline va external ko'rinishi. *Selectorlar (id, class va tag) va ular orasidagi
farqlar,
}
1.5.
CSSda o’lchamlar, elementlarning o’lchamlarini o’zgartirish va boshqarish, padding,
margin
{*
CSS da element chegara chiziqlari, *CSS da O'lcham turlari *CSS da oraliq masofalar. Margin va
padding parametrlari *Grid tamoyili
}
1.6. CSSda matnlar, fontlar, orqa fonlar, elementlarning chegara chiziqlari bilan ishlash
{
*CSS da matinlar bilan ishlash, fontlar bilan ishlash. *CSS da orqa fonlar. Background oilasi, orqa
fonga gradient berish.
}
1.7. CSS display parametrlari bilan ishlash
{*
CSS yordamida elementlarni joylash. Display parametrlari, display-flex, display-grid. *O'rganilgan
ma'lumotlar yuzasidan qo'shimcha amaliyot
(bu dars 2.5 - 3 soatga muljallangan 1ta darsda o`tiladi)
}
1.8 CSS position parametrlari va ularning ishlatilishi. CSSda effektlar
{
*
CSS da Position. Positon fixed, Positon absalut va relative, Positon sticky.
*
O'zgarishlarga vaqt
berish(transition),
*Qisqa amaliyot.
*Soyalar bilan ishlash. *Pseudo classlar va elementlar
(bu dars 2 - 2.5 soatga muljallangan 1ta darsda o`tiladi)
}
1.9. CSS yordamida HTML elementlari ustida amallar. Animatsiya.
{*
Transform - elementlar ustida amallar. *Animatsiyalar. From to usulidagi animatsiya yaratish, Vaqt
bo'yicha taqsimlangan animatsiyalar yaratish. *Animatsiyalarga doir amaliyot
}
1.10 amaliy dars

---

2-OY.
Frontendda murakkab strukturalar qurish
2.1 Media querylar bilan ishlash, adaptive web sahifa yaratish qoidalari
{*
Responsivlik haqida tushuncha. Media querylar *Overflow. Struktura yakuni *Media query
bo'yicha amalyot *flex yordamida mediasiz responsive dizayn yaratish
}
2.2 CSS ning kengaytirilgan imkonyatlari
{*
CSS da childe usulida stillash, ketma-ket elementlarni stillash, attributlari orqali stillash *Tugma
uchun effect. *CSS amaliyot.Checkbox elementlarinini stillash.
}
2.3 CSSning SASS protsessori
{ *
SASS haqida tushuncha va uning ishlash prinsipi. *Ruby platformasi va uning sass kutubxonasi.
*SASS ni proektni ishlatish va uni CSS ga kompilatsiya qilish. *SASS va code muxiti
}
2.4 SASS sintaksisi. SASS imkonyatlari
{ *
SASS da yozish qoidasi, o'zgaruvchilarni e'lon qilish, parametrlarini qisqa yozish. *SASS da stillar
oilsini yaratish va ularni dinamik ko'rinishda yaratish.
}
2.5. SASS texnologiyasi yordamida kichik stillar to'plamini yaratish
{ *
Asosiy stillar. Button stilini yaratish va uning ranglari bilan ishlash, button effectlari *Layout.
Bo'lingan layoutlarni yaratish va uni sinab ko'rish. Takomillashtirish va qo'shimcha tasklar.. *Box
stillar to'plami.
}
2.6 Twitter Bootstrap. Kirish. Asosiy ishlash prinsiplari. Bootstrapda asosiy GRID
tushunchasi.
{*
Twitter Bootstrap. Bootstrap bilan yaqindan tanishish. Bootstrap fayllari bilan tanishuv. *Darsga
tayyorgarlik. Bootstrap container klasslari. *Bootstrap grid. Row Col klasslari va Col klasslarini
ekranga moslashtirish
}
2.7 Bootstrapda matnlar, ranglar, tugmalar, form elementlar bilan ishlash
{*
Bootstrap matinlar bilan ishlash * Matilar ranglari bilan ishlash, matin shaklini o'zgartirish.
*Bootstrapda backgroundlar va matin o'lchamlarini o'zgartirish. *Jumbotron va ramslar bilan ishlash,
rounded klassi. *Jadvallarni stillash. *Buttonlarni stillash
}
2.8 Bootstrapda alohida HTML elementlarini stillash
{ *
Bootstrap progress, spinner *Card klasslar oilasi, Card group, card deck. * Nav klasslari,
pagination. *Form klasslari, Input group *Bootstrap yordamida checkboxlarni stillash
}
2.9 Bootstrapda JavaScriptga asoslangan pluginlari
{*
Bootstrap dropdown, dropup, dropleft, dropright. *Bootstrap collapse, accordion *Bootstrap
navigation bar *Bootstrap modal, carousel, alert va qo'shimcha klasslar.
}
2.10 2-oylik uchun sinov topshirig’i 3-oylik uchun

---

3-OY.
Frontendda murakkab strukturalar qurish
3.1 JavaScript dasturlash tiliga kirish.
{ *
JavaScrpit haqida. *JavaScript va HTML *JavaScriptda ma'lumotlarni chiqarish. *JavaScriptda
ma'lumot turlari. *O'zgaruvchi va o'zgarmaslar *Matematik operatorlar *Incrementva decrement
}
3.2 JavaScript tekshiruv va solishtirish operatorlari
{ *
Math kutubxonasi *Mantiqiy operatorlar *Tekshirish, Solishtirish operatorilari *Solishtirishning
ternar usuli
}
3.3 JavaScriptda object va array tushunchasi
{ *
JavaScriptda to'plam (array) tushunchasi. *Bir o'lchamli arraylar va ko'p o'lchamli arraylar, array
metodlari. *JavaScripda objectlar
}
3.4 JavaScriptda sikl operatorlari.
{ *
Sikillar (loop) haqida tushuncha, For sikli, While sikli, do While sikli. *For qo'shimcha sikl
imkonoiyatlari. For in sikli. *For qo'shimcha sikl imkonoiyatlari. For of sikli sintaksisi va ishlash
shartlari. *Mavzu bo'yicha kichik mashq.
}
3.5 JavaScriptda function tushunchasi
{ *
Funksiyalar haqida tushuncha.
*
Funksiya parametrlari, Rekursiv funksiyalar
}
3.6 JavaScriptda HTML bilan ishlash
{ *
JavaScript orqali HTML elementlarga murojaat. *Atributlar bilan ishlash, Stillar bilan ishlash,
Classlar bilan ishlash. *Hodisalar.
}
3.7 JavaScript bo'yicha amaliyot
{ *
Sodda kalkulyator funksiyasini yaratish(amaliy). *Online bilet sotishni tashkil qilish(amaliy).
}
3.8 jQuery kutubxonasiga kirish. jQuery sintaksisi, elementlarga murojaat
{ *
jQuery. Selektorlar bilan ishlash.
*
HTML elementlarining attrebutlari, stillari va klasslarini
o'zgartirish.
*
DOM manipulatsiya.
*
jQuery hodisalari. *Elementlarni HTML ga qo'shish
funksiyalari. *jQuery qo'shimcha funksiyalari, effectlar.
}
3.9 jQueryning ajax metodi
{ *
Ajax haqida tushuncha. *Ajax funksiyasi, Asinxron va Sinxron funksiyalar haqida ma'lumot.
*Ajax ma'lumotlarini html ga chizish.
}
3.10 JS bo`yicha sinov topshirig’i keyingi oylikka o`tish uchun

---

React Development

---

4-OY. React 1-modul
4.1 ES6 texnologiyasi. 1-dars
{ *ES6 haqida umumiy tushuncha. *let va const *Template string *ES6 funksiyalar * *Amaliy ish
*Takomillashtirilgan obyektlar. }
4.2 ES6 2-dars
{ *Spread/Rest operatorlari. *Destruktsiyalash. * Arrayning forEach, map, filter, find, reduce,
some va every metodlari }
4.3 Reactga kirish
{ *
Kirish *Hello world dasturini tuzish
}
4.4 ES6 va State
{*
ECMAScript asoslari. *Arrow functions *state dan foydalanish *state ga oid amaliy mashq *state
o'zgarganda render holati
}
4.5 Amaliy dars. Secundomer yaratish (Takrorlash)
4.6 Bir nechta komponentlar bilan ishlash
{ *
Komponentlar kombinatsiyasi *Komponentlar orasida ma'lumot almashish. Props
}
4.7 Lifecycle metodlar
{ *
Komponentning yashash sikli *Lifecycle metodlar va ulardan foydalanish *Lifecycle metodlar va
ulardan foydalanish *component didMount, didUpdate, willMount, ….. *Amaliy ish
}
4.8 Form elementlari
{ *
Form elementlari va ularni state bilan bog'lash *Event va Ref bilan ishlash
}
4.9 amaliy mashg`ulot. Takrorlash.

---

5-OY. React 2-modul
5.1 Qo'shimcha kutubxonalar va css fayllar bilan ishlash
{ *
CSS bilan ishlash *Yangi kutubxonalarni o'rnatish *Reactstrap va styled-components
}
5.2 Telegram clone. Amaliy mashg`ulot.
5.3 React da routing jarayoni
{ *
react-router-dom o'rnatilishi. Route komponentasi *Switch va Link komponentlari. history,
location, match xususiyatlari *Render atributi va spread operatori *Routing parametrlari
}
5.4 Functional component
{ *Functional componentlar sintaksisi *Functional componentlarda statedan foydalanish. useState
*Functional componentlarda lifecycle metodlar }
5.5 React hooks
{*react-hook: useContext va useContext amaliy mashg`ulot *react-hook: useReducer. * reac-hook:
useRef, useMemo, useCallback }
5.6
Api calls
{ Promise, Async, await, Axios }
5.7 && 5.8
Amaliy mashq
{ *Json-placeholder dan foydalanish. *Api ga murojaat qilish strukturasi *Fillter. Bir va ko`p
parametrli filter. *Pagination *Back-End ga malumotlarni saqlash. *React-hook-form ( 2 ta dars ga
mo`ljallangan )}

---

6-OY. React 3-modul
6.1 Webpack
{Webpack nima? *Webpack ni sozlash. *Webpack plugnlari. *Webpack loader va Webpack dev server.
react-babel-webpack }
6.2 Redux
{ useReducer ni takrorlash *Redux store yaratish *Bir va ko`p reducerlar bilan ishlash. *React+Redux.
*Amaliy mashg`ulot }
6.3 Redux Tools
{
Middleware. *Thunk va Devtools. *Clean code *Redux Toolkit
}
6.4 Redux api calls
{ *
Reduxda dasturni sozlash *Api call middleware *Ma'lumotlarni saqlash *Ma'lumotlarni
o'zgartirish va o'chirish
}
6.5 Optimazation
{}
6.6
6.7 Yakuniy dars sinov Project.
Har bir talabadan har bir modull uchun 1 tadan project olinadi yani 6 ta bu darsda berilgan vazifalardan
tashqari!!
Shunda natijalarga qarab sertifikat topshiriladi!!