React JS & Tailwind CSS Responsive Website - Beginner Friendly

Follow along and build this React JS & Tailwind CSS 100% mobile responsive website from scratch. We will install and use Tailwind CSS in a “Create-React-App” application. Use a really cool react package “React-Typed” for some text animation in the Hero component. UseState hook to toggle the mobile side drawer menu. Import “React-Icons” dependency for social icons. Incorporate both flexbox and grid layouts. Thanks for watching - Enjoy!
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
Github repo 💻
github.com/fireclint/data-fin...
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

[@samuelmuthaiga6072]

This is on another level. Amazing content and great UI design. I really enjoyed coding along. Give us more please

[@philippec4448]

Wanted to get an introduction to Tailwind combined with React. Your video was perfect for this. Thanks !

[@MiracleKalu-ud9gq]

Man, this is such a valuable resource right here. My first React project and I am so glad I came across this video.

[@starX7995]

Amazing dude I 've been looking for so many beginner projects in react so far yours is the only one I've been able to follow ,learn and create something

[@codecommerce]

Thank you Steven!

[@derekprieur5258]

Just found your channel and have been really enjoying your project ideas & videos. Keep it up! 🤙

[@ronniechua01]

One of the best tailwind tutorial out there! Great job

[@ibrahimabudalah5570]

I love working on projects by myself first (to challenge myself) and only look at the solution if I ever get stuck. It would be great if you can attach pictures of the final project to follow and the assets. Anyway, great video and keep it up!

[@justinrast6122]

Learned so much from this video, good stuff! Subbed

[@mikemathews7827]

Man your content is great, it's my first time using Tailwind and I'm also a beginner in React, but the way you teach is so cool, you explain everything you do clearly and concisely, and even though the content is packed and kinda fast for me, I pause every few seconds, read what you did, try to understand it and then write it myself. I'm just at the 20min mark but you've already got a new subscriber and I hope your channel gets the attention it deserves.

[@supreior1181]

Are you Maphew Martini?

[@mikemathews7827]

@@supreior1181 no

[@codecommerce]

Thank you Mike. It’s crazy how fast you can write and style these pages using tailwind!

[@Alanray10]

The first video i watched from you was the portfolio web app. Eversince i got that one done. Ive been populating the portfolio with projects i made with your channel's help. Im super thankful i was able to find your videos.

[@codecommerce]

Thank you dude!

[@soufianebenseddiq8238]

for the people who suffer from intall react-typed error, use this command -> "npm config set legacy-peer-deps true" then "npm install react-typed --save" and the package will be installed

[@georgekhair4380]

Thanks a million!!

[@sekmekci]

@27:58 If you can't install the "react-typed" package try this command : `npm install react-typed --force`

[@codecommerce]

Thank you for the add :)

[@usamamohiuddin7904]

Thank you !

[@knowledgecollege7975]

Sir this is where I learned ReactJS. Actually I have watched many but this is the only one kept me more than 30minutes. Thank you so much sir. I wish all the happiness in the world to you and your family. Thank you

[@dungvoduc7090]

your react / tailwind css content is the best on youtube! i am learning alot from you. thanks alot!

[@codecommerce]

Dude that's incredible! Thank you!

[@giancarloalmeidasantos]

Man you are amazing! Great explanation! Good job! You are the best!

[@WiseManCOD]

I really really really liked this video. I'm currently a CS major in school and don't really like the data structures and low level classes, I like web development stuff, but they don't teach any classes on that. This video has helped a lot from someone who has just picked up react and has little experience in HTML (CSS) and JS. I subbed, appreciate the content and hope to see more tailwind portfolio stuff w/ react!

[@codecommerce]

Thank you Lurkuh!

[@mishaalnoureldien5162]

Les goo, man you are awesome, been following your videos the past few days trying to learn react and tailwind. Awesome stuff.

[@codecommerce]

Awesome! Dude thank you!

[@yurish4ez]

The best example of using Tailwind CSS, I started to write code on my own till the end of the video. Thank you for your efforts!❤️

[@codecommerce]

Glad it was helpful! thank you!

[@tosin_atere4499]

Amazing content !! Your videos have really helped me a lot thanks so much 😊

[@dolapoaraoye8124]

Superb video!!, I'm new to tailwind and was looking for a simple tutorial like yours. Great job 👍🏽👍🏽

[@mightyVoldemort]

just finished to view (and build) it all . great video!!!! maybe the best tutorial of how to use Tailwind with React. thanks a lot!!

[@codecommerce]

Thank you my friend!

[@kenthankgod2619]

Dude you talk like a marvel character, your video definitely helped lots😂

[@swoopingio4311]

This is exactly what I was looking for! So excited to watch :)

[@codecommerce]

Thanks!

[@Shadow-fw9qc]

Thanks a lot, it helped me to get a good idea about tailwind

[@theifeanyi]

Your content is on point and quite easy to understand. I got more out of this than i expected. Thanks a lot.

[@codecommerce]

Thanks dude!

[@EloyMartinGimenez]

