@@majed1911 hello I noticed an error in that code the output would be: solar systemis very big Way to fix: put a space after the quotation marks and before the is. Corrected output: solar system is very big
it seemed like magic to me as well few weeks ago lol but I learned that it's either basic or you can find the solution with reasearches if it's something a little bit more complex. Did you want to know how html and css work or you wanted him to explain this animation specifically ?
Programming tutorial 1: What is HTML? Programming tutorial 2: What is CSS? Programming tutorial 3: Display an alert in javascript Programming tutorial 4: How to use the DOM Programming tutorial 5:
If I recalled correctly, I've seen someone only use HTML and CSS to create full solar system. You can zoom in and it shows full info on that planet, it can rotate, and the design is ASTONISHING like straight out Stellar movie.
I tried to make something like this in Highschool when we were taught HTML and CSS. But I had no idea at that time how to do the rotation so I just left the project.
@@gustavo9758 i learned a lot from kevin powell but he is not even close to css masters he has teacher's level but not master i learned advanced css in other channels on youtube for instance there is an indian who is very talented in css i learned from him how to use an inline variable of style this trick improved my workflow
actually a full game has less, due to game engines having many presets in code, like all the libraries and animations are there (some of them you might need to model)
animation: orbit seems to be the key piece here. Everything else is simply position, size, color and border radius. I didn't know that orbit was a parameter of animation! Cool!
i attempted this but my moon did not orbit the earth. it was orbiting the dark void of space. everything else worked nice. this was nice to try out and practice. just wish i could fix the moon oirbit
You just have to replace the moon position: absolute to relative moon { position: relative; and down you will see right: 0em; that you need to change to 2em;
started two days ago i understood some of it maybe for you its basic but im still dreaming about doing something like this my self (also its a nice animation keep grindin)
![PADDINGTON IN PERU - Official Trailer [4K] - Paddington Bear is back!](http://i.ytimg.com/vi/lKgitu25ZAg/mqdefault.jpg)
The birds represent that you stayed up all night again
When you're playing and you start listening to the birds 🥶
@@DigoTP_ 😂😂
@@kooramagic7742 he was being sarcastic
@@suham5132 I see
@@DigoTP_ 0000000
This would be a cool loading screen animation
maybe a little bit faster i think
yh
@@krysti4366depends on the system :P
I know you meant the actual animation, but what if a game actually had a loading screen of its code being written
Fr
Inspiring me to get back to coding!
cool
Coding is absolutely disgusting
@@pullingthestrings5233why
@@pullingthestrings5233 why ?
@@chetan_i_am4885 my brother committed suicide due to his coding career. Expectations are very high.
python: Ah f**k it. I'll just import.
not,it is works
import something that doesn't exist
Import solar system
Print(solar system+” is very big”)
🤨
@@majed1911 hello I noticed an error in that code the output would be: solar systemis very big
Way to fix: put a space after the quotation marks and before the is. Corrected output: solar system is very big
python:
import solar_system as sys
variable = sys.create()
print(variable)
Lol😂
😂
Nice one Akame-chan
🤣
XD
*Accidentally misses a dot*
**Sun starts revolving moon**
no, earth
@@smaransure2234 that's good too but sun sounds a little better.
@@KawazakiZedit no earth bc that was the misconception back then earlier like 200 years ago
@@KawazakiZedit i meant sun revolving earth
@@smaransure2234 bro , it's a joke.🥲
Keyboard sound is soo satisfying
bro really coded earth 💀
Hence proved. We're in matrix 🗿 No questions please
@@Mr.Classy2728 😂😂😂😂😂 bruuuuuuuuuh
@@Mr.Classy2728 yes I can confirm that you people are inside me.
wow so funny
I've coded mars💀
would love a tutorial explaining what everything does. For newbies like me this is magic!
It's literally not.
i totally agree!
it seemed like magic to me as well few weeks ago lol but I learned that it's either basic or you can find the solution with reasearches if it's something a little bit more complex. Did you want to know how html and css work or you wanted him to explain this animation specifically ?
I started learning CSS yesterday and I understood most of it.
@@ilikemyrecommandationsthew257 Understanding is good, but what we want is being able to repeat it (without the video is even better :)
Html coders: **goin' tryhard**
Python coders: "I'll just import"
There is no space modules lmao
@@vanlalsiama507you definitely checked tho 🤣
programmers dont type that fast actually, they will google at least something once in a few minutes
The file path literally has “.autotype” lmao
code in case you need:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
Thx
Ты не представляешь,какой ты замечательный бро, спасибо тебе большое)
Um anjo
Thanks ❤❤❤
Ytrtr
man really styling in html bruh 💀
Still not inline CSS... such a noob!!! 😂😂😂
Well it's very short so for informational purposes I don't hate it but still my web teacher would kill them
@@vasiovasio wdym online css
@@ender.yeeterson inline! haha thanks to address this! The stupid autocorrect that ruins Everything! :)
What is the issue in it ?
The only thing I like is that
1 : it does work
2 : He does care about the keyboard types
haha :)
Birds in the background means you were coding all night long and that's already morning 😂
😅
@@learning-axis❤
Programming tutorial 1: What is HTML?
Programming tutorial 2: What is CSS?
Programming tutorial 3: Display an alert in javascript
Programming tutorial 4: How to use the DOM
Programming tutorial 5:
🤣🤣🤣
😂😂😂
😂😂😂
if we really study DOM then we will be stuck at step 4 for ages
for real. and instructor is typing codes like we should know all this and expect us to know
If I recalled correctly, I've seen someone only use HTML and CSS to create full solar system. You can zoom in and it shows full info on that planet, it can rotate, and the design is ASTONISHING like straight out Stellar movie.
I tried to make something like this in Highschool when we were taught HTML and CSS. But I had no idea at that time how to do the rotation so I just left the project.
@@harshittripathi11a58 gg
@@harshittripathi11a58 It seems we have a quitter here.
Year 69420
Coding tutorial
How to create a virtual solar system inside a Notepad file 💀
😂😂😂
Actually at that time it will be the entirety of existence with all of it's dimensions😂
Notepad file ...
@@akshay_m or we would be extinct
Wdym?, you can really write this on notepad or even office word if you save it as html
man really thought we didnt see him hide overflow💀😭
Coding is fun. Just know the functions, arrays and syntax etc, you will do wonders.
Can you mentor me,still a newbie
Yoi Sir, are the lord of the CSS 👨💻💪
This is good but it looks like you have not seen CSS Battle stuff (try some Kevin Powell)
swrz this is amazing
@@gustavo9758 i learned a lot from kevin powell but he is not even close to css masters
he has teacher's level but not master
i learned advanced css in other channels on youtube for instance there is an indian who is very talented in css i learned from him how to use an inline variable of style this trick improved my workflow
@@redkay7969 Man, I'm learning css and html from zero, who do you recommend me to learn about it on the internet? Im completely lost
@@erikjunior3643 Dave Gray tutorials are the best imo
Wow. As someone new to coding, that looks incredible! 😍
Yes, I love programming, designs and graphics 🎉❤❤❤
#include
using namespace std;
class Square
{
int size;
public:
void set_size(int s);
int get_size();
int area() { return size * size; }
};
void Square::set_size(int s) { size = s; }
int Square::get_size() { return size; }
int main()
{
Square x;
x.set_size(00);
cout
the code seems a little bit wrong ig
Mercury, Venus, Mars, Jupiter, Saturn, Uranus and Neptune have left the chat 🥺
Amazing .... HTML & CSS
You are an excellent designer.
just what i need, a child in a child👍
bro 💀
💀
@@thegate8985 j09et m
😂😂
Holy shit ☠️
I weirdly find it funny how there is so much coding done just for some simple movements and colors imagine a full game how much this would need
actually a full game has less, due to game engines having many presets in code, like all the libraries and animations are there (some of them you might need to model)
Dude you are master of front end
animation: orbit seems to be the key piece here. Everything else is simply position, size, color and border radius. I didn't know that orbit was a parameter of animation! Cool!
King of HTML CSS
This is really cool. Great use of the animation props. So many nice features. Great work!
Hope that this short video is helpful.
A JavaScript array includes method that you must know
ruclips.net/user/shortsDsnHMhbbP7Y?feature=share
The sun element actually has a square shape. You need to set the border-radius to half of the sun's height and width, 5em, to make it circular.
That was the best animation I've seen in my life
thank you
I was closed my eyes and was hearing Ants walking . Peace out ✌️😅
YE BADHIYA THA GURU...
Wow 👍👍
i attempted this but my moon did not orbit the earth. it was orbiting the dark void of space. everything else worked nice. this was nice to try out and practice. just wish i could fix the moon oirbit
You just have to replace the moon position: absolute to relative moon {
position: relative; and down you will see right: 0em; that you need to change to 2em;
@@amit_mukherjee1 gonna try this thank you
You may of done something here
Please show us hole screen so that we can also get lurned
I also provided a link in description you can get code from there. thank you.
Sir where I see description ?? 😢
body
{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container{
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun{
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%
box-shadow: 0 0 3em white;
}
. earth,.moon {
position: absolute;
border-style: solid;
border-color: white;
transparent
transparent
transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth: :before,
.moon: : before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth: : before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
. moon: :before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
Well bro I have written your code for this solar system but it is not running as per you
lol he literally typed the whole thing
Wonderful even I will all start like
Sesimpel itu hasilnya hehe
I love it so much!! Thank you! I can finally be my computer teacher's pet now :>
Wow🤞
Awesome
People who style in HTML are psychopaths...
I style directly in the elements.
@@januzi2 Are you ok?
You are absolutely PRO
woow next....
Wow ❤
I have no idea what he just did but it looked cool at the end
started two days ago i understood some of it maybe for you its basic but im still dreaming about doing something like this my self (also its a nice animation keep grindin)
thank you
Wonderful
Waaw Yaar
Es realmente impresionante, pero es sonido es muy relajante 😌❤
Bro really coded the whole soar system. 😱
No, not really
Awsome
Wow! I'm really impressed with your work.
thank you
**Satisfying**
What a speed of typing !!! omg
classes would imply that there's more than one earth 😮
and that earth can be also a sun or a moon if it wants to 🌝
Wao amazing ✨
The fact you did this without testing it out prior in between writing this is impressive on its own
He wrote the code then used a macro or something of the sort to have it rewrite the code for the video
@@hosytaa6018 yeah true. Didn't think of that
almsot as if he had the code ready...
@@hosytaa6018 what is macro?
@@athiran5856software that does actions for you. In this case it types out the program from a copy he made before
amazing its reALLy works
Wow 😮❤❤
Wow 😮🎉❤👏
Don't thank me (i think i've made a few mistakes cause the render is not exactly like in the video):
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center
;
background-color: black
;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color:
yellow;
border-radius: 50%;
box-shadow: 0 0 3em
white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white
transparent
transparent
transparent;
border-width: 0.1em 0.1
em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s
linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s
linear infinite
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
left: 6.5em;
width: 1.2em;
height: 1.2em;
background-color:
silver;
}
@keyframes orbit {
to {
transform: rotate(
360deg);
}
}
thanks😀
Okay
@@learning-axisBhai Maine ye coding run ki aur 3 dabhe esse parkar ghum rahe thee par sun ,moon nahi tha please help
see code link in description @@Ajay_Kumar9
Change your .moon : : before left from 1.2 to 6.5
❤❤❤
Motivation 🔥🔥🔥
Awesome ❤❤❤
Legend dont undersood anything still watching whole video
True
Excellent work
What is this thingery? You left me speechless!!!!!!
Agba 🙌🙌🙌🙌🙌🙌🙌
God!, Ya Allah, this is so good....Ya Allah, thank you for granting him such level of knowledge in web development!❤
Al-lah hinself dont know the earths shapr and you say al-lah thanku for providing knowledge 🤣 stupid m-uslims
It’s aurotype
I try this code, successful got output ❤
😂😂
Majja agaya bidu it's work
Music to my ears
you are so talented bro!!!
Me: Write a solar system animated representation for me in HTML, CSS
ChatGPT:
Clever 😂😂
Wow nice 😊
اثبت نفسك اكثر😊
pov: U r GOD making the universe
Nice one
Wish I could type like that.
CSS never ceases to amaze me
Bhor ? That early morning birds convo ❤at 4 am my fav ❤ nice work btw
I like how the orbit keyword fits so perfectly
Very good😊
Good
You're amazing thank you hopefully to do more
Holy crap, i wish i had that typing speed
amazing bro❤
It's great
This was so satisfying to watch...
those autotyped semicolons gave me a heart attack
Amazing work. Share the code. Thanks
lol
my fav programming language ❤
Cool 😎
Want some candy, mommy I saw a ghost writing code must be an alien