React Website Tutorial With Tailwind CSS - Beginner React Mobile Responsive Project

Поділитися
Вставка
  • Опубліковано 11 січ 2025

КОМЕНТАРІ • 203

  • @mueletech
    @mueletech Рік тому +2

    You forgot to code the search button functionality, however i can add. This was the best VIDEO EVER. I FOLLOWED CZ I had zero knowledge in tailwind, but now i see myself being good at tailwind.

    • @codecommerce
      @codecommerce  Рік тому

      Glad it helped! You could use a filter method.

  • @milessteamaccount
    @milessteamaccount 2 роки тому +13

    Thanks for these coding videos man. I code along as I watch these videos and not only do I Iearn a lot but I also get inspired and motivated (even if it's temporary) to create my own projects. Keep up the great work

    • @codecommerce
      @codecommerce  2 роки тому +2

      Thank you so much dude! Keep it going and build out some projects!

  • @tiagocosta2689
    @tiagocosta2689 2 роки тому +1

    One more project completed. You are definetly changing people's lives. Thanks for that

  • @alejandroszg
    @alejandroszg Рік тому +1

    What an amazing tutorial! It's very useful for me as a beginner with React and Tailwind CSS! Thank you so much and keep going!

  • @jeffwang8660
    @jeffwang8660 2 роки тому +2

    Thanks mate! This is amazing and the best Tailwindcss/React tutorial I have seen! You explained thing clearly and mentioned those little tricks as well. It is really friendly to beginners. Highly recommended!

  • @ramasai2576
    @ramasai2576 Рік тому +1

    first time i have done something completely... thanks you very much

  • @t.lanette4049
    @t.lanette4049 Рік тому

    Your tutorial was awesome! It helped me to get reacquainted with ReactJS and learn how to use Tailwind CSS. Thank you for providing the link to your Github. If I missed a step it was helpful for me to go back and check your code.

  • @alnomancs
    @alnomancs Рік тому

    This is a great lesson for me. After learning the basics of tailwind, this is my first project, making me more confident about tailwind used in react project. thank you so much, sir.

  • @youngwolf1009
    @youngwolf1009 2 роки тому

    Your videos are both a mix of a course and a tutorial, you have a gift bro. Wish i discovered your channel before waisting my time on videos like Learn React/Javascript in 9855684 hours

  • @mtycoder
    @mtycoder 2 роки тому

    done, literally you are becoming my favorite youtube dev channel!!!

    • @codecommerce
      @codecommerce  2 роки тому

      Thank you so much Oscar! That is 🔥 🔥

  • @mrnabby4178
    @mrnabby4178 Рік тому +1

    You are the best teacher bro and absolutely beginner friendly. I have learnt so many things from you. Thanks for your contribution bro.

  • @chrisc.4144
    @chrisc.4144 2 роки тому

    Tons of fun and value following along with this. Thank you!

  • @RajeshKumar-uw9qi
    @RajeshKumar-uw9qi 2 роки тому +2

    Always choose awesome design and well explained.
    My big thanks. Have a good day 😊

  • @dilanpriyankara1158
    @dilanpriyankara1158 Рік тому

    Thanks bro! This is amazing and the best tutorial I have seen! You explained thing clearly and mentioned those little tricks as well. It is really friendly to beginners. Highly recommended!

  • @Mahmoud_A999
    @Mahmoud_A999 2 роки тому

    I found good videos here .. i wish you good man and i wish more people to see your awesome videos

  • @manuudeluca
    @manuudeluca Рік тому

    Thank you for this video! Wanted to try doing my first project and was so fun!

  • @abelayalewt
    @abelayalewt 2 роки тому

    this is the best project for Beginners like me, easy to follow and everything is straight forward. Thank you!

  • @ahmetdikbayir6518
    @ahmetdikbayir6518 Рік тому

    Thank you so much. Your videos are really useful for beginners. I learn too much new information from these.

  • @panayiotisnicolaou7837
    @panayiotisnicolaou7837 6 місяців тому

    Thanks man, you are helping people actually to learn

  • @vladv5530
    @vladv5530 2 роки тому

    It's a great tutorial! Easy-to-catch given info & very nice project as a result of studying. Thank you very much, Clint! You've done a great work. I appreciate your help in learning React. Greetings from Ukraine!

    • @codecommerce
      @codecommerce  2 роки тому

      Thank you so much Vlad! Much love!

  • @OmriAlter
    @OmriAlter Рік тому

    Thanks you really helped me with Tailwind I love you (Just like that!! )

  • @oluwaseunajibowo7422
    @oluwaseunajibowo7422 Рік тому

    Thanks for this tutorial,you nail it 😊
    I learnt alot from this, i am looking forward to seeing more react js tutorial from you. thanks!

  • @leandropedicino920
    @leandropedicino920 2 роки тому

    Grear tutorial, perfectly explained and very helpful to understand more about Taiilwind aswel as React. I really appreciate the content that you do, helped me a lot to improve my skills.

    • @codecommerce
      @codecommerce  2 роки тому +1

      Thank you Leandro! That’s awesome man.

  • @myytkn8526
    @myytkn8526 Рік тому

    I always have to watch and recreate your videos. After watching, I can't try it myself. I learned some React before that I learned JS which I need for React but sometimes I get stuck. Can you please make a long video with React and Tailwind about exactly what Tailwind does in React and React also do something with React and Tailwind video? Lots of examples would be really nice. Otherwise great video keep it up.

  • @zobaerahmedzihad7805
    @zobaerahmedzihad7805 2 роки тому

    WOW....!! That's a great project. I loved your content. Go ahead.
    Love From Bangladesh.

  • @anujadi8366
    @anujadi8366 2 роки тому

    Thanks for sharing these amazing tricks in tailwind with a great explanation best tutorial for beginners in react especially from design point of view

  • @mehrdadmousavi9144
    @mehrdadmousavi9144 2 роки тому

    It was Great Bro, I was coding line by line with you, thanks a lot for perfect training

  • @k303k
    @k303k 2 роки тому

    Very clear explanation sir.Much appreciated!!!

  • @heidelol6184
    @heidelol6184 2 роки тому

    Awesome project! awesome job man, definitely i been learning a lot with this little project videos! keep up the work man!

  • @vatansrivastava7279
    @vatansrivastava7279 2 роки тому

    Thanks Client.. This was a very easy to follow and beginner friendly tutorial. Bring More videos cause it's been months you did'nt uploded any tutorial like this.

    • @codecommerce
      @codecommerce  2 роки тому

      I have some coming sir!

    • @vatansrivastava7279
      @vatansrivastava7279 2 роки тому

      @@codecommerce Thank you! Waiting for it. You are just a magician at the time of explaining the concepts.

  • @entrinsek9230
    @entrinsek9230 Рік тому

    Great course dude follow your instructions

  • @jose-kb1dg
    @jose-kb1dg 2 роки тому

    Thank you for the tutorial. This is what i was looking for, easy explained and not several hours long tutorial This opens a lot of ideas how to make different frontend projects. I was just wondering if you will post a full front and backend project soon. Thank you once more :)

  • @GameDevlaund
    @GameDevlaund 2 роки тому

    Hey Clint, great content as always. Cheers from Turkey

  • @funfailclips5048
    @funfailclips5048 10 місяців тому

    thank you so much brother this is really friendly to beginners. Highly recommended!

  • @sthefanocarvalho2823
    @sthefanocarvalho2823 2 роки тому

    You're aweome.
    keep it up!
    Thank you :)

  • @Umairkhan-g2p1g
    @Umairkhan-g2p1g 10 місяців тому +1

    COMPLETED

  • @sanzous
    @sanzous 2 роки тому

    Thanks for the great content as always man!

  • @randomsounds.844
    @randomsounds.844 2 роки тому

    Awesome tutorial. Thanks a bunch!

  • @bigdiaoge2036
    @bigdiaoge2036 2 роки тому

    Follow all the way, excellent teaching👊

  • @anifaster4717
    @anifaster4717 2 роки тому

    thank you for this amazing video your all videos can help me increase my knowledge of codimg

  • @paulolawale5104
    @paulolawale5104 Рік тому

    Awesome. Thanks for this amazing offer

  • @blertonrexhepi31
    @blertonrexhepi31 2 роки тому +1

    I really appreciate the effort you are making by making these kinds of videos that help us develop.

    • @codecommerce
      @codecommerce  2 роки тому

      Thank you Blerton- I enjoy interacting with you guys!

  • @properahmer
    @properahmer 2 роки тому

    Great video. I learnt a lot in a very short span. Keep it up...👌🙏👍

  • @pamelaafaneh7459
    @pamelaafaneh7459 2 роки тому

    Great stuff! Thank you!

  • @romimaximus
    @romimaximus Рік тому

    i came to see how to use Tailwind css, ... but i learned a whole a lot more than that...😂😂😂😂.... anyway, this an awesome tutorial !! , and thank you very much for sharing this great content... 😎👍

  • @amidoucisse4415
    @amidoucisse4415 2 роки тому

    Thanks for your tutorial I enjoy

  • @SagnikChakraborty-e3q
    @SagnikChakraborty-e3q 10 місяців тому +1

    Completed The Entire Video. Can I add this project in my resume?

  • @davifirmino8290
    @davifirmino8290 2 роки тому

    Thank you for the tutorial.

  • @sametx7048
    @sametx7048 2 роки тому

    thanks man you're number 1

  • @ufuktekin3465
    @ufuktekin3465 2 роки тому

    Thank you for everything again and again

  • @cryptoworld1984
    @cryptoworld1984 Рік тому

    i completed my first project with you thank you so much ,please make video with node js ,mysql ,mongo db (2024 january 07 )

  • @Lafsha
    @Lafsha Рік тому

    thank u, i learned so much

  • @zihadprogrammer4246
    @zihadprogrammer4246 2 роки тому

    Thank you so much for creating this.
    If you create this type of videos then we will be benefited more.💟

  • @vladislavmitkov1580
    @vladislavmitkov1580 2 роки тому

    Thank you for the tutorials. They are very helpful. It would be nice if you show how to make the filters working together.

  • @m__link6499
    @m__link6499 2 роки тому

    Love the way tou use the fliter method👍🏾

  • @xrdimCh
    @xrdimCh 2 роки тому

    Hello ! Thanks for these tutorials especially with tailwind css they are very usefull. In this video i would like to add on NavBar.jsx when navbar is show body scrolls and it's a bit annoying. I added
    useEffect(() => {
    if (nav) {
    document.body.style.overflow = 'hidden';
    } else {
    document.body.style.overflow = 'auto';
    }
    }, [nav]);
    so it doesn't scroll when the nav is not open.
    Thank you again and keep it up.

    • @codecommerce
      @codecommerce  2 роки тому +1

      I like that, thank you Xristos. You’re right, that is annoying.

  • @ebraraltunkaynak6438
    @ebraraltunkaynak6438 2 роки тому

    thanks man, u are the best

  • @nelohenriq
    @nelohenriq Рік тому

    Great work! Is it possible to evaluate this project for feching data from an api? Love to see you explain all that the way only you can!!! Make videos with client/server integration please!!

  • @mdsayem8893
    @mdsayem8893 2 роки тому

    You just killed it

  • @adebayosaadudeenadebayos-ho3up

    Great project and well explained, how about you set the functionalities for those navbar like search engines at the navbar where we can search for food item and also all the side bar functionality

  • @piyushverma6969
    @piyushverma6969 2 роки тому

    thank u so much sir have watched some of ur videos u made awesome Ui's

  • @jamjam3337
    @jamjam3337 2 роки тому

    Thank you for the tutorial👍

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Рік тому

    great work

  • @MusicMan483
    @MusicMan483 2 роки тому

    thank you man, as always

  • @nuveon8125
    @nuveon8125 Рік тому

    Fantastic Project Sir! How can I find a description how to deploy projects of myself on github for public?

  • @sunilhanss
    @sunilhanss 2 роки тому

    Thanks alot u are awesome 👌 really thank u from the core of my heart ❤️

  • @ElegantCoder
    @ElegantCoder 2 роки тому

    Besides learning React Js, these tutorials help you gain experience with Tailwind CSS, folder structure, and creating a website layout.

  • @algorithmtrader
    @algorithmtrader 2 роки тому

    FIRE CLINT BACK AT IT AGAIN!!!!!!!!!!!!

  • @Degamer790
    @Degamer790 Рік тому +1

    Thanks for the great tutorial! Can we use this project on our own portfolios?

  • @SugoiGaming.
    @SugoiGaming. Рік тому

    excellent content

  • @Akashcakes
    @Akashcakes 2 роки тому

    I enjoyed the class sir.... Thx for the video ✨

  • @buraksavkli2165
    @buraksavkli2165 2 роки тому

    Where you find ui examples all of your videos? May you share pls ?

  • @lautaroblasco
    @lautaroblasco 2 роки тому

    nice video

  • @lalagisaa
    @lalagisaa 2 роки тому

    U Deserve more mate

    • @codecommerce
      @codecommerce  2 роки тому

      We will get there my friend! Much appreciated!

  • @developedbyjs
    @developedbyjs 2 роки тому

    Can you please do more builds like this! Learned a'lot from this one

    • @codecommerce
      @codecommerce  2 роки тому +1

      I’m working on another one now sir! The design aspect is probably my least favorite part - it takes a while! 😆

    • @developedbyjs
      @developedbyjs 2 роки тому

      @@codecommerce Thank you so much! yeah that totally takes a'lot of time!! Really appreciate the value we get from every video you post.

  • @mostafababaei3431
    @mostafababaei3431 2 роки тому

    super informative and very valuable. Thanks man. Please build some projects with Redux and useContext as well.

    • @codecommerce
      @codecommerce  2 роки тому

      Will do sir! I have some usecontext videos in a few auth apps.

    • @mostafababaei3431
      @mostafababaei3431 2 роки тому

      @@codecommerce Thanks a lot

  • @tenc6491
    @tenc6491 2 роки тому

    Hi Clint, thank you so muck for this awesome tutorial as usual. learnt a lot from it. Youre right! Tailwind looks too intriguing and efficient.
    Thank said, might I ask if you could help create the "Search functionality" on this page please?
    We have the Search Bar but its there just for the sake of it, it seems.
    I tried workaround to enable the Search functionality but, I am absolutely new to React and sometimes, it overwhelms me. Please help if you can. Thanks a lot mate!

  • @MdShahidullah-di6fj
    @MdShahidullah-di6fj 9 місяців тому

    Thanks a million

  • @caglarkarahuseyin
    @caglarkarahuseyin 2 роки тому

    That is great content thank you very much. Maybe we should use gap or space-x/y class instead of margin flex items? What do you think?

  • @josephomotade864
    @josephomotade864 2 роки тому

    thanks for this one

  • @ronananderson
    @ronananderson 2 роки тому

    Awesome tutorial. However my app crashes after I filter. It will filter once than says too many rerenders. App crashes to prevent infinite rerenders. What could be my problem? I added a key=index. Could it have something to do with the arrow function? Thanks.

  • @mateuszlukaszczyk5359
    @mateuszlukaszczyk5359 2 роки тому

    love it

  • @_mustafa.571
    @_mustafa.571 2 роки тому

    Thanks man

  • @tiagocosta2689
    @tiagocosta2689 2 роки тому

    One suggestion: if you have the figma project link so we can follow better what step you are doing. Or the source of where you are getting th design from.
    Thanks !

    • @codecommerce
      @codecommerce  2 роки тому

      Thanks Tiago! I actually don’t have a figma design. I just design it as I go. (Prior to filming of course)

    • @tiagocosta2689
      @tiagocosta2689 2 роки тому

      @@codecommerce Congracts for the designs created ! They are great !

  • @naibkhan2145
    @naibkhan2145 8 місяців тому +1

    sir where you take this icons that's hard to find for beginner like BsFillCardFill

    • @codecommerce
      @codecommerce  8 місяців тому

      You can use different icons or a different icon library.

  • @wisdomelue
    @wisdomelue 2 роки тому

    nice one chief

  • @pinkimandal6842
    @pinkimandal6842 Рік тому +2

    Nice but something you created but not working like add to cart you make but not working ,sidebar you make but not responsive and search bar you make but not responsive .

  • @nandopookey9195
    @nandopookey9195 2 роки тому

    Thank you sir

  • @arturgorbunov3792
    @arturgorbunov3792 2 роки тому

    I would recommend you to use more semantic tags,
    and these nesting levels, em..., maybe code splitting is not so bad idea at all. :D
    I know here is more about Tailwind, it seems to me, btw thank you!

    • @codecommerce
      @codecommerce  2 роки тому +1

      You’re right Artur. I should use better semantic Html

  • @dalestewart
    @dalestewart Рік тому

    Smash the like button. Another professional real world application.👍

  • @mushthakmohd8195
    @mushthakmohd8195 2 роки тому

    Thank you🥰

  • @dimasnytin
    @dimasnytin 2 роки тому

    Great

  • @nandopookey9195
    @nandopookey9195 Рік тому

    Thank you

  • @saifulrasel6667
    @saifulrasel6667 10 місяців тому

    thank you boss

  • @vcodev108
    @vcodev108 2 роки тому +1

    I have basic experience when it comes to react can I still take this course?

    • @algorithmtrader
      @algorithmtrader 2 роки тому

      yes

    • @codecommerce
      @codecommerce  2 роки тому +1

      Thanks George! And yes this is a basic react video

    • @vcodev108
      @vcodev108 2 роки тому

      @@codecommerce Ok that was the thing that kept me from not taking now I can proceed, thanks to you both for guiding me.

  • @cjfranca2004
    @cjfranca2004 2 роки тому

    Amazing. Firts congrats for share a lot knowledge. 2s I not understand very good. The bakc and have in this video class too? If not, do you can build for the owner receive order information and payment confirmation by whatsapp?
    Thank you a lot.

  • @amalajoseph1328
    @amalajoseph1328 Рік тому

    Thankyou❤

  • @lalagisaa
    @lalagisaa 2 роки тому

    Sorry for asking, but could you implement redux as middleware instead of useContext for the next content, please?
    Need some practice about it tho 🙏👍

    • @codecommerce
      @codecommerce  2 роки тому +2

      Christian , I myself need some practice with redux. It’s coming soon!

  • @MushfiqFeed
    @MushfiqFeed 2 роки тому

    Is there any way to make filter without data.js file? I tried few days ago then I used JQuery 😢

    • @codecommerce
      @codecommerce  2 роки тому +1

      Hi Mushfiqur, are you referring to filtering through a bunch of static components?

    • @MushfiqFeed
      @MushfiqFeed 2 роки тому

      @@codecommerce yes

  • @shivamsharma-nw9ij
    @shivamsharma-nw9ij 2 роки тому

    please upload a video on masonry grid with tailwind css
    love from INDIA ✌✌

    • @codecommerce
      @codecommerce  2 роки тому

      So awesome dude!!! You’re amazing. I do love grid with tailwind!