React JS & Tailwind CSS Responsive Website - Beginner Friendly
Вставка
- Опубліковано 13 кві 2022
- 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
This is on another level. Amazing content and great UI design.
I really enjoyed coding along.
Give us more please
Wanted to get an introduction to Tailwind combined with React. Your video was perfect for this. Thanks !
Man, this is such a valuable resource right here. My first React project and I am so glad I came across this video.
Hello, Typed is now ReactTyped.
Just the video i wanted of React and Tailwind, beginner-friendly, and smooth website! Enjoyed making it!
One of the best tailwind tutorial out there! Great job
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!
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
Thank you Steven!
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
Wow, the extension pesticide is really cool! thanks!
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.
Thank you dude!
Just found your channel and have been really enjoying your project ideas & videos. Keep it up! 🤙
your react / tailwind css content is the best on youtube! i am learning alot from you. thanks alot!
Dude that's incredible! Thank you!
Superb video!!, I'm new to tailwind and was looking for a simple tutorial like yours. Great job
👍🏽👍🏽
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.
Are you Maphew Martini?
@@supreior1181 no
Thank you Mike. It’s crazy how fast you can write and style these pages using tailwind!
just finished to view (and build) it all . great video!!!! maybe the best tutorial of how to use Tailwind with React. thanks a lot!!
Thank you my friend!
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!
Thank you Lurkuh!
This is exactly what I was looking for! So excited to watch :)
Thanks!
Thanks for the video. Clear and concise instructions.
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!❤️
Glad it was helpful! thank you!
Learned so much from this video, good stuff! Subbed
I couldn’t help but too smash that like button after that navbar transition, my god this is good stuff
Haha thank you dude!!! 💪
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 ❤
Les goo, man you are awesome, been following your videos the past few days trying to learn react and tailwind. Awesome stuff.
Awesome! Dude thank you!
Man you are amazing! Great explanation! Good job! You are the best!
Dude you talk like a marvel character, your video definitely helped lots😂
The energy throughout the video🔥
The best REACT tutorial I've ever had!! Thanks for your video. I'm gonna watch another videos, too!!
Thank you dude!! Awesome!
Your content is on point and quite easy to understand. I got more out of this than i expected. Thanks a lot.
Thanks dude!
Amazing content !! Your videos have really helped me a lot thanks so much 😊
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 ✌️
Glad it was helpful!
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.
followed along and i must say this is the best beginner friendly React stuff on UA-cam
Thanks again dude!
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
Haha! That’s awesome man!
Great one ! 🎉
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
Thanks a million!!
very easy to understand so glad.
Surprisingly It didn't get me overwhelmed
Awesome man. It's not super difficult!
Loved this project 🤩😍
Learnt something new
Thank you Sir😇
Awesome tutorial man!
Amazing content and great UI design.
lot of thanks...
Bloody well done sir, bloody Well! Done! 👏👏👏
You've actually got so quality stuff on your channel. Keep that up man!
I woke up, and here again a new video from view bot king! Great mood for the whole day!
Thanks a lot, it helped me to get a good idea about tailwind
Great video! A lot of value in this video! Keep up the amazing content!
Thank you Kian!
Proud of you my son, keep banging.
clint, you're perfect! I made some changes in your code and write the code with typescript react! thank you man
Thanks dude!
you're the best bro, i really appreciate your effort
Your videos are very helpful. Thank You. Appreciating your work and wishing your channel get 1 million subscribers soon..
So nice of you
I was able to follow your tutorial ! this is greate
Well done clint your videos are really helping me. Keep creating react and tailwind css videos only😃😃😃
Sure will - thank you!!
Thank you very much for this video. It's helping me a lot.
You're the best man, you've made life easy for me
Your videos rock man! Thanks for the sweet tutorials.
My pleasure dude!
Thank u so much for this effort, if possible kindly make a course on tailwind and complete MERN
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.
@27:58 If you can't install the "react-typed" package try this command : `npm install react-typed --force`
Thank you for the add :)
Thank you !
Big thank you bro. I just know tailwinds is awesome!
Thanks a lot Man!!!
Big salute to you.
very nice project lots of love and respect from India
Thanks!! For a first contact with tailwind, it was really cool and its way easier than pure css & javascript hahaha Great tutorial
Thank you Isabel!
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❤
Thank you so much Salman! Tailwind is great. It makes it hard to go back to writing normal CSS.
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?
BOOM very easy.
Thanks dude. You're that meme of the Chad in the Computer helping others.
Hahaha dude that’s funny 😆
You are genius!! Thanks my friends!! The next going back to make press. 😂 💪
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.
the best channel i've ever found. amazing! thank u for so much knowledge, u are helping me a lot! :D
Thank you so much Harveey!!
wonderful first time using Tailwind and I'm already in love LOL
It's so good! I use tailwind all the time if I can lol
Amazing result!!! Thank you!
Thank you Leandro!
I love your video! Thank you for the good job.
Do you have tutorials on solidity??
Thanks for this insightful Video💯💯🚀
Great learning experience, thanks man
how this hasnt got 100k views? this is awesome!!!
We are getting there!
love you sir i really appreciate your work.💕
Awesome Stuff !
You are the only youtuber I watch React tutorial of. Everytime I learn something new. You are the best man ❤
I appreciate that! So awesome!
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?
Man your content is the best, a big shout out to you🙌🙌
thank you!
Your tutorials are really awesome brooo....
I love this, thanks man
spending one day to build it for myself, but it was wonderful experience! thks
You can do it my friend!
I`m loving this
great video bro! also a question, where do you always get the images from - from a stylistic perspective to match with the theme colors?
Love the background tunes, sounds like maybe Juche or some other wave music?
Great video!!
New drinking game to get drunk fast: take a shot everytime he says "you guys"
great video, thank you.
😂
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....
Awesome video, good for beginner. I learnt a lot
Glad it was helpful!
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?
Loved the video. Thank you so much
Thank you!
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...
You're very welcome! I will man!
Thanks so much! Great tutorial.
You're very welcome Melissa!
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!
I’m loving tailwind css. Super quick when throwing things together!
Really Great Content 👌👌
i really loved your video
Thank you sama!
thank you , I learnt a lot.
Awesome Code Commerce. Very nice and inspiring video
Glad you liked it!
Awesome stuff!!
Thanks!
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
Hey man, i got an issue with the navbar where it doesn't go away on a smaller device when i click a item
Loved it
Amazing video