ReactJS | Modern Animated Website | OCHI DESIGN | Awwwarded Website Clone

[@nishitlugun8394]

ReactJS title me padhke aankhon ko jo sukoon mila hai na sir. 5 mahiney se intezaar kar raha tha, thankyouuu. Jaiiii Sheriyanssss 🥹🙏🏻

[@TheWebboy]

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!

[@Technical_Ved]

Boss ki entry ho chuki h market me We always support Sheryians ❣️❤

[@KaranPalan]

Course kharido jyada support hoga

[@Technical_Ved]

@@KaranPalan maine already leke rakha h Bhai

[@sanket_admane]

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

[@WEB_DEVERLOPER]

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

[@mehedihasannnnn]

Same vai 😅

[@MuhammadHamid-r6o]

same stituation🤣

[@playlikesam]

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

[@komal871]

hyy did locomotive scroll worked fine ?

[@MasterTheBook]

@@komal871 locomotive scroll kese work kiya

[@AdityaArya2207]

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 ❤

[@sunblossom422]

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🙏🙏🥺🥺

[@Vipul_Shah]

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

[@studyafa7159]

2:10:45 card 2:19:11 footr 2:27:28 animation

[@yoyo-es7ch]

Thanks

[@aggarwalsachin4854]

bhaii maja agaya, 4 din lage ye project pura krne m, kaafi kuch sikha, aur bhi aise projects laao. Thanks harsh bhaii...

[@kaanubora-pu6ux]

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

[@aggarwalsachin4854]

@@kaanubora-pu6ux yes

[@devpolash]

could you please sent the repo link?

[@RelaxingMusic-lk4xj]

Sir Thanks alot for this tutorial. You dont know how much value you adding into my experties. BEST TEACHER ON THE KZbin

[@commathica3557]

Apke reat p videos ka boht e wait tha mujhy ... Really love you from Lahore Pakistan

[@anurag_tarai]

❤❤❤❤❤just love it........ Your front-end playlist❤️ There are other creater on KZbin but Sheryians teaching style is just awesome ❤❤❤❤

[@UjjwalMishra_68]

Harsh bhai is not pregnant but he still delivers🔥🔥

[@saunaknandi1814]

kuchbhi bhai😅😅

[@piyush_ferex]

He is bro , married to JS

[@shahzaibkhan5423]

With a successful delivery 😂

[@lifelonglearner7]

2:30:00 animation starts maza aaya bhai 4 din lage banne maipar bahut kuch naya sikha thank you

[@junaidnoor1123]

Harsh Bhai AP ki mehnat dekh kr bht Khushi Hoti hai ❤️✨

[@ApurvaKashyap-kj6qz]

React + gsap = Love ❤️

[@MoxitShah-ie3py]

दुनिया को अपने सामर्थ्य का परिचय देने का समय आ गया है 🧿󠁧󠁢󠁷󠁬󠁳󠁿

[@tanuzzs8222]

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.

[@tanuzzs8222]

take it positively sir, i respect you a lot

[@pro-code_academy]

Bhai..kya badhiya project hey😊..love from Nepal.❤

[@ZainCodeLab]

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

[@vikassoni7882]

Liked💯 Commented💯 Now enjoy watching.

[@chinmaykhairnar6750]

Happy Teacher's day Sir Thank you for your quality content of Development for free of cost....😍🙏🙏💌

[@RohitSingh-dc9pv]

Awesome amazing wonderful work sir ji 🎉🎉🎉

[@bollywoodkol783]

bhaisaab kitna easy hai UI create karna react sai and mein abhi tak dar raha tha isai 😊😮 wah maza agaya

[@md.marufbinsolaiman4038]

after watching this video for 5 minutes, I've decided to subscribe. very professional content.

[@islamicquiz_34]

@Sheriyans Maza Agaya React ke project me ,Content bohat zabar dast hai

[@aayushraj4733]

I explore right now the shreyans coding school and believe me it is best ❤ it is an emotion ❤

[@himayou_n]

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

[@bijayghosh6128]

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

[@ItsAnas-w3g]

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 ❤

[@yashsharma-xi5cl]

please try to make a video on initial loader when website loads for the first time, which is really very awsm effect

[@xrusherabhi9040]

Thank you so much Bhai !!! I was waiting for react project 💗💗💗 love you Bhai 🖤

[@pratham.shelke]

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

[@mohammadabbas1623]

bhai my eyes transition is not working do you have any idea 01:45 min

[@Parth-Sharma]

@@mohammadabbas1623 same, it is inverted even after subtracting 180 deg from angle

[@harshsrivastava1794]

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 ❤

[@Piyush-ve3tr]

Hellllow :) Waiting for part 2 ^_^

[@mariaali9935]

waiting for this, thank you soooooooooooooooooooooooo much for this video. Love your teaching style. Love from Pakistan

[@mehulagrawal4360]

Was waiting for this, you guys are best in the industry 💕

[@FaizanRaza-f2x]

Haven't watched the video yet but giving it thumbs up! Coz I know it'll be amazing as usual!

[@zyphr69]

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

[@suryanshraj1880]

Thanku thanku thanku thanku thanku thanku thanku so much bhaiya Aaj maine wish ki thi or puri ho gyi thanku harsh bhaiya❤❤❤❤❤

