Solar System | HTML CSS

Рет қаралды 4,357,789

Learning Axis

Жыл бұрын

#shorts #html #css #tutorials #trending
Source code: shorturl.at/awI02
Sound effects from Pixabay.

Пікірлер: 1 700

@memerightsactivist7972 Жыл бұрын

The birds represent that you stayed up all night again

@DigoTP_ Жыл бұрын

When you're playing and you start listening to the birds 🥶

@dot90 Жыл бұрын

@@DigoTP_ 😂😂

@suham5132 Жыл бұрын

@@kooramagic7742 he was being sarcastic

@kooramagic7742 Жыл бұрын

@@suham5132 I see

@claiverff5497 Жыл бұрын

@@DigoTP_ 0000000

@chatebillychilima6762 Жыл бұрын

This would be a cool loading screen animation

@krysti4366 Жыл бұрын

maybe a little bit faster i think

@___idk 7 ай бұрын

@hrizwaldieos8239 5 ай бұрын

@@krysti4366depends on the system :P

@Magst3r1 4 ай бұрын

I know you meant the actual animation, but what if a game actually had a loading screen of its code being written

@diezmondray2754 4 ай бұрын

@mattlau 3 ай бұрын

Inspiring me to get back to coding!

@learning-axis 3 ай бұрын

cool

@pullingthestrings5233 2 ай бұрын

Coding is absolutely disgusting

@Lordaizen07 2 ай бұрын

@@pullingthestrings5233why

@chetan_i_am4885 2 ай бұрын

@@pullingthestrings5233 why ?

@pullingthestrings5233 2 ай бұрын

@@chetan_i_am4885 my brother committed suicide due to his coding career. Expectations are very high.

@souhardyaroy3709 Жыл бұрын

python: Ah f**k it. I'll just import.

@muhammadazizfatxullayev1611 Жыл бұрын

not,it is works

@Drinker424 11 ай бұрын

import something that doesn't exist

@majed1911 8 ай бұрын

Import solar system Print(solar system+” is very big”)

@industrialvtf 4 ай бұрын

🤨

@Victoryman25 3 ай бұрын

@@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

@dqsh Жыл бұрын

python: import solar_system as sys variable = sys.create() print(variable)

@kumarutkarsh5905 Жыл бұрын

Lol😂

@drop2526 Жыл бұрын

😂

@geekytutorials5745 Жыл бұрын

Nice one Akame-chan

@ANOLBEE Жыл бұрын

🤣

@dantevilchez-ww8gq Жыл бұрын

@BenandJacob Жыл бұрын

bro really coded earth 💀

@Mr.Classy2728 Жыл бұрын

Hence proved. We're in matrix 🗿 No questions please

@Mrmemestar2.o Жыл бұрын

@@Mr.Classy2728 😂😂😂😂😂 bruuuuuuuuuh

@smallSphere69 Жыл бұрын

@@Mr.Classy2728 yes I can confirm that you people are inside me.

@O_79 Жыл бұрын

wow so funny

@imidiot2515 Жыл бұрын

I've coded mars💀

@KawazakiZedit 8 ай бұрын

*Accidentally misses a dot* **Sun starts revolving moon**

@smaransure2234 8 ай бұрын

no, earth

@KawazakiZedit 8 ай бұрын

@@smaransure2234 that's good too but sun sounds a little better.

@smaransure2234 8 ай бұрын

@@KawazakiZedit no earth bc that was the misconception back then earlier like 200 years ago

@smaransure2234 8 ай бұрын

@@KawazakiZedit i meant sun revolving earth

@KawazakiZedit 8 ай бұрын

@@smaransure2234 bro , it's a joke.🥲

@fuzzy-02 Жыл бұрын

would love a tutorial explaining what everything does. For newbies like me this is magic!

@sneksteppy Жыл бұрын

It's literally not.

@rominarahbar2011 Жыл бұрын

i totally agree!

@snarpis Жыл бұрын

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 ?

@ilikemyrecommandationsthew257 Жыл бұрын

I started learning CSS yesterday and I understood most of it.

