How To Make Responsive Coffee Shop Website Design Using HTML – CSS – JavaScript Step By Step

how to make complete responsive online coffee shop website design using html css vanilla javascript from scratch.
create a complete responsive coffee shop front-end website design template using html css vanilla javascript tutorial for beginners.

Back-End Part Of This Website :

the main feature of this website are:
✅ responsive header with toggle menu effect using vanilla javascript.
✅ responsive home section using css flexbox.
✅ responsive about section using css flexbox.
✅ responsive facility section using css grid.
✅ responsive menu section using css grid.
✅ responsive gallery section using css grid.
✅ responsive team section using css grid.
✅ responsive contact section using css flexbox.
✅ responsive footer section using css grid.

Buy Me A Coffee :



( *you are free to use this source code )

*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 converted files into your browser.
Step 5 :- open your editor and put your unzipped files into it and then edit it as you like.

font awesome cdn link:

google fonts:

clip-path generator:

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

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

0:00 demo
1:41 file structure
2:49 header
14:43 home
19:48 about
23:38 facility
30:19 menu
33:57 gallery
36:41 team
39:53 contact
45:56 footer
51:38 final demo



  1. u r spending too much time on just a navbar, takes just 2 min to builD a navbar. BE SIMPLE.
    WHY waste time

  2. mannn the scroll bar its not applying ive been looking for this problem 1 week still no shit

  3. Thank you for the wonderful lecture. I would like to use a part of your design for the site I am about to make, is it okay to use it?

  4. Hey, how your design work flow…im very curious to know, what tools u use, for example figma/xd and how u design all the image suited in your design…from zero to end

  5. Hi, I love your designs. I can use your design ? But i will make it by Angular 2, It help me to improve your coding level. Will you allow me to do this? Thank you so much <3

  6. Thank you again for having the time and love to put all that work for the community at large to learn and admire your contribution.

  7. Hi Anas, how are you I wanna ask that how did you get or make that heading png You use in your every section did u make it yourself or get it from any website?

  8. <input type="number" name="guests" required maxlength="20" placeholder="how many guests" min="0" max="99" onkeypress="if(this.value.length == 2) return false" id="" class="box">
    I do not understand this. what's the point when and why should it return false?

  9. I watch ur every website videos a great admirer of ur true work hope I've improved my css a lot I code seeing ur website not copy paste but understand what happens to each line of code
    I hope ur doing great in life
    God bless u forever ur subscribers
    I dont have money so I can donate but I dont skip ur ads this way i can contribute to ur videos thanks

  10. Hi!, It will be very helpful to us if you show a tutorial on single page application website & your videos are very helpful & ideas are very innovative keep going.

  11. Hello, we need the steps you use to design make the design from scratch with Figma, like inspiration, photos, sections, text!

Leave a comment

Your email address will not be published.