ფრონტენდ დეველოპმენტი AI-ით
კურსი გასწავლით, როგორ შექმნათ Front-end UI კომპონენტები და სრული გვერდები AI ინსტრუმენტებით — v0.dev, bolt.new, Lovable, Cursor და Claude — პრომპტის წერიდან დეპლოიმენტამდე.
კურიკულუმი
რას მოიცავს კურსი
ეტაპი I
საფუძვლები
bolt.new-ით ინტერაქციული Pricing Cards-ის შექმნა
ამ გაკვეთილში შეისწავლით, როგორ გამოიყენოთ bolt.new — AI კოდირების გარემო — ინტერაქციული ფასების ბარათების შესაქმნელად. თქვენ გაიგებთ, თუ როგორ უნდა მოითხოვოთ ფუნქციური UI AI-სგან, რომელიც მოიცავს არჩეულ მდგომარეობას, Hover ეფექტებს და მონაცემთა ოპტიმალურ სტრუქტურას.
9 წთLovable-ით Signup Form-ის შექმნა და ვალიდაცია
ამ გაკვეთილში შეისწავლით, როგორ გამოიყენოთ AI app builder Lovable, რათა შექმნათ სრულფასოვანი Signup Form. ჩვენ განვიხილავთ, თუ როგორ უნდა აღწეროთ Prompt-ში ფორმის ველები, ვალიდაციის წესები, შეცდომის შეტყობინებები და მომხმარებლის ინტერფეისის სხვადასხვა მდგომარეობა (Error, Loading, Success), რათა მიიღოთ მაღალი ხარისხის და მომხმარებელზე ორიენტირებული შედეგი.
9 წთCursor და shadcn/ui: Login Card კომპონენტის შექმნა
ეს გაკვეთილი გიჩვენებთ, თუ როგორ გამოიყენოთ AI კოდის რედაქტორი Cursor და React კომპონენტების ბიბლიოთეკა shadcn/ui Login Card კომპონენტის შესაქმნელად. თქვენ ისწავლით, თუ როგორ უნდა მართოთ AI-ის მიერ გენერირებული კოდი, გააუმჯობესოთ დიზაინი და უზრუნველყოთ ხელმისაწვდომობა თქვენს Next.js პროექტში.
9 წთ
ეტაპი II
პრაქტიკა
Claude-ით Tailwind Design Tokens: ერთიანი ვიზუალური სტილი
ამ გაკვეთილში შეისწავლით, როგორ გამოიყენოთ Claude AI Design Token სისტემის შესაქმნელად Tailwind CSS პროექტებისთვის. გაიგებთ, თუ როგორ უზრუნველყოფს Design Tokens UI-ის თანმიმდევრულობას და როგორ დახვეწოთ AI-ის მიერ გენერირებული სტილები თქვენი პროექტის ვიზუალური იდენტობის გასამყარებლად.
3 წთv0.dev: Screenshot-დან Feature Section-მდე
ამ გაკვეთილში შეისწავლით, როგორ გამოიყენოთ v0.dev-ის Screenshot-to-code შესაძლებლობა Feature Section-ის შესაქმნელად. გაიგებთ, როგორ განასხვავოთ სტრუქტურა ბრენდინგისგან და როგორ მოარგოთ AI-ის მიერ გენერირებული კოდი თქვენს დიზაინ ტოკენებსა და ბრენდის მოთხოვნებს.
6 წთbolt.new-ით Responsive დეშბორდის Layout-ის შექმნა
ამ გაკვეთილში შეისწავლით, თუ როგორ გამოიყენოთ AI ინსტრუმენტი bolt.new ფუნქციური და რეაგირებადი Dashboard Layout-ის შესაქმნელად. თქვენ გაეცნობით, თუ როგორ უნდა ჩამოაყალიბოთ მკაფიო მოთხოვნები AI-სთვის, რათა უზრუნველყოთ სწორი Layout constraints, როგორიცაა Breakpoint-ები და Navigation-ის ქცევა სხვადასხვა მოწყობილობაზე.
6 წთLovable-ით ლენდინგის MVP-ის აწყობა
ამ გაკვეთილში შეისწავლით, თუ როგორ შექმნათ Mini Landing Page MVP (Minimum Viable Product) Lovable-ის გამოყენებით. გაეცნობით MVP-ის კონცეფციას, მის ძირითად სექციებს და ისწავლით, როგორ მოახდინოთ გვერდის იტერაციული ოპტიმიზაცია AI-ის დახმარებით, რათა მიიღოთ ეფექტური შედეგი.
9 წთ
ეტაპი III
შენი პროექტი
Cursor-ით კოდის გამართვა და UI Refactor
ამ გაკვეთილში შეისწავლით, თუ როგორ გამოიყენოთ Cursor AI-ის შესაძლებლობები თქვენი AI-გენერირებული UI კოდის გასაუმჯობესებლად. გაეცნობით Refactor-ის მნიშვნელობას, Code Review-ის პროცესს და ისწავლით, თუ როგორ შექმნათ სუფთა, მოწესრიგებული და ადვილად შესანარჩუნებელი კოდი.
9 წთClaude-ით Responsive Layout-ის კოდის გამართვა
ამ გაკვეთილში შეისწავლით, თუ როგორ გამოიყენოთ AI ასისტენტი Claude, რათა ეფექტურად მოაგვაროთ Responsive Layout-ის პრობლემები, რომლებიც ხშირად ჩნდება UI-ის სხვადასხვა ეკრანის ზომაზე ადაპტაციისას. თქვენ ისწავლით პრობლემის იზოლირებას, დეტალური Debug Prompt-ების შექმნას და AI-ის მიერ შემოთავაზებული გადაწყვეტილებების შეფასებას.
12 წთv0.dev და shadcn/ui: Table კომპონენტით მონაცემების ჩვენება
ამ გაკვეთილში შეისწავლით, თუ როგორ შექმნათ პროფესიული Table კომპონენტი v0.dev-ისა და shadcn/ui-ის გამოყენებით. ჩვენ დეტალურად განვიხილავთ მონაცემთა სტრუქტურულად ჩვენებას, წაკითხვადობას და მომხმარებლის გამოცდილების ოპტიმიზაციას, AI-ის შესაძლებლობების მაქსიმალური გამოყენებით.
3 წთNext.js გვერდის აწყობა და Deploy Checklist Cursor-ით
ამ გაკვეთილში შეისწავლით, როგორ ააწყოთ ცალკე შექმნილი UI კომპონენტები ერთ Next.js გვერდად Cursor AI-ის დახმარებით. ასევე, გაეცნობით პროექტის გამოქვეყნებისთვის საჭირო Deploy Checklist-ს და ისწავლით, როგორ მოაგვაროთ პოტენციური პრობლემები AI-ის გამოყენებით.
6 წთ
შენი სერტიფიკატი
გახსენი ის ყველა გაკვეთილის დასრულებით.
გააგრძელე
სხვა კურსები ამავე კატეგორიაში
ბექენდ და API დეველოპმენტი AI-ით
კურსი მოიცავს back-end სერვისებისა და API-ების შექმნას AI ინსტრუმენტების გამოყენებით — REST endpoint-ებიდან ავთენტიფიკაციამდე, webhook-ებამდე და დეპლოიმენტამდე.
მონაცემთა ბაზების დიზაინი AI-ით
ამ კურსში შეისწავლით მონაცემთა ბაზების დიზაინს AI-ის დახმარებით — ER-დიაგრამებიდან SQL სქემებამდე, უსაფრთხოებამდე და ოპტიმიზაციამდე — Claude, ChatGPT და Cursor-ის გამოყენებით.
Vibe Coding: პროგრამირება AI-ით ნულიდან
ისწავლეთ AI-ით პროგრამირება ნულიდან: შექმენით HTML გვერდები, JavaScript ლოგიკა და CLI სკრიპტები Cursor-ის, ChatGPT-ის, GitHub Copilot-ისა და Claude Code-ის გამოყენებით.
გავაგრძელოთ ერთად?
ერთხელ ყიდულობ. სამუდამოდ შენია. პირველი გაკვეთილი — უფასოდ. დანარჩენი — შენი ტემპით.