Animating Websites with HTML, CSS, and JS: A Step-by-Step Guide | HTML CSS JS Tutorial!

Source Code: github.com/saa...
Welcome to our comprehensive tutorial on animating websites using HTML, CSS, and JS! In this in-depth video, we'll take you on a journey through the world of web animation, covering essential concepts and techniques to bring your websites to life.
Whether you're a beginner or an experienced developer, this tutorial has something for you. We'll start with the basics, exploring key animation principles and how to apply them to your HTML elements using CSS. From there, we'll dive into more advanced topics, such as using JavaScript libraries and frameworks to create interactive and dynamic animations.
Join us as we demonstrate various animation techniques, provide code examples, and walk you through practical exercises to reinforce your learning. By the end of this tutorial, you'll have a solid foundation in web animation and be ready to apply your newfound skills to your own projects.
Instructor in this video: Sarthak Sharma
Visit our website: sheryians.com/
Socials:
Instagram: / sheryians_coding_school
Facebook: / sheryians.community
Telegram: t.me/sheryians...
LinkedIn: / the-sheryians-coding-s...
Discord: / discord
Peace ✌️
#webanimation #javascripttutorial #html #css #cssanimationtutorial #advancedjavascript #webdevelopment #programmingtutorial #javascriptmastery #codingtips #techeducation #frontenddevelopment #codelearning #javascripttips #webdevtips #codingjourney #learntocode #codenewbie #javascripttricks #programmingskills #codingcommunity #javascriptprojects #webdesign

[@AkashPrajapati-pb8uc]

Itne KZbin channel dekh liye par is se acha channel nahi dekha jaha par hum log ko pata chalta hai actually kya karna hai😊 and knowledge is top notch

[@RAHULMAHESHWARIdexter]

Amazing Tutorial brother, one thing that sets you apart is that you explain things simultaneously. I didn't know much css and JS but I was able to understand everything clearly. Also your light take on teaching with jokes and all is clearly a showstopper. You earned a subscriber with this and please keep on bringing such amazing quality tutorials and tricks.

[@Aman_yadav1419]

We can see the success of your channel from 10k subscriber to 40k+ subscriber ...and many more comes to go....thank you and sir ek request hai please awward me se ek unique portfolio website Lana ... bhot jarurat hai bhaiya ...aur thank you videos ke liye .. always support

[@y_khushii]

Correcttt !!

[@Aman_yadav1419]

​@@y_khushiithank you 😊

[@navinkumarsahu1159]

me: 17k to 54K🎉

[@tejaswanama]

Now it's been 130K

[@AnkitSingh-tf6nh]

Bhai bna do ab video advance js

[@user-ol4ht7pr5u]

Sir! The best Channel I've ever found. I stopped watching shows to watch your Web Development Course and learnt a lot of good stuff...... Honestly speaking SUCH A MIND BLOWING CONTENT... Best wishes for you , your family and for your team Sir!

[@neerajyadav2349]

Need more projects like this ! Please do teach making it responsive side by side too 🙌❤

[@jagggyjazz8010]

Yeah desifning websites is one thing and making them responsive is something else XD

[@vedmohan001]

2 hours video took me 2 days 😅 learned a lot from this keep posting more stuff like this amazing content you have

[@nirbhay2652]

Me also mane to 10 mint ki video me 2 hours lga diye 😂😂

[@frixzoss]

@@nirbhay2652 self code krne ka intrest rehta haina ki kuch naya krke dekhe ideas aate rehte hai to time lagta hai

[@nirbhay2652]

@@frixzoss thanks bro advice ke liye

[@somuacharya6586]

@@nirbhay2652 bro mujhe web dev kuch nahi ata he kya mein ye playlist pura follow karoon to sab hojayega kya?

[@ahmadshaikh3403]

Video link is not working in my htm file

[@armaan_pashtoon]

I have just found your channel few days ago and i am regularly watching your videos and learning from it . thank you harsh bhaya and also thanks to your hardworking team

[@Moosa_code]

