School project done in Year 1 Semester 2. This was when I learnt website development and design. You can visit the website here.

The task was to create a well designed website for one of the food stalls in our school campus.

The stall I was assigned to was the Malay-Indian Muslim food stall at the South Canteen. I first started out with the website header and found a suitable image for it.

Then for the navigation bar I decided I wanted a logo for this stall, so I used ChatGPT to generate one for me.

Once I put it all together, I figured I needed a consistent font and color scheme. I decided for beige and light green as it matched the vibe of a Halal food stall.

This was when I also learnt about some design techniques from my friend and lecturer. One of them was the golden ratio, so I adjusted the header to make it follow it, making it more pleasing to view.

The next thing I needed to do was to make a menu page. This was the most tedious as I had to find images of food online and use Photoshop to edit them to have a transparent background.

The menu page is split into 3 categories: rice, noodles, and prata. I used flex boxes to arrange things into a nice layout, this will also help with media query.

Brief explanations of the food items were also written, and I used ChatGPT to generate them.

Next up was the about page...

Then the membership form and ordering interface.

Lastly we had to do media query to make the website accessible on phone. This was quite leceh but in the end it turned out looking nice.

Challenges faced and lessons learnt:

1. Constantly changing and adapting the design. A lot of time was spent changing the design to be more appealing but in this repetitive process is where I learnt the most about website development.

2. Understanding that different people have different taste. No matter how much I edited the design and layout, when asked for feedback, it will never fit everyone's taste perfectly. This is fine because it allows me to learn from advice that other people give.

3. Not doing media query after each section completed. Instead, I did media query when I was done with the whole website, making the code editing process more confusing.