Please help me with this CSS 😔 Tell me anything you notice that can be improved, I want to learn🤗

Question

I am new to CSS and I am trying to make something to practice:
https://code.sololearn.com/WQEU5pzXXSPn/?ref=app

I am stuck on making a 🌊wave 🌊
I tried something, but was not going to be a good looking wave. So looking for some example on using CSS to create shapes I found the before:: and after:: properties. I tried to implement a before:: but it doesn't display. Can you help me with that?

Also I am only using the phone so I don't know how it will look like in other devices. I am using vw and vh as main units in the hope they scale proportionally the whole thing in bigger screens. Is it better that I use only pixels instead so that I know exactly how it will look on bigger screens?

Another thing I would like to know is whether it's fine to have a sky with no position.

Another one: I made 2 moons sovrapposed, the yellow one is semi-transparent and placed over a silver one. Is there a way to have the same effect with only one moon? Like having two background colors, one of them semi-transparent.

Answer 1

the wave moves when you scroll so would make it fixed.
you could also add *{padding:0}
any reason why the moon is outside of the sky, and wave is outside of the sea?
a general rule is that if youre going to make anything fixed or absolute, the parent must be relative.

hope it helps :)

Answer 2

Logomonic Learning all right I'll learn to use svg then, thank you 🤗

So it's not ok to have the sky with no position, but why it has to be relative?

And how it comes that the moon is outside of the sky if the sky is 100vw X 100vh?
(Sorry in my phone I can't scroll and I see everything at the right place😅)

Answer 3

in general, id say it is better to use svg to draw shapes than regular html divs. you can easily do so with a free online svg editor like apps.diagrams.org or something of the likes.

Answer 4

normally, if you want to position an item absolute, it’s parent must be positioned relative. so in your case, the sky and sea should be positioned relative, and the moon and wave should be positioned absolutely so that it stays within the context of the sky and sea respectively. furthermore, the moon div should be within the sky div, and the wave should be within the sea div.

Answer 5

Logomonic Learning oh now I got what you meant with moon outside of the sky 🤣
Thank you for everything 🤗🤗