just wanted to share i was thinking to quit learning web development cause i really sucled at making projects nut after ive founbd this channel im back on the shit making projects with these awesome tutorials i wanna thankyou guys for the efforts you are making and landing this this awesome content for us hats of guys im learning on your projects and i wish to see more from you

[@user-fh6wl8ul4z]

I never saw such amazing KZbin channel with such great content, keep growing guys

[@AlvaSam]

literally become a fan of you sir i learnt python html css from the channel code with harry but the moment when i say your front end playlist my gosh im literally shocked. I’ve seen many videos but never seen a youtuber teacher like you. I started learning javascript from code with harry but now I switched to your channel and started from java script ❤

[@biachoice2125]

Same story 😂

[@saar_thack]

❤

[@AtulGupta-jj7ek]

@@saar_thack bhai I have a few doubts 1) aapne 17:45 minutes pe position relative dia page1 ko right. But position relative se vo dikhne kaise laga? Kyuki position:relative alone won't do anything if I am not wrong, correct me if I am wrong. 2) Agar hum sirf position:relative use karte h without giving postion:absolute or top, bottom, left and right values to fir kya hoga?

[@user-ft7ws9wk6x]

Best channel for web programming on entire youtube

[@mdshadabirfan7404]

Hello Sarthak brother. You and your tutorials are awesome. SUGGESTION:-- 1. You should inlcude the links of the videos and playlists in the description of which you are talking about in the tutorials because your recommended videos are not appearing on eye buttons. Thanks

[@Ye_wo_ye]

For those who can't see the .SVG logo in the browser just change the tag Into Thanks me later😊

[@Something-xl4ls]

i can't see the video so wht should i do??

[@NaveedUlHaq75]

Hi Shayaan, How are you? My name is Naveed from Pakistan and I am a full stack developer. I am always eager to learn new things, and I keep striving for that. I've watched a couple of your videos, and I must say, your teaching style and the way you explain things are both excellent. Keep creating more projects and continue to be successful in the coding world. ❤

[@KavindraPratap-oo4by]

This channel deserves more love and support, 🥰,best channel to learn web development

[@tapashmazumdar8319]

Sir u r very nice teacher and please continue like this and bring more things for us please and one more request could you bring more gsap tutorials please there are lots things are there which i don't know like (tweeline,tweenmax,motionPath). So please look into this and teach us please 🙏🏿.

[@editzmetabasu]

I wish kash mujhe ye channel pahle mila hota..Apna passion nhi chorti.. Thank you so much ki aap logon ne mera passion se mujhe firse payar krwaya

[@user-kq5pk8kr8c]

you guys are such an inspiring us. keep it up and make content like this, we love this type of content. thank you so much for this type of content.

[@wajahatali983]

Amazing Tutorial brother, one thing that sets you apart is that you explain things simultaneously. I didn't know much CSS and JS but I was able to understand everything clearly. Also, your light take on teaching with jokes and all is clearly a showstopper. You earned a subscriber with this and please keep on bringing such amazing quality tutorials and tricks.

[@ItzHamza-uc5dd]

Sir I personally believe that we need this content and I request you to bring such amazing content on youtube and agian Thanks for this 🤗🤗🤗

[@ChandanKumar-fg2nu]

Amazing project. The efforts behind the project are great.❤️ Thanks a lot for this type of video 😊

[@nikhilraj9900]

Wow what a mesmerizing series you can make it in your own if have already watched it applause to you brother 😊

[@Sachinkhanal7921]

🌟 This tutorial is pure gold! ✨ I was amazed by how easy it is to breathe life into websites with just HTML, CSS, and JS. The step-by-step guide is incredibly helpful, even for someone like me who's just starting out. Thanks for breaking it down in such an easy-to-understand way! Can't wait to unleash my creativity and make some seriously stunning websites. 💻💫

[@dipjaydas3825]

Sir every conversation always helps me to gain confidence before starting the project. Because you discussed every time what knowledge we should have to continue the project.

[@shubhamkhobragade5348]

