Increasing my general knowledge about some basic terms

Hey there! I’ve been learning web design for some time now but I’ve recently realized there are a lot of foundations I’ve no idea about. Terms like prototyping or wireframes are examples of such.
I’d really love to know their meaning, difference and the right time to learn and practice them.
I did search around for a bit but got more confused, for example now I don’t know if Adobe XD or Figma are for prototyping or wireframing and also don’t know when to start learning them.
Any help would really be appreciated and also I’d really welcome any reference sites to learn more about all these fundamental parts of this big world!
P.S:I’ve just recently finished the responsive web design course so I wanna know if I should start learning these before getting into javascript. Or should I continue using css based on my hand drawn sketches and practice more before learning these? Do they interfere with the process of learning css?

Thanks in advance!

Are you more interested in designing like UI/UX?
Things like Wire framing is more for designers as far as I’m aware.

for front-end the techs usually follow HTML => CSS => JavaScript.