How to Make a Restaurant Website Using HTML CSS JavaScript
HTML-код
- Опубликовано: 13 июл 2024
- Source code: www.patreon.com/posts/grilli-...
Check out my next video update: / codewithsadee
How to Make a Restaurant Website Using HTML CSS JavaScript
This video will show you how to build a restaurant website using html css javascript
GitHub Repo: github.com/codewithsadee/grilli
HI 👋
I'm Sadee(web dev)
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇
📺 My Channel: / @codewithsadee
🔔 Subscribe: / @codewithsadee
🔗 Starter file
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Download the starter file to practice: drive.google.com/file/d/1Du1J...
⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo
8:48 - File structure
9:50 - Project initial
20:12 - Preloader
27:47 - Top bar
30:21 - Header
1:08:06 - Hero section
1:38:09 - Service section
1:53:48 - About section
2:07:31 - Special dish section
2:14:37 - Menu section
2:31:51 - Testimonials section
2:37:26 - Reservation section
2:59:44 - Feature section
3:06:28 - Event section
3:16:08 - Footer
3:37:13 - Media queries
💜💜 PATREON BUDDIES 💜💜
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Many thanks to our lovely Patreons (from / codewithsadee ) who support us every month and encouraged us to make this video:
Asher, Danish Khan, Jose Galvez, Kesu Endalkachew, vagdrak
👍 Like - Follow & Support
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Twitter: / codewithsadee
Github: github.com/codewithsadee
Facebook: / codewithsadeefan
Instagram: / codewithsadee
⚠️ Disclaimer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use
#codewithsadee
#responsivewebsite
#restaurantwebsite
best restaurant website of the world
Best Project RUclips Channel. Thank you very much and also thank you to RUclips without which I would not know you
one of the best project yet 🔥🔥🔥
with animations, pagination....... ❤️🔥
Thanks Nitesh🤍
¡Quiero felicitarte por crear un sitio web increíblemente hermoso! Tu habilidad para combinar diseño, funcionalidad y estética ha resultado en una plataforma que es no sólo atractiva visualmente, sino también fácil de navegar y usar.
Tu dedicación y pasión por tu trabajo es evidente en cada detalle de tu sitio web. Cada imagen, texto y elemento de diseño parece haber sido cuidadosamente elegido y colocado con gran consideración. Me encanta cómo tu estilo personal brilla a través del diseño, haciendo que el sitio sea verdaderamente único y auténtico.
Además, tu sitio web es muy intuitivo y fácil de usar. La navegación es sencilla y los usuarios pueden encontrar fácilmente lo que están buscando. Me encanta cómo has incorporado diferentes elementos para mantener a los usuarios comprometidos y emocionados por lo que ofreces.
En resumen, tu sitio web es verdaderamente impresionante y estoy impresionado/a por tu talento y dedicación. Realmente has creado una obra de arte en línea que puede ser apreciada por muchos. ¡Felicitaciones por este logro sobresaliente!
¡Gracias por compartir tu creatividad y tu habilidad con el mundo! Espero ver más de tus trabajos en el futuro.
thanks for the reference, great website!
amazing value thank you a lot!,
we need some small tips and tricks videos tho. teach us like how do you start every project, how do you collect the assets, how do you come up with a project and think through it, etc ...
don't make every video a long coding one.
I like it bro so much i am also made website but i seen that beautiful website first time.Thanks bro❤❤❤❤❤❤
very soothing to eyes
Thank you so much for this. I appreciate you and the time that you have put into this amazing piece of art.
My pleasure!
This is so helpful ❤
@codewithsadee same question when the navbar header is clicked in the phone and navigate to the menus section in the page, the scroll suddenly cannot be scrolled
I followed your works and its very astonishing . Thank you for this educational purpose. But i have a quick question for this like how do i unlock the scrolls from the navbar? For example like when user try to click the Menus in the navbar header in the phone and navigate to the menus section in the page, the scroll suddenly cannot be scrolled. So how do i unlock it or any code to update it if there is a possible? Thank you
wow very beautiful work sr. thanks for share!!
Thanks, My pleasure ❤
Very nice coding, clean code...could you please make a tutorial video, how to arrange the css code, like you first defined colors etc. Than use.
Absolutely astonishing.
My pleasure🤍
Hi, i have just one q. Why you are not using REM's/EM's for margin, padding and font-size?
Hi ! I really like the way you made your restaurant website. But I want to know for the image you used on your about section I want to put on my own website the badge but I don't know where to have this image can you help me please thank you
Great Job! Thank you sooooooo much.
there is a app for $5. if you want reply me
how you can know the fontsize that you used because i got in a probleme for finding font size and also typographie ,or this fontsize are standars for website
I am here for design of my practice web menu and found beautiful design
Your website is dope...pls what theme did you use for your vscode....I like the layout, font, font color
Well done ✅
The design is good. What keyboard did you use?
I haven't seen a website like this i was trying to do a website and i got this in RUclips 😢but you are a little faster than i think with appreciate 😊
Glad to help 😊
thank you 👍
Wow, looks great.
Thank you!
This is beyond beautiful. 😍
Thank you!
That's so Beautiful , Keep up the good work , Looking Forward For More Videos
Thank you, I will
This tuts should be with explanation bro this was awesome
Those keyboard switches sound very nice, what are they?
amazing bro
i never ever seen this type of grand food website
amazing 💕💕
Thank you so much 😊
this is one of the best projects bro 😎👍
Thanks ✌
Hey man, can I use this project and the related code for my business? Meaning that I will use the code to develop a website for my own business portfolio.
Thanks for the fover
Thanks for this masterpiece.. Master 😍✌
You're welcome 😊
@@codewithsadee plz do monthly once like this food project.. I got different idea from you and Also I'm impressed on your work 😍😍😊👍
I will try my best
Great Vid!
I didnt know there is an extension in vscode for all the mobile view. what is the extension called? Thanks in advance.
Hi, i want to ask you something. Its possible to add to menu some crud operation. For example, if a customer want to make an order to add there the products and then place the order(the order goes to the admin and then is brought to the client at the table that he is)?
u must include programming language like php/javascript and for the database Mysql bro
Man that's amazing and will try this one too , ofcourse would all of your playlist btw can i use your websites as projects you know for practice ofcourse i did mentioned your youtube channel and thanks for the gaming website i mean e-gaming with that i learned animations and postions like absolute a nd some new stuff , i am sure i will learn something new in this website tooo thanks man
Yes, you can.
Thanks a lot, glad to hear this.
great work bro 😇 please create some projects on health care as well😊😊
Noted and Thanks
So good, thanks
Our pleasure!
which editor you used to write code and how this mobile view option come from where
so cool thank you
You're most welcome ❤
Amazing work there. But a suggestion I would give to you please try explaining your code. As for intermedeate like me we found difficult to grasp some ideas❤❤❤❤
Thanks, I will try my best to explain 😊
Which mechanical keyboard are you using?
Que lindo,perfeito
Obrigada Fabiana 😊
অনেক সুন্দর প্রোজেক্ট
ধন্যবাদ ভাইয়া
you are welcome
You are amazing but words maybe more helpful for understanding. I didn't understand therefore I left at @13.11
Very good job
Thank you so much 😀
Thanks a lot man... your tuts are amazing.
My pleasure!
Awesome design
Thank you! Cheers!
thats good
great Work
Thanks
Hi amazing website! Question could I use it as a portfolio piece or is that against the copyrights?
Yes you can!
So fantastic
Thanks 🤗
@codewithsadee can u give me the theme of ur vscode and the comment customization ? plz
Which text editor is this can we get mobile view on vs code..??
Hello sir, i have came across a bug when i click on any item from menu after redirecting the page just stucks this occurs while in mobile is there any fix for it
Great! I have a question could you tell me about why css grid don't run(grid-list)
I copy exactly but this code don't run
is that working?
goat 🔥🔥
Thank you
This video deserves more more views 😢
Thank you, but sometimes It's difficult for me, but in future I'll try to continue it
is javascripy used in this website or it is only designed using html and css????
Hello :) There is problem in the markdown, he is not the same in the video and in the project.
I'm waiting for you to do the backend
best restaurant website
Thank you😇
music is so claim to learn new
MASALLAH
thank you for a wonderful project. May i know what application did you use in coding because it has mobile view. I'm only beginner and i want to learn about making website thank you
Thank u for your appreciation
Code editor: VScode
Mobile view is a VScode extension called 'Mobile View'
太高级了 很喜欢
Thank you so much❤️
enough to make my head a little dizzy, it's okay at least I understand🤣
Definitely the best design out there.
But I am having a problem with the navbar in mobile mode. when I click it, the page stucks. and the navbar remains at the top. can you make a tutorial about fixing it? I suck at javascript and I am learning from you a lot.
Thanks.
Hey, have you figured out a solution?
@@dante_parakalo6134 not yet. since it's a single landing page, I removed the 3 bar icon. But I think that he made the sticky instead of
Same here. Have you found the solution ?
Why the icon don’t show on time 52:25? And the effect transition
how do you have the mobile view on the right screen?
Super hero
Thanks 😊
Thanks for the video, what program do you use to see the results on mobile?
use mobileview vscode extension
@@Jovicod thanks
Top vídeo
Thanks
Master !!! tutorial pls :3
Thanks
Hey man great work. I think your source code link 🔗 is broken. It’s not connecting. Try and check
❤❤❤❤
how yoou do side mobile view?
please make a tutorial about it.
bro will this website run in chrome with own domain?
What are the functionalities present in this project?
this video would make sense if you took your time
to explain to your viewers how to use the elements.
can i buy the code? I'm a bit confused and which link is it?
Which editor you used to write all source code?
VScode
Please how do I make my mobile view active. Its just blank. Thank you
This is nice.
But I want to ask you from where I can get this type of design. I am asking you because I have much knowledge on HTML, CSS and JavaScript.but don't know where to get this ready made design for practicing. Can you help me by telling some websites name where I can solve my this problem.
I'll be grateful to you
Thanks
dribbble, behance, figma community, pinterest, google images
Please can you explain whilst coding so that we may understand most of the codes??
Good job!
What's plugin name to show code results in mobile in side please?
It's called "Mobile View"
I am currently working on a website for my restaurant, and I believe that your video would be a great addition to it. However, I wanted to reach out to you first and ask for your permission to use this code?
Thanks Efkut! But this video is only educational purpose, not for commercial ❤
Hey, I think I can help you with your website as you would also need backend coding for your website to function properly.
can u help me too
@@dante_parakalo6134
@@dante_parakalo6134 can you help us?
Hello, do you know when you will post the next part on patreon ?
What do you mean by part?
@@codewithsadee i mean the video update from patreon
@@alexandrugeana662 Day after tomorrow! 😊
@@codewithsadee thanks a lot
Hi Sadee do you have a complete design for this website. I would love to make it multi-page. after this no one will be able to stop me to get the best frontend webdev job😇😇.
I kindly request you to share all pages of this website if possible. 🙌🙌🙏🙏
Thanks for your interest in the website design! Unfortunately, I don't have extra pages for this design as it is focused on a single page.
Feel free to explore and create your own additional pages to showcase your skills. Best of luck with your frontend web development aspirations! 😇
I am subscribed to the source code I paid money but I have some problems while running the programm I just downloaded the zip file but when I run the programm there is no design into this page. when I write
You have to open with live server.
At 1:46:21 can someone explain what this selector do? .hover/:shine
Question are there more people for whom the hamburger menu function does not work? (js script)
it is mistake in:
.header .btn {
display: none;
}
just this, not other clases
Please what extension is used to display the mobile view on the side?
It's called "Mobile View"
@@codewithsadee thanks a lot🥂
hyy pls make on "'service on wheel" website layout
Which platform is this
Hello sir,i want to work on sublime but i don’t see the output JavaScript I don’t see where the error
check your browser console.
In which editor do you do the code
vs code