Wow, the extension pesticide is really cool! thanks!

[@kk-rb7no]

I'm grateful for your video. It's high quality and easy to understand every time, and it's the best for me as a beginner. Finally, thank you for always keeping my motivation for studying ✌️

[@codecommerce]

Glad it was helpful!

[@ismafauzan8330]

You've actually got so quality stuff on your channel. Keep that up man!

[@muhammedmusarraf3161]

The energy throughout the video🔥

[@republicgamer6998]

Man I so much relate to you I also build websites as I go and think of the components on the fly lol. Amazing video subscribed looking forward to new projects or videos on react ❤

[@imryoko]

I was able to follow your tutorial ! this is greate

[@zayyynull_]

Thanks a lot Man!!! Big salute to you.

[@jryoon1925]

The best REACT tutorial I've ever had!! Thanks for your video. I'm gonna watch another videos, too!!

[@codecommerce]

Thank you dude!! Awesome!

[@buttface6650]

I couldn’t help but too smash that like button after that navbar transition, my god this is good stuff

[@codecommerce]

Haha thank you dude!!! 💪

[@yacineelhafidy5710]

you're the best bro, i really appreciate your effort

[@gabrielc1095]

Your videos rock man! Thanks for the sweet tutorials.

[@codecommerce]

My pleasure dude!

[@kiannaidoo8420]

Great video! A lot of value in this video! Keep up the amazing content!

[@codecommerce]

Thank you Kian!

[@beautyoftharparkar-in8ki]

Amazing content and great UI design. lot of thanks...

[@niteshprajapat.d3v]

Loved this project 🤩😍 Learnt something new Thank you Sir😇

[@saepuloh475]

Big thank you bro. I just know tailwinds is awesome!

[@Vkta]

followed along and i must say this is the best beginner friendly React stuff on KZbin

[@codecommerce]

Thanks again dude!

[@boguldu]

very easy to understand so glad. Surprisingly It didn't get me overwhelmed

[@codecommerce]

Awesome man. It's not super difficult!

[@justinnovate5853]

20:45 Cool demo! 21:50 Start of responsiveness 22:19 TW-CSS' mobile first principle, requires combination of style classNames: 'hidden md:flex' 1:15:12 A common challenge: Layout works on mobile but breaks on wider viewports. Resolution at 1:15:34.

[@sudiptaanirban8833]

Great learning experience, thanks man

[@s9_ark106]

im with the noose on my neck because ive got to turn in a website in 10 days as my final school project and this tutorial literally just saved my last year of high school

[@codecommerce]

Haha! That’s awesome man!

[@FarhanAli-iu9dp]

love you sir i really appreciate your work.💕

[@donaldkamthepha1483]

Bloody well done sir, bloody Well! Done! 👏👏👏

[@lhomme_flaneur]

clint, you're perfect! I made some changes in your code and write the code with typescript react! thank you man

[@codecommerce]

Thanks dude!

[@casmirugbong8663]

Well done clint your videos are really helping me. Keep creating react and tailwind css videos only😃😃😃

[@codecommerce]

Sure will - thank you!!

[@appstuff6565]

hey, i was stuck in a situation from another tutorial and calling functions inside the same script im using tailwind css was an issue, however it was solved and i got an understanding around @19:27 so thanks for that.

[@asksk525]

Your videos are very helpful. Thank You. Appreciating your work and wishing your channel get 1 million subscribers soon..

[@codecommerce]

So nice of you

[@oladayomichael1304]

I love your video! Thank you for the good job. Do you have tutorials on solidity??

[@emmanueljoseph5352]

