Create A Responsive Multipage Grocery Store Website Design [ HTML CSS / SASS JavaScript ]

how to make a complete responsive multi pages online grocery store website design using html css / sass / scss and vanilla javascript step by step.
create a complete responsive multi-pages online grocery store website design template using html css / sass and vanilla javascript from scratch.

the main feature of this website are:
✅ responsive header with search form / shopping cart / login form and navbar toggle effect using vanilla javascript.
✅ responsive header section with slider and next and previous buttons using vanilla javascript.
✅ responsive banner section using css grid.
✅ responsive category section using css grid.
✅ responsive products section using css grid.
✅ responsive about section using css flexbox.
✅ responsive gallery section using css grid.
✅ responsive review card section using css grid.
✅ responsive blogs section using css grid.
✅ responsive contact form section using css grid and flexbox.
✅ responsive footer section using css grid.



*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) – ( style.txt to style.css ) – ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

font awesome cdn link:

google fonts:

Editor : – visual studio code with Laetus: Dark Vibrant Theme
Browser : – google chrome
UI Tool : – Figma
Images / Video / SVG : –
01 –
02 –
03 –
04 –
05 –
06 –

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

0:00 demo
7:35 file structure
8:41 header section
27:24 footer section
34:12 home section
42:26 banner section
44:43 category section
49:20 products section
54:14 about section
56:09 gallery section
59:04 info section
1:01:05 review section
1:03:47 blogs section
1:08:13 contact section
1:14:01 final demo



  1. Assalamualaikum…Bro Hope you will be fine.I am a student and want the Backend of this website Please help me .I she'll be thankful to you.
    I really like it

  2. 0:47 The items in your slider-container do not have the same height, each time the slider is active. that's not a good enough UX. Sorry, my english is not good. Does that make any sense?

  3. Bro I'm really appreciate it. We want to complete e-commerce website. Front-end and Back-end

  4. Anyon e can help me doing a back end for this. I have a vert small database to link. Thanks in advance.

  5. Hey bro..
    I need website for food delivery from local market..
    I want to purchasing you .
    I am want to start little business.
    I am jobless. So please give information and code

  6. Bhai please only core CSS ke sath bhi projects bana liya karo yaar, baaki aapki video se bahot kuchh sikhne ko mil jata hai 🙂

  7. Thanks a lot. But please if you could go a step further and add voice overs to your videos, it would go a long way in helping us.

  8. Estva a procurar algo desse género para um projecto específico obrigado por mostrar o seu trabalho Fantastic

  9. Hey bro can u please explain the use of .scss file and a short comparision of .scss with .css cuz as far as i can see they both kinda work the same so why did u used .scss in this project whereas u haven't used .scss in any of your previous projects i have watched them all so can u please help??

  10. hai sir your content super am following u from long time….me 2010 engineering electrical passout …..i learnt html css3 cjs jq bootstrap in udemy …doing projects from ur channel there any chance to get job in IT with career gap…pls give suggestion bro…NOW GETTING JOB IS POSSIBLE.PLS REPLY any one…

Leave a comment

Your email address will not be published.