00:03 Creating a modern animated website using ReactJS 02:18 Installing dependencies and setting up Tailwind CSS for the website. 07:11 Setting up ReactJS app and installing extensions for development 09:30 Creating a modern animated website with different sections 13:18 Introduction to creating and importing React components 15:14 Changing the color of the navigation bar to white 19:17 Fetching a font from a website for installation. 21:40 Selecting and using fonts in ReactJS. 26:08 Fix the navigation bar and ensure the z-index for visibility 28:04 Creating and styling the text structure of the website 33:10 Customizing text appearance in the website design. 35:49 Creating and customizing masks in ReactJS 40:31 Styling the website elements with CSS 42:50 Creating and using icons in ReactJS. 47:35 Installation process for ReactJS on Windows and Mac. 49:28 Styling elements and managing layout 53:48 Adjusting rounded curved angles and values for proper display 55:51 Creating a rough sea effect with a green section. 1:00:25 Styling adjustments and animations discussed. 1:02:39 Implementing rounded corners and animation in the website design 1:07:45 Development process of creating a modern animated website 1:10:03 Creating a modern animated website using ReactJS 1:14:44 Creating and customizing design elements in the website using ReactJS. 1:17:14 Fixing the bottom line on the website 1:21:39 Creating and styling elements using ReactJS 1:23:47 Creating and customizing website design elements 1:28:07 Discussing design elements and color choices 1:30:06 Adjusting elements for the layout 1:34:40 Learn how to create a rotating circle with transparency 1:36:30 Explanation of finding the angle and point on the screen 1:40:31 Using radians to calculate degrees and extracting mouse location for website interaction 1:42:32 Understanding mouse position and delta in ReactJS 1:46:54 Learn how to rotate elements using ReactJS. 1:48:51 Creating and styling website components with ReactJS 1:52:57 Creating card div and setting dimensions 1:55:00 Creating card structures and applying CSS 1:59:13 Customizing website colors and image shapes 2:01:40 Positioning and styling elements using ReactJS 2:06:27 Adjusting colors and elements on the website. 2:08:28 Creating an animated website using ReactJS 2:12:47 Discussing layout configurations and styling elements 2:15:37 Creating and styling a logo and button in the website design 2:20:30 Code corrections and styling enhancements 2:23:04 Discussing the CSS properties flex, justify, height, and presentation. 2:27:25 Installing and using locomotive for smooth scrolling website 2:29:31 Using ReactJS to create an animated website 2:33:32 Troubleshooting and fixing an error during application runtime. 2:36:15 Controlling scroll speed and creating a dynamic effect. 2:41:21 Styling and animating elements using inline-block and flex. 2:43:54 Creating hover animation using ReactJS. 2:49:52 Discussing styling and DOM manipulation in ReactJS 2:52:28 Using motion and animation in ReactJS 2:58:38 Demonstrating animation with Frame Motion
Glad I found this channel. I have been learning a lot through your content. Your are providing one of best quality tutorials out here on YT. Keep it coming guys!
Finally jo video muje chahiye thi wo aa gai thank you bhaiya I love your video I am searching for a long time ki react js se animated website ka tutorial mil jae but finally aapne bana di video btw thank you so much...
After making this project within 2 days, i am confident about React. and also thanks sir , actually me pehli baar React use kiya and you did great sir. i understand how react works and also i don't know tailwind too but still properly following your instructions made this awardyyyyyyyyyyyyyyyyyyyyyyyy.. really thanks a lotttttttttttttttttttttttttttttttttttttt paaajiiiiiiiiiiiiiiiiiii
bhaiya ksm se kya padhyaa hai maza aagya ..ekdm se dimag khul gya kitni nayi cheeze seekhi ...scchiii wala dil se thank you aise hi nayi nayi cheeze seekhate raho🙏🙏🥺🥺
Hello, Did you completed the last part where tha scroller stop at cards and after that the next two page come over the cards page .I am facing problem in that section
02:48:55 just made another useState like isHovering2 and set it seperately for the second div... that will work for now bt when we have more of those elements we will need better solution. baki sb bhadiya tha ❣❣
sir, I have been learning web development from you for the past 3months and I can say you are fabulous at teaching, but the one thing I noticed is your energy at the start of any video is so high, and you will be proactive. and when it comes to those last moments you become a bit like much bi chalta h.
Thanks Bhaisaab. Are you bringing REACTJS series too ? states are very much confusing and confusion increases when another set of dependencies or frameworks or libraries are used along with reactjs for eg: Redux or Firebase and then backend stuffs too.
to center an object in a div you can use tailwind utility class named: place-item-center and place-content-center, it can center without using flex or using 4 classes
Thnku so much bhaiya ❤Dil se bht help hui hai apki videos se javascript course was osm bhaiya and react bhi ❤ ur yah website toh affat hai badhiya 🎉maza a gya thnku Dil se ❤
I watched your Backend Series, That was very informative and different from any other Node js course on youtube and even better than many paid courses. I request you to please Make A MERN stack project or an crash course ..
1:49:18 as we use an eventListener inside useEffect so we have to clear that too right ? please confirm, And I have another doubt, can we just stick to one animation library ??? cause both should have same capabilities right ???
Please create one exclusive video on JWT authentication in ReactJS or NodeJS in such a way that any beginner can understand and can get a full explanation from scratch to advanced. You can explain using any project also.
can you please tell me which libraries are used for animation in this project. As I think framer motion and locomotive scroll is there any other than this
42:32 The preview was not available here. As the button was hidden beside your recording frame. You can try adjusting the video recording frame when needed. 😉
Bhaiya your all projects are of critical next level but just one things that I always get in mind y this project are not responsive.But anyways for all your efforts and hardwork I truly admire and respect. Thankyou for bringing such next level website design's.
Tailwindcss not working even after configuring properly and adding it to "File associations" ADD Item *.css value: "tailwindcss". Any other suggestion please ?
Thanks for the video 😄 Content was good ! Learnt few things, especially the eye section. But, Few things I was expecting till the end of the video was Navbar Animation, Footer Page scroll fix, Marquee and following section scroll bug fix. Though....I gained enough knowledge from the video to fix things on my own and Thanks for that !
sir pata nahi q jabse aapka ke channel se sikne laga hu tabse aisa lag rahi ki sachmeh kuch padh raha hu big shoutout for sheriyans coding school and thank you sir aisehi content lao
I am very much interested to learn and apply the animation and art form they used in their website. Looking forward for Sheryians to make tutorials for these awesome projects.😃
Bhaiya starting ka funny moments kaha gye...missing that And really the website is amazing 🤩🤩 now just enjoying the video and watch full tutorial..❤❤ Make more video of website tutorial by reactjs ❤❤
We all know what the level of your free course so what will be the level of your paid course i mesmerized by watching you that you are providing the god level content in free god dawmn.😮😮😮😮
![[PROCESS BRAKDOWN] React Three Fiber | Cylinder Work Showcase](http://i.ytimg.com/vi/9qQ8WxF-h8o/mqdefault.jpg)
![[PROCESS BRAKDOWN] React Three Fiber | Cylinder Work Showcase](/img/tr.png)
![[ GAMECHANGER 🚀 ] REACT JS BECOMES 100 TIMES EASY IF YOU FOLLOW THIS.](http://i.ytimg.com/vi/EaG3Zd04W5s/mqdefault.jpg)
ReactJS title me padhke aankhon ko jo sukoon mila hai na sir. 5 mahiney se intezaar kar raha tha, thankyouuu. Jaiiii Sheriyanssss 🥹🙏🏻
00:03 Creating a modern animated website using ReactJS
02:18 Installing dependencies and setting up Tailwind CSS for the website.
07:11 Setting up ReactJS app and installing extensions for development
09:30 Creating a modern animated website with different sections
13:18 Introduction to creating and importing React components
15:14 Changing the color of the navigation bar to white
19:17 Fetching a font from a website for installation.
21:40 Selecting and using fonts in ReactJS.
26:08 Fix the navigation bar and ensure the z-index for visibility
28:04 Creating and styling the text structure of the website
33:10 Customizing text appearance in the website design.
35:49 Creating and customizing masks in ReactJS
40:31 Styling the website elements with CSS
42:50 Creating and using icons in ReactJS.
47:35 Installation process for ReactJS on Windows and Mac.
49:28 Styling elements and managing layout
53:48 Adjusting rounded curved angles and values for proper display
55:51 Creating a rough sea effect with a green section.
1:00:25 Styling adjustments and animations discussed.
1:02:39 Implementing rounded corners and animation in the website design
1:07:45 Development process of creating a modern animated website
1:10:03 Creating a modern animated website using ReactJS
1:14:44 Creating and customizing design elements in the website using ReactJS.
1:17:14 Fixing the bottom line on the website
1:21:39 Creating and styling elements using ReactJS
1:23:47 Creating and customizing website design elements
1:28:07 Discussing design elements and color choices
1:30:06 Adjusting elements for the layout
1:34:40 Learn how to create a rotating circle with transparency
1:36:30 Explanation of finding the angle and point on the screen
1:40:31 Using radians to calculate degrees and extracting mouse location for website interaction
1:42:32 Understanding mouse position and delta in ReactJS
1:46:54 Learn how to rotate elements using ReactJS.
1:48:51 Creating and styling website components with ReactJS
1:52:57 Creating card div and setting dimensions
1:55:00 Creating card structures and applying CSS
1:59:13 Customizing website colors and image shapes
2:01:40 Positioning and styling elements using ReactJS
2:06:27 Adjusting colors and elements on the website.
2:08:28 Creating an animated website using ReactJS
2:12:47 Discussing layout configurations and styling elements
2:15:37 Creating and styling a logo and button in the website design
2:20:30 Code corrections and styling enhancements
2:23:04 Discussing the CSS properties flex, justify, height, and presentation.
2:27:25 Installing and using locomotive for smooth scrolling website
2:29:31 Using ReactJS to create an animated website
2:33:32 Troubleshooting and fixing an error during application runtime.
2:36:15 Controlling scroll speed and creating a dynamic effect.
2:41:21 Styling and animating elements using inline-block and flex.
2:43:54 Creating hover animation using ReactJS.
2:49:52 Discussing styling and DOM manipulation in ReactJS
2:52:28 Using motion and animation in ReactJS
2:58:38 Demonstrating animation with Frame Motion
Glad I found this channel. I have been learning a lot through your content. Your are providing one of best quality tutorials out here on YT. Keep it coming guys!
0:07 : website Intro /scenario
1:29 : Making React App - ochi
4:00 : Install Tailwind css
7:35 : start the code
10:10 : understanding of components (page sections)
13:10 : Navbar
26:30 : Landing page
55:50 : Marquee
2:10:45 card
2:19:11 footr
2:27:28 animation
Thanks
Finally jo video muje chahiye thi wo aa gai thank you bhaiya
I love your video
I am searching for a long time ki react js se animated website ka tutorial mil jae but finally aapne bana di video
btw thank you so much...
Same vai 😅
same stituation🤣
Boss ki entry ho chuki h market me We always support Sheryians ❣️❤
Course kharido jyada support hoga
@@KaranPalan maine already leke rakha h Bhai
I have to Thank You and Sarthak Bhaiya for improving my JS and Now React with animations I will never forget U Guys U Helped me so Much ❤
After making this project within 2 days, i am confident about React. and also thanks sir , actually me pehli baar React use kiya and you did great sir. i understand how react works and also i don't know tailwind too but still properly following your instructions made this awardyyyyyyyyyyyyyyyyyyyyyyyy.. really thanks a lotttttttttttttttttttttttttttttttttttttt paaajiiiiiiiiiiiiiiiiiii
hyy did locomotive scroll worked fine ?
@@komal871 locomotive scroll kese work kiya
please try to make a video on initial loader when website loads for the first time, which is really very awsm effect
bhaiya ksm se kya padhyaa hai maza aagya ..ekdm se dimag khul gya kitni nayi cheeze seekhi ...scchiii wala dil se thank you aise hi nayi nayi cheeze seekhate raho🙏🙏🥺🥺
Sir Thanks alot for this tutorial. You dont know how much value you adding into my experties. BEST TEACHER ON THE TH-cam
React + gsap = Love ❤️
❤❤❤❤❤just love it........
Your front-end playlist❤️
There are other creater on TH-cam but Sheryians teaching style is just awesome ❤❤❤❤
bhaii maja agaya, 4 din lage ye project pura krne m, kaafi kuch sikha, aur bhi aise projects laao. Thanks harsh bhaii...
Hello, Did you completed the last part where tha scroller stop at cards and after that the next two page come over the cards page .I am facing problem in that section
@@kaanubora-pu6ux yes
could you please sent the repo link?
2:30:00 animation starts
maza aaya bhai 4 din lage banne maipar bahut kuch naya sikha thank you
For the Marquee part create a separate div that contains both h1 and then apply motion on that element and also give it a repeattype : loop
bhai my eyes transition is not working do you have any idea 01:45 min
@@mohammadabbas1623 same, it is inverted even after subtracting 180 deg from angle
Awesome amazing wonderful work sir ji 🎉🎉🎉
Apke reat p videos ka boht e wait tha mujhy ... Really love you from Lahore Pakistan
Harsh Bhai AP ki mehnat dekh kr bht Khushi Hoti hai ❤️✨
Kasam sa Yar yehi content or yehi tarika chahiye tha Bhai good Yar kis ilfaz ma apka shukria karo Bhai alots of love from Pakistan... Great Bhai ❤❤❤
Happy Teacher's day Sir
Thank you for your quality content of Development for free of cost....😍🙏🙏💌
I explore right now the shreyans coding school and believe me it is best ❤ it is an emotion ❤
Liked💯
Commented💯
Now enjoy watching.
दुनिया को अपने सामर्थ्य का परिचय देने का समय आ गया है 🧿
Bhai..kya badhiya project hey😊..love from Nepal.❤
Hellllow :)
Waiting for part 2 ^_^
02:48:55 just made another useState like isHovering2 and set it seperately for the second div... that will work for now bt when we have more of those elements we will need better solution. baki sb bhadiya tha ❣❣
bhaisaab kitna easy hai UI create karna react sai and mein abhi tak dar raha tha isai 😊😮 wah maza agaya
2:38:30....how you fix that gap between dark green and light green section??
Sir Please Make A MERN Project! Your Explaination is unique from others please...
Haven't watched the video yet but giving it thumbs up! Coz I know it'll be amazing as usual!
sir, I have been learning web development from you for the past 3months and I can say you are fabulous at teaching, but the one thing I noticed is your energy at the start of any video is so high, and you will be proactive. and when it comes to those last moments you become a bit like much bi chalta h.
take it positively sir, i respect you a lot
Extensions :
1.ES7+ React/Redux/React-Native snippets by dsznajder,
2.ES7 React/Redux/GraphQL/React-Native snippets by rodrigovallades,
3.Tailwind CSS IntelliSense (for css auto complete)
25:45 I never knew it ... Wow sir you are Awesome...
Thanks Bhaisaab. Are you bringing REACTJS series too ? states are very much confusing and confusion increases when another set of dependencies or frameworks or libraries are used along with reactjs for eg: Redux or Firebase and then backend stuffs too.
Thank you so much Bhai !!! I was waiting for react project 💗💗💗 love you Bhai 🖤
to center an object in a div you can use tailwind utility class named:
place-item-center and place-content-center,
it can center without using flex or using 4 classes
after watching this video for 5 minutes, I've decided to subscribe. very professional content.
you have shown us all the best practices of codin. It's really helpful to me to write better quality code. thanks a lot Bhaiya. Love You
Thnku so much bhaiya ❤Dil se bht help hui hai apki videos se javascript course was osm bhaiya and react bhi ❤ ur yah website toh affat hai badhiya 🎉maza a gya thnku Dil se ❤
I watched your Backend Series, That was very informative and different from any other Node js course on youtube and even better than many paid courses. I request you to please Make A MERN stack project or an crash course ..
1:49:18 as we use an eventListener inside useEffect so we have to clear that too right ? please confirm,
And I have another doubt, can we just stick to one animation library ??? cause both should have same capabilities right ???
Please create one exclusive video on JWT authentication in ReactJS or NodeJS in such a way that any beginner can understand and can get a full explanation from scratch to advanced.
You can explain using any project also.
Was waiting for this, you guys are best in the industry 💕
1:34:16 sir, i always waiting for this type of explanation in your project video 😊😊😊
Completed 🥳🥳🙌🏽🙌🏽 thank you bhaiya
can you please tell me which libraries are used for animation in this project. As I think framer motion and locomotive scroll is there any other than this
Brother,
how do I remove the gap between Marquee and About while scrolling?
You have escape that part
Time - 2:38:24
Heads Off to the Sheriyans Coding team yrr Premium Content AP itny Achy se derahe hu very help ful video sir I'm from PK ❤
My exams are from 15 but i was hooked so i did till the landing page this vid is a gem thanks sir u rock 54:50
Hi sir, these animations and other things you are doing is part of CSS but we need the JS part like - live search, map app, eCommerce cart
42:32 The preview was not available here. As the button was hidden beside your recording frame. You can try adjusting the video recording frame when needed. 😉
Thanku thanku thanku thanku thanku thanku thanku so much bhaiya Aaj maine wish ki thi or puri ho gyi thanku harsh bhaiya❤❤❤❤❤
Bhaiya your all projects are of critical next level but just one things that I always get in mind y this project are not responsive.But anyways for all your efforts and hardwork I truly admire and respect.
Thankyou for bringing such next level website design's.
31:05 not able to understand the concept, why the entire div is falling down from top ?
Great Video...! But i also wanted the starting animation of website and also you forgot about the Navbar scroll effect... 😅
Thanks a lot sir 😊!!! I learned a lot from this project.
amazing video learned something new and cant wait for more video sir... bring it on..😍😍💥💥👌👌👌👌
Tailwindcss not working even after configuring properly and adding it to "File associations" ADD Item *.css value: "tailwindcss". Any other suggestion please ?
Thanks for the video 😄 Content was good ! Learnt few things, especially the eye section. But, Few things I was expecting till the end of the video was Navbar Animation, Footer Page scroll fix, Marquee and following section scroll bug fix. Though....I gained enough knowledge from the video to fix things on my own and Thanks for that !
bro woh marquee an following wala scroll bug kese fix kiya?
@@Sagnik-ow6zj Hello ! Wo Bug fix nahi ho paaya mere se. Kiya try maine. Baki sab ho gaya fix
I'm using windows and I'm not able to use the fonts even after following all the mentioned steps....
8:13 if I do this in my windows the first side tab one get deleted the files aare open but the the one of side panel goes
Bus Mera eye wala work ni Mera aur sab smooth work Kiya Mera or thank y and needed more and more projects also
this is why I like harsh bhaiya,
iLLueeee.. to all Sheriyans.
Ab mja aaega na...Waiting for this for so long
More similar content is highly awaited
Great Job #Harsh Bhai..❤ Really Really need this video .. Love it so much 👌
1:18:45 Mere angana mein nache more. Kare taa taa thaiya.... 😂❤❤❤❤🎉🎉
................ OP........
This teaching style is awesome bro 🎉❤ keep it up.
sir pata nahi q jabse aapka ke channel se sikne laga hu tabse aisa lag rahi ki sachmeh kuch padh raha hu
big shoutout for sheriyans coding school
and thank you sir aisehi content lao
@Sheriyans Maza Agaya React ke project me ,Content bohat zabar dast hai
Do you think you could do some videos in english as well? Your content looks amazing.
4:00 you can press cmd+shift+P and type shell command : install path and click it and you can use later code .
I am very much interested to learn and apply the animation and art form they used in their website.
Looking forward for Sheryians to make tutorials for these awesome projects.😃
premium content always love and respect for sheriyans coding school❤❤❤
Sheriyans ke sher aa gaye hai ....❤🥳🔥
waiting for this, thank you soooooooooooooooooooooooo much for this video. Love your teaching style. Love from Pakistan
Hi sir have suggestion could you please add videos on react native animation tutorials as well
Learned a lot! Thank you for your precious time, hats off!!!🥇
Heliiiioooooo! Thanks sheryians for top notch content.
awsome bhaiya ... all the concepts are clear now thank you
awesome video i was struggling with locomotive scroll a lot in my project
Thank you Sir ji is op website Clone ke liye .♥♥
Nice work bro , keep doing reactJS modern websites videos ❤
***Best content sir ❤❤❤❤❤❤❤❤fell in love with this...
I want to say thanks to you. You delivering such awesome content
You guys are doing amazing job❤❤
Bhaiya starting ka funny moments kaha gye...missing that
And really the website is amazing 🤩🤩 now just enjoying the video and watch full tutorial..❤❤
Make more video of website tutorial by reactjs ❤❤
So Nice. Anybody can tell me, what Vscode theme is this?
We all know what the level of your free course so what will be the level of your paid course i mesmerized by watching you that you are providing the god level content in free god dawmn.😮😮😮😮
Sir! Framer me scroll trigger kesay hota hai?...
sir i applied the exact same code for eyes but still those eyes are not moving according to mouse they are moving in just another angle
check your code again
Do chat gpt
@@UniqueFun-sz8kj if I got the answer there then why would I comment here???
@@bollywoodkol783 there is not even a single visible mistake
Love the way of teaching❤
Awesome... Sir please more videos on React JS and guide us how to write industry level code
We appreciate your hardwork brothers thanks for the best content ever ❤
why isnt locomotive wroking properly . like its very slow and suddnly moves to bottom
great....... bro you just hyped me to make a new portfolio
This one is correct : ( {item}
))} coz without key it shows an error.
Thanks Man This Channel has Top Notch Quality
Sir bss aapki video ka intezar krr rha tha filhal 😂
aur main bhi unhin main se hu bhai sahab kya content laate he ye log ek dum faadu
Great yaar bhaya maja a gya .....
Itna free me content ji ko youtuber nhi deta
Free kya paid bhi nhi..
Hamari prarthanayei rhngi aapke sath