Standart frontend development. 

Plans:

HTML (ba'rshe kerekli tegler)

CSS (Ba'rshe kerekli propertiyler, transforms, displays, flex, grid, BEM, animations, figma makets, advanced css projects, etc...)

SASS (ba'rshe kerekli methodlar, functionlar. @import, @extend, @mixin, functions: String, Numeric, List, Map, Selector, Introspection, Color, advanced projects with sass)

Tailwindcss (Ba'rshe kerekli classname lar, best practices, advanced projects)

Github (real proekt, komanda menen islewde kerekli komandalar)

1-sabaq | HTML basics

— Uliwma web sayttin' duzilisi menen tanisiw.

— HTML haqqinda, kod jaziw redaktorlarin install qiliw.

— Birinshi web saytimizdi jaratamiz.

— HTML da text tagleri. Tag tu'sinigi. Comments

— Attribute, value, element definition.

— Oqiwshilarg'a task.

— Taskti islep ko'rsetiw.

2-sabaq | HTML. (form, list, audio, video, iframe, etc...)

— Checking home work.

— 1-sabaqtin' tiykarlarin qaytalaw

— HTML Form menen islesiw. (input all types, textarea, select, form action, etc...)

— Form practice

— Oqiwshilarg'a task

— Taskti qayta islep korsetiw

— Unordered list.

— Ordered list.

— Nested lists.

— audio, video

— audio video adv attributes

— iframe video, website

— Kartalar menen islesiw

— Practice

3-sabaq | Form repeat, Table

— Checking homework

— O'tken sabaqti takirarlaw

— Table basics

— Table tiykarlari menen practice

— Quramali table lar menen islew

— Kerekli attribute lardi ko'rip shig'iw

— Quramali table task.

— O'tken ba'rshe sabaqlardan bir practice

— Oqiwshilarg'a tapsirma

— Tapsirmani ko'rip shig'ip qayta islep ko'rsetiw

4-sabaq | HTML code sheatsheet, CSS ke kirisiw

— Checking homework

— O'tilgen ha'm qalip qoyg'an kerekli teglerdi ko'rip shig'iw

— CSS connect, sintaksis, select, comments. (inline, internal, external)

— property, value definition

— background, color, border, margin, padding, width, height

— colors, :hover

— Practice

— oqiwshilarg'a tapsirma

— tapsirmani ko'rip shig'ip, tuwri joli menen islep ko'rsetiw

5-sabaq | CSS basics

— Checking homework

— Outline

— Border radius, border-image, background

— List

— font

— icon

— Tables

— Form styles

— Praktika

6-sabaq | CSS basics

— Checking homework

— Display values

— max, min properties

— positions

— Praktika

— Oqiwshilarg'a task beriw

— Taskti tekseriw, duris jolin ko'rsetiw

7-sabaq | CSS basics

— Checking homework

— Units

— Praktika

— Formalar menen

— Table lar menen

— Text effects, shadow, gradients, opacity

— Pseudo elements

— Pseudo classes

— transitions

— Praktika

— Oqiwshilarg'a task

— Taskti tekseriw, duris jolin ko'rsetiw

8-sabaq | Responsivity, display flex

— Checking homework

— Display values

— Flex definition

— Flex properties, (container, item)

— Container properties

— Item properties

— @media queries

— Basic layout

— Advanced layout

— Praktika

— Oqiwshilarg'a task

— Taskti ko'rip shig'iw

9-sabaq | Figma, figma maketleri menen islesiw

— Checking homework

— Google akkountlardi, default browserlerdi tuwirlaw

— Figmadan akkount jaratiw

— Figma menen tanisiw

— dev mode/designer mode

— Figma maketlerinen mag'luwmatlar aliw. (export)

— Kishi figma maketi menen praktika, (URL)

10-sabaq | transforms, animations

— Checking homework

— transform values, methods

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

— animation definition

— animation properties

— animation shorthands

— keyframes

— praktika

— oqiwshilarg'a task

— taskti ko'rip shig'iw

11-sabaq | Display grid

— Checking homework

— grid definition

— gridtin' flexboxtan parqi

— grid properties

— grid container properties and values

— grid item properties and values

— grid project

— oqiwshilarg'a task

— taskti ko'rip shig'iw, tuwri jolin ko'rsetiw

12-sabaq | Exam

— Exam figma maket (url)

— Exam projectlerin toliq ekenligin ko'rip shig'iw

— Qatnaspag'anlarg'a(sebepli) online exam aliw. (yaki qosimsha shaqiriw)

13-sabaq | Github

— Google akkountlardi, default browserlerdi tekseriw

— Github akkount jaratiw

— Github definition

— git bash ti ustanovka qiliw

— terminal, cmd tu'sinigi, kerekli commandlar

— git bash and github connection

— taza proekt jaratqanda kerekli komandalar

— git clone, git pull, git push

— proektimizte basqa programmistler menen islesiw

— Teamlead sipatinda

— basqalarg'a dostup beriw, ha'm PR lardi merge qiliw, conflictlerdi sheshiw

— Developer sipatinda

— PR jaratiw, qa'teliklerdi tuwirlaw. (IMPORTANT ma'sla'ha't!)

— github issues, projects, repos, settings

14-sabaq | Landing page project (URL) 1/2

— Checking homework

— Proekt penen tanisiw

— Proektti githubqa ju'klew

— Proektimizdi config qiliw (kerekli variable, font, file, folder lardi du'zip shig'iw)

— Global styles

— Navbar, home, home cards

— Proektti githubqa push qiliw

— Oqiwshilardag'i qa'teliklerdi ko'rip shig'iw

15-sabaq | Landing page project (URL) 2/2

— Checking homework

— Proekttin' qalg'an ta'repin ko'rip shig'iw

— Kerekli fayllardi alip keliw

— Cards, teachers, send sms, footer

— Qa'teliklerdi ko'rip shig'iw

— Oqiwshilar menen soraw juwaplar

— Projectti githubqa push qiliw

— Hoistingge ju'klew

16-sabaq | SASS

— Checking homework

— SASS penen tanisiw

— SASS or SCSS? Differences

— @import, @extend, @mixin

— functions: String, Numeric, List, Map, Selector, Introspection

— Praktika

17-sabaq | SASS project (URL) 1/2

— Checking homework

— Proekt penen tanisiw

— Proektti githubqa ju'klew

— Proektimizdi config qiliw (kerekli variable, font, file, folder lardi du'zip shig'iw)

— Global styles

— Navbar, home, home cards

— Proektti githubqa push qiliw

— Oqiwshilardag'i qa'teliklerdi ko'rip shig'iw

18-sabaq | SASS project 2/2

— Checking homework

— Proekttin' qalg'an ta'repin ko'rip shig'iw

— Kerekli fayllardi alip keliw

— Qa'teliklerdi ko'rip shig'iw

— Oqiwshilar menen soraw juwaplar

— Projectti githubqa push qiliw

— Hoistingge ju'klew

19-sabaq | Advanced dashboard project 1/2

— Checking homework

— Proekt penen tanisiw

— Proektti githubqa ju'klew

— Proektimizdi config qiliw (kerekli variable, font, file, folder lardi du'zip shig'iw)

— Global styles

— Layout, responsive

— Sidebar, Cart

— Proektti githubqa push qiliw

— Oqiwshilardag'i qa'teliklerdi ko'rip shig'iw

20-sabaq | Advanced dashboard project 2/3

— Checking homework

— Proekttin' qalg'an ta'repin ko'rip shig'iw

— Kerekli fayllardi alip keliw

— Cart, main bo'limin islep shig'iw, responsive

— Qa'teliklerdi ko'rip shig'iw

— Oqiwshilar menen soraw juwaplar

— Projectti githubqa push qiliw

— Hoistingge ju'klew

21-sabaq | Tailwindcss

— Checking homework

— Tailwind definition

— Tailwind connect

— Basic classes

— Practice

— Advanced classes, psedu elements, pseudo classes

— Project

22-sabaq | Tailwindcss project

— Checking homework

— Tailwdincsste real project

— Proekt penen tanisiw

— Proektti githubqa ju'klew

— Proektimizdi config qiliw (kerekli variable, font, file, folder lardi du'zip shig'iw)

— Global styles

— Proektti githubqa push qiliw

— Oqiwshilardag'i qa'teliklerdi ko'rip shig'iw

23-sabaq | Tailwindcss project

— Checking homework

— Tailwdincsste real project

— Proekt penen tanisiw

— Proektti githubqa ju'klew

— Proektimizdi config qiliw (kerekli variable, font, file, folder lardi du'zip shig'iw)

— Global styles

— Qa'teliklerdi ko'rip shig'iw

— Oqiwshilar menen soraw juwaplar

— Projectti githubqa push qiliw

— Hoistingge ju'klew

24-sabaq | Exam

— Exam figma maket (url)

— Exam projectlerin toliq ekenligin ko'rip shig'iw

— Qatnaspag'anlarg'a(sebepli) online exam aliw. (yaki qosimsha shaqiriw)

1-sabaq | Kirisiw.

— JavaScript o'zi ne?

— Sabaq folderi ushin github repo jaratiw.

— JavaScriptti compile qiliw. Html, NodeJS, Online Compilers.

— NodeJS ti ustanovka qiliw.

— Threadlar haqqinda, let, var, const parqlari.

— O'zgeriwshi jaratiwdagi case'ler.

— reserve words

— Sabaqti bekkemlew.

2-sabaq | Data types

— Data types haqqinda.

— Primitive ha'm Objectler

— String

— Number

— BigInt

— Boolean

— Undefined

— Null

— Symbol

— Object

— Array

— Functions

3-sabaq | Type conversions, operators, logical operators

— Arithmetic Operators

— Assignment Operators

— Comparison Operators

— String Operators

— Logical Operators

— Bitwise Operators

— Ternary Operators

— Type Operators

— Scopes

— use strict haqqinda

— Sabaqti bekkemlew ushin a'meliyat

4-sabaq | Comparisons

— If else, ternary. (Practice)

— Switch case

— If else, Else if isletiwdegi best practice ler.

— Nullish operatori

— O'tilgen operatorlar boyinsha tapsirma, soraw juwaplar

— Date

5-sabaq | Loops

— for loop

— for in, for of

— advanced loops with arrays

— for loop arqali practice, nested loops

— labels

— while. for menen parqi

— functions, hoisting

— do while

— ba'rshe looplar parqlari.

— tapsirma, tapsrimanin' optimal jolin ko'rip shig'iw

6-sabaq | Objects, Class

— Object definition

— Object properties, values

— Distructures

— Accessing object properties

— Methods

— function decloration, expression, arrow

— parameters,

— context this

— call, apply, bind

— shallow copy vs deep copy

7 -sabaq | Advanced functions, class, objects

— function decloration, expression, arrow

— parameters,

— Class definition

— constructors

— constructors with classes

— constructors with functions

— reference

— invocations, call, apply, bind

— closures, repeating scopes

— prototype vs __proto__

— static

8-sabaq | Objects and Arrays repeating, practice

— Advanced objects in array

— CRUD operators with array

— Instagram posts clone. (mini practice)

— Oqiwshilarg'a task

— Taskti tekseriw

9-sabaq | setIntervall, setTimeout, localStorage, etc...

— setIntervall

— clearIntervall, set new intervall & clear

— setTimeout

— localStorage

— getters, setters

— Math

— random, floor,

10-sabaq | Promises, async, await, module

— Promise

— trycatch

— async, await

— macro, micro tasks

— Example

— Oqiwshilarg'a task

— module, export, impot

— named, default exports

11-sabaq | DOM kirisiw

— DOM - Document Object Model definition

— window objecti haqqinda tu'sinik

— parent, child definition

— selectors

— element attributes, get | set

getElementById

getElementsByName

getElementsByTagName

getElementsByClassName

querySelector

querySelectorAll

12-sabaq | Exam

— Exam maseleleri (URL)

— Exam projectlerin toliq ekenligin ko'rip shig'iw

— Qatnaspag'anlarg'a(sebepli) online exam aliw. (yaki qosimsha shaqiriw)

13-sabaq | DOM Nodes, attributes advanced, events

— DOM Tree

— childNodes, first child, last child

— closest, nodeType

— nodeName, tagName

— innerHTML, innerText

— getComputedStyle()

— events

— mouse events

click

mouseover/mouseout

mousemove

dblclick

contextmenu

mouseup/mousedown

— Modifier: shift, alt, ctrl, meta

• shiftKey: Shift
• altKey: Alt (or Opt for Mac)
• ctrlKey: Ctrl
• metaKey: Cmd for Mac

— window events

— clientX, clientY, layerX, layerY, x,y

— practice

14-sabaq | Form events, input, select, change, copy

— form submit, preventDefault()

— Event: change

— Event: input

— cut/copy/paste

— DOMContentLoaded

— focus/blur

— practice

— data-src

— practice

15-sabaq | CRUD Project

— Reading employee

— Delete employee

— Create employee

— Update employee

— Check employee and delete many

— Optimizing code

16-sabaq | fetch, api

— API definition, (Application Programming Interface)

— fetch, (jsonplaceholder)

— promises, async, await

— request methods

— query, param, header

— crud operator with API

17-sabaq | fetch, api (practice)

— practice with api openweatherapi

18-sabaq | Practice movies

— practice with api movies

— searching movies, filter by type

19-sabaq | Project 1/2

— Project introduction

— postman

— import project API to postman

— start project UI with tailwindcss

— register form, login form UI

— integration with register,login API

— save JWT token to localStorage

— authorization validation

20-sabaq | Project 2/2

— Checking authorization validation

— showing all tasks

— create category

— create task field

— delete tasks

— update tasks

— complete task

— github

21-sabaq | Create project with vite

— installing nodejs, npm

— vite intro

— creating vanillajs project with vite

— folder structures

— change folter structure to src

— folders, files definition

— node_modules, package.json, lock files, .gitignore

— installing new packages

— package managers, yarn, npm, pnpm

22-sabaq | Tailwind, vite advanced project 1/2

— installing new vite project

— add tailwindcss package

— configure tailwindcss

— project intro

— start project layout

— save project to github

23-sabaq | Tailwind, vite advanced project 2/2

— checking hometasks

— project continue

— complete project

— code optimizing

24-sabaq | Exam

— Exam project API, FIGMA

— Exam projectlerin toliq ekenligin ko'rip shig'iw

— Qatnaspag'anlarg'a(sebepli) online exam aliw. (yaki qosimsha shaqiriw)

1-sabaq | ReactJS kirisiw

— web site & web application definition

— SPA Projectler haqqinda

— Vite create react project

— Folder structure

— node_modules, package.json, lock files, .gitignore

— ReactDOM

— JSX syntax

— Components

— Task

2-sabaq | React component, state, props

— Component, props

— Children

— js vs jsx

— state vs simple variable

— components rendering

— practice with state

3-sabaq | Events

— state

— onChange, onClick

— form elements, events

— validations

— controlled, uncontrolled elements

— CRUD practice

4-sabaq | React Router Dom, useEffect

— lifeSycles, useEffect basic

— installing package react-router-dom

— react-router-dom definition

— BrowserRouter

— Routes, Route (path, elements)

— NotFound page

— params

— useParams, useLocation, useNavigate, ...

— practice

— users page, user profile page

5-sabaq | Practice

— Project figma (URL)

— Create Layout component

— Outlet component definition

— Create Navbar

— Create footer

— Create pages

6-sabaq | hooks, useEffect, useState, useCallback

— lifeSycles

— useEffect in functional components

— class components lifeSycles

— useState

— useCallback

— custom hooks

— return and without return hooks

— practice

7-sabaq | API, axios, interseptors

— axios

— fetch vs axios differences

— GET, POST, PUT, PATCH, DELETE

— headers

— FormData

— image, file uploading to server

— set default headers

— Authorization

— Project

8-sabaq | ContextAPI 1/2

— why context api and state managements?

— createContext(), Provider

— useContext get Provider values

— Global store

— Project with ContextAPI

— Oqiwshilarg'a task

— Taskti ko'rip shig'iw

9-sabaq | ContextAPI 2/2, useReducer

— useContext, createContext repeating

— useReducer

— create reducer function, and why this is need?

— create state, dispatch with useReducer

— state definition

— dispatch definition

— Services definition

— project with useContext, useReducer

10-sabaq | Food application 1/2 (ContextAPI, Chakra UI)

— configure new project

— installing dependencies

— configure Chakra UI light/dark mode

— configure React-router-dom

— creating folder structure

— configure ContextAPI

— Create Layout

— Create Navbar, light/dark mode

— create Home, Banner, Categories UI

— Fetching categories

— Filter meals by category, search

— commit all changes and push to github

11-sabaq | Food application 2/2 (ContextAPI, Chakra UI)

— review project

— fetch meals with search and category

— add meals to basket

— show basket meals

— change meal button where meal includes in the basket

— remove basket meals

— code optimizing

— commit and push all changes

12-sabaq | Exam

— Exam project API, FIGMA

— Exam projectlerin toliq ekenligin ko'rip shig'iw

— Qatnaspag'anlarg'a(sebepli) online exam aliw. (yaki qosimsha shaqiriw)

13-sabaq | ContextAPI, Chakra UI medium clone, Formik app 1/2

— Project intro

— Creating new project

— configure ContextAPI, ChakraUI, react-router-dom

— Create layout with Dynamic Outlet

— create Navigation

— Configure light/dark theme

— show posts, and users

— commit all changes all push to github

14-sabaq | ContextAPI, Chakra UI medium clone, Formik app 2/2

— Create user page

— Create post page

— configure text editor

— Formik configuration

— code review & optimizing

— commit all changes & push

15-sabaq | Redux kirisiw

— redux introduction

— redux ne ushin kerek?

— store ha'm reducerdin' inslew princpi

— createStore() @depreceted function

— store, dispatch, subscribe

— reducerda payload penen islesiw

— react-redux

— bindActionCreatorMethod

— practice

16-sabaq | Redux basics, redux-toolkit

— useSelector

— redux-toolkit intro

— configureStore

— createReducer, createAction | Old version

— createSlice

— practice with redux-toolkit

— oqiwshilarg'a task

— taskti ko'rip shig'iw

17-sabaq | redux-toolkit advanced

— Service functions

— createAsyncThunk

— slice extra reducers

— createEntityAdapter

— practice

— task

18-sabaq | CRM Project 1/2

— project intro

— configure project

— redux, redux-toolkit, chakra-ui, react-router-dom installing

— create layout

— create sidebar

— navbar, main

— Chakra UI Custom colors, styles

— configure redux

— creating categories

— delete, update, show categories

— commit all changes and push to github repo

19-sabaq | CRM Project 2/2

— project code review

— creating products

— delete, update, show products

— async functions,

— services

— code optimizing

— commit all changes & push

— deploy project

20-sabaq | MobX with React

— MobX intro

— Mobx vs Redux

— Mobx installing

— configure project

— repeating classes

— contructor

— makeObservable, makeAutoObservable

— obrserver function with function components

— async actions with mobx

— create project

— creating todos, show todos

— get todos with async action

— delete, update, complete tasks

— get keyword

— mobx optimization

— push project to github

21-sabaq | Next.js

— Next.js ne? Ne ushin kerek?

— Next.js vs React.js

— SSR definition

— pages, app routing, dynamic routing

— Link component, queries

— getStaticProps, getServerSideProps

— project with Next.js

22-sabaq | Next.js project 1/2

— soon

23-sabaq | Next.js project 2/2

— soon

24-sabaq | Exam

— Exam project API, FIGMA

— Exam projectlerin toliq ekenligin ko'rip shig'iw

— Qatnaspag'anlarg'a(sebepli) online exam aliw. (yaki qosimsha shaqiriw)