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

[@AndersonLenz]

Hello, Typed is now ReactTyped.

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

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

[@priyaanshhuu]

Just the video i wanted of React and Tailwind, beginner-friendly, and smooth website! Enjoyed making it!

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

[@dolapoaraoye8124]

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

[@swoopingio4311]

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

[@codecommerce]

Thanks!

[@justinrast6122]

Learned so much from this video, good stuff! Subbed

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

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

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

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

[@tosin_atere4499]

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

[@delsananthony.official]

Thanks for the video. Clear and concise instructions.

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

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

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

[@EloyMartinGimenez]

Wow, the extension pesticide is really cool! thanks!

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

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

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

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

[@ismafauzan8330]

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

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

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

[@Sublime_Unknown]

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

[@codecommerce]

Thank you Kian!

[@BrawlStars-kd7vi]

Thanks for making such a great video, I am searching for video to start learning tailwind with react

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

[@Shadow-fw9qc]

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

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

[@imryoko]

I was able to follow your tutorial ! this is greate

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

[@dusanjarkovsky4]

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

[@gabrielc1095]

Your videos rock man! Thanks for the sweet tutorials.

[@codecommerce]

My pleasure dude!

[@niteshprajapat.d3v]

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

[@beautyoftharparkar-in8ki]

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

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

[@nkosinathitrevor-nc7zq]

first time trying tailwind i thought it was going to be hard amazing work

[@txmw4464]

Awesome tutorial man!

[@casmirugbong8663]

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

[@codecommerce]

Sure will - thank you!!

[@muhammedmusarraf3161]

The energy throughout the video🔥

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

[@Vkta]

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

[@codecommerce]

Thanks again dude!

[@yacineelhafidy5710]

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

[@zayyynull_]

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

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

[@kenthankgod2619]

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

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

[@sdfsdfdsdsfdsf5636]

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

[@nerd3131]

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

[@codecommerce]

Awesome man. It's not super difficult!

[@FarhanAli-iu9dp]

love you sir i really appreciate your work.💕

[@graciouskingsley6893]

Great one ! 🎉

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

[@nemzyxt]

I love this, thanks man

[@Incognito-gs7qx]

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

[@sudiptaanirban8833]

Great learning experience, thanks man

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

[@oladayomichael1304]

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

[@saepuloh475]

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

[@leandrojackson9631]

Amazing result!!! Thank you!

[@codecommerce]

Thank you Leandro!

[@takemjim]

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

[@codecommerce]

thank you!

[@skreddysasi3404]

Thanks for this insightful Video💯💯🚀

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

[@santiagoguastavino346]

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

[@codecommerce]

Hahaha dude that’s funny 😆

[@syedusmanhassan]

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

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

[@BelieveInYourSelf7654]

Your tutorials are really awesome brooo....

[@fonsofulanito4752]

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

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

[@asmarali4167]

Awesome Stuff !

[@daspov4709]

thank you , I learnt a lot.

[@chinmayharane7304]

Proud of you my son, keep banging.

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

[@elioscipioni]

Great video!!

[@Moon-li9ki]

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

[@codecommerce]

We are getting there!

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

[@emmanueljoseph5352]

I`m loving this

[@neilmerchant2796]

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

[@georgepynadath2025]

Loved the video. Thank you so much

[@codecommerce]

Thank you!

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

[@melissag3793]

Thanks so much! Great tutorial.

[@codecommerce]

You're very welcome Melissa!

[@prakashnavin6245]

very nice project lots of love and respect from India

[@victormayowa2829]

Awesome video, good for beginner. I learnt a lot

[@codecommerce]

Glad it was helpful!

[@NhanNguyen-yu3gs]

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

[@codecommerce]

You can do it my friend!

[@ghashanti]

Awesome stuff!!

[@codecommerce]

Thanks!

[@tchisama]

i really loved your video

[@codecommerce]

Thank you sama!

[@user-pz4rj9cp5w]

Really Great Content 👌👌

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

[@tiltedriven2739]

thank you straight to the point

[@codecommerce]

Thank you!

[@godsonpius8829]

Awesome Code Commerce. Very nice and inspiring video

[@codecommerce]

Glad you liked it!

[@ahmetyilmaz3896]

Another great React project :)

[@codecommerce]

Thank you so much Ahmet!

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

[@y2b5]

Really helpful. Thank you.

[@codecommerce]

Glad it was helpful!

[@heidelol6184]

Awesome content bro!

[@codecommerce]

Thank you dude! 🙏