Complete Responsive Coffee Shop Website Design Tutorial Using HTML / CSS / JavaScript | Step By Step

how to make a complete responsive coffee shop website design using html css and vanilla javascript from scratch.
create a complete responsive coffee shop website design template using html css and vanilla javascript for beginners step by step.

the main feature of this website are:
✔ responsive header / navbar with toggle effect using css flexbox.
✔ responsive home section with image slider using css flexbox.
✔ responsive about section using css flexbox.
✔ responsive menu card section using css flexbox.
✔ responsive review touch slider section using css swiper.js.
✔ responsive booking section.
✔ responsive footer section using css grid.



swiper.js link:

font awesome cdn link:

google fonts:

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

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

0:00 demo
3:39 file structure
4:37 header section
14:12 home section
21:50 about section
28:48 menu section
34:09 review section
44:13 book section
47:55 footer section
52:35 final demo



  1. watcing your video like always learn something new the your make css so easy to understand keep it up bro 🙂

  2. If you want to make a mobile app with javascript,
    it's should the HTML and CSS with javascript ?
    or HTML and CSS just for website?

  3. If it was possible to repeat "like" on YouTube, I'll repeat thousand times, very good tutorial. Thanks.
    From 🇲🇿 Mozambique.

  4. source code for google link drive is not opening .can you plese give me another way to download the source code

  5. Sheikh Sb It would be more good if you include your beautiful voice to yours videos for people like us Urdu or English any language.

  6. Hello brother how are u hope u good i have tried a lot find that border style but i could not found what can we call or which type of border should i searched to understand the concept

  7. Great tutorials but are you considering explaining step by step instead just putting music and coding yourself?

  8. Hello can you make a nav bar that Is sticky responsive and animated … And when you click on link it works…. Please … All in one nav bar

Leave a comment

Your email address will not be published.