@snarpis Жыл бұрын

@@ilikemyrecommandationsthew257 Understanding is good, but what we want is being able to repeat it (without the video is even better :)

@hvedits69 4 ай бұрын

Keyboard sound is soo satisfying

@atharvmishra2369 4 ай бұрын

Html coders: **goin' tryhard** Python coders: "I'll just import"

@vanlalsiama507 3 ай бұрын

There is no space modules lmao

@Jvxo 3 ай бұрын

@@vanlalsiama507you definitely checked tho 🤣

@captheobbyist6434 3 ай бұрын

programmers dont type that fast actually, they will google at least something once in a few minutes

@SerhatAtayMD 2 ай бұрын

The file path literally has “.autotype” lmao

@nextasy6979 Жыл бұрын

man really styling in html bruh 💀

@vasiovasio Жыл бұрын

Still not inline CSS... such a noob!!! 😂😂😂

@Loller271 Жыл бұрын

Well it's very short so for informational purposes I don't hate it but still my web teacher would kill them

@ender.yeeterson Жыл бұрын

@@vasiovasio wdym online css

@vasiovasio Жыл бұрын

@@ender.yeeterson inline! haha thanks to address this! The stupid autocorrect that ruins Everything! :)

@hussainabbastech Жыл бұрын

What is the issue in it ?

@Enestheleafeon54 Жыл бұрын

The only thing I like is that 1 : it does work 2 : He does care about the keyboard types

@great6193 3 ай бұрын

haha :)

@BhusanaKumar-wq5in 2 ай бұрын

Wonderful even I will all start like

@mctomsin04 Жыл бұрын

Agba 🙌🙌🙌🙌🙌🙌🙌

@FruitForge Жыл бұрын

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); } }

@Ghil_Tiongco 5 ай бұрын

Thx

@user-gg4pe4zx2o 5 ай бұрын

Ты не представляешь,какой ты замечательный бро, спасибо тебе большое)

@Aud4ccy 5 ай бұрын

Um anjo

@QuantumGyan972 4 ай бұрын

Thanks ❤❤❤

@TyronRamos-wl2lb 4 ай бұрын

Ytrtr

@Whatwillyoudowithmyname Жыл бұрын

Year 69420 Coding tutorial How to create a virtual solar system inside a Notepad file 💀

@K--6 Жыл бұрын

😂😂😂

@akshay_m Жыл бұрын

Actually at that time it will be the entirety of existence with all of it's dimensions😂

@s0nycz3kk Жыл бұрын

Notepad file ...

@zepedro6741 Жыл бұрын

@@akshay_m or we would be extinct

@uhh315 Жыл бұрын

Wdym?, you can really write this on notepad or even office word if you save it as html

@vihungchu Жыл бұрын

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.

@harshittripathi11a58 Жыл бұрын

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.

@hypersecret6288 Жыл бұрын

@@harshittripathi11a58 gg

@CromwellEdonis 3 ай бұрын

@@harshittripathi11a58 It seems we have a quitter here.

@marcelofrazatto9971 7 ай бұрын

Birds in the background means you were coding all night long and that's already morning 😂

@learning-axis 7 ай бұрын

😅

@mubarikmoumin9880 3 ай бұрын

@@learning-axis❤

@Firelight7118 Жыл бұрын

Wow. As someone new to coding, that looks incredible! 😍

@shinig3mi 11 ай бұрын

man really thought we didnt see him hide overflow💀😭

@whydoesthisevenexist Жыл бұрын

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:

@nishatislam3495 Жыл бұрын

🤣🤣🤣

@themindhelp9584 Жыл бұрын

😂😂😂

@priyanshikumari69 Жыл бұрын

😂😂😂

@CW91 Жыл бұрын

if we really study DOM then we will be stuck at step 4 for ages

@svetislavcovic7570 10 ай бұрын

for real. and instructor is typing codes like we should know all this and expect us to know

@Mamonymous 4 ай бұрын

You are an excellent designer.

@abu_bakar_prince 3 ай бұрын

