React JS & Tailwind CSS Responsive Website - Beginner Friendly
HTML-код
- Опубликовано: 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
![DRAGON BALL: Sparking! ZERO - Fused Warriors Trailer [BUDOKAI TENKAICHI Series]](http://i.ytimg.com/vi/84p4Lvyfyes/mqdefault.jpg)
@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 !
Dude you talk like a marvel character, your video definitely helped lots😂
Wanted to get an introduction to Tailwind combined with React. Your video was perfect for this. Thanks !
This is on another level. Amazing content and great UI design.
I really enjoyed coding along.
Give us more please
Man, this is such a valuable resource right here. My first React project and I am so glad I came across this video.
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!!
One of the best tailwind tutorial out there! Great job
Just found your channel and have been really enjoying your project ideas & videos. Keep it up! 🤙
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
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!
Wow, the extension pesticide is really cool! thanks!
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!
Superb video!!, I'm new to tailwind and was looking for a simple tutorial like yours. Great job
👍🏽👍🏽
Learned so much from this video, good stuff! Subbed
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 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!
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!
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!
Man you are amazing! Great explanation! Good job! You are the best!
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!
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!
Thanks a lot, it helped me to get a good idea about tailwind
This is exactly what I was looking for! So excited to watch :)
Thanks!
your react / tailwind css content is the best on youtube! i am learning alot from you. thanks alot!
Dude that's incredible! Thank you!
Amazing content !! Your videos have really helped me a lot thanks so much 😊
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 ❤
The energy throughout the video🔥
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!
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!
Your content is on point and quite easy to understand. I got more out of this than i expected. Thanks a lot.
Thanks dude!
I was able to follow your tutorial ! this is greate
you're the best bro, i really appreciate your effort
Amazing content and great UI design.
lot of thanks...
Great learning experience, thanks man
Loved this project 🤩😍
Learnt something new
Thank you Sir😇
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.
You've actually got so quality stuff on your channel. Keep that up man!
Great video! A lot of value in this video! Keep up the amazing content!
Thank you Kian!
Bloody well done sir, bloody Well! Done! 👏👏👏
Your videos rock man! Thanks for the sweet tutorials.
My pleasure dude!
I couldn’t help but too smash that like button after that navbar transition, my god this is good stuff
Haha thank you dude!!! 💪
Thank you very much for this video. It's helping me a lot.
Big thank you bro. I just know tailwinds is awesome!
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!
very easy to understand so glad.
Surprisingly It didn't get me overwhelmed
Awesome man. It's not super difficult!
The best REACT tutorial I've ever had!! Thanks for your video. I'm gonna watch another videos, too!!
Thank you dude!! Awesome!
love you sir i really appreciate your work.💕
Amazing result!!! Thank you!
Thank you Leandro!
Great video!!
Thanks a lot Man!!!
Big salute to you.
followed along and i must say this is the best beginner friendly React stuff on RUclips
Thanks again dude!
You're the best man, you've made life easy for me
I`m loving this
clint, you're perfect! I made some changes in your code and write the code with typescript react! thank you man
Thanks dude!
Thanks for this insightful Video💯💯🚀
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!!
Your videos are very helpful. Thank You. Appreciating your work and wishing your channel get 1 million subscribers soon..
So nice of you
Well done clint your videos are really helping me. Keep creating react and tailwind css videos only😃😃😃
Sure will - thank you!!
I love this, thanks man
Your tutorials are really awesome brooo....
thank you , I learnt a lot.
Man your content is the best, a big shout out to you🙌🙌
thank you!
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?
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.
Loved the video. Thank you so much
Thank you!
Awesome Stuff !
Thanks so much! Great tutorial.
You're very welcome Melissa!
Proud of you my son, keep banging.
I love your video! Thank you for the good job.
Do you have tutorials on solidity??
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
You are genius!! Thanks my friends!! The next going back to make press. 😂 💪
Thank u so much for this effort, if possible kindly make a course on tailwind and complete MERN
I woke up, and here again a new video from view bot king! Great mood for the whole day!
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!
Love the background tunes, sounds like maybe Juche or some other wave music?
Awesome stuff!!
Thanks!
Really Great Content 👌👌
Awesome video, good for beginner. I learnt a lot
Glad it was helpful!
i really loved your video
Thank you sama!
Loved it
Really helpful. Thank you.
Glad it was helpful!
BOOM very easy.
Thanks dude. You're that meme of the Chad in the Computer helping others.
Hahaha dude that’s funny 😆
spending one day to build it for myself, but it was wonderful experience! thks
You can do it my friend!
thank you straight to the point
Thank you!
Amazing. Thanks a lot.
You are welcome!
great video bro! also a question, where do you always get the images from - from a stylistic perspective to match with the theme colors?
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?
Awesome content bro!
Thank you dude! 🙏
how this hasnt got 100k views? this is awesome!!!
We are getting there!
Awesome video!
Thank you my friend!
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 Code Commerce. Very nice and inspiring video
Glad you liked it!
Amazing video
22:57 thanks for explaining so easily this step
Thank you Sara :)
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!
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?
great tutorial
you are amazing thanks for everything
Thank you
Another great React project :)
Thank you so much Ahmet!
Amazing content.
Thanks!