Build and Deploy an Awwwards Winning Website | React.js, Tailwind CSS, GSAP

[@Sunnyohaop]

bro is the kind of guy who tells consistency to be consistent

[@javascriptmastery]

Hahah, good one!

[@AnantDev925]

If consistency is a human, then it is definitely Adrian

[@javascriptmastery]

That means a lot, thank you!

[@Om-tq6nm]

Seriously well said ❤🎉

[@CharlesMizinga-w2z]

I 100% agree

[@mileslegend]

YAY!!!! i have finished this build ..i coded along ..read the docs along i wont lie a 2hour video ..on building took almost 17 hours of actual coding 😵😵🤪🤪..i am, proud of myself ..thnaks for allowing me not get idle ..Big bro Adrian🤗🤗

[@Paw_Oreo]

is it real ? or is there something to buy at the end or some what kind of thing?

[@vaniad555]

@@Paw_Oreo it is real, but you might have to deploy it to Vercel unless you have hostinger hosting.

[@javascriptmastery]

Nice work!

[@mileslegend]

@@vaniad555 true ..even onrender.....and firebase also netlify

[@Demboys_p]

I'm stuck on 11:04

[@hungnguyencanh5089]

Don't rush to finish. Pause, reflect, and consider what the author is trying to convey. Thank you for your great content!

[@javascriptmastery]

Thanks, will do!

[@sujoykrhaldar]

Now start a series of awwards animated websites. There are very few channels cover this topic. And there are lots of devs want to dive into the artistic side of the frontend web development.

[@javascriptmastery]

I completely agree!

[@frontenddevs]

Yes please 🎉🎉 Celebrate you Man 🥂

[@sudhirdontha1053]

@@javascriptmasteryplease continue doing this series. You're work is truly inspiring!!

[@mayckonm.rebecci7166]

I completely agree!

[@meneworon9878]

Completely agree too

[@arpitachakraborty9852]

Man you just kill it! I am amazed to see this kind of website you are building and that is for free

[@javascriptmastery]

Enjoy! 😊

[@johnsonachuk]

Just when u think the last project was the best ever, boom Adrian drops another banger❤

[@javascriptmastery]

That's the goal! 😊

[@baptistsamuel5977]

I just finished the course. Everything is advanced but understandable. I know better about gsap now, and I learned new tailwind CSS classes. The course is great but needs close attention. I learned more about animation and logic from everything, and it took me four days to finish. Thanks for the video.

[@baptistsamuel5977]

The only problem i have is that the video in the hero section doesn't play on load until I play a new video.

[@manas-yd9nh]

bro we upcoming developers request you to bring more of these, its literally a blessing for us to view content like this

[@javascriptmastery]

So happy to hear! 😊

[@ahmed_ade]

​@javascriptmastery, you are my best model. Love you

[@berkipekoglu]

Awesome! More awwwards winning website design videos :)

[@javascriptmastery]

More to come if this one does well!

[@Beacon_and_Bard]

​@@javascriptmastery bro please portfolio one .

[@Om-tq6nm]

Hello Adrian we will be glad if you make this kind of more projects to target the creative agency ❤. Btw thank you for your work 😺

[@javascriptmastery]

More to come!

[@eikyoutube]

This guy is INSANE How does he make so much content Truly unbelievable

[@javascriptmastery]

I've got a team of great people!

[@joker-zj5mo]

And you are the perfect commander ❤❤❤

[@exeis1052]

Naahhh this is the exact kind of video I've been looking for a long time. I've been watching you for a long time and never fail to amaze me. I hope you'll make more award winning site tutorials like this.

[@javascriptmastery]

Wow, thank you!

[@cryptodemon3421]

I'm retired at 27, went from Grace to Grace. This video here reminds me of my transformation from a nobody to good home, honest wife and 35k biweekly and a good daughter full of love

[@ArthurTuttacastilho]

As a beginner what do I need to do? How can I invest, on which platform? If you know any please share.

[@ArthurTuttacastilho-tm5pb]

Waking up every 14th of each month to 210,000 dollars it's a blessing to I and my family... Big gratitude to Sofia Duke 🙌🏻

[@M2recoveryLimited]

Yeah, 253k from Sofia Duke, looking up to acquire a new House, blessings.

