Eğitim İçeriği
Ön Tanıtım: Generative AI için Front-End
- Yazılım geliştiriciliğinde nesil oluşturma AI nedir?
- Araçlar özetleri: ChatGPT, GitHub Copilot, Codeium, vb.
- UI geliştiricilikte AI'nin avantajları ve sınırlamaları
Anlam Tabanlı UI Üretimi
- HTML yapısı ve bileşenleri için anlamlar üretme
- AI ile CSS stillerini oluşturma ve düzenleme
- Interaktif elemanlar için JavaScript'de AI'yi kullanma
Nesil Oluşturma Araçları ile Prototip Tasarımlarını Kurgulama
- Landing page ve çok bölüm tasarımları oluşturma
- Rezonyanlı tasarım anlamları (Flexbox, Grid)
- CodePen veya benzer araçlar ile ön izleme ve test etme
Bileşenleşme ve Tekrar Kullanılabilirlik
- Tekrar kullanılabilir UI bileşenleri oluşturma (düğmeler, kartlar, formlar)
- AI ile bileşen kütüphaneleri ve tasarım sistemlerini oluşturmak
- Popüler çerçevelerde AI'yi kullanma (React, Vue, Tailwind)
AI Yardımlı Kod İncelemesi ve Hata Ayıklama
- LLM'ler ile düzen hatalarını ve erişilebilirlik sorunlarını düzeltme
- HTML/CSS/JS kod performansını iyileştirme
- AI anlamları yoluyla hata açıklaması ve çözüm önerileri
İşbirlikçi Tasarım ve İçerik Üretimi
- Dummy içerik, kopya ve yer tutucular oluşturma için AI'yi kullanma
- Dizaynırlarla işbirliği yaparak wireframe'ler ve stilleri ortak tasarım
- AI'nin ürettiği fikirleri kullanılabilir HTML şablonlarına aktarma
Proje: Bir AI İzdımbıl Web Uygulaması Oluşturma
- İş anlatımı temelinde UI tasarım
- AI ile bileşen ve etkileşimler oluşturma
- Prototip için son çentikleme, test etme ve sunum
Özet ve Gelecek Adımlar
Kurs İçin Gerekli Önbilgiler
- HTML, CSS ve JavaScript'ün temel anlayışı
- Front-end karemleri veya tasarım sistemleriyle verimli çalışabilme becerisi
- UI/UX iş akışlarını hızlandırmak için AI'yi uygulamaya ilgi duyanlar
Kitle
- Front-end geliştiricileri
- UX mühendisleri
- Web tasarımcıları ve yaratıcı teknolojistler
Generative AI Front-End Geliştirme için Giriş
- Yazılım geliştirimi içinde generatif AI nedir?
- Araçlar genel bakışı: ChatGPT, GitHub Copilot, Codeium vb.
- UI geliştirimi içindeki AI'nin faydaları ve sınırlamaları
Belli İstemlerle UI Üretimi
- HTML yapısı ve bileşenleri için istemler oluşturma
- AI ile CSS stillerinin üretilmesi ve değiştirilmesi
- Interaktif elemanları AI ile çerçevelendirme (JavaScript)
Generatif Araçlarla Prototiplere Yatay Düzen Oluşturma
- Giriş sayfaları ve çok bölümlü düzenleri oluşturma
- Esnek tasarım istemleri (Flexbox, Grid)
- CodePen veya benzer araçlarda önizleme ve test etme
Bileşen Oluşturma ve Tekrar Kullanılabilirlik
- Tekrar kullanılabilen UI bileşenleri oluşturma (düğmeler, kartlar, formlar)
- AI'nin yardımıyla bileşen kütüphaneleri ve tasarım sistemleri oluşturma
- Popüler çerçevelerde AI kullanımı (React, Vue, Tailwind)
AI Destekli Kod İncelemesi ve Hata Ayıklama
- LLM'ler kullanarak düzen hatalarını ve erişilebilirlik sorunlarını düzelme
- HTML/CSS/JS kod performansının iyileştirilmesi
- Hataları açıklayıp AI istemleri aracılığıyla düzeltme önermeleri yapma
Kolludan Tasarım ve İçerik Üretimi
- AI ile dummy içerik, yazı ve yer tutucular üretme
- Tasarımcılarla birlikte krokisi ve stilleri yaratma
- AI üretilmiş fikirleri kullanışlı HTML şablonlarına aktarma
Proje: AI ile Çerçevelenen Bir Web Uygulaması Oluşturma
- İşlem istemine dayalı bir UI tasarım yapma
- Bileşenleri ve etkileşimlerini AI ile oluşturma
- Prototipin geliştirilmesi, testi ve sunumu
Özeti ve Sonraki Adımlar
Generative AI Front-End Geliştirme, büyük dil modelleri ve AI güçlendirilmiş araçların istem tabanlı kod üretilmesi, düzen prototipleri ve UI iyileştirmesi yoluyla front-end geliştirimi hızlandırmada nasıl kullanılacağını keşfeder.
Bu eğitmen yönetilen canlı eğitim (önlü veya saha eğitimleri), daha hızlı ve yaratıcı olarak kullanıcı arayüzlerini oluşturmaya ve yinelemeye istekli olan başlangıç seviyesi ila orta düzeyde front-end profesyonellere yöneliktir.
Bu eğitim sonunda, katılımcılar şu becerilere sahip olacaktır:
- Doğal dil istemlerinden HTML, CSS ve JavaScript'ü üretilen AI araçlarını kullanma
- Generatif modelleri kullanarak UI bileşenleri ve düzenlerini oluşturma ve iyileştirme
- Kodları tümünü yeniden yazmadan hızlıca yanıtlayıcı web tasarımları prototipleri üretme
- AI önerileri ve otomasyon iş akışlarını kullanarak front-end kodunu iyileştirme
Eğitim Formatı
- Etkileşimli ders anlatımı ve tartışma
- Çok sayıda alıştırma ve pratik
- Canlı laboratuvar ortamında uygulama yapma
Eğitim Özelleştirme Seçenekleri
- Bu eğitim için özelleştirilmiş bir eğitim talep etmek istiyorsanız, lütfen bizimle iletişime geçin ve düzenleme yapın.