Cursor, Claude, GitHub Copilot, Windsurf, Bolt.new, Lovable, Replit ve diğer AI araçlarını kullanarak kişisel web sayfanızı veya blogunuzu sıfırdan oluşturun — tek satır kod yazmadan.
Bu araçlar, sizin yerinize kod yazar. Siz sadece ne istediğinizi anlatırsınız.
Bilgisayarınıza indirip kuracağınız editörler. Dosyalarınız kendi bilgisayarınızda kalır, daha fazla kontrol sağlar.
ByteDance'ın AI editörü. VS Code tabanlı, şık arayüzü ve SOLO modu ile tamamen otonom proje oluşturabilir. Tamamen ücretsiz.
GitHub'ın AI asistanı. VS Code içinde çalışır ve Agent modu ile komple projeler üretebilir.
VS Code tabanlı, AI destekli kod editörü. Doğal dilde talimat vererek komple projeler oluşturabilirsiniz.
Anthropic'in güçlü AI modeli. claude.ai web arayüzünde "Artifact" özelliği ile anında HTML/CSS/JS kodu üretir ve önizleme gösterir.
Codeium'un AI editörü. Cascade özelliği ile çok adımlı görevleri otomatik halleder.
Rust ile yazılmış ultra hızlı, açık kaynak editör. Agentic Editing özelliği ile AI destekli kodlama yapabilirsiniz.
Açık kaynak AI kodlama platformu. VS Code, JetBrains IDE'leri ve CLI'da çalışır. 500+ AI modeli destekler.
JetBrains'in AI kodlama ajanı. IntelliJ IDEA, WebStorm, PyCharm gibi JetBrains IDE'leri içinde çalışır. VS Code kullanmıyorsanız güçlü bir alternatif.
Google'ın agent-first IDE'si. VS Code tabanlı, Gemini 3 modelleriyle çalışır. Manager View ile birden fazla AI ajanını aynı anda yönetebilirsiniz.
Hiçbir şey indirmeden, doğrudan tarayıcınızda web sitesi oluşturabileceğiniz araçlar.
StackBlitz'in tarayıcı tabanlı AI aracı. Tarayıcıda tam bir geliştirme ortamı çalışır, anında önizleme görürsünüz.
Daha önce "GPT Engineer" olarak bilinen araç. Görsel olarak çok şık sonuçlar üretir, Supabase entegrasyonu ile backend de ekleyebilirsiniz.
Tarayıcıda çalışan tam bir geliştirme ortamı. AI Agent özelliği ile doğal dilde proje oluşturabilirsiniz. Backend da çalıştırabilir!
Google'ın tarayıcı tabanlı AI geliştirme ortamı (eski adıyla Project IDX). Gemini AI ile doğal dilde uygulama oluşturabilirsiniz.
Bolt.new, Lovable veya Replit ile deneyin — tarayıcıda anında sonuç görürsünüz, hiçbir kurulum gerekmez.
Cursor indirin — Composer özelliği ile çok güçlü projeler oluşturabilirsiniz.
Claude.ai'da Artifact özelliği ile anında HTML/CSS/JS kodu üretip önizleyebilirsiniz.
VS Code + GitHub Copilot — GitHub Pages ile yayınlama çok kolay olur.
Her aracın ücretsiz planı var. Deneyerek size en uygun olanı bulun.
İyi bir prompt (talimat), iyi bir sonuç demektir. İşte etkili prompt yazmanın sırları.
Bir web sitesi yap
Kişisel portfolyo web sitesi oluştur. Üstte bir navigasyon barı olsun, ana sayfada büyük bir karşılama bölümü, altında 3 sütunlu beceriler bölümü ve en altta iletişim formu olsun. Renk teması koyu mavi ve beyaz olsun.
Blog sitesi yap
Kişisel blog sitesi oluştur. Şu sayfalar olsun:
1) Ana sayfa — son yazıların kartlar halinde listesi
2) Hakkımda sayfası — fotoğraf alanı ve biyografi
3) Yazı detay sayfası — başlık, tarih, içerik alanı
Tasarım minimal ve modern olsun, mobilde de güzel görünsün.
Güzel bir site yap
Modern bir tasarımla kişisel site oluştur. Arka plan gradient olsun (koyu mordan laciverte). Kartların köşeleri yuvarlatılmış olsun, hafif gölge efekti olsun. Yazı fontu sans-serif, başlıklar kalın. Butonlarda hover efekti olsun.
Web'de renkler HEX kodu ile belirtilir: # işareti ile başlayan 6 haneli bir kod. Örneğin:
Renk seçmek için şu siteleri kullanabilirsiniz:
Prompt'ta şöyle kullanın: "Ana renk #2563eb (mavi), arka plan #f8fafc (açık gri), butonlar #059669 (yeşil) olsun."
Doğru font seçimi sitenizin profesyonel görünümü için çok önemlidir. Web'de en yaygın font kaynağı Google Fonts'tur — tamamen ücretsiz ve tüm tarayıcılarda çalışır.
Prompt'ta şöyle kullanın: "Başlıklarda Google Fonts'tan 'Poppins' fontu kullan (kalın 700), paragraflar için 'Inter' (normal 400). Genel yazı boyutu 16px, başlıklar 32px olsun."
Farklı fontları denemek için: fontpair.co (uyumlu font çiftleri) ve typescale.com (yazı boyutu oranları)
AI'ya boşluk ve düzen konusunda detay verirseniz çok daha iyi sonuçlar alırsınız. İşte sık kullanılan terimler:
Prompt'ta şöyle kullanın: "Her bölümde 80px dikey padding olsun. Kartlar arasında 24px boşluk (gap) olsun. İçerik max-width 1140px ile ortalansın. Mobilde padding 20px'e düşsün."
AI'ya daha iyi talimat vermek için gerçek web bileşenlerini inceleyin. Bu siteler, yaygın UI bileşenlerinin farklı tasarım örneklerini sergiler — ne istediğinizi daha iyi tarif etmenize yardımcı olur:
Nasıl kullanılır? Örneğin Component Gallery'de "Card" bileşenine bakın, beğendiğiniz bir tasarımın özelliklerini tespit edin, sonra AI'ya bu detayları verin: "Proje kartları Pinterest tarzı masonry düzeninde olsun, her kartta üstte görsel, altında başlık ve açıklama, köşeleri yuvarlatılmış, hover'da hafifçe yukarı kalksın."
Siteniz için yüksek kaliteli, ücretsiz ve telif hakkı olmayan görseller bulabileceğiniz platformlar:
Prompt'ta şöyle kullanın: "Hero bölümünde Unsplash'tan bir doğa fotoğrafı kullan (placeholder olarak https://images.unsplash.com/photo-xxx formatında). Özellikler bölümünde her kart için Heroicons'tan ikon kullan."
Portfolyo sitesi oluştur. İçerikler şöyle olsun:
İsim: Ayşe Yılmaz
Meslek: Grafik Tasarımcı
Hakkımda: "5 yıldır freelance grafik tasarım yapıyorum..."
Projeler:
- Logo Tasarımı — Cafe Mola için modern logo
- Afiş Tasarımı — Müzik festivali afişi
- Web Tasarımı — E-ticaret sitesi arayüzü
Her proje bir kart içinde gösterilsin, kartlarda proje ismi ve açıklaması olsun.
Masaüstü editörlerde (Cursor, VS Code vb.) kendi dosyalarınızı projeye ekleyebilirsiniz:
AI araçlarının birçoğu web'den bilgi çekebilir veya API'lerden veri alabilir. Bunu prompt'larınızda kullanın:
🔍 "Bu siteye hava durumu widget'ı ekle. OpenWeatherMap API'sini kullan, İstanbul için güncel hava durumunu göstersin."
📊 "Döviz kurları bölümü ekle. Güncel USD/TRY ve EUR/TRY kurlarını bir API'den çekip göstersin."
📰 "Haber akışı bölümü ekle. Bir RSS feed'den son haberleri çekip listelesin."
🗺️ "İletişim sayfasına Google Maps haritası ekle, koordinatlar: 41.0082, 28.9784 (İstanbul)"
Apple.com'un minimalist tarzında bir ürün tanıtım sayfası yap. Büyük ürün görseli ortada, altında kısa özellik açıklamaları, siyah-beyaz renk şeması. Scroll'da paralaks efekti olsun.
Sonuç beğenmediyseniz, AI'ya neyi beğenmediğinizi söyleyin: "Butonlar çok küçük, daha büyük yap", "Renkleri daha canlı yap", "Navigasyon barını sabit yap" gibi düzeltmeler her zaman yapabilirsiniz.
Her şeyi adım adım vermek zorunda değilsiniz. Çok detaylı tek bir prompt ile de harika sonuçlar alabilirsiniz. Proje örneklerimizdeki promptlar buna iyi bir örnektir.
Bir şey çalışmıyorsa, hata mesajını kopyalayıp AI'ya yapıştırın: "Bu hatayı alıyorum: [hata mesajı]. Düzeltir misin?" — AI hataları çözmekte çok iyidir.
AI aracınızla konuşurken bu üç terimi bilmek, ne istediğinizi çok daha iyi ifade etmenizi sağlar.
Web sayfasının iskelet yapısıdır. Başlıklar, paragraflar, resimler, butonlar — sayfadaki her şey HTML etiketleri ile tanımlanır.
<h1>Merhaba Dünya</h1>
<p>Bu bir paragraf.</p>
<img src="foto.jpg">
Sayfanın görünümünü ve tasarımını belirler. Renkler, yazı tipleri, boşluklar, animasyonlar — her şeyin nasıl göründüğü CSS ile ayarlanır.
color: #6366f1;
font-size: 18px;
background: linear-gradient(...);
Sayfaya hareket ve etkileşim katar. Butona tıklayınca bir şey olması, form göndermek, animasyonlar — hepsi JavaScript ile çalışır.
button.addEventListener('click', ...)
document.getElementById('menu')
fetch('https://api.example.com')
Web sitenizin telefon, tablet ve masaüstünde farklı boyutlara uyum sağlamasıdır. AI araçlarına "mobil uyumlu olsun" demeniz yeterlidir.
Günümüz telefonları fiziksel olarak 1080p, 1440p hatta daha yüksek çözünürlüğe sahip. Ancak tarayıcılar "CSS pikseli" denen mantıksal bir birim kullanır — örneğin 1080px fiziksel genişliğe sahip bir telefon, tarayıcıda ~360-414px olarak görünür. Bu yüzden responsive tasarımda önemli olan piksel sayısı değil, içeriğin farklı ekran boyutlarına uyum sağlamasıdır. AI aracınıza "mobil uyumlu ve responsive olsun" demeniz yeterlidir.
AI aracınızla çalışırken bu terimleri görebilirsiniz. Hepsini ezberlemenize gerek yok — karşılaşınca buraya dönüp bakabilirsiniz.
Web sitenizin ana sayfası. Tarayıcı bir siteyi açtığında ilk bu dosyayı arar. Her web sitesinin bir index.html dosyası vardır.
Sitenizin tasarım dosyası. Renkler, yazı boyutları, boşluklar bu dosyada tanımlanır. HTML dosyasına bağlanır.
Sitenize etkileşim katan JavaScript dosyası. Buton tıklamaları, animasyonlar, form işlemleri burada yazılır.
Tipik bir site: ana klasörde index.html, style.css, script.js ve resimler için bir images/ klasörü bulunur.
Web adreslerinin teknik adı. https://siteniz.com gibi. GitHub Pages'te siteniz kullaniciadi.github.io adresinde yayınlanır.
Sitenizin adı, örneğin google.com. Ücretsiz alt alan adları (.github.io, .vercel.app) veya özel domain satın alabilirsiniz.
Yayınlamadan önce sitenizi kendi bilgisayarınızda çalıştırıp test edebilirsiniz. İşte 3 yöntem:
En basit yöntem: index.html dosyasına çift tıklayın, tarayıcınızda açılır.
index.html dosyasına çift tıklayınfile:///...)file:/// ile Açmak Ne Zaman Yetmez?Basit HTML + CSS + JS projelerinde dosyayı çift tıklayıp açmak gayet yeterlidir. Ancak şu durumlarda yerel bir sunucu (Live Server veya Python sunucusu) gerekir:
fetch() ile veri çekme: JavaScript'te fetch("veri.json") gibi dosya okuma işlemleri file:/// protokolünde CORS hatası verir. Sunucu gerekir.type="module"): Modern JavaScript modülleri (import/export) sadece HTTP üzerinden çalışır.http:// veya https:// gerektirir.🐍 Python ile hızlı sunucu: Terminal/Komut satırında proje klasörünüze gidin ve şu komutu çalıştırın:
python -m http.server 8000Ardından tarayıcıda http://localhost:8000 adresine gidin. Siteniz gerçek bir sunucudaymış gibi çalışacaktır. Durdurmak için terminalde Ctrl+C basın.
Kural: Sadece HTML, CSS ve basit JS kullanıyorsanız → çift tıkla yeter. fetch(), modül veya API kullanıyorsanız → sunucu gerekir.
Visual Studio Code kullanıyorsanız, Live Server eklentisi ile değişiklikleriniz anında tarayıcıda güncellenir.
index.html'e sağ tıklayıp "Open with Live Server" seçinBolt.new, Lovable veya Replit kullanıyorsanız, zaten tarayıcıda canlı önizleme görürsünüz.
Tüm tarayıcılarda yerleşik olarak bulunan güçlü araçlar. Sitenizi incelemenizi, hataları bulmanızı ve canlı düzenlemeler yapmanızı sağlar.
💡 Tüm tarayıcılarda Sağ Tık → İncele (Inspect) ile de açılabilir.
Sayfanın HTML yapısını görün. Herhangi bir elemana tıklayıp CSS özelliklerini canlı olarak değiştirebilirsiniz.
💡 Renkleri denemek için mükemmel! Değişiklikler geçicidir, sayfayı yenileyince sıfırlanır.
Seçili elemanın CSS kurallarını görüntüleyin. Değerleri tıklayıp anında düzenleyebilirsiniz.
💡 Beğendiğiniz değişiklikleri not alıp CSS dosyanıza uygulayın.
JavaScript hatalarını gösterir. Kırmızı mesajlar varsa, AI aracınıza bu hataları kopyalayıp yapıştırın.
💡 "Console'da şu hata var: [hata mesajı]" şeklinde AI'ya sorun.
AI'dan her küçük değişiklik için prompt yazmak yerine, bazı basit düzenlemeleri kendiniz yapabilirsiniz. İşte en yaygın 6 düzenleme:
Herhangi bir metni bulmak ve değiştirmek için editörünüzde Ctrl+H (Mac: Cmd+H) kullanın.
<!-- Eski metin -->
<h1>Hoş Geldiniz</h1>
<!-- Yeni metin -->
<h1>Merhaba, Ben Ahmet!</h1>💡 İpucu: Ctrl+H ile "Hoş Geldiniz" yazıp "Merhaba, Ben Ahmet!" ile değiştirebilirsiniz.
CSS dosyanızda renk kodlarını bulun ve değiştirin. Renkler genellikle # ile başlar (HEX format).
/* Ana rengi değiştir */
background: #6366f1;
background: #e74c3c;
/* Yazı rengini değiştir */
color: #333333;
color: #1a1a2e;💡 Renk seçmek için coolors.co veya htmlcolorcodes.com kullanabilirsiniz.
Resimleri değiştirmek için src özelliğindeki dosya adını güncelleyin.
<!-- Eski resim -->
<img src="images/photo.jpg" alt="Fotoğraf">
<!-- Yeni resim -->
<img src="images/profil.jpg" alt="Profil fotoğrafım">💡 Yeni resmi aynı klasöre koyup adını güncelleyin. alt yazısı resim yüklenmezse görünür.
<a href="..."> etiketlerinde URL'yi güncelleyin. Sosyal medya, e-posta veya telefon bağlantısı ekleyebilirsiniz.
<!-- Sosyal medya linki (X / eski Twitter) -->
<a href="https://x.com/kullaniciadi">X (Twitter)</a>
<!-- E-posta linki -->
<a href="mailto:ornek@email.com">Bana yazın</a>
<!-- Telefon linki (mobilde doğrudan arar) -->
<a href="tel:+905551234567">Beni Arayın</a>💡 mailto: e-posta, tel: telefon, https:// web sitesi bağlantısı açar.
CSS'te font-size değerini bulun ve sayıyı artırıp azaltın.
/* Başlık boyutunu büyüt */
font-size: 24px;
font-size: 36px;
/* Paragraf boyutunu ayarla */
font-size: 14px;
font-size: 18px;💡 px = piksel. Sayı büyüdükçe yazı da büyür. Genel metin için 16-18px idealdir.
CSS'te margin (dış boşluk) ve padding (iç boşluk) değerlerini değiştirin.
/* Dış boşluk (margin) */
margin: 10px;
margin: 30px;
/* İç boşluk (padding) */
padding: 8px 16px;
padding: 16px 32px;💡 margin elementin dışındaki, padding içindeki boşluktur. Değerler: üst sağ alt sol sırasıyla.
Aşağıdaki 3 küçük değişikliği kendi projenizde deneyin:
Ctrl+H ile).# renk kodunu coolors.co'dan seçtiğiniz yeni bir renkle değiştirin.<a href="mailto:..."> e-posta linki ekleyin.Bu 3 görevi tamamladığınızda, AI olmadan küçük düzenlemeler yapabileceğinize güveneceksiniz! 🎉
Aşağıdaki promptları doğrudan AI aracınıza yapıştırarak projeleri oluşturabilirsiniz.
Kendinizi tanıtacağınız, projelerinizi sergileyeceğiniz profesyonel bir portfolyo.
Kişisel portfolyo web sitesi oluştur. Tek sayfa (single page) olsun. Bölümler: 1) Hero/Karşılama: Büyük başlık "Merhaba, ben [İsim]", altında kısa açıklama ve "Projelerimi Gör" butonu 2) Hakkımda: Sol tarafta yuvarlak fotoğraf alanı (placeholder), sağda biyografi metni 3) Beceriler: 4 sütunlu ızgara, her birinde ikon ve beceri adı 4) Projeler: 3 proje kartı — her kartta görsel alanı, proje adı, açıklama ve "İncele" butonu 5) İletişim: Basit form (isim, e-posta, mesaj) ve sosyal medya ikonları 6) Footer: Telif hakkı yazısı Tasarım: Modern, minimalist. Ana renk: #2563eb (mavi), arka plan beyaz, kartlarda hafif gölge. Font: sans-serif. Scroll animasyonları olsun. Tamamen mobil uyumlu (responsive) olsun. Dosya yapısı: index.html, style.css, script.js şeklinde ayrı dosyalar olsun.
Yazılarınızı paylaşacağınız şık bir blog sitesi.
Kişisel blog web sitesi oluştur. Birden fazla sayfa olsun: Sayfa 1 — Ana Sayfa (index.html): - Üstte sabit navigasyon: Blog adı (sol), menü linkleri (sağ) - Blog yazılarının listesi kart formatında - Sağ tarafta veya altta: Hakkımda kısa kutusu, Kategoriler listesi Sayfa 2 — Yazı Detay (post.html): - Başlık, yazar, tarih, kategori etiketi - Yazı içeriği (örnek uzun metin koy) - Alt kısımda "Önceki Yazı" ve "Sonraki Yazı" navigasyonu Sayfa 3 — Hakkımda (about.html): - Fotoğraf alanı, detaylı biyografi, sosyal medya linkleri Tasarım: Temiz, okunabilir, beyaz arka plan, tipografi odaklı. Ana renk: #059669 (yeşil tonları). Mobil uyumlu olsun. Örnek blog yazıları (3 adet) oluştur: teknoloji, seyahat ve yemek konularında.
Küçük işletmeler için şık bir tanıtım sayfası.
Bir kafe/restoran için tanıtım web sitesi oluştur. Tek sayfa olsun. İşletme Bilgileri: - İsim: "Kahve Durağı" - Slogan: "Her yudumda bir hikaye" - Adres: İstanbul, Kadıköy - Çalışma saatleri: 08:00 - 22:00 Bölümler: 1) Hero: Tam ekran arka plan görseli (placeholder), üstünde kafe adı ve sloganı 2) Hakkımızda: Kısa hikaye, kuruluş yılı 3) Menü: Kategorilere ayrılmış (Kahveler, Tatlılar, Atıştırmalıklar). Her üründe isim ve fiyat. 4) Galeri: 6 adet fotoğraf placeholder'ı ızgara düzeninde 5) Konum ve İletişim: Google Maps placeholder, adres, telefon, çalışma saatleri 6) Footer: Sosyal medya ikonları Tasarım: Sıcak renkler (kahverengi, krem tonları), zarif font seçimi. Mobil uyumlu.
İş başvurularında kullanabileceğiniz dijital CV.
Online CV (özgeçmiş) web sayfası oluştur. Tek sayfa, A4 kağıt görünümünde. Sol Sütun (koyu arka plan): - Profil fotoğrafı (yuvarlak placeholder) - İsim ve unvan - İletişim bilgileri (e-posta, telefon, konum) - Beceriler (progress bar ile göster: Photoshop %90, Illustrator %85, Figma %80) - Yabancı Dil (İngilizce: İleri, Almanca: Orta) Sağ Sütun (açık arka plan): - Profil/Özet paragrafı - İş Deneyimi (3 adet, tarih, şirket, pozisyon, açıklama) - Eğitim (2 adet, tarih, okul, bölüm) - Sertifikalar Tasarım: Profesyonel, temiz. Yazdırılabilir olsun (print CSS). Renk: koyu lacivert + beyaz. Mobilde tek sütun olsun. Örnek kişi: "Mehmet Kaya, Dijital Pazarlama Uzmanı" olarak doldur.
Bir ürün veya hizmeti tanıtmak için landing page.
Bir mobil uygulama için landing page (tanıtım sayfası) oluştur. Uygulama: "FitTakip" — Egzersiz ve beslenme takip uygulaması Bölümler: 1) Hero: Sol tarafta başlık, açıklama ve "Hemen İndir" butonu. Sağ tarafta telefon mockup'ı (CSS ile oluştur). 2) Özellikler: 3 sütun — "Egzersiz Takibi", "Kalori Sayacı", "İlerleme Grafikleri" 3) Nasıl Çalışır: 3 adımlı süreç (1-Kaydol, 2-Hedef Belirle, 3-Takip Et) 4) Kullanıcı Yorumları: 3 testimonial kartı 5) Fiyatlandırma: 2 plan (Ücretsiz, Premium — aylık 49.99 TL) 6) SSS: 4-5 accordion soru-cevap 7) CTA: "Bugün başla" bölümü, e-posta giriş alanı Tasarım: Gradient arka planlar (mor-mavi), modern, enerjik. Animasyonlar olsun. Tamamen responsive.
Fotoğraflarınızı sergileyen görsel odaklı site.
Fotoğraf portfolyosu web sitesi oluştur. Ana Sayfa: - Minimal navigasyon (Fotoğrafçı adı sol üst, menü sağ üst) - Masonry düzeninde fotoğraf galerisi - Placeholder görseller için farklı boyutlarda renkli kutular kullan - Fotoğraflara tıklanınca lightbox açılsın - Üstte kategori filtreleri: Tümü, Portre, Manzara, Sokak, Mimari Hakkımda Sayfası: - Büyük portre alanı, biyografi, kullanılan ekipman listesi, iletişim formu Tasarım: Siyah arka plan, fotoğraflar ön planda. Minimal tipografi. Grid responsive olsun. Lightbox'ı sadece HTML, CSS ve JavaScript ile yap, harici kütüphane kullanma.
Veri dosyalarınızı tablo ve grafik olarak görüntüleyen interaktif bir sayfa.
CSV ve JSON veri görüntüleyici web uygulaması oluştur. Özellikler: 1) Dosya yükleme alanı: Kullanıcı CSV veya JSON dosyası sürükleyip bırakabilsin 2) Otomatik tablo oluşturma: Yüklenen veriyi düzenli bir tablo halinde göster 3) Sıralama: Sütun başlıklarına tıklanınca A-Z veya Z-A sıralansın 4) Arama/Filtreleme: Üstte bir arama kutusu, tabloda anlık filtreleme yapsın 5) Basit grafik: Chart.js kullanarak veriyi çubuk veya pasta grafik olarak gösterme seçeneği 6) Dışa aktarma: Filtrelenmiş veriyi CSV olarak indirme butonu Tasarım: Temiz, profesyonel, dashboard tarzı. Koyu tema seçeneği olsun. Ana renk: #3b82f6. Örnek olarak 10 satırlık bir ülke verisi JSON'ı içine göm (ülke, başkent, nüfus, kıta).
Bu tür projeler için kullanabileceğiniz ücretsiz, açık veri kaynakları:
Daha fazla veri seti için: Kaggle Datasets, Google Dataset Search, TÜİK Açık Veri
Yukarıdaki veri kaynaklarını kullanarak AI'ya şöyle promptlar yazabilirsiniz:
CSV veri görüntüleyici web uygulaması oluştur. Uygulama açıldığında şu URL'den veriyi otomatik çeksin: https://raw.githubusercontent.com/datasets/population/main/data/population.csv Özellikler: 1) Veriyi tablo halinde göster (sütunlar: Country Name, Year, Value) 2) Üstte ülke arama kutusu olsun, yazıldıkça tabloda filtrelesin 3) Yıl aralığı seçimi olsun (slider veya dropdown ile) 4) Chart.js ile seçilen ülkenin yıllar bazında nüfus grafiğini çizsin 5) Birden fazla ülkeyi karşılaştırma seçeneği olsun Tasarım: Dashboard tarzı, temiz, koyu tema. Ana renk: #3b82f6.
Canlı deprem verisi gösteren bir dashboard oluştur. Veriyi şu API'den çek: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson Özellikler: 1) Son 30 günün 4.5+ büyüklüğündeki depremlerini tablo halinde listele (yer, büyüklük, tarih, derinlik) 2) Büyüklüğe göre sıralama ve filtreleme 3) En büyük 10 depremi vurgulayan bir bölüm 4) Chart.js ile büyüklük dağılımı histogram grafiği 5) Bölgelere göre deprem sayısı pasta grafiği Tasarım: Koyu tema, kırmızı ve turuncu vurgular. Profesyonel dashboard görünümü. Responsive olsun.
Özel günleriniz için dijital davetiye sayfası.
Dijital düğün davetiyesi web sayfası oluştur. Tek sayfa, zarif ve romantik. Bilgiler: - Çift: Elif & Can - Tarih: 15 Haziran 2026, Cumartesi, Saat 18:00 - Mekan: Çırağan Sarayı, İstanbul Bölümler: 1) Hero: Tam ekran, çiçekli/zarif arka plan (CSS gradient ile), çiftin isimleri büyük el yazısı fontu ile, tarih 2) Geri sayım: Düğün tarihine kalan gün, saat, dakika, saniye (JavaScript ile canlı) 3) Hikayemiz: Tanışma hikayesi, 3-4 milestone (tarih çizelgesi formatında) 4) Mekan bilgisi: Adres, Google Maps embed placeholder, ulaşım bilgisi 5) RSVP formu: İsim, kişi sayısı, yemek tercihi (et/tavuk/vejetaryen), not alanı 6) Fotoğraf galerisi: 6-8 placeholder fotoğraf grid düzeninde Tasarım: Romantik, zarif. Renk paleti: altın (#d4af37), krem (#f5f0e8), koyu yeşil (#2d5a27). El yazısı fontu başlıklarda. Hafif paralaks efekti. Mobil uyumlu. Font: Google Fonts'tan "Great Vibes" veya "Dancing Script" başlıklar için.
Projenizi tamamladınız, yerel olarak test ettiniz — şimdi tüm dünya ile paylaşma zamanı! İşte ücretsiz yayınlama yöntemleri:
GitHub Pages, statik web sitelerini ücretsiz olarak yayınlamanın en popüler yoludur. GitHub hesabınız varsa hemen kullanabilirsiniz.
github.com adresine gidin ve ücretsiz bir hesap açın.
GitHub'da sağ üstteki + butonuna tıklayıp "New repository" seçin. İsim olarak kullaniciadi.github.io yazın.
ahmet123.github.io
Boş bir repo oluşturduğunuzda sayfada göreceğiniz "uploading an existing file" linkine tıklayın. Tüm proje dosyalarınızı (index.html, style.css, script.js, resimler) sürükleyip bırakın.
📸 Dosyalarınızı sürükleyip GitHub'a yükleyin. "Commit changes" butonuna tıklamayı unutmayın.
kullaniciadi.github.io formatındaki repolar için GitHub Pages otomatik olarak etkindir — ekstra ayar gerekmez. Birkaç dakika bekleyin, ardından siteniz şu adreste yayında olacak:
https://kullaniciadi.github.io
index.html arar. Bu dosya yoksa siteniz açılmaz.
site/index.html), Settings → Pages bölümünden klasör yolunu ayarlamanız gerekirindex.html, style.css ve script.js dosyalarını doğrudan reponun kök dizinine yüklemektirRepository'nize gidip dosyaları düzenleyin veya yeni dosyalar yükleyin. Değişiklikler birkaç dakika içinde otomatik yansır.
Kişisel siteler ve portfolyolar için fazlasıyla yeterli, ancak sınırları bilmek faydalı:
💡 Web arayüzünden yükleme limiti dosya başına 25 MB'dir. Daha büyük dosyalar için Git komut satırını kullanın.
Next.js'in yaratıcıları tarafından geliştirildi. Otomatik HTTPS, hızlı CDN ve kolay deploy.
Sürükle-bırak ile dosya yükleme özelliği ile en kolay yayınlama deneyimi. Form desteği de dahil.
Dünyanın en büyük CDN ağı ile ultra hızlı site yayınlama. Sınırsız bant genişliği!
Google'ın altyapısı ile güçlü hosting. Firestore veritabanı ve Auth ile entegre çalışır.
npm install -g firebase-toolsfirebase init hosting ve firebase deploy komutlarını çalıştırınBirden fazla farklı web sitesi yayınlamak istiyorsanız, her biri için ayrı repo oluşturmak işlerinizi çok kolaylaştırır.
Yukarıdaki rehberde kullaniciadi.github.io adında tek bir repo oluşturmayı öğrendiniz. Bu, ana siteniz (portfolyo, kişisel sayfa) için idealdir. Ancak zamanla farklı amaçlarla başka siteler de oluşturmak isteyebilirsiniz:
Bunların hepsini tek kullaniciadi.github.io reposuna koymak, dosyalar karıştığı için bakımı ve güncellemeyi çok zorlaştırır. GitHub'ın web arayüzünden dosya yüklediğinizde, hangi dosyanın hangi siteye ait olduğunu takip etmek içinden çıkılmaz hâle gelir.
| Tek Repo (kullaniciadi.github.io) | Proje Bazlı Ayrı Repolar | |
|---|---|---|
| Adres | kullaniciadi.github.io |
kullaniciadi.github.io/repo-adi |
| Dosya düzeni | Tüm projeler iç içe, karışabilir | Her repo sadece kendi dosyalarını içerir |
| Güncelleme | Yanlış dosyayı değiştirme riski | Sadece o projenin dosyalarını görürsünüz |
| Silme / Arşivleme | Klasörleri tek tek silmek zor | Repoyu silin veya arşivleyin — temiz! |
| En iyi kullanım | Ana kişisel siteniz (portfolyo, CV) | Her ek proje / deneme / etkinlik sitesi |
GitHub'da "+" → "New repository". Repo adını projenize göre verin, örneğin: dugun-davetiye, blog, etkinlik-2025.
"Public" seçin ve "Add a README file" kutucuğunu işaretleyin.
"Add file" → "Upload files" ile projenin dosyalarını yükleyin. Ana dosya yine index.html olmalı.
/ (root) seçin./docs klasörü: Repoda bir docs klasörü oluşturup site dosyalarını oraya koyun. Pages ayarlarında kaynak olarak /docs seçin. Bu yöntem, repo kökünde README ve diğer proje dosyalarını ayırmanızı sağlar — daha düzenlidir.
Repo ayarlarına gidin: Settings → Pages → Branch: main seçin.
Klasör olarak dosyalarınızın konumuna göre / (root) veya /docs seçin → "Save".
Birkaç dakika içinde site şu adreste yayınlanacak:
https://kullaniciadi.github.io/repo-adi
Örneğin repo adınız dugun-davetiye ise:
https://kullaniciadi.github.io/dugun-davetiye
/docs Klasörü Ne İşe Yarar?Normalde web sitesi dosyalarınızı (index.html, style.css, vb.) doğrudan repo köküne yüklersiniz. Ancak /docs klasörünü kullanmanın avantajları vardır:
README.md dosyası ile projenizin açıklamasını yazabilirsiniz/docs içinde düzenli ve ayrı dururdugun-davetiye/
├── README.md ← Proje açıklaması (yayınlanmaz)
├── notlar.txt ← Kendi notlarınız (yayınlanmaz)
└── docs/
├── index.html ← Ana sayfa (yayınlanır ✅)
├── style.css ← Stiller (yayınlanır ✅)
├── script.js ← JavaScript (yayınlanır ✅)
└── images/
└── foto.jpg ← Görseller (yayınlanır ✅)/docs klasörünü kullanıyorsanız, GitHub Pages ayarlarında klasörü /docs olarak seçmeyi unutmayın! Aksi hâlde siteniz 404 hatası verir.
docs/index.html yazın — GitHub otomatik olarak docs klasörünü oluşturur. Ardından diğer dosyaları "Add file" → "Upload files" ile docs klasörüne yükleyebilirsiniz.
Ana siteniz → kullaniciadi.github.io reposu (portfolyo, CV, kişisel sayfa)
Her ek proje → Ayrı repo (dugun-davetiye, blog, proje-tanitim, etkinlik-2025, vb.)
Bu şekilde ana siteniz kullaniciadi.github.io adresinde, diğer projeleriniz ise kullaniciadi.github.io/repo-adi adreslerinde yayınlanır. Her biri birbirinden tamamen bağımsızdır — birini güncellemek, silmek veya arşivlemek diğerlerini hiç etkilemez.
Tüm projeleriniz aynı kullaniciadi.github.io altında olduğu için, ana sitenizden diğer projelerinize kolayca link verebilirsiniz:
<!-- Portfolyonuzdaki projeler bölümünde -->
<a href="/dugun-davetiye">💍 Düğün Davetiye Sayfası</a>
<a href="/blog">📝 Blog'um</a>
<a href="/etkinlik-2025">📊 Etkinlik Sayfası</a>Bu linkler otomatik olarak kullaniciadi.github.io/dugun-davetiye gibi adreslere yönlendirir.
Web sitelerinin iki temel katmanı vardır. AI araçları ile yaptığımız siteler genellikle sadece frontend'tir — ve bu çoğu proje için yeterlidir!
Kullanıcının gördüğü ve etkileşime girdiği her şey. Tarayıcıda çalışır.
Sunucuda çalışan, kullanıcının görmediği kısım. Veri işleme ve depolama.
Bir restoran düşünün: Frontend = yemek salonu (müşterinin gördüğü kısım — menü, masalar, dekorasyon, garson). Backend = mutfak (müşterinin görmediği kısım — yemek pişirme, malzeme depolama, sipariş yönetimi). AI ile yaptığımız statik siteler, sadece "yemek salonu" kısmını oluşturur — ve kişisel siteler, portfolyolar, bloglar için bu fazlasıyla yeterlidir!
HTML, CSS ve JavaScript dosyalarından oluşur. Sunucuda hiçbir işlem yapılmaz, dosyalar olduğu gibi kullanıcıya gönderilir.
Sunucuda kod çalışır, veritabanından veri çekilir. Her kullanıcıya farklı içerik gösterilebilir.
Bazı "backend gerektirir" gibi görünen işlemleri aslında ücretsiz servislerle veya tarayıcı özellikleriyle çözebilirsiniz:
Tarayıcıda küçük veriler saklayın. Tema tercihi, checklist durumu, son görüntülenen sayfa gibi. Veriler sadece o tarayıcıda kalır.
Küçük metin verileri saklayın. Dil tercihi, kabul edilen bildirimler gibi. localStorage'a benzer ama sunucuya da gönderilir.
İletişim formlarınızdan gelen verileri e-postanıza yönlendirin. Backend yazmadan form işleme. Aylık 50 gönderim ücretsiz.
Blog yazılarınıza yorum sistemi ekleyin. Giscus GitHub Discussions kullanır ve tamamen ücretsiz.
Kullanıcı giriş sistemi ekleyin — Google, GitHub, e-posta ile giriş. Auth0 aylık 7.000 aktif kullanıcı ücretsiz.
Google Sheets'i basit bir veritabanı olarak kullanın. Form verilerini direkt bir tabloya kaydedin.
Projeniz büyüdükçe gerçek bir veritabanına ihtiyaç duyabilirsiniz. İşte ücretsiz katmanları cömert olan popüler servisler:
Google'ın NoSQL bulut veritabanı. Gerçek zamanlı veri senkronizasyonu. Frontend SDK ile doğrudan bağlanabilirsiniz.
Açık kaynaklı Firebase alternatifi. PostgreSQL veritabanı, auth, storage ve gerçek zamanlı abonelik desteği.
Dünyanın en popüler NoSQL veritabanı. JSON benzeri belgeler ile esnek veri modeli.
Projeniz gerçek bir backend gerektiriyorsa, bu platformlar ücretsiz başlangıç katmanları sunar:
Node.js, Python, Go ve daha fazlası. GitHub'dan otomatik deploy. Aylık $5 ücretsiz kredi.
railway.app →Statik siteler, web servisleri, veritabanları — hepsi tek platformda. Ücretsiz katman mevcut.
render.com →Tarayıcıdan tam backend uygulamaları geliştirip deploy edin. AI destekli kodlama dahil.
replit.com →Aşağıdaki adımları sırayla takip edin. Tamamladıklarınızı işaretleyin — ilerlemeniz tarayıcınızda kaydedilir.