[@DoubleMaduagwu-sb4kp]

Stawrted with 5,000$ and Withdrew profits 89,000$

[@adrianlouis2108]

Bro where were you my entire life? Damn If i knew your channel existed . MAn I will for sure buy your course.

[@kenshalom6098]

Your level excellence and consistency is a good leadership example worth emulating Thank You Adrian for your generous character

[@javascriptmastery]

Thank you

[@Beardyman5617]

Man, your content is next level! You’ve mastered the balance of quality, value, and entertainment. Keep doing what you’re doing-your videos are a goldmine!😁

[@javascriptmastery]

Thank you so much! 😊

[@TheDarkopsis]

I join everyone in saying MOOORE of Awwward winning websites hahaha I'm so excited seeing this. Seeing how a person would code those website step by step for free on the internet is absolutely amazing and great advertising for your courses ! Keep up the good work !

[@prabhakardeep]

Great tutorial, finally completed the tutorial, it took me 12 hours to follow through the whole video.😂😂😂😂 Thanks, Adrain.🔥🔥🔥🔥🔥🔥

[@Demboys_p]

Brother I saw u one week ago and your tailwindcss video on Nike shoe website helped me alot. I’m here to thank u and I can’t wait to learn more from u . I’ll keep sharing yo vids so other people can gain more from u aswel. May god bless u King 🐐

[@javascriptmastery]

That's amazing, thank you so much!

[@almudenarf1148]

I cannot believe this content is for free. Thank you so much for this video, it is one of the most beautiful websites I have ever seen!!

[@javascriptmastery]

You're very welcome!

[@potatonotbruh]

i just went through making an app for my project and now i have another project and this man delivers

[@abbasikoders-academy]

I'm a huge fan of your channel and eagerly wait for each new project video! It's been two weeks now, and I can’t wait to see your latest Next.js project uploaded. Every time I think I’ve seen it all, you come out with something even more impressive. I'm so glad to be a subscriber! 😅

[@javascriptmastery]

Thank you much!

[@ChristineGuyoDonche]

Adrian Adrain You never cease to amaze much love from Kenya, consistency on the next level

[@javascriptmastery]

Thank you!

[@zvikomboreromugwara5265]

This website is incredibly impressive. I never thought it would be possible for me to make one. I've learned so much from you Adrian, God bless you

[@javascriptmastery]

You're very welcome!

[@paperfly178]

Woahhhh This is what I'm exactly searching for. You are great Adrian. Thanks for this

[@javascriptmastery]

My pleasure!

[@Ejjay-j1b]

"Hi Sir Adrian! I'm a complete beginner, but I’m really looking forward to the 'Image Gallery App' tutorial because I absolutely love your design style and the way you put everything together. It's always so clean and visually appealing. Thank you so much for all your hard work and for sharing your knowledge with us. Your tutorials are invaluable, and I appreciate everything you do! 🙌😊"

[@TNT_PEROX]

This type of content can only be delivered by Adrian amazing bro ❤

[@javascriptmastery]

Thank you! ❤️

[@amitavasengupta5580]

Bang! This guy knows the perfect way to start my weekend

[@javascriptmastery]

Enjoy!

[@juniorMr]

Another banger 🎉 Congratulations Adrean

[@Way_Of_The_Light]

HOLY COW ✨✨✨✨ you’re the king 👑

[@javascriptmastery]

Thank you so much! 👑

[@pperfectdev]

Adrian is the best. I appreciate you

[@javascriptmastery]

Thank you so much!

[@prerakpatel3165]

Amazing. Mind Blowing. Can't wait to finish my current project and start working on this one.

[@javascriptmastery]

Best of luck!

[@pachimari8]

I must say that I’ve always loved your tutorials they’re so well done and easy to follow!I had to try this one as soon as I saw it pop on my feed and I just finished watching it. It turned out amazing, and I learned so much along the way. You’re a really great teacher and all your videos are always a joy to watch. Thanks for all the effort you put into them!

[@javascriptmastery]

Thank you so much, it means a lot!

[@Muhammad-Shahab]

Your tutorials have been incredibly inspiring and informative! 🌟 It would be amazing to see a comprehensive video on building high-level full-stack applications with a focus on clean architecture, organized folder structures, and advanced features like role-based permissions.

