Front-End Kursu

Kurs Haqqında

• IT Giriş, Veb əsasları
  • 1 IT ekosistemi
  • 2 Git & GitHub
  • 3 VS Code
  • 4 Node & npm
  • 5 Veb necə işləyir
  • 6 Frontend vs Backend
• HTML5
  • 1 HTML nədir, nə üçün istifadə olunur
  • 2 Sənəd strukturu: <!DOCTYPE html>, <html>, <head>, <body>
  • 3 <meta charset="UTF-8">, viewport, description, keywords
  • 4 Başlıqlar: <h1>–<h6> və SEO üçün düzgün istifadəsi
  • 5 Mətn teqləri
  • 6 Blok elementlər
  • 7 Inline elementlər
  • 8 Siyahılar
  • 9 Cədvəllər
  • 10 Media (img, video, audio, picture)
  • 11 Formalar
  • 12 Accessibility
  • 13 Semantika
• CSS Əsasları
  • 1 CSS sintaksisi
  • 2 Selektorlar
  • 3 Box model (margin, padding, border)
  • 4 Display
  • 5 Position
  • 6 Flexbox
  • 7 Grid
  • 8 Responsiv dizayn, media queries
  • 9 Sass, SCSS
  • 10 Praktiki iş: 2 kiçik landing page
• Git
  • 1 Git nədir?
  • 2 Əsas əmrlər (init, add, commit, push, pull)
  • 3 Branch-lər
  • 4 Remote repository
  • 5 Workflow (branch → PR → merge)
  • 6 Konfliktlər və həlli
  • 7 gitignore
  • 8 Rebase vs Merge fərqləri
  • 9 Git reset & revert – səhv commit-lərin geri alınması
• Tailwind CSS
  • 1 Tailwind qurulumu
  • 2 Utility-first yanaşması
  • 3 Responsive & dark mode
  • 4 Dizayn tokenləri
• JavaScript Əsasları
  • Function declaration / expression
  • Arrow function
  • Parametrlər və default dəyərlər
  • Closure (bağlanmalar)
  • Callback funksiyalar
  • Massivlərlə iş
    • 1 Əsas metodlar: push, pop, map, filter, reduce, sort
    • 2 Dövrlər və iterasiya
  • Obyektlərlə iş
    • 1 Key–value cütləri
    • 2 Properti əlavə/çıxarma
    • 3 Obyekt metodları
    • 4 Destrukturizasiya
    • 5 Spread və Rest operatorları
  • ES6+ xüsusiyyətləri
    • 1 Template literals
    • 2 Modullar (import/export)
    • 3 Optional chaining ?
  • Asinxron proqramlaşdırma
    • 1 setTimeout, setInterval
    • 2 Promise (resolve, reject, then, catch, finally)
    • 3 Async/Await
    • 4 Fetch API (GET/POST)
    • 5 JSON ilə iş
  • Lokal yaddaş
    • 1 localStorage
    • 2 sessionStorage
    • 3 Praktiki iş: 500+ tapşırıq (easy, medium, hard), Code review
  • JavaScript nədir, harada işləyir
  • Dəyişənlər (var, let, const)
  • Data tipləri
  • Tip çevrilmələri
  • Operatorlar
  • İdarəetmə konstruksiyaları (if/else, switch, dövrlər)
  • String metodları
  • DOM (Document Object Model)
    • 1 Element seçimi
    • 2 Kontent və stil dəyişiklikləri
    • 3 Event-lər və Event bubbling
    • 4 Element yaratmaq/silmək
• TypeScript
  • TypeScript nədir və niyə istifadə olunur
  • Tiplərin əsasları: string, number, boolean, any, unknown, void, never
  • Array və Tuple tipləri
  • Object tipləri
  • Union və Intersection tipləri
  • Type alias və Interface
  • Funksiyaların tipləri (parametr və return type)
  • Optional və default parametrlər
  • Generics (ümumiləşdirilmiş tiplər)
  • Utility Types (Partial, Pick, Omit, Readonly və s.)
  • Enum
  • Module və tip faylları (.d.ts)
  • React ilə TypeScript
    • 1 Props typing
    • 2 State typing
    • 3 Event typing
    • 4 Custom hook-larda typing
  • API cavablarını tipikləşdirmək (axios/fetch ilə)
  • Form validation + TypeScript (zod və ya yup)
• TanStack Query (React Query)
  • 1 QueryClient
  • 2 useQuery
  • 3 useMutation
  • 4 Cache
  • 5 Refetch
  • 6 Pagination
  • 7 Optimistic updates
• React Əsasları
  • 1 Komponent anlayışı
  • 2 Props və State
  • 3 Hooklar (useState, useEffect, useMemo, useCallback)
  • 4 Komponentlər arası data ötürülməsi
  • 5 Conditional render, list render
  • 6 React Hook Form
  • 7 Custom Hooks
  • 8 Context API
  • 9 layihə: Dashboard app ( cross review + code review )
• Next.js / Vite
  • 1 Next.js nədir, React-dən fərqi
  • 2 App Router vs Pages Router
  • 3 File-based routing
  • 4 Layout anlayışı
  • 5 Metadata: title, description, SEO atributları
  • 6 Routing (static, dynamic, nested)
  • 7 SSR (Server-Side Rendering)
  • 8 SSG (Static Site Generation)
  • 9 ISR (Incremental Static Regeneration)
  • 10 CSR (Client-Side Rendering)
  • 11 Data Fetching (server actions, fetch)
  • 12 Layout və UI (loading, error, not-found)
  • 13 GET, POST, PUT, DELETE metodları
  • 14 Authentication üçün JWT və ya session cookie istifadəsi
  • 15 CORS məsələləri və həll yolları
  • 16 Auth və Middleware
  • 17 Component props typing (TypeScript ilə)
  • 18 API cavablarını tipikləşdirmək
  • 19 Server actions üçün tip təhlükəsizliyi
  • 20 zod və ya yup ilə validation
  • 21 SEO və optimallaşdırma
  • 22 layihə: Blog app ( cross review + code review)
• Production, Optimizasiya, Final layihə
  • 1 Performance optimizasiya (bundle split, lazy loading, img optimizasiya)
  • 2 SEO və accessibility
  • 3 Deploy (Vercel, Netlify)
  • 4 Best practices (env, folder structure, code style)