Monkhaus Cafe

A Bootstrap 4 Online Shop Project

Monkhaus Cafe

This project is me exercising all I have learned from Bootstrap 4,which is also designed by myself to give it a flair of personal aesthetic.It is my first online shopping site coded by myself.The working process waspure joy, being able to build something from just ideas and drafts to frames,walls and in the end the whole building on your own.


  • - Adobe XD
  • - Bootstrap
  • - SCSS
  • - JQuery
  • - Github


In the beginning, I was overwhelmed using NPM to set up the environment, trying to understand the file structures, customising Bootstrap theme in the Sass files.

Some of the Bootstrap elements, like pop-up modals, requires JQuery. I didn’t have a proper grasp of Javascript when building this project back then, naturally, I found those sample snippets in the document are gibberish to me. and that’s really frustrating to copy and paste some weird-looking snippets that you don’t really understand in your editor.

lesson learned

I can use Bootstrap fluently after this. Also, I started to learn how SASS works right after this, so I can write the CSS in a much more efficient and dynamic way.

My favourite feature of Bootstrap is its grid system. It helps you position your layout quickly, and it’s very much carefree on the responsiveness because you only need to change some class names and voilà, it’s like dark magic.

Monkhaus Cafe