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