how to make complete responsive food / restaurant website design using html css and vanilla javascript.
create a complete responsive online food website design template using html css and vanilla javascript step by step
the main feature of this website are:
✔ responsive header / navbar with toggle menu bar effect and search bar icon and scrollspy.
✔ responsive home section with touch slider using swiper.js
✔ responsive dishes card section using grid.
✔ responsive about section using flexbox.
✔ responsive menu card section using grid.
✔ responsive review section with touch slider using swiper.js
✔ responsive order form section.
✔ responsive footer section using grid.
Buy Me A Coffee :
https://www.buymeacoffee.com/mrwebdesigner
* SOURCE CODES *
DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1kS9zrqXb5sNNTEv45Wqegmyudej5Uzco/view?usp=sharing
swiper.js link:
https://swiperjs.com/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Roboto
images are from freepik:
https://www.freepik.com/
New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw
Timestamps:
0:00 demo
4:52 file structure
5:47 header section
15:57 search bar
21:53 home section
30:42 dishes section
38:27 about section
43:57 menu section
51:36 review section
57:31 order section
1:04:56 footer section
1:10:27 scrollspy
1:13:46 loader
1:16:21 final demo
#FrontEnd
#FoodWebsite
#CompleteWebsite
My responsive navbar dont work
I want to take my time and thank you a lot for all these projects, I'm a student in web designing and software developer and watching all your stuff it made it possible for me to understand how the modern design of html and css is working and at the same time It gave me my own way of coding, I will for sure donate money just because you've taught me the stuff I actually needed to graduate 😀
Thank you sir but I am finding some trouble trying to make an exact website style like you show in your video. Even your source code doesn't match the way the website look in the video, example in your interface in your video the slide have like a border, margin in left and right but in your source code website interface it is different and margins and borders are not there and sometime interface is even messed up. I hope to have a solution to this sir.
Excelente!! Cuando amas lo que haces. Saludos
.dishes .box-container .box img{
height: auto;
width: 100%;
}
After implementing this part of code, in the phone view and laptop view, my photos look stretched to the sides which is weird((
your websites and designes always great😍😍
Plz add sound it make more clear
In chrome the website is not getting displayed as it was what should i do??
Gud work
Awesome!