First bootstrap website made with Khari selling custom jacket potato meal kits. This website includes separate pages for mission statement, recipes and a cart system. It is fully responsive on desktop and mobile.
We received a brief from Jagan, our Engineering instructor to create a website about our favourite food:
Choose your favourite food.
- Create a website using a CSS framework of your choosing
- Your website should include three pages
- A homepage
- A list of ingredients in your favourite food or a recipe to make it
- Places you can eat or purchase your favourite food.
- Your website should have:
- A navigation bar so that we can change page
- Buttons so that we can navigate to other pages by clicking on them
- Deploy your website
Khari and I decided to plan out our website on pen and paper first.
We then split up the work: Khari would code the second page of jacket potato kits using Bootstrap's flexbox grid system.
I began designing the homepage and looked up how to put a video in our header.
Our cohort colleague Prishal helped us locate the best navigation bar while working on his own project, DIRAL.
I wrote the copy for the website, which was a pleasure as potatoes are my favourite food.
We experienced some blockers early on as it was our first time using Bootstrap together. We decided to use GitHub as a collaborative writing tool for the first time rather than replit or copy/pasting code, which was challenging. It was very rewarding once we understood how to add Khari as a collaborator on my repo, and how to create separate development branches to work on our own features. It was our first time sending pull requests and merging to main.
- We learnt how to work collaboratively on GitHub despite initial hiccups
- Used BootStrap 4.6 to make a responsive web page for desktop and mobile
- We realised that spending time thinking and planning together at the beginning really helped us in the process, rather than jumping in straight to code