Amazing .... HTML & CSS

@thomasedwardking7286 Жыл бұрын

Yoi Sir, are the lord of the CSS 👨‍💻💪

@gustavo9758 Жыл бұрын

This is good but it looks like you have not seen CSS Battle stuff (try some Kevin Powell)

@brainel3443 Жыл бұрын

swrz this is amazing

@redkay7969 Жыл бұрын

@@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

@erikjunior3643 Жыл бұрын

@@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

@robinheyer708 Жыл бұрын

@@erikjunior3643 Dave Gray tutorials are the best imo

@khadijachafi3080 6 ай бұрын

Yes, I love programming, designs and graphics 🎉❤❤❤

@taranveersingh7391 13 сағат бұрын

Wow😊

@learning-axis Сағат бұрын

☺

@NiceChange Жыл бұрын

This is really cool. Great use of the animation props. So many nice features. Great work!

@0x000ST 9 ай бұрын

King of HTML CSS

@chandrakantpandey6817 4 ай бұрын

Waaw Yaar

@Being_m0tivated 10 ай бұрын

Dude you are master of front end

@rabekachittechitte23 10 ай бұрын

Wow🤞

@DeepakSharma-oj1mk Жыл бұрын

Excellent work

@tuaigetsdj3699 6 ай бұрын

Wow 👍👍

@user-wt4zy1xs4h 5 ай бұрын

woow next....

@AndromedaConcepts-pe5tg Жыл бұрын

Coding is fun. Just know the functions, arrays and syntax etc, you will do wonders.

@francischimezie6140 Жыл бұрын

Can you mentor me,still a newbie

@unknown0-0-0 Жыл бұрын

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

@whos.aspiire Жыл бұрын

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)

@m12652 16 күн бұрын

Great music, nice code too 😀🤓

@learning-axis 16 күн бұрын

thank you

@bibigamino Жыл бұрын

Super cool!

@SadiaOkoh 6 ай бұрын

That was the best animation I've seen in my life

@learning-axis 6 ай бұрын

thank you

@mistafisha Жыл бұрын

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!

@viwezinja145 4 ай бұрын

Awesome

@adelmanseur7968 5 ай бұрын

Wow ❤

@munawarkhan3857 Жыл бұрын

You are absolutely PRO

@foreign-livingtheamericand8782 Жыл бұрын

just what i need, a child in a child👍

@thegate8985 Жыл бұрын

bro 💀

@AquaQuokka Жыл бұрын

💀

@dorotheebutoyi435 Жыл бұрын

@@thegate8985 j09et m

@r.ebenezerpaul6850 Жыл бұрын

😂😂

@shuhaib.t Жыл бұрын

Holy shit ☠️

@deepakpradhan827 Жыл бұрын

YE BADHIYA THA GURU...

@Nerolistique10 18 күн бұрын

Awesome 👏🏾

@learning-axis 18 күн бұрын

thank you

@SciencewithRishit 9 ай бұрын

**Satisfying**

@ThisIsGlow Жыл бұрын

I love it so much!! Thank you! I can finally be my computer teacher's pet now :>

@user-lq2wf8gf7x 6 ай бұрын

Wow 😮🎉❤👏

@prince_k26aug 3 ай бұрын

Motivation 🔥🔥🔥

@AhabYT77 3 ай бұрын

#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

@IceBear_white 3 ай бұрын

the code seems a little bit wrong ig

@maysonrider2687 8 ай бұрын

I was closed my eyes and was hearing Ants walking . Peace out ✌️😅

@Codeworld579 3 ай бұрын

Cool 😎

@freecodeclass 3 ай бұрын

Awsome

@be_simple888 Жыл бұрын

you are so talented bro!!!

@magnosantosoficial9378 Жыл бұрын

Very good😊

@aliusman9693 5 ай бұрын

Awesome ❤❤❤

@Anand99947 5 ай бұрын

Wonderful

@vladeyt8776 5 ай бұрын

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)

@learning-axis 5 ай бұрын

thank you

@ricardomendes1872 4 ай бұрын