FINALLY IM HERE AGAIN🥹, Meri sbse peheli video yehi thi jisne mujhe is channel se nd itne acche Guru se introduce karvaya tha bcoz i wanted to learn website development from scratch and mujhe ye video ki recommendation aai thi, then jaise jaise mai is video me aage badhra tha to mujhe pta chala ki koi ho harsh bhaiyaa hai jinka ye channel hai...at that time he was a new face for me, And he said ki learn what matters krk video hai utna dekhlo kaafi hai ek website development k liye, so maine vo videos dekhna shuru kiyaa tb mai harsh bhaiyaa ko janna shuru kiya unk padhane ka tarika samajh me aane lga and fir to literally pasand aane lga and i somehow started to connect with him, then dheere dheere mujhe itna pasand aaya aapke padhane ka tarika ki mai wish krta tha ki kaash mai bhi bhopal ka hota then mujhe bhi aapki tution join krne milta, and maine isse pehele bhi bohot HTMl,CSS&Javascript k videos dekhe the bt koi complete nhi kr paaya poori bcoz kahi na kahi unk padhane ka tarika pasand nhi aata tha, bhale hi samajh me ajata thaa ki kya padhara hai, bt unka tarika vaisa nhi tha ki mai ek 3-4 ghante ka break lene k baad vps unki video vps continue dekhna shuru kru (jaisa harsh bhaiyaa bolte hai ki jao dost k sath ghum k aao bt vps vahi se continue kro.) Bt now finally i reached my station from where i can learn anything and everything i wanted to learn related to frontend and fullstack. Thanksyou KZbin For Recommending this beautiful channel and this beautiful mentor to me. Hope ill get to meet you one day. Your wellwisher Shubham.❤ Followed you on insta aswell.😊

[@user-nt8cn3pp5f]

i am not a beginner , i have a decent experience in full stack and now i can say to beginners that bhai ye bhaiya bhout sahi level ka content de rahe hain frontend pe inke commmad bhout bhout sahi hai

[@antoniskryk]

Thank you for the tutorial. But I would recommend using classes instead of id-s and use BEM methodology for classes naming. It would improve your subscribers coding experience.

[@upbeatnomad]

Dude is using hard values such as pixels instead of rems. Instead of using the concept of fixed width containers uniformly across the site, he is using hard padding values in pixels. Dude probably does not even know anything about clamp units. Too bad, so many people are learning from him, unaware that they are being trained to do stuff poorly.

[@kanak8711]

Best channel bhaiya...... thank you so much ...itna quality content provide krne ke liye.....abhi tk koi bhi aisa channel nhi milaa. ...jo aap jaisa pdha paye

[@harshitasingh6401]

For moving cursor blur together with cursor we can use transform:translate(-45%,-45%) without calculating in js

[@sayandutta2038]

-50%, -50% will center it

[@Filmy_world_official]

I'm here after six months i havve created this website again but by my own and i've created this website more pixel perfect than my teacher sarthak sharma and i'm so glad all credit goes to sarthak sharma love u from Pakistan.

[@kid88472]

Great efforts and great content on the same place.

[@shuvambiswas1347]

This channel is a game-changer in the field of web dev.

[@lucifer_07]

Hey dear champs let's start here 👇👇👇

[@ShubhamSingh-li7sj]

Thank you bhaiya for creating this video. First time i watched any video and create a complete frontend page just because your content and explanation is so good.

[@preeti7938]

Can you provide video link , actually am unable to access the video and it shows you have been blocked.

[@ShubhamSingh-li7sj]

@@preeti7938 kzbin.info/www/bejne/rniUkKmYi7WIi9U&pp=iAQB

[@MrAwesome9004]

​@@preeti7938 I am also getting that you get blocked, but don't know how, how to access this website, if you found the solution help me as well

[@relaxingcinema2280]

Need more projects like this for multiple pages and plz making it responsive too.... 🙏🙏🙏🙏🙏

[@punamdevi9871]

I am unable to use webkit-text-stroke... Can anyone help me

[@kunikamittal16]

The animatiion in the beginning was just mind blowing.

[@IronMan_471]

We are at 160k Congratulations all sheryians ❤🎉

[@shelkeonka]

I think for webdevelpment keliye isse supperb Chanel Maine abhi tak nahi dekha na cwh na thapa no any one and projects is bapp ❤

