trinayau / mdmpotato

First bootstrap website made with @kharileigh about potatoes. Includes mission statement, recipes.

Madame Potato 🥔

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.

Brief

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

Planning

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.

Blockers

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.

Reflections

• 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

Final Project ✨