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 🥹🙏🏻

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

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

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

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

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

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

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

[@lifelonglearner7]

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

[@RelaxingMusic-lk4xj]

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

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

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

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

[@commathica3557]

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

[@ApurvaKashyap-kj6qz]

React + gsap = Love ❤️

[@anurag_tarai]

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

[@junaidnoor1123]

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

[@MoxitShah-ie3py]

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

[@RohitSingh-dc9pv]

Awesome amazing wonderful work sir ji 🎉🎉🎉

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

[@pro-code_academy]

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

[@chinmaykhairnar6750]

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

[@md.marufbinsolaiman4038]

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

[@vikassoni7882]

Liked💯 Commented💯 Now enjoy watching.

[@yashsharma-xi5cl]

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

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

[@bollywoodkol783]

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

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

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

[@aayushraj4733]

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

[@teachingsofislam_1]

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

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

[@Smit_malani_21]

1:34:16 sir, i always waiting for this type of explanation in your project video 😊😊😊

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

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

[@blinker2101]

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

[@suryanshraj1880]

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

[@FaizanRaza-f2x]

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

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

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

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

[@ansh_mittal]

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

[@xrusherabhi9040]

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

[@vasu2239]

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

[@saidikshith1895]

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

[@mehulagrawal4360]

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

[@amangupta5586]

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

[@Uzumakinarutoo860]

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

[@feetsontour]

Harsh bhai salaam hai apko, or Ap ki content ko

[@Aman_yadav1419]

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

[@abhi_yt312]

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

[@AbdulRehman-s9f4s]

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

[@amazingfacts79617]

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

[@devanshusharma8849]

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

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

[@Sonisights]

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

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

[@rahulgamer4274]

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

[@arundaduwa3797]

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

[@StudyZone-Mihir]

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

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

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

[@sabirpathan430]

Challo agaya fir se zabardast video

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

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

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

[@nandinikurude2465]

Hello sir.... Aap ke jaise teacher bahot kam milte he aur mere jaise slow students bhi😢.... Ek request he sir please aap javascript and react ke basic to advanced topics one by one leke padhao na ...

[@SoloRunner-j7u]

2:38:30....how you fix that gap between dark green and light green section??

[@aryaadityaa7676]

Thanks Man This Channel has Top Notch Quality

[@Atul_Thakre30]

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

[@irfan_mustafa]

YES YES YES KAMAL YAAR , but explanation thori sa kam the kafi muskil hoi but phir be ni chla sai sa mera pass isi tra ki chezay latay ray but explantion per thora kaam keray taka copy ka sath seek be saktay thank you love from lahore

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

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

[@dhruvkaushik2122]

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

[@AshishPradhan007]

Maja aaya🎉

[@Hanzlaaaa]

Heliiiioooooo! Thanks sheryians for top notch content.

[@ashishgupta2124]

The content we want ❌The content we need ✅

[@xarderhacks5464]

Sir bss aapki video ka intezar krr rha tha filhal 😂

[@ayushghale5568]

Brother, how do I remove the gap between Marquee and About while scrolling? You have escape that part Time - 2:38:24

[@sanket_admane]

Love the way of teaching❤

[@dev_guidance]

copy wala smjhanaa is next level

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

[@vikas1645]

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

[@Mudassira-ali56]

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

[@Amankumar-ip9hu]

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

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

[@ajiteshmishra0005]

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.

[@deepakd3384]

Thanks bhaiya ❤❤🔥👏👌great project

[@dhruvsahoo8297]

1:33:38 You just don't need to create a line and rotate it ... Better to remove the items-center and rotate the black circle

[@CoderPunch]

This one is correct : ( {item} ))} coz without key it shows an error.

[@wasiuddinmansoori3385]

Bhai ye HEliooooo Ki Theory Bohot sahi lagi 😂🤣🤣🤣🤣🤣🤣 01:16:56

[@abdulsaboor2004.]

1:07:20 I found an easy way to animate this, just put every line in a single and use   like this: We are Ochi   We are Ochi   We are Ochi  

[@qazirahman7091]

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

[@mdisasheikh3413]

Best video bhaiya, and the way u teach us ❤

[@cbum3935]

My fvrt Channel ♥️🔥

[@bhawnachauhan4909]

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

[@PixelPioneer37]

2:38:27 Yeah we will fix it 😌 behind the scene 🥲

[@rjl6814]

did you fix it

[@PixelPioneer37]

@@rjl6814 No I did not... But I minimised the gap between them by adjusting scroll-speed (locomotive) and padding of section (top and bottom). *Even I don't have solution for eradicating this problem.