[@jehnzcode]

Now my weekends plans are cancelled because of this new amazing tutorial👏

[@javascriptmastery]

You got this!

[@marvelpro06]

Way to go Adrian!!! suprising us everytime with something new. You are truly one of a kind😉😉😎😎❤❤😍😍❤❤

[@javascriptmastery]

Thank you! ❤

[@goodchoice9562]

Thanks so much for all the amazing projects you bring to your platform. Your explanation is out of this world 🌎. Thanks again Mr Adrian

[@javascriptmastery]

You are so welcome!

[@DeveloperJS-w1s]

When i see Adrian's videos it motivates me to learn more thank you Adrian

[@javascriptmastery]

Thank you!

[@oyegokeamina5864]

Thank you Adrian Whenever you feel desperate searching for something, Adrian has already made a video. Standing ovation for this engineer!

[@devilsh8273]

This video is a true gem ❤

[@javascriptmastery]

Thank you! ❤️

[@devilsh8273]

Bro i recently completed a course in react and yt algorithm shows this. Love you man and love your work ❤️

[@programmingwithvusala]

omg thanks this is the video i was searching for. keep it up , u are amazing

[@javascriptmastery]

Glad I could help

[@shadowslayer2248]

Crazzzzzy shit! This guy will surely put some Web Design Agencies out of business. Even though it's a single webpage, he could have sold this for a large price and a lot of agencies actually do this and charge a lot but this person is giving it out for free! Massive Respect!!!! 👍👍🫡

[@Rosniel-fm2gb]

From cuba we watch your videos, we love it. Thanks for all teacher!

[@javascriptmastery]

Glad you like them!

[@madhurikutre8868]

React and tailwind combination will be always have place in my heart ❤️ btw great project

[@javascriptmastery]

Thank you!

[@hamza201183]

Thank you very much Adrian. Indeed it's great time to time to have some videos about creative HTML/CSS, not necessary with BackEnd stuff :)

[@javascriptmastery]

Glad it was helpful!

[@baptistsamuel5977]

Perfect video i have been looking for👍👍

[@segalgbenou975]

I've been reloading the KZbin page since then, I've been waiting, thank you ! 🚀🌟✨

[@javascriptmastery]

Hope you enjoyed it!

[@P_venom]

Bro you just changed the course of my life ..... If I can do this I'd drop my portfolio here in like 2weeks time ❤ ...

[@javascriptmastery]

All the best

[@tonim9]

Great one Adrian 😊. Wish to see more gsap videos. Counting to one million subscribers ⏳

[@javascriptmastery]

More to come!

[@davidadedeji3018]

Mehn you're so good at it and its waking the creativity in me

[@krushnachandrasahu2744]

When are you planning to drop the React Native app video?

[@javascriptmastery]

Soon

[@Yesterday_i_ate_rat]

Dude, Adrian just dropped another banger.

[@javascriptmastery]

Glad you think so! :)

[@KamranJamal-r2i]

Can not wait for others please do more you are gem in web dev on yt love you from pakistan ❤❤❤

[@javascriptmastery]

Thank you! ❤

[@Daniel-sx4qc]

bro, we really need this to be on the playlist. great videos !

[@javascriptmastery]

Working on it!

[@OPGAMER.]

Amazing. Starting this project right now.

[@javascriptmastery]

Thank you OP Gamer! ❤

[@saqlain0902]

I can't resist myself for building this one thank you so much Adrian ❣️

[@javascriptmastery]

You’re welcome 😊

[@MrIsGrowing]

mind blowing project yet again from the best guide on youtube thanks alot adrian this is an awesome project but i have been waiting for a full stack e commerce store i hope you make it soon and also Lots of love to you and your work

[@javascriptmastery]

Thank you!

[@hanialazreg9953]

Adrian, you are the best , no more words

[@javascriptmastery]

Thank you so much!

[@vaniad555]

Another amazing video. We ask you deliver. Thank you for all your hard work!

[@javascriptmastery]

My pleasure!

[@i_vishalsah01]

that look sick!!!! superb build 😍😍😍

[@javascriptmastery]

Thanks a ton!

[@amberforrester.m]

Thank you for another incredible tutorial! Absolutely incredible :D

