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

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

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 navigation bar and ensure z-index for visibility 28:04 Creating and styling 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 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 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 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 Thank me Later 🙂

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

This video = no need to watch any other tutorial for react.

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

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

I'm using windows and I'm not able to use the fonts even after following all the mentioned steps....

Harsh bhai is not pregnant but he still delivers🔥🔥

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!

React + gsap = Love ❤️

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)

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

Loved it. Bs aapka mood off laga 😢

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

import React, { useState, useEffect } from 'react'; const MouseRotationComponent = () => { const [initialPosition, setInitialPosition] = useState({ x: 0, y: 0 }); const [angle, setAngle] = useState(0); useEffect(() => { const handleMouseMove = (event) => { const deltaX = event.clientX - initialPosition.x; const deltaY = event.clientY - initialPosition.y; const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI); setAngle(newAngle); }; const handleMouseDown = (event) => { setInitialPosition({ x: event.clientX, y: event.clientY }); window.addEventListener('mousemove', handleMouseMove); }; const handleMouseUp = () => { window.removeEventListener('mousemove', handleMouseMove); }; window.addEventListener('mousedown', handleMouseDown); window.addEventListener('mouseup', handleMouseUp); return () => { window.removeEventListener('mousedown', handleMouseDown); window.removeEventListener('mouseup', handleMouseUp); window.removeEventListener('mousemove', handleMouseMove); }; }, [initialPosition]); return ( Rotation Angle: {angle} degrees ); }; export default MouseRotationComponent;

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

Sab ki demand Puri ho rahi ho gayi hai na ...react se website ab daba ke like marro aur comment share karo

locomotive error derahe hai windows is not define...isko kesy solve kar skty han ?

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

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

Locomotive kaaam nhi kar raha hai 🥲 install bhi kiya aur fir import bhi sir ne jaise bataya vese kiyaa fir bhi .... Anybody can help

10rs ki Pepsi harsh bhaiya sexy

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

Are bhai kasam se bohot intezaar kiya ye viral hai video pin kardo❤❤❤❤❤❤❤

Please E-commerce website project banwaa den .... please please please..

bhai sahab animation chor ke kuch acha wala real project banao jo industry m use hota hai, or interview m real work puch raha hai. animation banak kuch nhi hoga,

Hellllow :) Waiting for part 2 ^_^

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

Sir You forgot the initial loading animation will you please teach us in a separate video, please 😶

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 ❤

Shery bhai react ki or videos bhi lao, ❤ from Pakistan

Pls html css js mai bana do pls 😢 pls harsh bhaiya pls please ghamndi na hona

1 week se bana raha hu.... Last me scroll animation me fas gaya hu...... 02:38:00 me yeha scroll pe niche wala element attachment nahi ho raha..... Sirf marque khub scroll ho raha.... Apna bola fix karenge par apaka ye wala solution skip ho Gaya Please help.......😢

Bhanchoo kab se intjaar ker raha tha 😅😅

1. Sir don't provide the source code because of students copy and paste it in their project or such reasons. 😕 2. For those type of students genuine students struggle. 🤐 3. What about genuine students who are struggling to understand the code and project structure? 😑 4. Most probably this comment is not gonna reach to "sir" even if it does they won't give a thought to this, that's a different pain 🤧 5. A Story no one gonna listen 🕊️

bhaiya jo loader animation hai wo kaise banao thora hint do please

16:15 Bhai free kar de pls paisa nhai hai 😢 hota to buy kar leta

2:38:26 ye wala issue kaise thik kiya app batana bhool gaye

Aj OG intro kyu nhi hua

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

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  

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

Liked💯 Commented💯 Now enjoy watching.

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

1:17:15 ki uske bad vo bat he nhi krega 🤣🤣🤣🤣

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.

Hellow..........................🦁🦁🦁🦁🦁🦁🦁🦁

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

01:16:28 Bkchdi rukni ni chahiye 🤣

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

Bro❤ Responsive Nav bar bnana sikha do

bhaiya please source code bhi daal dijiye

bhaiya english na bola karo aisa lagta hai aap english ko kisi galat jagah se ched rhe ho in short harassment

React js ka series complete kr digiye... Please ❤❤

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

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

bhai aisa lag rha ki ap hair saloon mai baithe ho

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

Tailwindcss not working even after configuring properly and adding it to "File associations" ADD Item *.css value: "tailwindcss". Any other suggestion please ?

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

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

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