[@LinesForProgress]

need more projects like this....this is amazing

[@harshvardhanshah6240]

As long as I live I will always be greatful to you ! Thankyou Sir.

[@vipinsoam7683]

Best coding channel on entire KZbin ❤

[@y_khushii]

Discover apna college and codewithharry too ❤

[@AyanSahil]

@@y_khushii woh og hai lekin best nhi idhar best dream website jo khi nhi dekhi sb free me banwa rhe udhar se basic seekha h harry bhai se

[@akashsaini8907]

Bro, Your teaching method is amazing and your content also awesome on the whole youtube

[@webdev_harshu]

I don't get video link . Anyone can have please give me.

[@MMA_DEBARSHIBANERJEE]

Best channel for web Development I have ever seen !😍

[@harsshp]

aesehi aur projects lao bhaiyaa 🔥❤️

[@saar_thack]

Theek hai 👍🏻 🙂

[@PrashantKumar-wk1xb]

Bhaiya apka content one of the best content lga mujhe thankyou bhaiya ji ❤

[@nandhusathish2526]

Great project ❤

[@arnold8090]

#justiceForEditor#justiceForEditor#justiceForEditor#justiceForEditor#justiceForEditor#justiceForEditor Awesome Video!!! Absolutely love the way you guys Teach. Thanks a ton

[@khushaliVadadaoriya]

All Project Are Next Level Project Thanks For Next Level of Front-end Devlopment

[@daianamowry]

Ótimo vídeo! Poderia, por favor, fazer a parte responsiva passo a passo ou disponibilizar os arquivos com a responsividade?

[@nithenbains]

Thanks for this all stuff your course is literally to much better than paid courses

[@payelkumbhakar6337]

Very nice. Please bring more such unique projects. Do you have any course?

[@sheryians]

You don't need to get any course, you can learn whole frontend just on this channel.

[@payelkumbhakar6337]

@@sheryians okay.

[@nidhiz4983]

@@sheryians Most underrated reply🙏

[@vikassoni7882]

Best tutorial ever on the whole internet.

[@CSEngineerInsider]

Thank you.

[@code-java]

I seen this video 5 months ago , now suddanly it came when I'm scrolling , I dont know just I laugh , bez of this video I learnt a lot and now I may good in html and css. Happy😍

[@yunosukemiro8802]

my scroller is not working although i used the same code .why???

[@SatnamSingh-ke7rb]

Same

[@behindthescene4406]

@@SatnamSingh-ke7rb same yar

[@darshit_poriya]

