React Responsive Gym Website Tutorial Using ReactJs | React js Projects for Beginners | Deploy
HTML-код
- Опубликовано: 2 июн 2024
- In this Reactjs project, we will make an awesome responsive gym website step-by-step. We learn React hooks, modern CSS, framer motion, and many more. For contact, we will use the Email js library to make this site more functional and practical.
No prior knowledge of react is required to follow this project. The project is surely suitable for beginners.
Demo: fitclub-1my.pages.dev/
FitClub Starter: github.com/ZainRk/FitClub-Sta...
Complete Source Code + Figma file: / zainkeepscode
Support on Buymeacoffee: www.buymeacoffee.com/zainkeep...
Time Stamps:
00:00 Intro
02:36 Contents
03:20 Starter Overview
07:10 Hero Component
40:15 Programs Component
49:01 Reasons Component
1:02:42 Plans Component
1:13:50 Testimonials Component
1:28:06 JoinUs Component
1:39:47 Footer
1:43:55 Blurs
1:49:54 Adding Animations
1:57:15 Making Responsive
2:16:44 Auto Scroll
2:19:45 Counting Numbers
2:21:20 Deployment
INSTAGRAM :
/ zainkeepscode
FACEBOOK:
/ zainkeepscode-10757083...
I have learnt more shortcuts and optimisations in the first 15 minutes than in the last 2 months with other tutorials. Hat's off dude, and thank you - I am having so much fun with this tutorial.
Your UI design always looks phenomenal. Please make more tutorial with in-depth UI experience explanation.
Thanks for sharing your knowledge with us! The project is amazing! 🤩
Your design looks very beautiful to eyes and your way of coding is also good. Thanks man learnt new way to write html and css will be looking forward to your other videos.
Looks stunning mate, good job 🔥
Very wonderful tutorial. Keep up the good work!
Oh Great, Awesome UI man, so finally I found someone from Pakistan, who actually talks about programming.
Really Thank you man, I'm looking for good React UI design with good explnation for long time. but, yours is far more than best. Thank you so much man. Mazing Project 🤩
estou obtendo um enorme aprendizado com esse video, obrigado por compartilhar conosco Zainke!
I really appreciate your outstanding work. You've really helped me out. Subbed.
Thanks a lot! This is a very useful tutorial. I really learned many cool things from it. Please do not stop. Your content is really great👍
i have learnt a lot from this tutorial, i can only say thanks. i was a beginner while starting the tutorial but i feel like amn't a beginner anymore😛, hats off sir🖖🖖
The design looks soooo beautiful!!!
Thank you!
I have enjoyed this one, you have earned yourself a subscriber. I am happy
Great tutorial sir 😍🔥👌 Learned many new concepts from you!
I really appreciate this channel . It is so support for beginners.thanks you so much , good job bro
Thank a lot bro Very very thanks a lot I was stuck with smoth scrolling for 4,5 days. The scrolling you mentioned in this project solved my error. Again Thanks a Lot Bro😊
Big design, thank you for the tutorial. 🎉
I like how all your designs are glass like
very good video
this is the first video I saw on your channel and what a bomb video
keep up the good work
Awsome video i just search react js project and i find your video. Now i love your video the way your make your website creative😍.I wish you make video on design template , react js and many more through which you and we can learn and practice. Keep growing❤️
muchas gracias amigo!! por compartir tu conocimiento sigue haciendo mas contentido!! 👏👏💪
Such a helpful video. Thanks buddy
Good work sir I watched Your Chanels layout designs and it is a very easy to learn but this is not possible about your hard work, so thank you.
Hey there ... I really enjoyed this tutorial... Such an amazing project n Yuh explained it so nicely ... Thnkew very much ... Keep smiling dude
Im here for an inspiration of black colored website and boy i dont get how you guys are so good at designing wow
if this had a scheduler by appointment it would of been even more next level
Alhamdulliah, fantastic design , i watch full video , make this kind of cool videos bro,
This video made my day . Thanks😍
Vip ❤❤❤🔥
Aesy hi Modern design laty raho bro 👍
i love your design
freaking amazing bro.
Really awesome tutorial.
thankyou so much I learned and revise lot of things
Buht Awlla Zain.. Keep it Up.
Thank you so much for this video finally I completed the project and the website is looking awesome
how can i connect you biro
you post it on git?
Best Tutorial ever
Thank you so much👍 I've learned a lot from this tutorial
You're very welcome!
Thank You So Much Man :)
Thank you. You are awesome.
Thankuu soo much for this amazing project.. successfully Deployed🥳✌🏻
Hey Shubhodeep? Good to know that you have done the project. Would you be interested in job/internship opportunities in software development?
@@Hafsa0526 Yes mam. Sure
@@shubhodeepbanerjee2004 Hey Shubhodeep, thanks for responding. You can connect with me using the contact information in my channel for more discussions on the opportunities.
@@Hafsa0526 do u still have oppurtunities?
@@Hafsa0526 I'm also intrested in intership
I am your new subscriber thank you so ❤️❤️❤️❤️❤️ much for this topic
Please keep going I want to learn from you ❤️❤️❤️
it's brilliant, I'm going to create this and make this my upwork portfolio, hehe
Have fun!
awesome tutorial
Thank you very much, you are great to share the source code.
hông
Really helpful 👍
EXCELENTE APORTE APRENDI BASTENTE MI ESTIMADO ESTOY MUY AGRADECIDO SIDA CON ESTE CONTENIDO QUE SE GANO UN FIEL SEGUIDOR
Amazing. I just started learning code and this is a full guide for me, keep up the good work man.
Ps. Can you make a video of your vs extensions and snippets pls?
+1 can you make video about your vsc setup?
Yes we need this
Bro Your videos are really amazing!
Glad you like them!
@@ZAINKEEPSCODE There is no doubt your videos are likable !!!
Thank Sir really appreciated
Looking good.
Amazing 😍
Awesome!
RAEALY HELPFULL MAKE MORE
Oh that's nice idea paste reactjs in simple html page))) Use VANILAJS framework for sites like this in future)))))))
Please Stripe Integration, this project is perfect for that :)
Nice work ! did you used nodeJS and sql for database ?
Thank you for make this video! I have a question. if you make this web site, how to get IMGs, body content, icons and so on?
You're the best. One question, are the components you're creating called "function components" as they don't have a state and are not classes?
thank you very much bro
Thank you!
amazing website my dear friend, I'm your big fan from tamilnadu ,india....💙💙💙
Thanks
Me also tamilnadu nanba
@@vetrisuriya4702 sema thala💙💙💙
wow thanks sir
good work
sir it's amazing video lectures
Thanks for liking
Hi. Nice and perfect.
Can you please give us your vscode extensions setup?
You only not got a new subscriber bro you got a new fan, please keep making tutorials like fir beginners
Amazing sir.
Thanks a lot
Broo so fking cool...😍😍💫
Successfully Deployed ❤🎉
Hey could you please share the Github link for the project, if you have completed it btw congrats for the same!!!!
good job
Wow👍👍
wow, really helpful
Hello Kapil. Good to know that online tutorials are helping you out. Would you like to explore opportunities in software development?
@@Hafsa0526 what kind of opportunities?
@@KapilKumar-hk9xk Hey Kapil. We provide internship/job opportunities in software development.
For further discussions, you can connect with me using the contact information in the 'About'section of my channel.
hi. please can some one help me identify where/when the styling for smooth was added?? he said in the "GENERAL STYLING" thank you. great vid by the way!
Well, why is React so complicated and it has lots of components to work with? Can this be designed without React, Using HTML, CSS and JS? Btw, This a awesome tutorial. Beautiful and elegant design. Thanks for this beautiful content. Keep up your good work. God Bless you. 😍
India never fail.
cool!!!
.Figures >div > span{
} which type of selector it is in css? I see this first time it's special for react or general css selector? i.e name of selector.
perfect.
great
Wait I have a question. in 4:40, Is yarn necessary? Or can i just use "npm i" ?
Brilliant video, learnt a lot.
Just one little issue CSS mix-blend-mode: overlay; does not work on Safari.
thax! You good. I've got a white blank on my Iphone 'cause of this overlay. But not only Safari and for Chome on IOS also has the same problem. When I commented the row then the app is getting work correct. For the same visual effect I had to play around with z-index prop. but the app works. By the way the blur also should be reduced below 100px to avoid a color distortion. I experienced Mobile view extension and a real device on IOS give not the same results so be aware.
thankyou so much man, can i ask you how to make email dissapear when we click send?
nice
In firefox some styles are weird, specially footer section. Overall it's a good project
Hello, nice work, but I have a question, why the react app is not working on iphone with chromes or safari
That's we call hard work
Is your project work
please make more such beautiful projects on reactjs
Hey Manish. Do you usually learn from such tutorials? Have you created any projects in React Js? Are you a fresher and open to opportunities in web development?
@@Hafsa0526 yes..I am looking for internship.. and yes..I have made some projects on reactjs
@@manishkumar-bw5iv Thanks for responding Manish.
To have further discussion about the opportunity in web development, you can connect with me using the contact information in the 'About'section of my channel.
This project has been completely very smoothly, thankyou.
but advance react is not used.
Thanks for this great tutorial.
i catched error in testimonials image slide when i click next button(pass third image).I thought it will return first image but didnt work.
Solution:
fore prev- onClick={() => {
setSelected(selected === 0 ? length - 1 : selected - 1)
}}
for next-onClick={() => {
setSelected(selected === length - 1 ? 0 : selected + 1)
}}
@ZAINKEEPSCODE May be some one has the same problem. When I start this page with a mobile resolution it always shows opened the burger menu and it doesn't close with a click on any header link. Only when I make restart of the page then it is getting work correct. It seems that useState(false) in the Header.jsx doesn't get false. I wonder if I set useState(true) there will it work. I dont know why but in this case it works correct with closing burger menu when click on a link. Hepl me to fix this bug.
Excellent project. However, the project does not render in Safari. Have you tested it?
This is very helpful.. can you tell me how can I suffix in counting numbers. I tried adding like this, but it's not working
Hey Buddy Can u Make a Background image slider after a navbar componant plz with auto slide effect and each bakground has its own text
The website is too good.
sir please tell that what is motion that you have imported??
Finished and deployed successfully, jus that I missed something on the email aspect....
I just come at this video becoz of his keyboard sound
So beautiful I just stared
can somebody help me why my mapped array of features is not getting rendered I cant see them