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

At the core of our ethos is a commitment to ethical practices and responsible content creation. We undertake this tutorial with utmost respect for Ochi and its creators, solely for educational purposes and without any intention of causing harm or infringement.

Throughout this tutorial, we meticulously recreate the animation effects and design elements of Ochi using ReactJS. Our goal is to empower you to learn and experiment with web animation techniques in a safe and supportive environment.

We want to emphasize that our tutorial is crafted with the highest standards of integrity and respect. We do not endorse any unauthorized use of copyrighted materials, and we encourage our viewers to always prioritize ethical considerations in their creative endeavors.

Whether you're a seasoned developer looking to expand your skill set or a beginner eager to explore the possibilities of web animation, our channel is here to support your learning journey. Join us as we unravel the secrets of animation with ReactJS and pay homage to the inspiring design of Ochi.

Subscribe to our channel to stay updated on future tutorials, tips, and insights to help you thrive in the dynamic field of web development. Let's learn, create, and innovate together, while upholding the values of integrity and respect.

Thank you for joining us on this educational adventure. Let's dive in and master animation with ReactJS while honoring the creativity of Ochi! 🎨👩‍💻

Instructor in this video: Harsh Sharma

Socials:
Peace ✌️

#reactjs #javascript #webdevelopment #crashcourse #beginnerstutorial #codingjourney #coding

[nishitlugun]

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

[Technical_Ved]

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

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

[UjjwalMishra_]

Harsh bhai is not pregnant but he still delivers🔥🔥

[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

[sunblossom]

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

[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 really thanks a

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

[AdityaArya]

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 ❤

[RelaxingMusic-lkxj]

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

[yashsharma-xicl]

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

[tanuzzs]

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.

[lifelonglearner]

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

[aggarwalsachin]

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

[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

[junaidnoor]

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

[anurag_tarai]

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

[MoxitShah-iepy]

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

[commathica]

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

[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