QUERY : I watched full video. 1] Explain working behind Z-Index for setting to 10 or sometimes 9. 2] I understood concept but able to gain clarity why we are doing that. Explain position absolute (Why and when we should include it by teaching reasons behind it) 3[ overflow hidden, white space nowrap (explain the reason briefly one time when you use that for first time like harsh bhaiya) Otherwise that was great experience to learn and first time really enjoyed making this website. Thanks again.

[@itzmranonymous]

have you completed this website ?

[@darshit_poriya]

@@itzmranonymous Yes

[@45abhishekyadav50]

responsive kese kre ? ispr video bnao isi website ki

[@abhishekcode]

Sir MERN full stack with git hosting full video bnaye..Love your way of teaching..Keep teaching us.. Thanks❤

[@gamingwithudit]

css jo wo css h that's it.....or html jo h wo html h that's it. or rahi baat javascript ki wo to pta he h apko wo javascript h that's it....hahahaha wahhh guru shi bnaye hooo video pr smjhaa smjha k krooo naa aise kaise kam chale gaa....

[@Ramdut369]

bhai mast padha rahe ho mai video ke starting se leke abhi 20 min hue boar nahi hua interest aaya hai.aise hi padhate rehna❤

[@owaispatni7077]

Good job brother ❤❤❤ Ab jald se jald responsive pe video leke aajao maine phele bhi comment kiya hai♥️♥️💯

[@ahammedHafij]

Voice, video, edit perfect

[@faisalmughal3879]

Bhai 200k sa cross hu jaya ga ap na javascript wali video ma. Bola ha tension nahi lo bs ap laga raho thankyou very much

[@Edit_writes]

Sir pls make all topic cover of CSS actually I've watched your CSS video which is duration around 38 min and you're using the many of topic of css which you didn't cover so pls make a video on CSS in which all topic cover actually I'm fall love with your teaching style

[@khushijha9443]

your explanation is just fab... I was continuously smiling.. throughout the video.. just wow project....love from Jharkhand

[@heisenberg3040]

do you have the golf video

[@user-uq8yd4lj7t]

do you have???@@heisenberg3040

[@tourstravelsoftheworld2129]

Bro you are a modern teacher in the coding world

[@BKYADAV-zm7yv]

Sharthak bhai aapka content valuable hai jld hi sb ko pichhe chhod doge Aap comment k liye bole ho esi liye Kiya hun achha lga video

[@user-pb3yr5rn5v]

you explain it so well sir...just loving it

[@santobiracode]

love you bhaiya for your efforts.....

[@Harshinikotgirwar]

#respectforeditor 😂such a nice video bht maja aaya

[@Profinisher101]

This channel deserves millions of like ❤❤❤

[@artistyogeshkumar]

thankyou sarthak bhaiya very nice teaching skills you have more like a big brother to me.

[@shaikhmohammednauman5778]

Thanks learnt a lot new things from you! Your hardwork is appreciated 🕶

[@whatsayan]

Bohot badhiya content

[@anaviothicheart2276]

kudos to you guys and the editor you guys make it such fun❤❤❤❤

[@ajaysasane4674]

One of the best KZbinr ever I seen❤❤

[@unboxtechnology1834]

Brilliant Explanation. More power to you. Thank you

[@NobleAnime_Edit437]

i am addict this channel now as a full- stack developer

[@user-pb6hy6zo1f]

You are the best in wrb development brother❤❤❤

[@krishantanwar6613]

Thank you bhai ❤ for giving valuable information about Web again thank you ❤❤❤

[@shilpaaddakatla7207]

bro just love ur videos learned a lot from u pls bring more such projects🥰🥰🥰

[@clipseditz4826]

Amazing Website bnai hai + little bit Gsap Tutorial.....Thanks a lot Sir🤩

[@manjunathpatil9083]

Bhaisab kya banate ho yaar , ekdam badiya

[@user-cf8mn1vc6y]

It is very helpful for me to earn money by see your projects

[@Coder_0101]

❤️❤️❤️❤️❤️❤️❤️ Such a Great Work #Informative,#UniqueConent #PremiumContent 👍👍 First video jisko muje 1.5x kr ke nahi chlana pada I watch complete video and abel to understand how animation work.

[@arslanliaqat1720]

please always make responsive websites, Great work keep it up. Love from Pakistan .

[@user-dx6ku6qj]

Zabardast Love From Pakistan Punjab🥰

[@Thunder_Maxx]

you guys are the best , great teaching and clearly explained everything , thank you brother for this wonderful project ❤❤❤❤✌✌👍👍👍👍

[@hizarkhan_0]

Super excited 🔥🥳

[@studyuniverse621]

I just want to say-- Maja aa gaya😂😊😊😊😊

[@user-ks5bh7ph7u]

Awesome mind blowing 😎 website ❤

[@satwikshet9012]

Bhai video bahut acchi hai. Shayad comments Kam honge.

[@Codewithkeshav]

Sarthak bhai and harsh bhaiya bht achhe h love u bhaiya and love from delhi

[@rockysp1]

This video can be the beginning of our success

[@SUM003]

Amazing tutorial you made guys lots of thing to learn...i really love it thanks dude for such a video

[@PrashantKumar-xb1zc]

bhai everything is great at next level but only thing i want to say that, PLEASE use CLASSES as much as you can in place of IDs untill it is necessary and more use for the javascript side.

[@thestroyteller]

amazing sir keep growing and do more projects for us love from Pakistan

[@fakkenamee5694]

bana di bhai puri 1 sitting me sath sath code likh kr took me 6 hours thanks for your guidance bro😇

[@dakshjain82]

love from JAIPUR❤