[@javascriptmastery]

Thanks again!

[@himanshumanitripathi7261]

Animation websites have best impression. Thanks❤

[@javascriptmastery]

Thanks❤

[@shakirov__akmal]

1 MLN congratulations😉

[@priyanshupaul4215]

I have to say Award winning video 🎉❤

[@javascriptmastery]

Appreciate it! 😲🔥

[@deseanward8566]

Can't wait to get started

[@javascriptmastery]

Let me know when you do 👌

[@robpro1024]

Adrian thank you for sure you inspire my development journey

[@javascriptmastery]

That's the goal!

[@A_M_R_2004]

I think if you keep focusing on awwwards rebuild you will hit that fr fr fr

[@javascriptmastery]

Fr?

[@Kartik_py]

bro you just keep inspiring me again and again

[@javascriptmastery]

Glad to hear that

[@nemanjastojanovic3482]

Legendary video my friend

[@Gustavo-bi4hv]

Adrian, the GOAT!

[@javascriptmastery]

Thank you! 😊

[@SimaDutta-w6t]

Really Adrian wins everyone's heart ❤️

[@javascriptmastery]

Thank you! ❤

[@10zDelek]

Weekend about to get lit

[@javascriptmastery]

Enjoy!

[@Warrior4Christ1945]

Love the vids super helpful thank you so much Adrian!

[@javascriptmastery]

Thank you!

[@shoaibshuja2004]

Okay this might get me hired for sure😺

[@javascriptmastery]

For sure!

[@SharifRayhanNafi]

now this is the real stuff!! thanks man. Hope you’ll be making more tutorials on websites like this 🤍

[@javascriptmastery]

More to come!

[@samiulalim6894]

wow, I am searching for this kind of Awwwards website and today you came with this. thank you so much. Want more projets on awwwards website plz.

[@javascriptmastery]

Welcome 😊

[@prashantttzzzz7]

God of JavaScript is back ❤

[@javascriptmastery]

Thank you! ❤️

[@stark_202]

Those 3 AM googling sessions 😂😂😂❤🙌🏻

[@javascriptmastery]

Haha yeah ❤

[@mohammaddarainkhan5635]

YOU ARE A LIFESAVER DUDE!

[@javascriptmastery]

Thank you!

[@PrajWal__sh]

Love you bro genuinely from the bottom of my heart ❤❤❤

[@javascriptmastery]

Thank you! ❤

[@TheStRaX_]

The best project ever I am going to build.

[@javascriptmastery]

Have fun!

[@benzlozada392]

Thank you JSM I love the way you teach

[@javascriptmastery]

Appreciate it!

[@Usama_Uk]

I really like your videos you are great teacher❤😊

[@javascriptmastery]

Thank you! 😃

[@saifullahkhan2685]

was just searching for this!! thanksss

[@javascriptmastery]

No problem!!❤️

[@misterbean6674]

need more of this. 😍

[@shahnoormujawar6825]

Adrian keep it up and please think to launch some back-end heavy projects in future on nodejs typescript and postgress we really need that ❤

[@javascriptmastery]

That's the plan!

[@hfg16]

You will never stop amaze me with those videos I will create this one fire website for sure thanks a lot

[@javascriptmastery]

Amazing!

[@d.ee_lad]

This project will be so great

[@javascriptmastery]

That's the goal!

[@senlee325]

This is just what I was looking for to update my website 🌟

[@javascriptmastery]

Enjoy! 😊

[@thundervasanth7011]

We are very very grateful for this aAdrian sir,You are my best tutor for full stack development.And there is no tutor or mentor like you in youtube or any platform.I love your content and i am gonna create this project because of this animation and gsap(i love gsap).I was really wondered how this kind of animated websites are creted.but now i am gonna create this .I am also future level developer because of you Adrian sir.We are grateful for your work.And Advance congratulations for ! million subscriber.You deserve this 👑 Sir. Request:We need complete gsap tutorial too.For pro level websites

[@javascriptmastery]

Thank you!

[@Deus-lo-Vuilt]

Thanks Gsap ❤ , Adrian ❤

[@javascriptmastery]

You got it! 👌

[@IrfanB-jq1nt]

We want more content like this ❤

[@javascriptmastery]

