Cursor ile İlk Web Sitenizi Yapın: Adım Adım

Vibe coding dünyasına adım attınız, Cursor editörünü bilgisayarınıza kurdunuz ve boş, siyah bir ekranla bakışıyorsunuz. Geleneksel yazılımcılar için bu boş ekran korkutucudur; bizim için ise sonsuz bir oyun alanıdır.

Eğitim teknolojileri üzerine geliştirdiğim projelerde veya mobil uygulamalarım için hızlıca bir tanıtım sayfası (landing page) hazırlamam gerektiğinde, artık günlerimi harcamıyorum. Cursor'ın gücünü kullanarak dakikalar içinde profesyonel web siteleri ayağa kaldırabiliyorum.

Bu rehberde, hiç kodlama bilmeseniz bile sıfırdan şık, modern ve tamamen size ait bir "Kişisel Portfolyo" web sitesini adım adım nasıl inşa edeceğinizi göreceğiz. Sadece aşağıdaki promptları (istemleri) kopyalayın ve sihrin gerçekleşmesini izleyin.

1. Adım: Hazırlık ve Boş Bir Tuval

Her büyük proje, basit bir klasörle başlar.

  1. Bilgisayarınızın masaüstünde ilk-sitem adında boş bir klasör oluşturun.
  2. Cursor programını açın.
  3. Sol üstteki File (Dosya) > Open Folder (Klasör Aç) yolunu izleyerek masaüstündeki bu boş klasörü seçin.

Şu an Cursor, sizin boş tuvalinize bakıyor. Boyaları eline alması için yapay zekayı uyandırmamız gerekiyor.

2. Adım: Composer ile İskeleti Kurmak (Sihir Başlıyor)

Web sitemizin iskeletini oluşturmak için Cursor'ın en güçlü silahı olan Composer'ı kullanacağız.

Klavyenizden Ctrl + I (Mac için Cmd + I) tuşlarına basın. Karşınıza çıkan küçük pencere, sizin mimarınıza emir vereceğiniz yerdir. Aşağıdaki metni kopyalayıp o pencereye yapıştırın ve Enter'a basın:

🎯 1. Prompt (Kopyala-Yapıştır): *"Sen uzman bir web geliştiricisin. Benim için tek sayfalık, modern ve profesyonel bir 'Kişisel Portfolyo' web sitesi oluştur. İhtiyacım olanlar:

  1. HTML, CSS ve JavaScript kodları ayrı dosyalarda olsun.
  1. Tasarım şık bir koyu tema (dark mode) barındırsın, vurgu renkleri neon mavi olsun.
  2. Sitede 'Hakkımda', 'Projelerim' ve 'İletişim' olmak üzere 3 bölüm bulunsun.
  3. Tasarım mobil cihazlarla tam uyumlu (responsive) olsun."*

Ne olacak? Cursor arka planda çalışmaya başlayacak. Saniyeler içinde sol taraftaki boş klasörünüzde index.html, style.css ve script.js dosyalarının kendi kendine oluştuğunu göreceksiniz. Ekranda çıkan "Accept All" (Hepsini Kabul Et) butonuna tıklayın.

(Buraya: Cursor ekranında Composer'ın 3 farklı dosyayı aynı anda oluşturduğu ve "Accept All" butonunun göründüğü anın ekran görüntüsünü ekleyin.)

3. Adım: Sitenizi Canlı Görmek

Yazdığımız kodların neye benzediğini görmek çok kolaydır. Cursor'ın sol tarafındaki dosya menüsünden index.html dosyasına sağ tıklayın. Eğer bilgisayarınızda kuruluysa "Open with Live Server" seçeneğini seçin. (Eğer bu seçenek yoksa, masaüstündeki klasörünüze gidip index.html dosyasına çift tıklayarak tarayıcınızda açabilirsiniz.)

Karşınızda karanlık temalı, şık ve neon mavi vurguları olan modern bir web sitesi duruyor!

4. Adım: Vibe İterasyonu (Kodu Canlandırmak)

Tasarımımız harika ama sitemizi biraz daha interaktif hale getirelim. İletişim formundaki "Gönder" butonuna basıldığında hiçbir şey olmuyor. Klasik yöntemde saatlerce JavaScript form doğrulama kodları yazmamız gerekirdi. Vibe coding ile sadece ne istediğimizi söylüyoruz.

Tekrar Ctrl + I ile Composer'ı açın ve şu promptu yapıştırın:

🎯 2. Prompt (Kopyala-Yapıştır): "Mevcut kodları incele. İletişim bölümündeki forma bir özellik eklemek istiyorum. Kullanıcı 'Gönder' butonuna tıkladığında sayfa yenilenmesin. Bunun yerine JavaScript kullanarak ekranda şık bir bildirim (alert) çıksın ve 'Mesajınız başarıyla iletildi. En kısa sürede dönüş yapacağım.' yazsın. Formun içindeki metin kutuları da temizlensin."

Cursor projedeki dosyaları okuyacak, sadece script.js ve index.html içinde gerekli olan ince ayarları (iterasyon) yapıp karşınıza getirecektir. Değişiklikleri onaylayın ve tarayıcınızda sitenizi test edin. Buton artık çalışıyor!

5. Adım: Dünyaya Açılma (Yayınlama)

Siteniz bilgisayarınızda harika çalışıyor. Peki bunu arkadaşlarınıza, öğrencilerinize veya müşterilerinize nasıl göstereceksiniz?

Bunun için en hızlı ve ücretsiz yöntem Netlify Drop sistemidir:

  1. Tarayıcınızda app.netlify.com/drop adresine gidin.
  2. Masaüstündeki ilk-sitem klasörünü farenizle tutup bu sayfanın içine sürükleyin.
  3. Saniyeler içinde Netlify size sitenizin canlı internet bağlantısını (linkini) verecektir.

Tebrikler! Vibe coding felsefesini kullanarak, tek bir satır kod ezberlemeden ilk gerçek web sitenizi kodladınız ve internete yüklediniz.

Bunları da Oku:

📌 Terimler Sözlüğü (Dipnotlar)

  • HTML (İskelet): Sitedeki metinlerin, başlıkların ve butonların sayfaya yerleştirilmesini sağlayan temel dildir.
  • CSS (Tasarım): Sitenin makyajıdır. Renkleri, yazı tiplerini ve köşe yuvarlamalarını CSS ile yaparız.
  • JavaScript (Kas Sistemi): Sitedeki hareketleri kontrol eder. Butona tıklanınca mesaj çıkması veya bir menünün açılması JavaScript'in işidir.
  • Responsive (Mobil Uyumlu): Web sitesinin telefondan, tabletten veya geniş bilgisayar ekranından girildiğinde tasarımının bozulmadan ekrana göre kendini otomatik şekillendirmesidir.
  • İterasyon: İlk taslağı oluşturduktan sonra, üzerine yeni özellikler ekleyerek (veya hataları düzelterek) projeyi adım adım geliştirme sürecidir.