A simple coffee website built with html,bulma and little bit javascript
I wanted to learn how to make websites using Bulma framework. Instead of inventing an website, I wanted to try and see how hard would it be to implement one of my favourite coffee websites: (https://www.youtube.com/watch?v=mR6kNv83or0&list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a&index=15). Full credits for user experience goes to them.
The website architecture/structure is mostly based on ideas I've seen in the youtube "Net Ninja Youtube channel. You can read more about it on their github: https://github.com/iamshaunjp
- Flow was enabled to catch typing errors in code
- I used Visual Studio Code have great support for html,'Bulma',Javascript.
- I used git for version control, and stored progress on GitHub.
- Build for every device Mobile,Desktops and tablets.
- Currently only tested on an desktop.
- Bulma learned from https://bulma.io/documentation/overview/start/
- best couse if you want to purchase and learn https://www.udemy.com/course/bulma-responsive-web-design-and-development/
- This blog cleared what is Bulma and how it works. https://blog.hubspot.com/website/bulma-css
- You can see examples of other projects in https://github.com/topics/bulma-css-framework?l=html
- Bulma-install-view: A install-like-view component with parallax and sticky header support.
Images are used without permission from Google, for example: .
- website building
- Basic UI prototype
- written bulma in html for better experince
- Add Javascript for better experience
- Create first actions, reducers
- Implement mostly bulma keys
- Add scroll view
- Add pull to refresh
- Implement basic settings UI prototype with navigation
- Create Signup and blog log.
Pocket coffee | Bulma Coffee |
---|---|
- Clone this repo
git clone https://github.com/piyuxx/bulma-project.git
cd Bulma-project
- run
npm install
- Get your Bulma key from https://bulma.io/documentation/overview/start/
- No key is required to use this icons https://icons8.com/icons/set/popular
Released under the MIT License.
Feedback is always welcome. Feel free to contact me, I would love to know if you notice something that can be done better. Please be nice, this is my first Bulma project.