People who style in HTML are psychopaths...

@januzi2 2 ай бұрын

I style directly in the elements.

@clawven-pv9wm 2 ай бұрын

@@januzi2 Are you ok?

@winkx2727 6 ай бұрын

Sesimpel itu hasilnya hehe

@N3gative.x 5 ай бұрын

Wow 😮❤❤

@MooTruth123 Жыл бұрын

amazing bro❤

@zixu537 Жыл бұрын

amazing its reALLy works

@md.arifulhaquebjoy6565 5 ай бұрын

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

@dazcode 3 ай бұрын

lol he literally typed the whole thing

@computerprogramonly 6 ай бұрын

Maja a gaya 😮😮😮

@learning-axis 6 ай бұрын

cool

@Dasturlash_hayoti04 5 ай бұрын

It's great

@dragenoxinside Жыл бұрын

Mercury, Venus, Mars, Jupiter, Saturn, Uranus and Neptune have left the chat 🥺

@SareyFarah 8 ай бұрын

good but we need to watch as cool this vdio🙏

@GBF10 Жыл бұрын

You're amazing thank you hopefully to do more

@user-sz4iw9ls2o Жыл бұрын

Wow! I'm really impressed with your work.

@learning-axis Жыл бұрын

thank you

@Save_the_world_843 6 ай бұрын

❤❤❤

@RutviMistry-lt5lf Жыл бұрын

Please show us hole screen so that we can also get lurned

@learning-axis Жыл бұрын

I also provided a link in description you can get code from there. thank you.

@karansukarani2139 7 ай бұрын

Sir where I see description ?? 😢

@iamkhenny_07 8 ай бұрын

OMG 😱😳 Nice work dude 😎

@petronatech 5 ай бұрын

amazing!

@tomaszzdziarski9591 Жыл бұрын

just WOW!!!

@carel-0510 Жыл бұрын

Es realmente impresionante, pero es sonido es muy relajante 😌❤

@syedaurwa3099 11 ай бұрын

Wao amazing ✨

@user-hz8gs8wn2w 2 ай бұрын

Wow nice 😊

@Plazix999 6 ай бұрын

I have no idea what he just did but it looked cool at the end

@anuragpatil4073 Жыл бұрын

Bro really coded the whole soar system. 😱

@CraigOpie 11 ай бұрын

No, not really

@parthverma724 Жыл бұрын

Nice skills coder!

@jay-shree-ram9 4 ай бұрын

Nice😊

@pcmb447 Жыл бұрын

Legend dont undersood anything still watching whole video

@WindowsDrawer Жыл бұрын

True

@ChandravijayAgrawal 11 ай бұрын

Me: Write a solar system animated representation for me in HTML, CSS ChatGPT:

@yokochan9025 8 ай бұрын

Clever 😂😂

@jashuva1239 10 ай бұрын

Super sir

@redpacific359 4 ай бұрын

Cool bruh❤

@wilandervillanueva Жыл бұрын

Genius

@Phoenix_Reaper 9 ай бұрын

What a speed of typing !!! omg

@gaurav4uk 5 ай бұрын

Wow. Cool❤

@Millionaire_track34 3 ай бұрын

Majja agaya bidu it's work

@xinitarchives Жыл бұрын

The fact you did this without testing it out prior in between writing this is impressive on its own

@hosytaa6018 Жыл бұрын

He wrote the code then used a macro or something of the sort to have it rewrite the code for the video

@xinitarchives Жыл бұрын

@@hosytaa6018 yeah true. Didn't think of that

@DANIEL-mh2ef Жыл бұрын

almsot as if he had the code ready...

@athiran5856 Жыл бұрын

@@hosytaa6018 what is macro?

@linminsu3443 Жыл бұрын

@@athiran5856software that does actions for you. In this case it types out the program from a copy he made before

@royandescartes Жыл бұрын

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

@amit_mukherjee1 Жыл бұрын

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;

@royandescartes Жыл бұрын

@@amit_mukherjee1 gonna try this thank you

@princegbagbar7793 11 ай бұрын

You may of done something here