5 Real-Life JavaScript Effects and Features That Reign Supreme! 👑🌐
HTML-код
- Опубликовано: 25 авг 2023
- Ever wondered how those awesome animations on websites work? In this video, we're showing you 5 real-life tricks using JavaScript that even big sites like Instagram use! From making things move smoothly to adding cool effects when you hover your mouse, we're keeping it simple and fun. Get ready to make your website stand out!
Don't forget to hit the like button and subscribe for more tech tips! 🚀🔥
Instructor in this video: Sarthak Sharma
🌐 Website: sheryians.com/
Socials:
📷 Instagram: / sheryians_coding_school
📘 Facebook: / sheryians.community
💌 Telegram: t.me/sheryiansCommunity
💼 LinkedIn: / the-sheryians-coding-s...
🎮 Discord: / discord
Peace ✌️
bhai tu bolta bht h, thoda kam kam bola kr, disturbing lgta h.
Padhne aaya hai, aur bolu bhi nahi ?
Silent tutorial banau ?
Bina bole banau ?
Bina samjhaaye huye banau ?
Apni style se hatke banau ?
Kuchh waide banau jo mera tareeka hi nahi hai padhaane ka ?
@@thesheryianscodingschool Harsh bhaiya se ek baar discuss kr bro. Unka tutorial seems more free and open. Voh proper pause lete h, samjhate h, par tere mein tu out of context baatein bht krta h. Infact you yourself has said "mein bolte bolte code krra hu" in your video. Interaction is important, but don't overdo it.
Take it as a good advice only*
@@pawanchandrajoshi841 life me aap jitna bhi acha kaam kr le ek na ek aadmi mil hee jaayga aapke jaisa bhai itne saare option hai youtube me koi or video dekh leta
@@pawanchandrajoshi841 You should ask your parents to teach you how to speak respectfully. Now, Take it as a good advice only* 👍
Shut the fuck off bro padhnaa nahii toh laudaa hillanaa
5:36 Facebook Friend Request
24:06 instagram like feature
38:50 Custom cursor
49:19 multiple image hovering animation
1:08:24 Insta story feature
aise logo ki hame jarorat hai thanks ❤❤
❤❤❤❤❤❤❤❤❤
Thank you 😊👍
tq
00:01 JavaScript projects and features discussed in the video
02:20 The video discusses various programming and educational content
06:13 5 real-life JavaScript effects and features for optimal web development
07:59 Creating and customizing images in JavaScript
11:52 Creating and styling buttons in JavaScript
13:50 Selecting and manipulating HTML elements using JavaScript
17:28 The video discusses JavaScript effects and features in real-life applications.
19:00 Implementing friend removal functionality in JavaScript.
22:21 Understanding JavaScript coding techniques and applying them in real life scenarios
24:18 Creating a lamp container and customizing its design.
27:45 Applying font size and position in CSS
29:46 Use 'transform' property for various transformations in JavaScript.
33:30 Using setTimeout function in JavaScript allows for delayed execution of code.
35:12 Understanding JavaScript timeout function
38:52 Creating custom styles and effects with JavaScript
40:42 Using JavaScript to customize cursor and element positions.
44:46 Understanding the mousemove event in JavaScript.
46:26 Manipulating DOM elements using JavaScript
49:58 Using JavaScript to control elements' size and color.
52:17 Using Justify Content Flex to align elements
56:21 Using event listeners and mouse events in JavaScript.
58:26 JavaScript transform translate property for image effects
1:02:34 Understanding JavaScript event listeners and actions
1:04:37 Using JavaScript to manipulate CSS properties dynamically.
1:08:32 Styling in JavaScript with detailed coding instructions
1:10:11 Leveraging JavaScript for enhanced visual effects
1:14:00 Customizing borders and background in CSS
1:15:39 Using CSS properties to manipulate story elements
1:19:21 JavaScript effects and features for overflow and scrollbar customization.
1:21:20 JavaScript concepts and object manipulation
1:24:46 Understanding the concept of looping and data addition in JavaScript.
1:26:21 Understanding and using JavaScript objects and properties
1:29:53 The video discusses JavaScript effects and features
1:31:55 Understanding and using index in JavaScript arrays.
1:35:22 Understanding HTML and CSS Margin Properties
1:36:58 Using hashtags to organize and categorize Instagram stories
1:40:19 Understanding and accessing element IDs in JavaScript.
1:42:06 Creating interactive stories with JavaScript and CSS
1:47:11 Using timers and delays in JavaScript
1:48:57 Encouraging viewers to create something and looking forward to future projects
Crafted by Merlin AI.
I saw so many educational videos... Bt I found you so real, hardworking and down to earth person.... Awesome work bro.... 😊👍🏻
In previous days I addicted to movies but now addicted to your videos ❤ what a content ,excellent teaching ... Keep teaching us thank you so much you helped many students thank u thank u so much ❤❤❤
Absolutely incredible! Your ability to simplify explanations is truly amazing.
I enjoyed learning from you because the way you teach and keep interacting with us makes us not bored.. We appreciate your hard work
One of the best video I found on you tube which can help any beginner to master front end web development with these mini projects. Really helpful!!!
I cannot adequately express how grateful we are for this. Thank you so much! ❣
You both are just great. Amazing videos. Insha Allah will watch all of your videos one by one. I am now focusing on front end web development playlist. Keep rocking and keep bringing more amazing content for us .. thank you ❤️
completed my first project and you taught the concepts so well, i made those buttons by myself at first try. Thank you so much
Bro from "Pakistan" thanks for this really premium content, pichle eik saal se youtube pr web development ka course dhoond raha tha, eik din raat ko leeta scroll kr raha tha "learn what matters --> js" is word kii wajah se content deakhna start kiya, really your content is premium.
Thank you so much for your work and your strength and efforts.❤
Thanks for all the info ♥ Really appreciated the effort 🙏
4 out of 5 done.
guys this is amazing content thank you so much.
I love everything about your channel, just one suggestion, could you put detailed time stampes on these videos , i say this because, most vedios are long(and I am happy that they are long, and thank you for working so hard on them) but because vedios are long, sometimes the inertia to start a video increases , but if there were time stamps, on the days we are not that ready to study we can just tell ourselves ki bas ye wala part dekh le. I know its not necessary, but I thought I should suggest. Thank you so much for your freaking amazing content.
Your teaching method is Best for Beginners , Great Works Guys ❤
Love all the Sheyrians sir,thank you for this video❤❤❤❤
Awesome.
I have never seen such a great tutorial on RUclips ever❤
3k comments and we’ll bring part2 of this video❤️
And thanks to all of you for such a great response,❤️🥹
Bhai apne react/nextjs ka second video abhi tk post nhi kiya.. uska to target bhi hit hogya.
Shery js ki animation ka please explaination ki video bano do please bhaiya on how we can we make those animations in normal js if we don't use shery js
I want to know how the animation is working pls
Bhaiya app sb kuch sikhao jo appko lgta hai. Ham app ke sath hai
Next Video Mein ek html,css,js ka ek next level project❤
Bro, please give us clarity about whether we should react or next ... please make a brief video of changes in react and js and their merging.... Please bro 🥺
"Sheryians Coding School, your channel has been an absolute gem in my web development journey! Your content is not just informative, but it's delivered with such clarity and enthusiasm that it makes learning a pure joy. The way you break down complex concepts into easy-to-understand steps is truly remarkable. Thanks to your guidance, I've not only learned how to code, but I've also gained a deep passion for web development. Your dedication to teaching and the quality of your content is unmatched. Keep up the fantastic work, and know that you're positively impacting the lives of so many aspiring developers, including mine. Your channel is a shining beacon of knowledge and inspiration in the vast sea of online tutorials. 🚀🌟"
You give very good content free of cost thanks for that❤
Thankyou so much sir for providing us best content on RUclips.
You are real heroes for students 💪😁❤
I never imagined that we gonna get such a level of content in Hindi. He has amazing knowledge of CSS and so of JS. Superb buddy. He explains things splendid n hafta say this seems most premium course.
actually true
Thankyou so much sheriyans team for such wonderful videos i had ever seen. Thats only because of you i am feeling very confient that yes i also can do this with such ease♥♥
Thanks for the premium quality videos ❤❤
Thanks for the quality content 🎉❤
Thank you. This video is very helpful.
Thank you so much for this amazing tutorial !
Thanks for giving super appreciable premium content. Thanks a lot.🔥🔥
Jahan log basic concepts bhi dhang se nahi batate waha ye log basic + advanced concepts + master concepts + modern designing which can be called real designing sikha rahe hai 🤟🤟 . Really people don't talk about the concepts which you people are teaching to audience that are the real topics which should be covered according to interviews. I go offline coaching also but i think that the mentors there even don't know about the topics that harsh sir covered in javascript master the art and javascript endgame video. Really thanks keep going you all and keep bringing super contents for absolutely free for those people who really wants to do extraordinary in life to become extraordinary in life to show people extraordinary in life but they have not so much good resources 🥺. Thanks a lot man once again🔥🔥. and i am doing two comments for contribute in comments target 😂😂.
You guys are really bringing revolution 🔥. Kindly bring some Tailwind projects too 🙏.
thanks bro for this lovely basic project
your way of teaching is very wonderful❤❤
4:00 - Introduction
5:35 - Project 1
24:06 - Project 2
38:50 - Project 3
49:19 - Project 4
1:08:24 - Project 5
can you give the souce code of project 5?
0:09 ye reh gya bhai
@@raghvendramisra6477😂😂
You guys are making Really powerful content on RUclips for free... Appreciating 🫡🫡.... Love from Nepal 🇳🇵🇳🇵💟💟
yep nepal...
This is what we all needed SheryiansForever :)
Awesome content, Thank you!
Better than so called course seller channels .
I recommend this channel to all my friends to learn Web Dev. from this channel.
Agreed
Bro tumhare jaise JS ki knowledge agar mere pass hoti toh google kaa interview nikal deta, Keep it up👍👌👍👍👍👍👍👍👍👍👍👍
5/5 Thanks a lot bhai 😊❤
Finally, i revised very well my JS concepts
The depth of detail and top-notch quality truly set you apart. 🌟
Thankyou so much ❤️ 😊 apki video se mere css, js ki practice achi hogyi
Haven't watched it yet... But i hope this video performs well... All the best ❤❤❤
I am a civil engineering student. I don't need html css and JS but i am watching your videos because the way you guys teach is interesting.
Currently its 1:16 am in Nepal
But why u are just watching, why don't u open code editor in your pc and try to code, maybe it can grab your interest from civil, coding could be best option❤
My exam is starting in few days so i am not giving my full time .
After my exam I will start coding too
it doesn't mean that u will became the civil engineer u have to enhance ur skill always
5/5 projects done , got to learn and apply the logics and concept learnt from books and tutorials, thanks sheriyans
5/5 projects done. Thank you for your hard work❤❤❤❤
Premium quality content
Thanks a lot for teaching us free More than paid courses
Thank you very much sarthack sir keep making content like this ❤.
1/5 🎉
@@odiagamersrx5584 abhi to ayi video 😂😂
@@rohanrajput_9 😜😜😜😜😜😜 abhi half way
@@odiagamersrx5584 ye bhi theek hai 😂
really thanks bro from depth of my heart.
Thankyou so much team
Muchh needed contents for all of us 🙏🙏
Thank You ❤❤❤
Still we feel that our html and css skills aren't done as we want,
So we want landing page series on HTML and CSS
Thank you ❤
Thanks thanks thanks thanks a lot 👍👍.
Thanks for sharing & putting in so much efforts..
Very clear instructions atleast for me keep up the good work 👍
Comments ❤ karna.must ha.
And waiting for full stack projects 😊
More js and react mini projects please!!!!!!!!
Thank you so much sarthak Bhai😊
5/5 Projects done! Thank You Sheriyans
Revolution in Education with Shreyansh to श्रेष्ठतम
Thank You ❤❤❤
Still we feel that our html and css skills aren't done as we want,
So we want landing page series on HTML and CSS ❤❤❤
Yes landing page is important i think so
Nhi chahiye JS and react p chahiye
@@syedehsan1469dono pe mil jaaye to koi problem hai kya?
Thank you for making things easier.
Perfect one in the teaching 👍
@sheriyan your contents are premium and empress me how you teaching people with passions .. i have never had subscribed any channel but today i subscribed your channel . Kindly continue teaching 😊😊
Fantastic
thanks 5/5 love ur explanation!!
Love the content sir ji ❤❤❤
Awesome
Great
superb video...I learned a lot
Your content and your way of teaching are unique and cool Harsh bhai. I am learning Js again only because I like the way you teach and My concepts are more clearer than previous.
full stack developer course launch kar do😊
Baap of Education Industry......
Baap ka baap of Education industry.....🔥
ek request hai gaali mt bakko yaar video me,...2-2 ghante ka course earphone nhi lga ke dekhenge hmesha. Bilkul bhi cool nhi lagta gaali bakna lecture me aur na hi unique.
@@akashpandey1215arey bhai mature to hai na tere ghar vale bhi honge aisa to bol matt kabhi gali nahi suni kisine thoda sun liya to kya hi hoga
@@akashpandey1215bhai agar woh gaali nhi denge toh boaring classes lagegi fir content dekhne kaam log aayenge 😅
@@akashpandey1215 bhai yaha 4-4 ghante class kr rhe humlog earphone me tum to 2hr me aise bol rhe
Sir thank you so much for these 5 projects ❤🙏.
Love the way you Teach ♥
hey bhaiya, in the last project, whenever we click somewhere else instead of "dp" in #storiyan section, it gives un error that "Cannot read properties of undefined (reading 'story')", and further program stops working. can we use Try and catch to avoid this error?
Edit: solved the error instead of using try and catch i just added a simple if statement , here's the code, it wont give any error even Though if we click somewhere else instead of dp
stories.addEventListener("click", (dets) => {
if(dets.target.tagName.toLowerCase() === "img")
document.querySelector("#fullscreen").style.display = "block"
document.querySelector("#fullscreen").style.backgroundImage = `url(${arr[dets.target.id].story})`
setTimeout(() => {
document.querySelector("#fullscreen").style.display = "none"
}, 2000)
})
Have you tried the Custom Cursor ?
I'm having a lagging experience when I add Transition all ease duration.
do you know what is wrong with it?
@@joshibalajibheema4941 does anybody know why is the 'Gilroy' font not working in my css
Awesome guy's
Your efforts are top notch!
Mainly 3 js courses are awesome and easy to understand.
But there are many students who are confused about how will they get job in web development!
Please make video about the scope of web development and with some guidance.
Except this all things are awesome👏😊
Keep it up!
Thank You So Much bro You Are Very Good Creator And Teacher
your teaching is amazing and interesting thank you
💌
Thankyou for providing such a amazing content
btw 2.6k views and 854 like do like and share guys
Exactly i am pretty sure the target would be met in a jiffy
Sheryian is born to make history ☺️💗💖
Thank you so much bro these projects ❤ and please bring more products like this👍🏻💐🙏🏻
Thanks brothers...bht acha kam ker rhy ho app
5/5 done ✅
The quality of learning I'm getting is just INSANE! ISTG
This Young man taught literally so much in just one video...and Never ever even for a bit I felt bored making the projects!
A THANKS can't pay for all the efforts you guys are doing....but my best wishes are for this channel.
SLAY SHERYIANS ✊🏼❤
bro give the source code for instagram story project
@@infernoyt7355 Ok I'll reply u with my another account where I'll paste the code wait....
khud bana le bhai itna toh ky CODE wode kar raha hai@@infernoyt7355
can you give the source code of instagram story project?
26:48 Chalega Badi video bhi
Perfect teaching style 😮
Truly God Gifted Teachers ... Thanks for such valuable content and most importantly the connect you make with the students ... ✅✅
❤
Hahahaha 😂😂😂😂 i love this
5 out of 5 done.
guys this is amazing content thank you so much.
Very Knowledgeable video , learn a lot thank you for these wonderful video , God bless u 5/5 projects done
All good but gali mat Diya Karo
Awesome style of teaching
Completed all the mini projects [5/5]❤❤ Amazing content.....
Great job..both of you
Excellent content thank you sir😇
Thanks Bhaiya,
You are the best.....❤❤❤
5/5 in one go, Not just by copying the same thing, learned a lot !! Thank you Sheriyans !!💖
plz give me code?
Thanks bhaii,Huge respect from me and ❤I just started watching your all videos and I found them mindblowing.Really appreciate your work.Harsh bhaii yrr great ho app,The way,you speak.❤.
5/5 completed!
and thank you bhaiya for all the amazing content you provided for us.
Really Helpful Thanks Bhaiya
These projects are very good and thank you so much this video and love the you teaches and explain topic and btw I complete all five projects. This video is truly understandable. Thank You:😊