How I Build & Sell $5,000 Animated Websites With Gemini AI for FREE 2026

How I Build & Sell $5,000 Animated Websites With Gemini AI for FREE 2026

Building a Professional Website for Free Using AI Tools

Introduction to the Project

  • The speaker introduces a fully animated and professional football news website called Pitch Side News, created without any design tools or coding knowledge, and at no cost.

Step 1: Finding Visual References

  • The first step involves using Pinterest to find high-quality images relevant to the website's theme. The speaker suggests searching for "football" to discover impactful visuals.
  • After browsing, the speaker selects an image of the FIFA World Cup trophy as the base for their website background. This image is downloaded for further editing.

Step 2: Editing Images with ChatGPT

  • The downloaded image needs preparation; thus, ChatGPT is used to edit it by resizing it to a 16:9 aspect ratio and removing distractions from the background.
  • A second prompt is sent to ChatGPT requesting additional modifications like flipping the trophy and changing the background color, resulting in two impressive versions of the image.

Step 3: Creating Animated Video with Google Flow

  • The static image is transformed into an animated video using Google Flow, which allows users to create cinematic videos for free. Users must set up a new project and upload their edited image.
  • A specific prompt instructing Google Flow on how to animate the video results in a smooth animation of the trophy rotating against a gold background. This video will serve as part of the website's hero section.

Step 4: Hosting Video Online

  • Since Google AI Studio requires a URL link for videos instead of direct uploads, Cloudinary is recommended as a free hosting service where users can upload their animated video and obtain a public URL link.
  • After uploading, users can copy this URL link from Cloudinary’s media library for use in building their website later on.

Step 5: Building the Website with Google AI Studio

  • Users are directed to Google AI Studio where they select Gemini 3.1 Pro preview model for optimal results when generating websites based on prompts provided by users. Simple prompts yield basic results; therefore, detailed instructions are crucial for better outcomes.
  • An example prompt includes specifics about layout elements such as sections for news articles and calls-to-action while incorporating the previously uploaded video as part of its design aesthetic. Upon submission, Gemini generates complete code automatically within minutes instead of days or weeks typically required by developers.

Final Steps: Refining Design & Deployment

  • Further refinements are made through additional prompts that adjust content alignment and ensure consistency across multiple pages before finalizing designs suitable across devices (desktop, tablet, smartphone).
  • Once satisfied with design adjustments, users export all generated code as a zip file ready for deployment via Netlifyβ€”a platform allowing free hosting services where files can be dragged-and-dropped directly into deployment areas leading to live site creation within seconds!

Conclusion & Recap

  • In summary, every step takenβ€”from finding images on Pinterest through deploying on Netlifyβ€”was executed without incurring costs while utilizing various AI tools effectively throughout each phase of development leading up to launching Pitch Side News online successfully!
Video description

πŸ”₯ Have you ever wondered how people build and sell beautiful animated websites for $5,000 β€” without any coding, design tools, or development background? In this video I show you exactly how I did it β€” step by step, using only free AI tools. I built a fully animated, fully professional football news website called Pitch Side News β€” and I'm showing you the EXACT process from start to finish, so you can build and sell websites just like this one. βœ… WHAT YOU'LL LEARN IN THIS VIDEO: - How to find stunning visual references for free on Pinterest - How to edit and perfect your images using ChatGPT - How to animate static images into cinematic background videos using Google Flow - How to host your video online and get a free URL using Cloudinary - How to build a complete animated website using Gemini 3.1 inside Google AI Studio - How to refine your layout so it looks 100% professional on desktop, tablet, and mobile - How to deploy your website live on the internet for free using Netlify - How to package and sell websites like this for $5,000 to real clients ━━━━━━━━━━━━━━━━━━━━━━━━ πŸ”— FREE TOOLS & LINKS: ━━━━━━━━━━━━━━━━━━━━━━━━ 🌐 Visit Pitch Side News (Live Website): πŸ‘‰ https://pitchsidenews.netlify.app πŸ“Œ Pinterest (Free Images): πŸ‘‰ https://pinterest.com πŸ’¬ ChatGPT (Free Image Editing): πŸ‘‰ https://chatgpt.com 🎨 Google Flow (Free Animation): πŸ‘‰ https://labs.google/fx/tools/flow ☁️ Cloudinary (Free Video Hosting): πŸ‘‰ https://cloudinary.com ✨ Gemini 3.1 / Google AI Studio (Free): πŸ‘‰ https://aistudio.google.com πŸš€ Netlify (Free Deployment): πŸ‘‰ https://netlify.com ━━━━━━━━━━━━━━━━━━━━━━━━ ⏱️ TIMESTAMPS: ━━━━━━━━━━━━━━━━━━━━━━━━ 00:00 β€” Hook β€” Fully Animated Website Built With Zero Cost 00:45 β€” Step 1: Finding Images on Pinterest 01:37 β€” Step 2: Editing Image With ChatGPT 02:18 β€” Refining the Image β€” Gold Background 02:48 β€” Step 3: Animating With Google Flow 03:10 β€” Setting Up Your Project β€” 16:9, Omni Flash, 10 Seconds 03:46 β€” Uploading Image + Writing Animation Prompt 04:25 β€” Animated Video Result + Download 04:41 β€” Step 4: Hosting Video on Cloudinary 05:21 β€” Getting Your Video URL 05:37 β€” Step 5: Building Website With Gemini 3.1 Pro in Google AI Studio 06:18 β€” The Exact Prompt I Used 07:08 β€” Website Result β€” First Build 07:33 β€” Refining the Layout β€” Second Prompt 07:57 β€” Final Result β€” Professional Layout 08:09 β€” Testing on Mobile and Tablet 08:29 β€” Step 6: Downloading Your Code 09:02 β€” Step 7: Deploying With Netlify 09:32 β€” Drag and Drop Deployment 10:00 β€” Website is Live 10:11 β€” Renaming Your Project 10:55 β€” Final Test β€” Live Website 11:18 β€” Recap of All Steps 11:50 β€” Outro ━━━━━━━━━━━━━━━━━━━━━━━━ πŸ“© BUSINESS & CONTACT: ━━━━━━━━━━━━━━━━━━━━━━━━ For business inquiries, collaborations, or sponsorships β€” reach out here: πŸ“§ contact.mrfred.business@gmail.com ━━━━━━━━━━━━━━━━━━━━━━━━ ⚠️ DISCLAIMER: ━━━━━━━━━━━━━━━━━━━━━━━━ This video is created purely for educational and informational purposes. All tools shown are publicly available and free at the time of recording. Results, pricing, and platform features may vary depending on updates and your own usage. The $5,000 figure is an example based on typical freelance website pricing and does not guarantee any specific earnings. Some links in this description may be referral or affiliate links β€” meaning I may earn a small commission at no extra cost to you. This channel is not affiliated with or endorsed by Google, Gemini, Pinterest, ChatGPT, Cloudinary, Netlify, or any other platform mentioned. #geminiai #aiwebsitebuilder #googleaistudio #makemoneyonline #nocodewebsite