Bhai thank you for the amazing tutorial. I am facing issue where scrolling the page, automatically spacing is created between Marquee and About section. Your guidance would be much appreciated. Thank you!

I'm from Pakistan and love you a lot.❣ If you were in Pakistan, I would have met you, but you are from India. I don't understand what your brother explained about ReactJS. Please make a video with full details. Thank you❤

Responsive hai kya ye bhai??.

Bhai yrr …. Page refresh pe landing page pe jo starting me animation 0%-100% wala sabse pehle vo kese kiya jaaye …??

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

App kaha sei is "OCHI" like website jesa website ko pata lagate hai

Bhai can u resolve my query ....I am unable to proceed further .....they r showing( resolved import App css from sec/App.jsx ) And warning is showing that Import vitelogo from /vite.svg Import reactlogo from ./assets/react/svf Help me brother i am in trouble

Boss do char REACT project aur upload kardo views aur subscribers KHUD AAYENGE !!! will support your channel at the end of the day ||SIR||

Where can i get source codes

import { motion } from 'framer-motion'; function Marquee() { return ( We are Ochi We are Ochi ); } export default Marquee;

I was feeling something is missing and that was the BAKCHODI waala part , Bhiaya pehle waala tarika psnd tha , waise hi padaho plzzz........

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 navigation bar and ensure z-index for visibility 28:04 Creating and styling 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 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 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 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

bhai ye toh mast hai ki aapka video beginner friendly hai but what about us ... thoda hamare bareme bhi sochiye wohe ak thing ko baar baar dekhne me thoda mood off hojata hai ak hi part ko kitna baar skip kare ? .. so pls think about it if you like..

Asalamoalikom... sir react ki animated website ko responsive krna bh sikha dain aik video main plzzzz sir with full animated and tailwind css ke sath responsive Thanks...🤞🤞🤞🤞😊

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 navigation bar and ensure z-index for visibility 28:04 Creating and styling 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 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 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 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 Crafted by AI.

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

Ello those who knows, knows

Bhyia please please please .....ab thore din k liy please please ....js se Thora shift hokr ...react k 3 se 4 achhe waaale aise aise (api) waaale project banwaao please .....

Bhai level 1 completed ✔️, waiting for 2,3 and god but please tell me , after completing god level , what are the skills we completed 1.html 2.css and ????

Bhai level 1 completed ✔️, waiting for 2,3 and god but please tell me , after completing god level , what are the skills we completed 1.html 2.css and ????

Do you think you could do some videos in english as well? Your content looks amazing.

Dekho bhyia yahan par thori react se related videos nhi hai isliy mujhe chai aur code se padhna Parr rha hai ....Maine js k lagvagh saare videos dekh liy hai ....lkin bhyia ab react achhe se sikhna hai ......bhyia chai aur code se concept to Sikh rha hun....but alag level waale projects nhi Sikh paaa rha hun...... Please bhyia tagre waale react k projects laao bhyia ......😊

Thank you for Such a great video ...bas ALT+Z kar dijiye ga taaki sari properties dekhegi 😢

men tag laganyyyy syyy ....hydration error ataa ha.....please bta den #sheryians

First Comment ❤

SOURSE CODE PLEASE

1:16:46 hellloooouuuu 😂🫂

animations sab masth hai,, par we need to learn the main functionalities of react,, like states,, hooks, context apis, redux,,, add animation to it make a project sir please,,,, like how you did for backend and all,,, frontend to pura sikhna chahiye na sir,,,,,

bro after importing the locomotive-scroll the scroll functionality with mouse is stopped working

Sir, we have a major mis-understanding, we upload the react app on github and host it, so it doesn't work. have you solution

Anyone source code????

Sir kisi bhi website ko me max-width 600px pe responsive bnata hu but jab usay phone ki width me check kro to sab khraab ho jata hai ap plz help kr dain gy

sir. build krte waqt "maquee" component show ne hora tha .maine tb sab delete kr ke firse banaya ..ab navbar bhi show ni hora..

Bro ap Jo Kam krty ho Thora explain ker diya karo...ye Jo SVG ka code hide Kiya hai smj nh Aya..q k mere vs code m es trh nh ho rha

Helliooooo

12:16 Best? Once your best was: 🚀 Now it's just (as compared to what it was before): 👶

1:16:40 Hellowww 🤣🤣