Front-end kursi

Kurs 5 ta moduldan iborat.

1-modul

1.Web dasturlash. Web texnologiyalari, ishlash prinsiplari, ishlatilish sohalari

1.1 Web dasturlash nima? Ishlash prinsiplari.

2.HTML frontend dasturlashning asosiy texnologiyasi

2.1 Loyiha yaratish. Mening birinchi loyiham.

2.2 HTML asoslari.

2.3 Matnlar bilan ishlash

2.4 HTMLda ro'yxatlar, rasm va linklar

2.5 Jadval elementlari

3.HTML form elementlari, video, media ma’lumotlari bilan ishlash

3.1 HTML form elementlari

3.2 Media fayllar bilan ishlash

4.CSS (Cascading Style Sheets – stillarning kaskadli jadvali). Selektorlar, html bilan o’zaro ishlash prinsiplari.

4.1 CSS ga kirish. CSS ning HTML ga ta'siri. Inline ko'rinishida ta'sir ko'rsatish

4.2 CSS ning HTML ga ta'siringing internal ko'rinishi

4.3 CSS ning HTML ga ta'siringing external ko'rinishi

4.4 CSS ning HTML ga ta'sir vositalari. Selektorlar. Teg selektorlari

4.5 CSS da class selektorlari

4.6 CSS da id selektorlari

4.7 Selektorlar orasidagi asosiy farqlar

5.CSSda o’lchamlar, elementlarning o’lchamlarini o’zgartirish va boshqarish, padding, margin

5.1 Tayyorgarlik. CSS da element chegara chiziqlari

5.2 CSS da o'chamlar. O'lchamlar bilan ishlash. O'lcham turlari

5.3 CSS da oraliq masofalar. Margin va padding parametrlari

6.CSSda matnlar, fontlar, orqa fonlar, elementlarning chegara chiziqlari bilan ishlash

6.1 Tayyorgarlik. CSS da matilar bilan ishash. 1- qism

6.2 CSS da matinlar bilan ishash. 2- qism

6.3 CSS da fontlar bilan ishlash. 1 - qism

6.4 CSS da fontlar bilan ishlash. 2 - qism

6.5 CSS da orqa fonlar. Background oilasi

6.6 CSS da orqa fonga gradient berish

7.CSS display parametrlari bilan ishlash

7.1 Tayyorgarlik

7.2 CSS yordamida elementlarni joylash. Display parametrlari

7.3 CSS da display flex. 1 qism

7.4 CSS da display felx. 2 qism

7.5 CSS da display flex. 3 qism

7.6 O'rganilgan ma'lumotlar yuzasidan qo'shimcha amaliyot

8.CSS position parametrlari va ularning ishlatilishi.

8.1 Darsga tayyorgarlik

8.2 Positon fixed

8.3 Positon absalut va relative

8.4 Positon sticky

9.CSSda effektlar

9.1 Tayyorgarlik

9.2 O'zgarishlarga vaqt berish

9.3 Qisqa amaliyot. Tayyorgarlik

9.4 Soyalar bilan ishlash. 1 - qism

9.5 Soyalar bilan ishlash. 2 - qism

10.CSS yordamida HTML elementlari ustida amallar

10.1 Darga kirish. Tayyorgarlik

10.2 Transform - elementlar ustida amallar

10.3 Animatsiyalar 1-qism. From to usulidagi animatsiya yaratish

10.4 Animatsiyalar 2-qism. Vaqt bo'yicha taqsimlangan animatsiyalar yaratish

10.5 Animatsiyalarga doir amaliyot. 1-qism

10.6 Animatsiyalarga doir amaliyot. 2-qism

2-Modul

Media querylar bilan ishlash, adaptive web sahifa yaratish qoidalari

1.1 - Darsga tayyorgarlik

1.2 - Responsivlik haqida tushuncha. Media querylar

1.3 - Amaliyot. 1 - qism

1.4 - Amaliyot. 2 - qism

1.5 - Amaliyot. 3 - qism

1.6 - Amaliyot. 4 - qism

1.7 - Overflow. Struktura yakuni

1.8 - Media query bo'yicha amalyot

CSS ning kengaytirilgan imkonyatlari

2.1 - CSS da childe usulida stillash

2.2 - CSS da ketma-ket ekementlarni stillash usuli

2.3 - CSS da HTML attributlari orqali stillash

2.4 - CSS amaliyot. Tugma uchun effect

2.5 - CSS amaliyot.Checkbox elementlarinini stillash

CSSning SASS protsessori

3.1 - SASS haqida tushuncha

3.2 - SASS ishlash prinsipi

