Google AI Studio ile Eksiksiz Bir Web Sitesi Oluşturun — Kod Yazmadan!

Google AI Studio ile eksiksiz bir web sitesi oluşturun — ilk fikirden ve tasarımdan, çevrimiçi yayınlanan çalışan bir siteye kadar.

Yol Haritası ve Kaynaklar

Web Sitesini Oluşturun (Google AI Studio)

İlk Konsepti Oluşturun

Google AI Studio'yu açın, ana prompt'u yazın ve "AI Life Planner" web sitenizin ilk sürümünü oluşturun.

Kullanılan Prompt – Web Sitesi Oluşturma

"AI Life Planner" adlı modern, sade ve görsel olarak etkileyici bir web sitesi oluşturun...

Create a modern, clean, and visually impressive website called "AI Life Planner". The website should help users organize their goals, daily routines, habits, and personal growth. You have full creative freedom to choose the layout, colors, and visual style. Include: • Hero section • User input form • Personalized plan section Make the website fully responsive. Return everything in a single HTML file with embedded CSS and JavaScript.

Arayüzü İyileştirin ve Özelleştirin

Tasarımı ve Düzeni İnceltin

Tasarım iyileştirmelerini uygulayın, hero bölümünü değiştirin ve premium bir görünüm için glassmorphism header ekleyin.

Kullanılan Prompt – Koyu Tema ve Haftalık Planlayıcı

Web sitesinin tamamını modern koyu temaya çevirin...

Change the entire website to a modern dark theme with premium gradients. Add a "Weekly Planner" section below the Personalized Plan section. Ensure everything remains responsive and visually consistent.

Kullanılan Prompt – Glassmorphism Header

Modern bir glassmorphism (liquid glass) header ekleyin...

Add a modern glassmorphism (liquid glass) header at the top of the website. Include: • "AI Life Planner" text logo on the left • Blurred glass background with soft shadows • Menu items on the right: Home, Features, Plans, Contact • Smooth hover animations • Sticky behavior on scroll Ensure full responsiveness.

Kullanılan Prompt – Hero Bölümü Yeniden Tasarımı

Hero bölümünü büyük ve kalın bir başlıkla yeniden tasarlayın...

Redesign the hero section with a large bold headline, subtle gradient shapes, and a modern premium call-to-action button. Keep the design clean and consistent with the site.

Etkileşimli Özellikler Ekleyin

İşlevselliği Geliştirin

Uygulamayı daha kullanışlı hale getirmek için Yapılacaklar listesi gibi ek bileşenler ekleyin.

Kullanılan Prompt – Yapılacaklar Listesi Özelliği

Basit bir Yapılacaklar Listesi bölümü ekleyin...

Add a simple To-Do List section below the hero section with checkboxes to mark tasks as completed. Keep the design minimal and clean.

Web Sitesini Çevrimiçi Yayınlayın

Hostinger'a Yayına Alma

Web sitesi dosyalarını indirin, Hostinger'a yükleyin ve sitenizi canlıya alın.

🎥 Google AI Studio Web Sitelerini ve Web Uygulamalarını Yayına Alın

Google AI Studio Web Sitelerini ve Web Uygulamalarını Yayına Alın

https://youtu.be/HGs-4QjyjHQ?si=Cs4oHKURdxp6J70E

Sağlam Hata Yönetimi Uygulayın

Uygulamanızın yayına alma hatalarını sorunsuz şekilde ele alabildiğinden ve kullanıcılara net geri bildirim verdiğinden emin olun.

Kullanılan Prompt – Hata Yönetimi ve Geri Bildirim

Sık karşılaşılan yayına alma sorunları için sağlam bir hata yönetimi ekleyin...

Implement a comprehensive error handling system for the website. If a user encounters an error (e.g., network failure, form submission error), display a friendly, clearly visible error message instead of a generic browser alert. Provide suggestions for fixing the issue (e.g., "Check your internet connection"). Also, ensure that successful actions display a confirmation message.

İsteğe Bağlı Kaynak

Prompt Yazma Masterclass

Yapay zekâdan en iyi sonuçları almak için basit ama etkili prompt'lar yazmayı öğrenin.

🎥 Prompt Yazma Eğitimi

Prompt Yazma Eğitimi

https://youtu.be/UlkdOrr3RKM?si=rKQvhMqWmO1HakUp