I can't do animations, SVG or Canvas😞

Question

Even though I finished my HTML course, I find it very difficult

Answer 1

Hey, You need hands on experience other them just reading, practice making a square in javascript and show your attempts here and I/We will guide you through in making your first animation. 👍

Answer 2

Well
I read everything about tennis. I was a champion.

So I was a bit astonished that I lost the first match 0:6 0:6 0:6.
Additionally I didnt get much balls where I wanted to.
They all were addicted to being far out of the field.
... at least those few I hit.

...practice is it!

Btw: It is not really forbidden, to copy code of other Sololearners and trying to understand it and do some adaptations.
Actually it is a good way to learn. Just keep them private until they are mainly yours.
Try some that look easy.

Answer 3

Don't feel down about it! With these kinds of things, no one is going to be able to remember everything in the HTML course after reading it all once without coding anything. I always go back to the lessons when I forget something and want to code about it.
Practice makes perfect. The more you code, the more you remember, and the less you will have to reread the lessons. Be patient, because every pro was once a beginner.
I wish you good luck on your coding journey! 😃✌️👍🎉

Answer 4

It's ok, I find those hard as well. Start small, you'll work your way up. All brilliant coders start from the bottom.

Answer 5

PGameYT animations are done in HTML.

Answer 6

Ok!

Answer 7

The Same thing happened to me. I have learned Advanced HTML , but I don't even know how to code in SVG or Canvas. But, we should try to
practice and master that SVG animations..... That's it .

Answer 8

revisit the topic on svg and canvas and see how is it done then you'll find a way around the sololearn try it yourself set

Answer 9

Coder I edited your code
https://code.sololearn.com/WvHuWM4N8Tf3/?ref=app

Answer 10

It's take time. Start from easy tasks, by making single object move first. Slowly move to more tasks, when you ready.

Answer 11

YOU DO ANIMATIONS IN CSS

Answer 12

I have the same problem...
But I suggest that you play with your codes. Look at others code to give you inspiration. You can learn from others code. Or maybe you can also review the lesson about Canvas and SVG. Take little steps by little steps, you will achieve big goals! Do not hesitate to ask us about the things you don’t understand! We are here to help! Happy coding and happy learning!

Answer 13

D_Stark can you tell me how to make a square in JavaScript?

Answer 14

body{
background-color:#efefef;
text-align:center;
font-family:Nunito,sans-serif;
}
h1{
margin-top:30px;
color:teal;
}
#box{
margin-top:30px;
background-color:#5385c1;
color:#efefef;
width:90%;
height:210px;
border:2px solid teal;
border-radius:3px;
padding:10px;
margin-left:5px;
}

Answer 15

body
{
margin:0; padding:0;
background-color:gray;
}
#eye1
{ position:absolute;
height:200px; width:200px;
border-radius:50%;
background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 67%, #9b5050 100%);
margin-top:25%;
margin-left:22%;
}
#eye
{
position:absolute;
height:90px; width:90px;
border-radius:50%;
background-color:lightblue;
margin-top:36%;
margin-left:28%;
animation-delay:2s;
animation:move 2.7s ease-in-out infinite;
}
#eyeball
{
position:absolute;
height:50px; width:50px;
border-radius:50%;
background-color:black;
margin-top:26%;
margin-left:24%;
}
#dot
{
position:absolute;
height:20px; width:20px;
border-radius:50%;
background-color:rgba(255,255,255,0.7);
margin-top:-15%;
margin-left:0;
}

@keyframes move
{
0%
{
transform:translateX(0);
}
50%
{
transform:translate(-12px,2px);
}
100%
{
transform:translate(12px,2px);
}
}
Study this

Answer 16

Also this is from Macomb autocorrect lol.

Answer 17

Look at this exm https://code.sololearn.com/WzRf0uo0UCQQ/?ref=app