ChatGPT Course Section 13 Generating HTML Animations

SimpleTutorials

ChatGPT is a text-based generative AI tool that can do various tasks. In this course, you will learn how to write prompts, generate content, generate codes and utilise its powerful features.   In this video lesson, we will learn about Generating HTML Animations in ChatGPT.  You can access the entire ChatGPT Course in the following playlist: https://dailymotion.com/rss/playlist/x8jx4a

Transcript

00:00So, what you can also do in TedGPT is you can go ahead and create HTML animations.

00:12So to do that, I'm going to go around and say create a HTML animation of a ball bouncing

00:27around the screen.

00:31Make sure the, of a ball, or let's say for example, four balls bouncing around a screen.

00:41Make sure all of the balls are different in color right here, just like this.

00:50And I'm going to go around and press enter.

00:53So once I go around and do that, it says certainly below is a simple HTML example that

00:57uses CSS and JavaScript to create an animation of four differently colored balls bouncing

01:03around the screen right here.

01:05And it added in this information as you can see right here.

01:09So now I'm simply going to go around and copy up this code and bring it into an application

01:14like Notepad and then go around and save this out on my desktop right here.

01:19So let's just go around over here and I'm going to go around and say animation.html.

01:26Let's see.

01:27For example, right here.

01:28And it's saved out right here.

01:29Let me just go ahead and close this.

01:32And now I'm going to go around onto my desktop and drag this particular animation file right

01:39here.

01:40And over here, you can see that this is what it actually generated right here.

01:44So four different colored balls.

01:45There's green right here, there's red, blue, and yellow as you can see.

01:50And they're bouncing around the screen just like this.

01:52If I were to go around and do this right here, then it is not responsive as you can see right

01:57here.

01:58It's like this.

01:59But you can see that as I do full screen right here, you can see that it simply goes around

02:03and then utilizes that particular area.

02:06So let's just go around and close it and drag this out right here.

02:09And once I do that, now you can see that it covers this particular area right here, just

02:14like this.

02:15And this is how you can go around and create HTML animations using JackTPT.

Category

Transcript

Recommended