I am here struggling trying to complete my assignment and u r having the time of ur life giving this tutorial and rejoicing that it looks pretty good.... well done
Best video I've seen on this. Really needed someone to get to the point in an easy to understand, concise manner and you did it. Cheers mate, much appreciated.
@@arslan99 somehow my code is not working at this point....page-container{ display: flex; flex-direction: column; min-height: 100vh; } .page-wrapper{ flex: 1; }
can you do an updated version? I tried cloning the repo, using npm install, and then npm start but it does not run. This site can’t be reached everytime I try to load the local host.
You can create a main component which will hold your footer and your nav bar and in between there is where you can put a route for the certain pages are on so you don't have to completely import it and export it every single time or you can just put it inside of your app.js file and put all your routes there and go from there there's a couple of ways to do it
My simple suggestion is that if you already have a typescript app then just rebuild the project in typescript from there try your best to guess all of the types and then you can always ask chatgpt to help you completely convert it
Hello Sir, the video is great but it's not working for me , I don't know why .main-footer{ background-color: teal; color: white; width: 100%; position: relative; bottom:0; } .page-container{ display: flex; flex-direction: column; min-height: 100vh; } .content-wrap{ flex: 1; } sir, please reply
Most likely you may have. A typo some where in you css but Make sure in your app.css file your .page-container( Display: flex, Flex-direction: column, Min-height: 100vh ) And your .content-wrap( Flex: 1 )
i had the same prob u need to tell your footer to position itself to the bottom, i added this and it works position:absolute; left:0; bottom:0; right:0;
Hey Eugene, this tutorial ruclips.net/video/C0U0GzuFkEM/видео.html is where the features.js file was made but you don't actually need it you can work in a brand new app in the file app.js :)
@@arslan99 no no no, i mean any js!!! when i start server it run navbar and footer, but content is empty antil i click link in navbar for example features, but how to make content not empty on start server
Okay if I understand correctly when you start up your app you see nothing at first except for a nav bar and when you click a link then you see stuff. If that assumption is correct most likely your root directory most likely you app.js file has no content except for your imported nav bar components. If it's not your app.js file try and find the file where you are only importing your Navbar and nothing else and you can edit that file to see changes when you startup your app
Thank you for the descriptive explanation, you saved me ton of time !
I am here struggling trying to complete my assignment and u r having the time of ur life giving this tutorial and rejoicing that it looks pretty good.... well done
Gotta vibe when making the tutorial 😩👌 but I hope you were able to compete your assignment
I know a lot of other people have already told you, but this was perfect. Super concise and to the point. Extremely helpful!
It means alot to me that i could help you 😃
Best video I've seen on this. Really needed someone to get to the point in an easy to understand, concise manner and you did it. Cheers mate, much appreciated.
Glad I could help you out 🙌
Thank you, really save me from hours of toggling CSS styles, without any result. Love ❤
I'm glad I could help you out 😃
Thank you very much for the explanation and also providing code , now able to understand more about react
Thank you sooooo much! You really saved my life! I wish I had watched this video before I spent my whole day wondering why my footer isn't working
Im glad it helped ya out!
Thanks dude, it was very helpful 🤘🏻
No problem 👍
Thanks a lot bro! I was stuck with a stupid footer that wouldn't stay at the bottom and now you have saved my life!
Glad I could help!
This is perfect! thanks! it helps me a lot
I'm glad it helped 😀
Super helpful, thank you so much! Spent over a day working on this, and this video fixed me up in under 20 minutes!
Np
Thank you very much for your amazing tutorial!. This helped me a lot!
“Even though we don’t have any”
I don’t know why I laughed so hard at this 😂😂 Seriously though, thanks man. I’m learning React right now
🤣🤣
thank you :) subscribed
Glad it helped 😃
Muchísimas gracias, el mejor que he visto, quedó precioso el Footer. ❤
Estoy contenta de que lo hayas disfrutado. Lol I hope they Spanish was right 😅
ah ! nice 😁
Thank you so much Arslan, It was very helpful
Thanks a ton dude! Awesome video \m/
:3 THANK YOU
Thank you for writing this tutorial. It is easy to follow and replicate.
Np thanks for watching 😁
Nice tutorial, thanks
Glad you liked it!
Great video thanks so much!
You're welcome!
thank you!
Np
@@arslan99 somehow my code is not working at this point....page-container{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-wrapper{
flex: 1;
}
thank you sir! it helped me a lot!
No problemo
Thank you! Thank you! Thank you!
No problem 😌
Thank you so much. Helped me a lot !
Glad it helped
Actually a lifesaver. Thank u.
thx, very helpful
Np
Thank you
Np
Thanks man
Np glad I could help
preciated!
Good job, thank you so much!
No problemo!
Thanks friend
can you do an updated version? I tried cloning the repo, using npm install, and then npm start but it does not run. This site can’t be reached everytime I try to load the local host.
Lemme see what I can do
when i made those "col"s i got rows instead of columns, anyone knows why? :v
can you create a pastebin of your code and I can help you out from there :D
Does this footer appear on all pages at the bottom? If not how do you make that possible? To have the same footer on all pages?
You can create a main component which will hold your footer and your nav bar and in between there is where you can put a route for the certain pages are on so you don't have to completely import it and export it every single time or you can just put it inside of your app.js file and put all your routes there and go from there there's a couple of ways to do it
How do you make it from javascript to typescript?
My simple suggestion is that if you already have a typescript app then just rebuild the project in typescript from there try your best to guess all of the types and then you can always ask chatgpt to help you completely convert it
🔥🔥🔥
Sir my two columns are one above the other can I know why
Most likely due to css issue all I can suggest is go through the video again
@@arslan99 thanks yo never thought I would get an response so fast! thanks :D
Np
In this case, how to make navbar stick to the top?
is thsi what you mean
www.w3schools.com/howto/howto_js_navbar_sticky.asp
Do you know why when I try to make this footer this just go in a list instead of beaing in three different rows?
you may have a typo in your class names
I coppied the exact same footer.js and footer.css and the columns are not showing properly, just one below the other one
Did you install bootstrap and import it's css?
Your tutorial is easy to follow. Looking forward for more tutorials. I guess footer code is not in your Github project
Yes sry when I made the tutorial completely forgot to make a GitHub repo for it
are you using css library in here? react bootstrap?
Yeah I think so installed react bootstrap in a previous tutorial and imported the react bootstrap css into the index.js file.
Hello Sir, the video is great but it's not working for me , I don't know why
.main-footer{
background-color: teal;
color: white;
width: 100%;
position: relative;
bottom:0;
}
.page-container{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrap{
flex: 1;
}
sir, please reply
Try refollowing the tutorial there could just be s small typo some where in your code
I am having a problem. Whenever I have less content on my page, the footer jumps up rather than staying at the bottom. How can I fix that?
Most likely you may have. A typo some where in you css but
Make sure in your app.css file your .page-container(
Display: flex,
Flex-direction: column,
Min-height: 100vh
)
And your .content-wrap(
Flex: 1
)
i had the same prob u need to tell your footer to position itself to the bottom, i added this and it works
position:absolute;
left:0;
bottom:0;
right:0;
@@asilmessai7160 thanks for helping!
Thanks to both of you guys for helping :)
Hey the github link is the navbar not the footer
Oh thanks for letting me know I just checked it I'll fix it soon
@@arslan99 when u fill fix?
@@yashverma9455 github.com/arslanah99/Footer
@@arslan99 thanks
Please need help. How to make Features by main page when i start localhost:3000
Hey Eugene, this tutorial ruclips.net/video/C0U0GzuFkEM/видео.html is where the features.js file was made but you don't actually need it you can work in a brand new app in the file app.js :)
ok you like it< but how???
@@arslan99 no no no, i mean any js!!! when i start server it run navbar and footer, but content is empty antil i click link in navbar for example features, but how to make content not empty on start server
Okay if I understand correctly when you start up your app you see nothing at first except for a nav bar and when you click a link then you see stuff. If that assumption is correct most likely your root directory most likely you app.js file has no content except for your imported nav bar components. If it's not your app.js file try and find the file where you are only importing your Navbar and nothing else and you can edit that file to see changes when you startup your app
@@arslan99 ok Thanks, so if i make Home.js as component i can make it between Navbar and footer on start server