Bangun Situs Lengkap dengan Google AI Studio — Tanpa Coding!
Bangun situs web lengkap dengan Google AI Studio, dari ide awal dan desain hingga situs yang berfungsi dan terbit online.
Roadmap & sumber daya
Buat Website (Google AI Studio)
Hasilkan Konsep Awal
Buka Google AI Studio, tulis prompt utama, dan hasilkan versi pertama website "AI Life Planner" Anda.
Prompt yang Digunakan – Pembuatan Website
Buat website modern, rapi, dan mengesankan secara visual bernama "AI Life Planner"…
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.
Tingkatkan & Sesuaikan UI
Sempurnakan Desain & Layout
Terapkan upgrade desain, modifikasi bagian hero, dan tambahkan header glassmorphism untuk tampilan premium.
Prompt yang Digunakan – Tema Gelap & Weekly Planner
Ubah seluruh website ke tema gelap modern…
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.
Prompt yang Digunakan – Header Glassmorphism
Tambahkan header glassmorphism modern (liquid glass)…
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.
Prompt yang Digunakan – Redesign Bagian Hero
Redesign bagian hero dengan headline besar yang tebal…
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.
Tambahkan Fitur Interaktif
Tingkatkan Fungsionalitas
Tambahkan komponen tambahan seperti To-Do list untuk membuat aplikasi lebih berguna.
Prompt yang Digunakan – Fitur To-Do List
Tambahkan bagian To-Do List sederhana…
Add a simple To-Do List section below the hero section with checkboxes to mark tasks as completed. Keep the design minimal and clean.
Terbitkan Website Online
Deployment ke Hostinger
Unduh file website, unggah ke Hostinger, dan luncurkan situs Anda secara live.
🎥 Deploy Situs & Aplikasi Web Google AI Studio
Deploy Situs & Aplikasi Web Google AI Studio
https://youtu.be/HGs-4QjyjHQ?si=Cs4oHKURdxp6J70E
Implementasikan Penanganan Error yang Kuat
Pastikan aplikasi Anda dapat menangani error deployment dengan baik dan memberikan umpan balik yang jelas kepada pengguna.
Prompt yang Digunakan – Penanganan Error & Umpan Balik
Tambahkan penanganan error yang kuat untuk masalah deployment umum…
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.
Sumber Daya Opsional
Masterclass Penulisan Prompt
Pelajari cara menulis prompt sederhana namun efektif untuk mendapatkan hasil terbaik dari AI.
🎥 Tutorial Penulisan Prompt
Tutorial Penulisan Prompt
https://youtu.be/UlkdOrr3RKM?si=rKQvhMqWmO1HakUp