3.3 - Ruby platformasi

3.4 - Ruby platformasining sass kutubxonasi

3.5 - SASS ni proektda ishlatish

3.6 - SASS ni CSS ga kompilatsiya qilish

3.7 - SASS va kod muxiti

SASS sintaksisi. SASS imkonyatlari

4.1 - SASS sintaksisi. Darsga tayyorgarlik

4.2 - SASS da yozish qidasi

4.3 - SASS da o'zgaruvchilarni e'lon qilish

4.4 - SASS da CSS parametrlarini qisqa yozish

4.5 - SASS da stillar oilsini yaratish

4.6 - SASS stillar oilasini dinamik ko'rinishda yaratish

SASS texnologiyasi yordamida kichik stillar to'plamini yaratish

5.1 - Tayyorgarlik. O'zgaruvchilar

5.2 - Asosiy stillar. Button stilini yaratish

5.3 - Button ranglari bilan ishlash.

5.4 - Button effectlari

5.5 - Layout. Bo'lingan layoutlarni yaratish

5.6 - Yaratilgan layoutni sinab ko'rish. Takomillashtirish.

5.7 - Box stillar to'plami.

5.8 - Layoutni takomillashtirish va qo'shimcha tasklar.

Twitter Bootstrap. Kirish. Asosiy ishlash prinsiplari

6.1 - Twitter Bootstrap.

6.2 - Bootstrap bilan yaqindan tanishish

6.3 - Bootstrap fayllari bilan tanishuv

Bootstrapda asosiy GRID tushunchasi

7.1 - Darsga tayyorgarlik. Bootstrap container klasslari

7.2 - Bootstrap grid. Row Col klasslari

7.3 - Col klasslarini ekranga moslashtirish

Bootstrapda matnlar, ranglar, tugmalar, form elementlar bilan ishlash

8.1 - Bootstrap matinlar bilan ishlash

8.2 - Bootstrap matilar ranglari bilan ishlash, marin shaklini o'zgartirish

8.3 - Bootstrapda backgroundlar va matin o'lchamlarini o'zgartirish

8.4 - Jumbotron va ramslar bilan ishlash, rounded klasi

8.5 - Jadvallarni stillash

8.6 - Buttonlarni stillash

Bootstrapda alohida HTML elementlarini stillash

9.1 - Bootstrap progress,

9.2 - Spinner

9.3 - Card klasslar oilasi

9.4 - Card group, card deck

9.5 - Nav klasslari, pagination

9.6 - Form klasslari

9.7 - Input group

9.8 - Bootstrap yordamida checkboxlarni stillash

Bootstrapda JavaScriptga asoslangan pluginlari

10.1 - Bootstrap dropdown, dropup, dropleft, dropright

10.2 - Bootstrap collapse, accordion

10.3 - Bootstrap navigation bar

10.4 -Bootstrap modal

10.5 - Bootstrap carousel

10.6 - Bootstrap alert

10.7 - Bootstrap qo'shimcha klasslar

3-modul

JavaScript dasturlash tiliga kirish.

1.1 - JavaScrpit haqida

1.2 - JavaScript va HTML

1.3 - JavaScriptda ma'lumotlarni chiqarish

1.4 - JavaScriptda ma'lumot turlari

1.5 - O'zgaruvchi va o'zgarmaslar

1.6 - Matematik operatorlar

1.7 - Incrementva decrement

JavaScript tekshiruv va solishtirish operatorlari

2.1 - Darsga tayyorgarlik

2.2 - Math kutubxonasi

2.3 - Mantiqiy operatorlar

2.4 - Tekshirish operatorlari

2.5 - Solishtirish operatorilari

2.6 - Solishtirishning ternar usuli

JavaScriptda object va array tushunchasi

3.1 - JavaScriptda to'plam (array) tushunchasi

3.2 - Bir o'lchamli arraylar va ko'p o'lchamli arraylar

3.3 - Array metodlari

3.4 - JavaScripda objectlar

JavaScriptda sikl operatorlari.

4.1 - Sikillar (loop) haqida tushuncha

4.2 - For sikli

4.3 - While sikli

4.4 - do While sikli

4.5 - For qo'shimcha sikl imkonoiyatlari. For in sikli

4.6 - For qo'shimcha sikl imkonoiyatlari. For of sikli sintaksisi va ishlash shartlari

4.7 - Mavzu bo'yicha kichik mashq.

JavaScriptda function tushunchasi

5.1 - Funksiyalar haqida tushuncha

5.2 - Funksiya parametrlari

5.3 - Rekursiv funksiyalar