I`m loving this

[@salmans.rahman7161]

WOW! It's really amazing. I can never think that, tailwind will be that much easy for me. Just loved it❤ Thank you for this project. You are the best still now. Take love❤

[@codecommerce]

Thank you so much Salman! Tailwind is great. It makes it hard to go back to writing normal CSS.

[@priyankaroberts1093]

Hey Salman Good to know that you like learning from these tutorials. Are you a fresher and open to exploring opportunities in web development currently?

[@dusanjarkovsky4]

Thank you very much for this video. It's helping me a lot.

[@nemzyxt]

I love this, thanks man

[@skreddysasi3404]

Thanks for this insightful Video💯💯🚀

[@leandrojackson9631]

Amazing result!!! Thank you!

[@codecommerce]

Thank you Leandro!

[@chris-zlrr]

great video bro! also a question, where do you always get the images from - from a stylistic perspective to match with the theme colors?

[@Incognito-gs7qx]

You're the best man, you've made life easy for me

[@georgepynadath2025]

Loved the video. Thank you so much

[@codecommerce]

Thank you!

[@harveey9049]

the best channel i've ever found. amazing! thank u for so much knowledge, u are helping me a lot! :D

[@codecommerce]

Thank you so much Harveey!!

[@daspov4709]

thank you , I learnt a lot.

[@syedusmanhassan]

Thank u so much for this effort, if possible kindly make a course on tailwind and complete MERN

[@anshXR]

You are the only youtuber I watch React tutorial of. Everytime I learn something new. You are the best man ❤

[@codecommerce]

I appreciate that! So awesome!

[@priyankaroberts1093]

Hey Ansh ! Have you built any projects in React/node? Are you looking out for any job opportunities in React or other JS frameworks currently?

[@user-pz4rj9cp5w]

Really Great Content 👌👌

[@isabeloliveira9128]

Thanks!! For a first contact with tailwind, it was really cool and its way easier than pure css & javascript hahaha Great tutorial

[@codecommerce]

Thank you Isabel!

[@chinmayharane7304]

Proud of you my son, keep banging.

[@takemjim]

Man your content is the best, a big shout out to you🙌🙌

[@codecommerce]

thank you!

[@judahmatende3769]

Thanks man, keep up the good work... a recovering coder (went on haitus), really fit my bill - learnt/recovered a lot while following through... thank you for the hard work.

[@sdfsdfdsdsfdsf5636]

I woke up, and here again a new video from view bot king! Great mood for the whole day!

[@luis.carlosrodriguez1561]

great video, it all words as advertised which is amazing for videos of this type. Questions: where can I get a list of the classes defined by TAILWIND, I've looked all over the TAILWIND site but I end up on the page asking form money. are the class list available. thanks again for a great instructional project....

[@melissag3793]

Thanks so much! Great tutorial.

[@codecommerce]

You're very welcome Melissa!

[@chrisperera350]

Amazing. Thanks a lot.

[@codecommerce]

You are welcome!

[@santiagoguastavino346]

BOOM very easy. Thanks dude. You're that meme of the Chad in the Computer helping others.

[@codecommerce]

Hahaha dude that’s funny 😆

[@ashss2890]

wonderful first time using Tailwind and I'm already in love LOL

[@codecommerce]

It's so good! I use tailwind all the time if I can lol

[@elioscipioni]

Great video!!

[@asmarali4167]

Awesome Stuff !

[@NhanNguyen-yu3gs]

spending one day to build it for myself, but it was wonderful experience! thks

[@codecommerce]

You can do it my friend!

[@BelieveInYourSelf7654]

Your tutorials are really awesome brooo....

[@tchisama]

i really loved your video

[@codecommerce]

Thank you sama!

[@brightlydunsford6621]

this made me understand tailwind clearly thanks to you but could someone tell me how to change the second button color in the cards using props cos i have used prrops

[@neilmerchant2796]

Love the background tunes, sounds like maybe Juche or some other wave music?

[@victormayowa2829]

Awesome video, good for beginner. I learnt a lot

[@codecommerce]

Glad it was helpful!

[@Moon-li9ki]

how this hasnt got 100k views? this is awesome!!!

[@codecommerce]

We are getting there!

[@fonsofulanito4752]

You are genius!! Thanks my friends!! The next going back to make press. 😂 💪

[@rasalahmed882]

Thanks a lot bro

[@tiltedriven2739]

thank you straight to the point

[@codecommerce]

Thank you!

[@michaelhofby]

Thanks man for showing it like this .. How to use Tailwind CSS with React because that was something i couldnt really grasp before watching this video.. I am trying to pump out projects here and not sitting and fiddling with vanilla CSS for hours :D ... Thank you man . More React stuff with some javascript functionality would be cool .. Nothing too big , but just to get the idea of how dom manipulation works in React would be very useful!

[@codecommerce]

I’m loving tailwind css. Super quick when throwing things together!

[@ufuktekin3465]

you are amazing thanks for everything

[@codecommerce]

Thank you

[@feastofsteven1214]

Thanks for the tutorial! Curious how you would approach having the navbar expand on the right side of the page, as opposed to the left? As it is, the close function won't work because the menu covers up the close icon. Seems like it should be an easy fix, but I'm so new I can't imagine it -- is it a z-index thing? Or do I need to use router?

[@ghashanti]

Awesome stuff!!

[@codecommerce]

Thanks!

[@daphnesplyntr]

Really helpful. Thank you.

[@codecommerce]

Glad it was helpful!

[@anshulmady2211]

What wait why I didn't come accross this wonderful tutorial and channel... You saved me man.. I was really finding it hard to manage react but your tutorials gave me confidence and knowledge... One request can you provide a tutorial on multiple page dynamic website with backend and frontend please using tailwind css. Please 🙏 Thank in advance...

[@codecommerce]

You're very welcome! I will man!

[@t9fiction]

Loved it

[@suciu4644]

Hi , have you considered using tailwind styled components?

[@godsonpius8829]

Awesome Code Commerce. Very nice and inspiring video

[@codecommerce]

Glad you liked it!

[@heidelol6184]

Awesome content bro!

[@codecommerce]

Thank you dude! 🙏

[@ashikiqbal929]

Awesome video!

[@codecommerce]

Thank you my friend!

[@superboxes69]

New drinking game to get drunk fast: take a shot everytime he says "you guys" great video, thank you.

[@codecommerce]

😂