Whoa, what is this? Gemini, are you ready for another video tutorial? First of all, I am not a programmer. I am a graphic designer, so I don't know much about coding. Today, I want to show you how you can build different useful or fun apps that run in your browser with Gemini 2.5 without knowing how to code. All you need are prompts, and I will show you how to get those for free later in the video. To access Gemini, go to the website and log in with your Google Gmail account. I'm using Google Gemini Advanced. I took one month to test it, but you can use the free version as well. It just has more limits on how many times you can run it per day. They offer different models that change over time. So, if you're watching this video later and the numbers are different, just choose the one that says reasoning, math, and code. In my case, I'll choose the 2.5 Pro preview. Now, this part is important. To make it easier for you, enable the canvas option. This way you can run the code right in your browser without having to download and test files every time. All you need now is to write a prompt for what you want to create. For example, I want to create a 3D interactive model of the solar system. The more details you give about how it should look and what buttons to include, the better your chances of getting it right on the first try. Let's start with a simple prompt and run it. The AI will start thinking about how to build it. And depending on how complex it is, it might take more or less time. Usually around 1 to two minutes. You can see the thinking process, but yeah, since I'm not a programmer, I don't understand much of it. Others might find it really useful. When it's finished, first read the description and instructions to see what it does and how. On the right, it will keep writing the code. You can see it loading with the animation. Now, you have two tabs. one with the code that's being written and when it's finished it will automatically switch to the preview tab. Here you can see the code and use the button to copy it. It also shows what scripts it used to make everything work if you're interested how it did the animation controls and all that. But let's switch to the preview tab and explore the solar system. You can click and drag to rotate the view and zoom in and out. If you click on the sun, you'll see a description about it. You can also click on the other planets to get information about them. You can use all kinds of simple projects like this for educational purposes or presentations. This is way cooler than a flat PowerPoint presentation. Right now, it looks cool in the canvas, but how do you download it and use it on your local computer? Go to the code tab and click this button to copy the code. Open a text editor like Notepad or Notepad++. Paste your code there. Then go to file and choose save as. Pick a location where you want to save it. For the file type, change it to all files. Then give it a name like solar system or any name that fits. This part is important. Add a dot and then HTML at the end of the file name. Finally, click save. That will create an HTML page file for you. That's it. Now you have the exact same project on your computer and you can open it in your browser to uh play around, see it in full screen and all that. So as you saw, besides knowing how to save an HTML file from Notepad, it doesn't require much skill. Just knowing how to ask for what you want. Some might say, I don't know how to write prompts. In that case, I have a solution for you, too. Let's open the fast all-around model like 2.0, and you can use a prompt like this one. Basically, it says, "I'll give it a simple prompt, and the AI should make it more complex and professional." Then you just describe in your own words what you want. Be more detailed in your description, but it will probably work even with just a few words like this. See how much information and detail I get. I can copy and edit that info to fit what I need, and then I can give it to the 2.5 model to create the app for me. So, no more excuses that you don't know how to prompt, but I'll also give you all the prompts for inspiration. So, back to the 2.5 model. I used this prompt where I asked for a 3D animated DNA double helix and included that I want to be able to pause the animation. As you can see, I can drag with the mouse to rotate and zoom in and out to explore the 3D DNA. It's pretty cool. It's a simple animation, but it's still 3D and made from code. We can pause it here and then resume the animation. For this project, I asked for 3D text that rotates and when I click on it, it triggers a dynamic particle explosion. I also wanted a reset button. Everything seems to work just fine. Obviously, we started with simple projects, but we can do more complex ones. There is a limit on how complex the 3D can be, but when it comes to code, it can handle pretty complex stuff. For this project, I wanted to be able to upload my own logo and make it rotate at different speeds with a few buttons. So, let's see if it works. I've chosen the file, and now it's rotating. I can adjust the speed however I want, so it seems to work. I can pause and play and also toggle the background color. It worked on the first try, but that's not always the case. I wanted to see if it could do more complex 3D stuff like anatomy, but you probably need actual 3D models for that. The result was just a black screen. I clicked on the buttons, but nothing worked. So, what do you do in that case? You can click this button to show the console and check for errors. Looks like there's some kind of error here. I don't really know what it means. So, I click on fix errors. That makes the AI revisit the code and try to fix the problem. It's not always that simple. Sometimes I have to give it screenshots or more details. Okay, I got something. This is the AI's version of anatomy made with simple shapes. If I select the brain, it selects that big sphere. If I click the heart, it seems to be in the middle where the heart is in the chest. It's really abstract, but it's a way to learn how coding works with simple stuff before moving on to more complex projects. You can create all kinds of charts. For example, here is a line chart showing the popularity of different music genres over the years. You can hover over the years to see more information. And you can also turn off anything you don't want to see. This makes your presentation more interactive and easier to follow with AI. Remember to chat with it. If you don't like something, just tell it what you want change and how you want it to look. You can even give it images to guide it toward the style you want. You can also create simple games. It helps to mention what type of game you want since it knows some classic games. I got a classic snake game on the first try and I used the Wii SD keys to navigate. It's pretty fun. If you get bored, just create a quick game and play it right in your browser. I wanted to see if it could create a QR code generator that lets me add text, links, and my own logo. And it seems like it knows how to do that. Let's try with simple text. I scanned it with my phone and it works. I can also add a link. It lets you change the foreground and background colors. Just make sure there's enough contrast. You can change the size, too. It has some kind of error correction. Not sure exactly what, but I got that as a bonus. I can also upload my logo, and it appears on the code. Once you like the result, you can download it as a PNG and also as an SVG. I tried to open the SVG in Illustrator, but I couldn't find the vector shapes, only a link to an image. So, maybe there are still some bugs with that. Here I tried to create a 3D dice that rolls where I can spin it and get a number. I pressed the roll button, but the problem was that I got the results without seeing any 3D dice. So what can you do? In this case, I decided to take a screenshot to show the AI better what the problem was. I pasted the screenshot in the chat and described the issue. Then it started thinking and tried to find the problem. Um, I got this back with some notes underneath, but it still didn't work. I also enabled the console to see if there were any errors. Then I took screenshots of both the result and the console. Pasted those and tried again. This time without instructions, letting the AI look and decide what's wrong. Now it seems I got some dice, but with test materials so it can debug and I can see what needs fixing. I tried a few tests, took another screenshot of everything, and pasted it again in the chat. Finally, I could see the dice and I could roll it. Everything seemed to work, but I still had those notes at the bottom that I didn't want. So, I took one more screenshot and told the AI it looks good and to remove the extra notes text it added. This is the final version and it works fine. Some projects take more time and sometimes I prefer to open a new chat and start over because the AI can be stupid sometimes. For this project, I tried to create something useful for my design work. As you can see, my prompts got more detailed because I asked Gemini to give me a detailed prompt like I showed you at the beginning of the video. This project lets me open an image and generate a color palette for it with a slider to choose how many colors I want. I can regenerate to get different colors. Uh, I can also choose the pallet style to get the colors that work best for me. I get all those colors with their code values. I can download the palette as a PNG image, which looks like this. I didn't specify the image size, so it decided for me. That's why it's important to be as exact as you want. Or you can chat afterward and tell it what changes you need. I can also download the pallet in text format so I get all the color codes for later use. Pretty cool, isn't it? Here I tried to make a unit converter dashboard with temperature, weight, volume, and so on. You enter a value and it automatically shows the converted values. Obviously, it had a design problem. So, I took a screenshot, pasted it, and told the AI what the problem looked like to me. Then, I got a new version that was much better. It wasn't perfect, but I didn't keep chatting because the video would get too long. But you get the idea. Keep talking to it until it fixes the issue. If it doesn't work, try starting a new chat. And if it still doesn't work, well, you'll need a programmer to find the problem or wait a few months for a better AI model. Here's another interesting project, a glitch art generator that lets you upload an image and applies a glitch effect. At first, I tried to upload the image here and it didn't work. So, I assumed it was broken. I took a screenshot, told the AI what the problem was, and it gave me another version, but that still didn't work. Then I realized this was more of a design problem. I expected an upload button here, but actually the AI put the button somewhere else. It looks like simple text, but when I hover over it, the cursor changes to a hand, and when I click, it acts like an upload button. So, it's really a user experience design error. We expected something to work a certain way. You get all kinds of sliders to create the the glitch effect. There's also a randomize button for random effects. You can reset it, adjust it, and make it how you want. When you like it, you press the download button and get a PNG image. The image is kind of small, but since I didn't specify the size, the AI decided for me. So, don't let the AI decide everything if you want something exact. Here, I wanted a cool hacker matrix style password generator. I included a lot of details in the prompt and got something pretty cool visually that lets me generate different passwords with letters, numbers, and symbols. Now, I had one problem. When I tried to use the copy to clipboard button, it didn't work. I saw a dot in the console. And when I opened it, I got a message saying failed to copy. You could copy the text manually, but that's not what I want. I clicked fix errors to see if it could be fixed. I tried generating again and got the same problem. So, I described the problem to the AI to see if it could understand it better. It changed the method used for copying and now I can use it here. Keep in mind some features might work in your browser if you download the code, but because of Gemini's policy, they might not work in the canvas, like full screen and other options. Here's another fun project, a typing speed tester that lets you type and measures your speed and accuracy. I wanted something cute. Let's test it. I can type and when I make a mistake, it shows up in red. It's a pretty interesting little application here. I tried to make a login page that goes to my YouTube page. When I press the login button, you can enter an email and a password. And when you click login, it checks if the email contains the at sign. So, I put an email in the correct format. The other buttons are just mockups since they aren't connected to anything. But when I click login here, an error appears for a fraction of a second. The console shows a login attempt. I downloaded the code, saved it as an HTML file and tried it locally. Locally, I noticed it also included a theme changing button. I added a random email and password again. And now when I click login, it goes to my YouTube page. So the canvas in Gemini still has some limitations when it tries to open something externally. Any Star Wars fans here? Right now I'm watching Andor season 2. This project lets me open a text file with sample credits text. You can adjust the size, choose a different font, and align the text left, center, or right. When you click start, you get that scrolling text effect similar to Star Wars. This was from the first try. Obviously, it needs more work. Like I wanted stars behind the text and stuff, but sometimes it's useful to work with files like text, PDFs, images, music, and so on. Here's another useful project. It lets you generate a bar chart. Say you have a CSV file with categories and values that change over time and you need to update the chart each time. You can create a generator like this for your CSV file and when you upload it, the chart adjusts automatically. You can change the orientation between horizontal and vertical. Change the bar colors, apply a scale for the values, and add a new title. Just scroll down and update the labels to see the changes. You can also change the labels here without affecting the original CSV file. See how the categories show up now. It's all interactive and looks nice. Great for presentations. When you're happy, you can download the chart as a PNG image. What do you think about a calendar generator? One that lets you select the month and year you want, choose an image, and pick the day of the week the calendar starts on. When you click generate, you get the calendar for that month. You can also add notes if you want. You can ask for it to look however you want, then download the image as a JPG or PNG. One thing I noticed was that the image got distorted after export. The header was cropped to a certain size. But when exporting as either file type, the image was distorted. So I thought, why not ask the AI to fix that? I don't want distortion. I tested it again and it fixed the problem. But then I had another issue. I didn't have control over how the image looked in the header. So I asked the AI to let me move and adjust the image how I want. Let's test that. Now I can adjust and move the image around. The horizontal pan only works when there's zoom. Let's say I like it like this. Now I can generate the calendar, save it, and it looks perfect. The PDF looks good, too. Obviously, the design could be improved, but getting all those day numbers right for the calendar is the hard part when using design software. Sometimes when I download an image from the internet, it comes in WEBP format, but I want it as PNG or JPG instead. So, I thought, why not make an image converter? You select an image in WEBP format, choose the format you want to convert it to, and JPG even has a quality slider. I click convert and then I get a button to download the PNG image. Quick and easy. Here's a project you can use for backgrounds or to make web pages more interesting. It's particles connected by lines when they're close enough to each other. When you move your mouse near them, the connections break. It's kind of mesmerizing, like watching a fish aquarium or something. You can change the colors, stop the animation, and save it as an image to use for backgrounds. The only limit is your imagination. Here I tried to create a snowflake generator that uses treelike branching to adjust the design. It has a lot of options. You can make it more symmetrical or more organic. Try different colors. Randomize the generation and save it as a PNG or even a transparent PNG if you want. For this one, I wanted to create a black ink spread simulation on paper. You just click to drop ink and you can see how it spreads. Not sure what practical use it has. Maybe for making some abstract art that you can export as a PNG. I like to draw mandalas and I was surprised that I got this app on the first try. It lets me draw with symmetry on the number of axes I choose. I can adjust the brush and start drawing to create all kinds of cool mandelas. It doesn't have pressure sensitivity like Photoshop, but for a free program made in 2 minutes that runs in the browser, it's pretty impressive. Once you like your design, you can export it as a PNG image or even as a transparent PNG. It can also do all kinds of fractals. So maybe you could design your own app with different types of fractals and color combinations. I'm not sure exactly what formula it uses, but if there are too many iterations, it can get a bit slow in the browser. Still, it's fun to play with. Here, I tried a magnetic field simulation. I wish we had something like this back in high school. It would have made things easier to understand. You can move the magnets around and see the magnetic lines animated. You can also add multiple magnets that interact with each other. And of course, you can export the image. Here's another one of my favorite projects that I've been working on for a while and will probably improve when I have more time. It's a music visualizer with a pretty long prompt. It lets you upload an audio file. I didn't record audio for it, but it works. You can type some text that appears in the middle of the screen. When I hit play, the bars move to the rhythm of the music, creating a nice visualizer for your tracks. I've seen similar stuff on YouTube music videos, and some platforms charge a lot to use their visualizers for videos. This one works live with music, but it could probably be adapted to create a video. If not, you can always record it with a screen recorder. For this project, I wanted to test different shaders like plasma, lava, and clouds. I have all kinds of sliders to play with colors and the shading style. Uh you can also randomize the parameters and see what you get. If you like something, you can save the image. Here, I tried to create a lightning generator. It didn't come out exactly how I wanted, but it's still something. You can click on the canvas and get lightning where you click. You can adjust the settings to create different kinds of lightning. Basically, the power of Thor in your hands just one click away. Here's another interesting project. I created a pattern generator with all kinds of patterns. There are some problems when I select patterns with white text on a white background, but the patterns themselves work fine. You can play with settings like colors, spacing between shapes, twisting, shape size, rotation, zoom, and more. You can also set the image size you want when exporting. It obviously needs more work, but the core functionality is there. There's a randomize button to create all kinds of interesting patterns. Um, I tried the full screen button, but it didn't work. The console showed a message about policy restrictions, so full screen doesn't work in the canvas. But if I download the code and run it locally, full screen works fine. You can play with the colors and save the image. And finally, for the last project, I wanted to create a parallax effect with three images, one static background, one middle ground, and one foreground. This one took more tries than I expected. I got the buttons on top of the interface, and asked for a sidebar. But when I hid the sidebar, I couldn't bring it back because there was no button for that. I struggled for a few tries trying to explain it, but it didn't get it. Then I asked to add a button to toggle the sidebar on and off, and that finally worked. So, first I uploaded a background image. It's not visible yet, but it's there behind the foreground. Then I selected the middle ground and finally the foreground. Let's hide the sidebar. Now, when I move the mouse, I get that parallax effect. The problem is I can see some edges of the images. So, I zoomed in a little on the middle ground and foreground. Now, I can move the mouse and get a nice parallax effect without seeing the edges. It kind of gives the sensation of depth and 3D even though they're just 2D images. You can also switch to control mode to move the images manually wherever you want. When you disable control, it goes back to a parallax mode. It's pretty interesting to play with. Here's how you can get all the prompts and projects from this video. In the YouTube header, click on the Discord link. We have over 30,000 members. Click accept invite to join and you'll land on the welcome channel. The easiest way to navigate is to go to the help channel. If you can't find it for some reason, type a hash symbol followed by help and press enter. That will create a link you can click to jump straight to the help channel. Here are links to all the important channels on the server. For example, the chat GPT prompts are here and the Gemini prompts are here. You'll see these belong to the AI2 play channel. Let's click on Gemini prompts. Here it is the title of today's video tutorial. If I click here, I can find all the prompts along with previews and downloads for the HTML pages with each project. Scroll down to see everything. At the end, there's also a text file with all the prompts in one place. If you found this useful, please leave a like and a comment to support my channel. It took me 12 hours to do all the tests and another 12 hours to edit the video. Thank you to AI Titans and everyone who joined the membership. Your support means a lot. I wish you an amazing day and I'll see you on Discord.