Responsive Sushi Restaurant Website Design Using HTML CSS & JavaScript

Responsive sushi restaurant website design using HTML CSS & JavaScript.

With CSS animations when scrolling. Includes a light and dark mode. And website deployment to the internet. Developed first with the Mobile First methodology, then for desktop.

Enjoy the video, greetings and success 😎

🔔 Subscribe for more!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
❤ Get template

💙 Get template by PayPal

🔗 Membership (Get Source Code)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
👨‍💻 Start project from scratch

☝ Start developing the project (base files + images)
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location

📂Assets

⏱ Timestamps
0:00 Intro Responsive Sushi Restaurant Website
3:10 Project Setup
5:57 Variables CSS
6:10 Reset HTML & Reusable CSS
9:38 Header & Nav
22:50 Home
28:50 Buttons
30:41 Change Background Header
32:11 About
36:50 Popular
44:46 Recently
50:52 Newsletter
57:48 Footer
1:12:23 Scroll Bar
1:13:47 Scroll Up
1:17:25 Scroll Sections Active Link
1:19:14 Dark/Light Theme
1:27:20 Breakpoints
1:52:29 ScrollReveal Animation
1:57:00 Final Project
1:58:19 Website Deployment (Uploading to the internet)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
📸 Images

📬 Doubts about the project send a DM to Facebook
⌚ I answer at 6:00 PM (Perú time)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
☕️ Support me

💙 Support me by PayPal

👍 Thanks for watching!
Make sure to like + Subscribe for more! 💗

#responsivewebsite #restaurantwebsite #bedimcode

[harshjain]

Bro your image selection is 🙌🥵lit.. and you're design game is 💯💯💯 top notch.. i would suggest using hovering images instead of static images .. it would look better.. though this form of design is great but i just gave a small suggestion ..

[mochellalle]

que bonito proyecto soli, porfavor no esten copiando los proyectos de Bedimcode y luego hacerlo casi igual y ganar dinero con ello, aprendan pero sean realistas en hacer sus propios proyectos, apoyemos mucho este canal, es muy hermoso su contenido.

[Shadow-lxrh]

My heartfelt thanks to you for providing images and assets to start the project from scratch thank you soo much means a lot. 🙏

[heykunaal]

Very beautiful design. Can you please answer these questions. It will be really helpful to me 😊
- From where you take inspiration from?
- How did you learn designing such great websites?
- How you to choose such great fonts?
- And how much time you take to design and develop a simple landing page!

[queenofsheba]

You are a really great designer, thank you for the tutorials.

[universecode]

Very COOL ... I'm preparing something similar for my channel ⚡

[akashdey]

I love the video. Could you also, do a voice over and explain your thought process.

[herbertgm]

Mi estimado, lo suyo es a otro nivel, paea quitarse el sombrero, sé que ya le han preguntado, pero por favor, considere hacer un tutorial así sea con voz de loquendo.

[RuanCleber]

Excellent website!
Hey man, build a multilingual website

[neevbadu]

Awesome Awesome Great Teaching method... (by showing what code actually does to design each step of the way) .. Thanks alot..

[ZerefCG]

Otro diseño increible, se maquetar paginas con Flexbox y ando aprendiendo algo de grid, pero diseñarlas de esa manera uff, ni idea, en mi carrera tambien tengo planeado aprender algo de UI/UX porque me gusta bastante la parte del diseño, hacerlo bonito y luego maquetarlo con HTML Y CSS, tu me inspiras muchos con estos diseños! el de halloween me encanto! un saludo bro sigue asi

[cesarcruztrader]

Tienes un fan nuevo...! Excelente trabajo... cuando crezca quiero ser como tú. Muy inspirador... deberías considerar aplicar el atomic desing

[paulinhorozendo]

¡Simplemente inspirador! Tus proyectos siguen mejorando. Podría hacer uno sobre Digital Mkt Agency con elementos de morfismo de vidrio 😁
Un fuerte abrazo, Dios te bendiga!

[AlisherMakhmudov]

nice design aand implementation as always.

P.S.
I would give some background shadows on all product images...

[trunghoquang]

Amazing work 👏👏. It helps me a lot, thank you so much !

[jair-araujo]

Amigo, tu trabajo es increible, me gusta seguir tus videos para aprender, como organizarme para iniciar un proyecto, que aun estoy al principio de aprender y me siento muy perdido al tratar de iniciar algo desde cero, pero viendo algunos de tus videos, estoy encantada con tu organizacion, espero algun dia llegar a ese nivel. ¡Solo quería felicitarte por tu trabajo y agradecerte por compartir tus conocimientos! 🙏 ¡Un fuerte abrazo desde Brasil! 🫂Si hay algo mal escrito en su idioma, pido disculpas porque estoy usando el traductor de Google ya que no sé español. 😅

[thepreek]

Great bro.
But if you explain then it's become very helpful for us.
I have an problem in scroll behaviour on top

[felixjones]

This is marvelously incredible. Where do get projects like these from???

[_gmr_]

I think hover effects for small screens is useless code that clutters the website. I love the design though it's my favorite style!

[mohammed.k]

Do try to make something with next13 or pure react using some css lib like tailwind