More to come! ❤

[@SelimBoudagga]

more gsap content please more and more

[@javascriptmastery]

More to come if this one goes well ❤

[@abwebmaster3]

I appreciate your efforts man

[@javascriptmastery]

I appreciate that

[@dhwaz]

just a master piece ❤

[@javascriptmastery]

Glad you like it! ❤

[@MahimRahadSam]

Fire🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@javascriptmastery]

🔥🔥🔥

[@NiRMALTD-fl9zx]

Timestamps (Powered by Merlin AI) 00:04 - Building award-winning websites is achievable for individuals using modern tools. 02:11 - Learn to set up hosting for an award-winning website project. 06:18 - All technologies used for the project are free to access and utilize. 08:20 - Initialize Tailwind CSS and set up React application successfully. 13:16 - Integrate custom fonts in Tailwind CSS configuration. 15:56 - Implement and customize colors and fonts efficiently using Tailwind CSS. 20:12 - Create a hero section component in React with styled classes. 22:33 - Utilizing custom Tailwind CSS classes for efficient styling. 26:50 - Integrating video playback functionality in React using useState and useRef hooks. 29:06 - Implementing dynamic video sources and loading functionality in a React component. 33:37 - Explains the remainder operation in video indexing logic. 35:40 - Implementing an animated video player in the hero section. 40:25 - Creating a reusable button component with custom styles and icons. 42:43 - Create a reusable button component with dynamic props in React. 47:18 - Implement smooth animations using GSAP for enhanced user experience. 49:18 - Defines video animation functions using GSAP in a React app. 53:49 - Implement scroll-triggered animations with border radius effects. 56:10 - Implement a loading screen for better user experience. 1:00:21 - Creating a dynamic about section with animations in a React app. 1:02:35 - Styling text and structuring layout for an engaging website section. 1:07:14 - Implement GSAP animations and styling for responsive design. 1:09:19 - Create a reusable animated title component for better functionality. 1:13:48 - Implement GSAP animations using context and useEffect in React. 1:16:04 - Implementing smooth scroll-triggered animations for website titles. 1:20:15 - Implement a responsive fixed navbar using Tailwind CSS 1:22:57 - Implement responsive navigation links with React and Tailwind CSS. 1:27:11 - Implement audio playback with visual indicators in React. 1:29:27 - Implementing audio playback and visual indicators in a React component. 1:33:26 - Implement a scroll-triggered navbar animation using React. 1:35:37 - Implement dynamic navigation behavior based on scroll position. 1:39:51 - Implement navigation and prepare for features section development. 1:41:56 - Creating styled divs and text elements for a website layout. 1:46:18 - Styling a Bento grid and integrating video assets for improved design. 1:48:40 - Styling and structuring card components for a polished UI. 1:53:00 - Implement a visually engaging Bento card while ensuring usability. 1:54:59 - Creating and styling cards for a website layout using Tailwind CSS. 1:59:24 - Implementing Bento Tilt component for interactive card effects. 2:01:31 - Implement mouse event handlers for dynamic card transformations. 2:05:33 - Adding transformations and animations for enhanced interactivity. 2:07:26 - Implementing an animated title and an interactive card for exploration. 2:12:22 - Implement mouse event handlers for interactive card effects. 2:14:40 - Animate 3D effects and dynamically reset properties using GSAP. 2:19:08 - Styling a responsive paragraph and button in React using Tailwind CSS. 2:21:15 - Implement a responsive contact section with a footer using React.js. 2:25:52 - Creating a responsive layout with positioned images and text in React. 2:28:18 - Creating an engaging call to action for a gaming website. 2:32:58 - Adding interactive social icons and link functionality to the website. 2:35:19 - Finalizing the website build with interactive features and ready for deployment. 2:39:05 - Deep dive into building and deploying a complex app for hands-on learning.

[@YousufJusani]

Damn, This is Dope! 🥵❤‍🔥😍🔥 Please make a series on zentry website which includes not only all sections, but also Adrian special some extra new sections and features 🤩

[@javascriptmastery]

Haha this is enough for now 😅

[@nicolettifps]

Great!!! 9.9/10 - a 10 video is awwwards with gsap threejs.

[@javascriptmastery]

Wow, thanks!