React JS & Tailwind CSS Responsive Website - Beginner Friendly

267,605
0
Published 2022-04-14
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-2023

Coding Challenges!
bit.ly/Code-Challenges

Github repo 💻
github.com/fireclint/data-finance-react-tailwind

🔥 Connect with me on IG 🔥
instagram.com/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

All Comments (21)
  • @philippec4448
    Wanted to get an introduction to Tailwind combined with React. Your video was perfect for this. Thanks !
  • 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.
  • Man, this is such a valuable resource right here. My first React project and I am so glad I came across this video.
  • 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.
  • @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
  • 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
  • This is on another level. Amazing content and great UI design. I really enjoyed coding along. Give us more please
  • Dude you talk like a marvel character, your video definitely helped lots😂
  • @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
  • 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
  • @theifeanyi
    Your content is on point and quite easy to understand. I got more out of this than i expected. Thanks a lot.
  • @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!
  • @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.
  • @sekmekci
    @27:58 If you can't install the "react-typed" package try this command : `npm install react-typed --force`
  • @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!❤️
  • @priyaanshhuu
    Just the video i wanted of React and Tailwind, beginner-friendly, and smooth website! Enjoyed making it!
  • @dungvoduc7090
    your react / tailwind css content is the best on youtube! i am learning alot from you. thanks alot!
  • @alpha08
    Very great demo, thank you very much for your clear explanations!
  • @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.