How To Make An ' Online Grocery Store ' Website Design Using HTML / CSS / JAVASCRIPT – Step BY Step

how to make a complete responsive online grocery store website design using html css and vanilla javascript from scratch.
create a complete responsive online food / grocery store / ecommerce website design using html css and javascript.

the main feature of this website are:

✔ responsive sticky double header / navbar with toggle menu bar effect.
✔ responsive home section using flexbox.
✔ responsive banner card section using flexbox.
✔ responsive category card section using flexbox.
✔ responsive product card section using flexbox.
✔ responsive deal section with count down effect using javascript.
✔ responsive contact section using flexbox.
✔ responsive newsletter section.
✔ responsive footer section using flexbox.



font awesome cdn link:

google fonts:

images are from freepik:

New To My Channel Subscribe Now And See More Stuff Like This:

0:00 demo
5:15 file structure
6:05 header section
18:28 home section
21:22 banner section
24:07 category section
27:34 product section
36:16 deal section
43:46 contact section
47:14 newsletter section
50:00 footer section
54:33 final demo



  1. I need to do project on this .What should i do to add data and what about back end …. anybody please tell me!

  2. it is awesome however how to make it work in real life especially in the contact section. could you be having a code which i will send the feed back to my email?

  3. Thats looks greate … Nice work sir .
    Could you please create bigbasket website from start to end user flow …

  4. So amazing a design… can't keep off your channel. Sorry please, the javascript codes are not working even when I typed it word for word, especially the countdown timer.

  5. I have a problem with the search bar. I followed the exact step but the search icon doesn't seems to appear closer to the search bar.Please help me

  6. Just fantastic project and vedio, I really love this

    Thanks man, You are creating amazing projects.

Leave a comment

Your email address will not be published.