Məzmuna keç
HTMLLAB
Baza bilik3 ay · 13 həftəCanlı onlayn

Modern Frontend
+ AI

React və Next.js ilə production tətbiq qurur və deploy edirsən; Claude Code, Cursor və Codex sənin komanda yoldaşlarındır.

26
canlı dərs
78
saat
6
modul
5
nəfər qrupda
Modern Frontend + AI

Kursun sonunda
nə bacaracaqsan?

  1. 01Git, terminal və AI-agentlərlə işləmək: Claude Code, Cursor, Codex
  2. 02Figma maketindən Tailwind CSS ilə adaptiv və əlçatan interfeys qurmaq
  3. 03Müasir JavaScript və TypeScript-də yazmaq, AI kodunda baqları tapmaq
  4. 04React Hook Form, Zod, Zustand və TanStack Query ilə React tətbiqləri qurmaq
  5. 05Next.js App Router, avtorizasiya və Supabase ilə full-stack tətbiq hazırlamaq
  6. 06Layihəni Vitest və Playwright testləri ilə örtmək, CI/CD qurmaq və Vercel-ə deploy etmək

Texnologiyalar

Bütün kurs TypeScript-də: interfeysdən testlərə və deploy-a qədər.

HTML5CSS3Tailwind CSSTypeScriptReactNext.jsshadcn/uiTanStack QueryZustandReact Hook FormZodVitestPlaywrightVercelGitHubClaude CodeCursorCodex

Tədris
proqramı

6 modul, hər biri 2 həftə, sonda müdafiə həftəsi. AI ilə işləmək ilk həftədən başlayır.

01İş mühiti və AI alətləriHəftə 1–2
  • Git/GitHub, terminal, VS Code və Cursor
  • LLM necə işləyir: kontekst, tokenlər, halüsinasiyalar
  • Claude Code və Codex: quraşdırma, ilk tapşırıqlar, plan rejimi
  • Kod üçün prompt engineering, CLAUDE.md / AGENTS.md / .cursor/rules qayda faylları
EV TAPŞIRIĞIMühiti və repozitoriyanı qurmaq; AI ilə şəxsi vizit kartı səhifəsi hazırlamaq; prompt jurnalını və təhlili əlavə etmək: AI nəyi səhv etdi.
02HTML, CSS, TailwindHəftə 3–4
  • Semantika və əlçatanlıq (a11y)
  • Flexbox, Grid, adaptivlik
  • Tailwind CSS və dizayn tokenləri
  • AI ilə Figma maketindən koda (skrinşot → verstka)
EV TAPŞIRIĞIFigma maketi üzrə landing səhifə: 3 ekran ölçüsü üçün adaptiv, Lighthouse balı 90-dan yuxarı.
03JavaScript və TypeScriptHəftə 5–6
  • Müasir JS: modullar, async/await, fetch
  • DOM və hadisələr
  • TypeScript: tiplər, interfeyslər, generics
  • AI kodunun review-su: baqları və təhlükəsizlik boşluqlarını tapmaq
EV TAPŞIRIĞIAçıq API ilə təmiz TS-də «Hava proqnozu» tətbiqi; ikinci mərhələdə 5 gizli baqı olan AI kodunu alıb düzəltmək.
04ReactHəftə 7–8
  • Komponentlər, props, state, hook-lar
  • Formlar: React Hook Form + Zod
  • State: Zustand, TanStack Query
  • shadcn/ui komponent kitabxanası, AI ilə komponent generasiyası
EV TAPŞIRIĞIDrag-and-drop, filtrlər və localStorage-da saxlama ilə tapşırıq trekeri (Kanban).
05Next.js və full-stack frontendHəftə 9–10
  • App Router, Server və Client Components
  • Routing, data yükləmə, Server Actions
  • Autentifikasiya (Auth.js / Clerk), backend kimi Supabase
  • Claude Code və Cursor-da MCP serverlər (Figma, GitHub, brauzer)
EV TAPŞIRIĞIQeydiyyat, verilənlər bazası və Vercel-ə deploy ilə Next.js-də bloq və ya mini-mağaza.
06Keyfiyyət və production-a çıxışHəftə 11–12
  • Testlər: Vitest və Playwright, AI ilə test generasiyası
  • Performans və SEO, Core Web Vitals
  • GitHub Actions-da CI/CD, PR-ların AI review-su
  • Portfolio, CV, müsahibəyə hazırlıq
EV TAPŞIRIĞILayihəni testlərlə örtmək (60%-dən çox), CI qurmaq; README və GitHub profilini səliqəyə salmaq.
FFinalHəftə 13
  • Layihələrin müdafiəsi, demo-gün
Final layihə

Tam işlək veb tətbiq

Öz seçdiyin veb tətbiq — SaaS-dashboard, marketplace və ya rezervasiya servisi — avtorizasiya, verilənlər bazası, testlər və deploy ilə. Müdafiədə commit tarixçəsini göstərir, hansı hissələri AI-ın yazdığını və onları necə yoxladığını izah edirsən.

AvtorizasiyaVerilənlər bazasıTestlərDeploy

Dərslər necə
keçirilir?

ŞƏNBƏNəzəriyyə və live-codingYeni mövzu və AI-agentlə birlikdə canlı kod.
BAZARPraktikaDərsdə tapşırıq, müəllim yoxlayır və səhvləri təhlil edir.
HƏFTƏ İÇİEv tapşırığı · 6–8 saatBazar verilir, şənbəyədək GitHub Pull Request ilə təhvil.
Qiymətləndirmə
Sertifikat: yekun bal 70%+ və davamiyyət 80%+

Suallar

Başlamaq üçün nə bilmək lazımdır?

Proqramlaşdırmanın əsasları: istənilən dildə dəyişənlər, dövrlər və funksiyalar. Heç vaxt kod yazmamısansa, sıfırdan başlayan AI Software Developer proqramını seç.

AI kodu yazırsa, mən nə öyrənirəm?

Kursun əsas qaydası: AI kodu yazır, amma müdafiədə hər sətri sən izah edirsən. AI-ın səhvlərini tapmağı, nəticəni yoxlamağı və tapşırığı düzgün qoymağı öyrənirsən.

Əlavə nə almaq lazımdır?

Ən azı bir AI aləti abunəliyi: Claude Pro, Cursor Pro və ya ChatGPT Plus (təxminən 34 ₼/ay). Bu, kursun qiymətinə daxil deyil.

Modern Frontend + AI
proqramına yazıl

Qrupda cəmi 5 yer var. İlk dərs pulsuzdur.