JavaScriptda HTML bilan ishlash

6.1 - Darsga tayyorgarlik

6.2 - JavaScript orqali HTML elementlarga murojaat

6.3 - Atributlar bilan ishlash

6.4 - Stillar bilan ishlash

6.5 - Classlar bilan ishlash

6.6 - Hodisalar

JavaScript bo'yicha amaliyot

7.1 - Darsga tayyorgarlik

7.2 - Sodda kalkulyator funksiyasini yaratish

7.3 - Online bilet sotishni tashkil qilish

jQuery kutubxonasiga kirish. jQuery sintaksisi, elementlarga murojaat

8.1 - jQuery. Darsga tayyorgarlik

8.2 - Selektorlar bilan ishlash

8.3 - HTML elementlarining attrebutlari, stillari va klasslarini o'zgartirish

8.4 - DOM manipulatsiya

jQuery funksiyalari

9.1 - jQuery hodisalari

9.2 - Elementlarni HTML ga qo'shish funksiyalari

9.3 - jQuery qo'shimcha funksiyalari

9.4 - jQuery effektlari

jQueryning ajax metodi

10.1 - Ajax haqida tushuncha. Darsga tayyorgarlik

10.2 - Ajax funksiyasi

10.3 - Asinxron va Sinxron funksiyalar haqida ma'lumot

10.4 - Ajax ma'lumotlarini html ga chizish

4-modul

Reactga kirish

1.1 - Kirish

1.2 - Hello world dasturini tuzish

JSX va Komponentlar

2.1 - JSX sintaksisi

2.2 - Reactda birinchi komponentni yaratish

ES6 va State

3.1 - ECMAScript asoslari

3.2 - Arrow functions

3.3 - state dan foydalanish

3.4 - state ga oid amaliy mashq

3.5 - state o'zgarganda render holati

Sekundomer yaratish

4.1 Amaliyot

Bir nechta komponentlar bilan ishlash

5.1 - Komponentlar kombinatsiyasi

5.2 - Komponentlar orasida ma'lumot almashish. Props

Lifecycle metodlar

6.1 - Komponentning yashash sikli

6.2 - Lifecycle metodlar va ulardan foydalanish

6.3 - Amaliy qism

Form elementlari

7.1 - Form elementlari va ularni state bilan bog'lash

7.2 - Event va Ref bilan ishlash

Qo'shimcha kutubxonalar va css fayllar bilan ishlash

8.1 - CSS bilan ishlash

8.2 - Yangi kutubxonalarni o'rnatish

8.3 - Reactstrap va styled-components

Telegram clone

9.1 - Strukturani tuzib olish

9.2 - Local storage

9.3 - Chat qismi

React da routing jarayoni

10.1 - react-router-dom o'rnatilishi. Route komponentasi

10.2 - Switch va Link komponentlari. history, location, match xususiyatlari

10.3 - Render atributi va spread operatori

10.4 - Routing parametrlari

5-modul

Functional component

1.1 - Functional componentlar sintaksisi

1.2 - Functional componentlarda statedan foydalanish. useState

1.3 - Functional componentlarda lifecycle metodlar

React hooks

2.1 - React-hooks: useContext

2.2 - Amaliy mashq: useContext

2.3 - React-hooks: useReducer

2.4 - React-hooks: useRef, useMemo, useCallback

Api calls

3.1 - Promise

3.2 - Async, await

3.3 - Axios

Amaliy mashq

4.1 - Json-placeholder dan foydalanish

4.2 - Api ga murojaat qilish strukturasi

4.3 - Filter

4.4 - Bir va ko'p parametrli filter

4.5 - Pagination

4.6 - Backendga ma'lumotlarni saqlash

4.7 - React-hook-form

Webpack

5.1 - Webpackni nima ?

5.2 - Webpack ni sozlash

5.3 - Webpack pluginlari

5.4 - Webpack loader va Webpack dev server

5.5 - React+Babel+Webpack

Redux

6.1 - useReducer ni takrorlash

6.2 - Redux store yaratish

6.3 - Bir va ko'p reducerlar bilan ishlash

6.4 - React+Redux

6.5 - Amaliy mashq

Redux Tools

7.1 - Middleware

7.2 - Thunk va Devtools

7.3 - Clean code

7.4 - Redux Toolkit

Redux api calls

8.1 - Reduxda dasturni sozlash

8.2 - Api call middleware

8.3 - Ma'lumotlarni saqlash

8.4 - Ma'lumotlarni o'zgartirish va o'chirish

Optimization

9.1 - 'Lighthouse' ni 90+ optimizatsiya qilish