[@Satisfy005]

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

[@devanshusharma8849]

Ab mja aaega na...Waiting for this for so long More similar content is highly awaited

[@Uzumakinarutoo860]

awsome bhaiya ... all the concepts are clear now thank you

[@saidikshith1895]

amazing video learned something new and cant wait for more video sir... bring it on..😍😍💥💥👌👌👌👌

[@abhi_yt312]

this is why I like harsh bhaiya, iLLueeee.. to all Sheriyans.

[@feetsontour]

Harsh bhai salaam hai apko, or Ap ki content ko

[@amazingfacts79617]

premium content always love and respect for sheriyans coding school❤❤❤

[@blinker2101]

Sir Please Make A MERN Project! Your Explaination is unique from others please...

[@AdventureIsTheLife01]

25:45 I never knew it ... Wow sir you are Awesome...

[@rahulgamer4274]

Thank you Sir ji is op website Clone ke liye .♥♥

[@arundaduwa3797]

Learned a lot! Thank you for your precious time, hats off!!!🥇

[@footprint_arts]

This teaching style is awesome bro 🎉❤ keep it up.

[@Sixty2nd_Clips]

Great Job #Harsh Bhai..❤ Really Really need this video .. Love it so much 👌

[@Aman_yadav1419]

Sheriyans ke sher aa gaye hai ....❤🥳🔥

[@jane_rosso]

Completed 🥳🥳🙌🏽🙌🏽 thank you bhaiya

[@hustlersworld8956]

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

[@StudyZone-Mihir]

Thanks a lot sir 😊!!! I learned a lot from this project.

[@Kaustubh_Bhalerao]

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 !

[@Sagnik-ow6zj]

bro woh marquee an following wala scroll bug kese fix kiya?

[@Kaustubh_Bhalerao]

@@Sagnik-ow6zj Hello ! Wo Bug fix nahi ho paaya mere se. Kiya try maine. Baki sab ho gaya fix

[@amangupta5586]

4:00 you can press cmd+shift+P and type shell command : install path and click it and you can use later code .

[@Hanzlaaaa]

Heliiiioooooo! Thanks sheryians for top notch content.

[@sanket_admane]

Love the way of teaching❤

[@sabirpathan430]

Challo agaya fir se zabardast video

[@aryaadityaa7676]

Thanks Man This Channel has Top Notch Quality

[@Atul_Thakre30]

I want to say thanks to you. You delivering such awesome content

[@vikas1645]

We appreciate your hardwork brothers thanks for the best content ever ❤

[@siddesh1210]

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.

[@AbdulRehman-s9f4s]

aur main bhi unhin main se hu bhai sahab kya content laate he ye log ek dum faadu

[@wade_wilson6_9]

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

[@vasu2239]

Bus Mera eye wala work ni Mera aur sab smooth work Kiya Mera or thank y and needed more and more projects also

[@dhruvkaushik2122]

awesome video i was struggling with locomotive scroll a lot in my project

[@bhawnachauhan4909]

I was waiting for this.. thank u so much 🤗

[@studyafa7159]

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

[@speedylog46]

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

[@mdisasheikh3413]

Best video bhaiya, and the way u teach us ❤

[@badshah-z3k]

Best video on KZbin ❤️

[@Shabareesha]

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)

[@prashantchakrawarti42]

Awesome Sir ji 😍😍

[@cbum3935]

My fvrt Channel ♥️🔥

[@ashishgupta2124]

The content we want ❌The content we need ✅

[@xarderhacks5464]

Sir bss aapki video ka intezar krr rha tha filhal 😂

[@spdwivedi5925]

sahi video hai bhaiya, Thanku

[@tanishadixit_]

You guys are doing amazing job❤❤

[@deepakd3384]

Thanks bhaiya ❤❤🔥👏👌great project

[@avinash_shukla]

***Best content sir ❤❤❤❤❤❤❤❤fell in love with this...

[@piyushwandile4152]

love the content sir

[@ansh_mittal]

1:18:45 Mere angana mein nache more. Kare taa taa thaiya.... 😂❤❤❤❤🎉🎉 ................ OP........

[@roshanali-463]

Thanks brother . Love From Pakistan ❤

[@qazirahman7091]

I think it's a great details video for the beginner.

[@SiddharthSwami-qj7ys]

best react video🥰🥰🥰

[@Amankumar-ip9hu]

great....... bro you just hyped me to make a new portfolio

[@saiots8651]

brother Kamaal kr diya, asie hi framer motion or complicated animations pr b project layen brother jiss ma page k background ma kuch 3D components move ho rhy hon r mouse move pr wo b apni place change kren and issi trha fully animated project layen framer motion ka, please

[@Code_loading]

Ye huii naa baattt🔥🐯❤️

[@James-Code]

harsh bhaiya you are great bas esi tara achi achi videos lana ham apko support karenge please or b react k ache se vedios lao is channel par

[@ganeshkhate7951]

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

[@musikmelodyrobin]

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. 😉

[@crazyboyrish2577]

Most awaited video

[@Cavvex-u4z]

Nice work bro , keep doing reactJS modern websites videos ❤

[@NomanAli-xl7pl]

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.😮😮😮😮

[@RohitMondal-g3p]

Thank you for this super cool React js project video

[@sujoykrhaldar]

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