23/05/25 - 27/07/25 ( Week 9 - Week 14 )
Interactive Design / Bachelors of Design in Creative Media / Taylor's University
Interactive Design / Bachelors of Design in Creative Media / Taylor's University
Carren Yeliandi / 0376990
Final Project
TABLE OF CONTENTS
Lectures
-
Instructions
<iframe
src="https://drive.google.com/file/d/1uHHYgIaueTxzS5HII6T19UE2u5JfwPQa/preview"
width="640" height="480" allow="autoplay"></iframe>
A. DEVELOPMENT PROCESS CHALLENGES
|
|
Fig 1. Header (Dropdown Menu) and Background Image + Hero Page HTML
(Week 14 | 25/07/25) |
|
| Fig 2. Header CSS (Week 14 | 25/07/25) |
The HTML for the Header as seen in figure 1 are quite simple to figure out, however there was a bit of trial and error during the making of the header CSS. For example, the width size was put at 100% or 100 vw (View Width), a responsive size measurement unit but for some odd reasons during testing in the inspect mode, it was slightly overflowing. It was discovered later on that it was the footers fault, this will be discuss later on with the corresponding image.
Due to the earlier assumption that the measurement unit
used was problematic, I changed it into fixed size width, around 1400px.
At first this works better but after further coding actually proved to be
quite problematic. I spent quite some time here trying to figure out why
the width is not responsive at all before I decided to check the other
section which was when I figured out that the footer was the problem the
entire time. After some fixing and returning the width into 100vw, I
managed to create a responsive desktop navigation menu.
After every desktop website code was done, I continued to
the mobile version where I tried to use a hamburger menu. I first tried
to code it on my own, learning from website like
W3Schools
and youtube videos. The hamburger menu from the youtube videos seems to
need me to remake my header which I am not incline to do at all, however
the tutorial from W3Schools didn't work despite how much I tried to make
sense how to use java script and the css class it needed to change it to
a similar class that already existed in my original HTML
code. After that didn't work, I tried to use bootstrap, which only seems to destroy
my website. In the end, I decided to just use display block and made it seem
like an open hamburger menu with the half-transparent black background (made
using RGBA settings- all 0 = black ; 0,5 = half-transparent).
|
| Fig 3. Dropdown Menu CSS (Week 14 | 25/07/25) |
After the header was done, I proceeded to complete the base of each page. When I reached the menu page, I realized that I didn't know a way to recreate what I wanted from the prototype and I didn't know the name of the type of interactive element that I wanted to add so I had no idea on how to proceed. So instead, I created a dropdown menu using the same code from a previous lecture. I first tried to understand which part goes where before changing some of the class to fit the classes that already existed in my HTML. During a feedback session, I did mention this issue in which the lecturer gave me a name for the element that I had unfortunately forgotten now, but back then I had immediately searched for the element only to find nothing, so the lecturer told me to just continue with the dropdown menu that I already had.
|
| Fig 4. Background Image CSS (Week 14 | 25/07/25) |
Going back to the main index page, originally, I inserted the image through HTML but after some feedback and research, I used a background image in css instead. It was a bit of a struggle as it won't seem to fit the page the way that I wanted. I changed the size from cover to contain and back to cover multiple times, changing the measurements unit while I do so. Thankfully, I found the correct combination code and manage to fit the background image the way that I wanted while it still being responsive. After figuring out everything here, the second background image just below containing the text of specialities, is easier although there are some issues with the size that was easily fixed by adding necessary paddings.
|
| Fig 5. Left/Right Image and Text Index HTML (Week 14 | 25/07/25) |
|
| Fig 6. Left/Right Image and Text Index CSS (Week 14 | 25/07/25) |
Another challenge I faced multiple times is the image and text responsiveness. Here I focused on one part of the css code from the index as every other code is mostly the same and faces the same problem that I feel like have no need of repeated explanation. At first, the image didn't have a container of <div> and the class was inside the <img/> itself, this was pointed out to me by my lecturer during feedback which I had mostly fixed although I suspect that there is still some that is not contained inside a <div>, I will do a final check later on before I change the placeholder images/texts and upload it on to Netlify.
I switch the height and width multiple times to check which
one is better in terms of responsiveness, as seen in figure 6, I stuck
with height as the numerical unit holder and width as the auto size. the
texts width was set at 60%, although it didn't seem like it did much, it's
better to be safe than sorry. the image beside the contact info in the
contact page is set to 100% in heights, it seems weird but it works so I'm
not complaining.
The images and texts size in the mobile version was easier
to do, although due to the nature of the image and text placement in the
HTML, the text and image placement in the mobile version is slightly
weird. I want to fix it but don't know the right keyword to find the
tutorial on how to fix it without having to manually fix them in the HTML.
For now, I am satisfied with what I have as it is better than
nothing.
|
| Fig 7. Menu Card HTML (Week 14 | 26/07/25) |
|
| Fig 8. Menu Card Display Responsive CSS (Week 14 | 26/07/25) |
At first the card display was set at display =
flex, however during the responsiveness test, I wanted for it to display 2
cards on mobile view. To do so, I did some research by looking at other
websites code in which I learned about display grid as well as grid template
columns. I immediately changed the display from flex to grid with the
desktop version having 5 grids while the mobile version having
2.
At first I actually did 3 settings, one for
desktop, one for tablet and one for mobile as seen in figure 8. However it
was not working for some unknown reason (assuming that dreamweaver was the
problem) but after testing it on my phone, I decided that the tablet version
actually worked just fine on mobile so in the end I just have two different
setting, a desktop (5 grid) and a mobile (2 grid) version.
Out of everything, the footer is definitely the top one most difficult challenges I had faced during the entire coding session. Each time I opened the website there is always something wrong with it, mostly a problem with the responsiveness. At first I set the justify content as flex but I actually wanted the left image and the right text to have a larger spacing and after some research, I found space-between which works in the way that I wanted but during responsiveness test, it showed some issues like text-image stacking as well as overflow that resulted in me redoing my CSS for my header only to find out later on that the footer was the problem after inspecting in developers mode (inspect mode).
|
| Fig 9. Footer HTML (Week 14 | 26/07/25) |
|
| Fig 10. Footer CSS (Week 14 | 26/07/25) |
Out of everything, the footer is definitely the top one most difficult challenges I had faced during the entire coding session. Each time I opened the website there is always something wrong with it, mostly a problem with the responsiveness. At first I set the justify content as flex but I actually wanted the left image and the right text to have a larger spacing and after some research, I found space-between which works in the way that I wanted but during responsiveness test, it showed some issues like text-image stacking as well as overflow that resulted in me redoing my CSS for my header only to find out later on that the footer was the problem after inspecting in developers mode (inspect mode).
In the end to fix this, I lowered the gap which seemed to
solve the problem (although it will look horrible in pc). I did
experiment more with the justify content by trying to use flex-end +
flex-start and space-around. It took a while of doing that part over and
over again with a lot of trial and errors with the same responsiveness
problem before I actually arrived at the current footer CSS shown in
figure 10.
After the desktop version was done, I immediately went
to the responsiveness (after the desktop version was mostly
completed). At first, I set it as display block, so the footer was
only one straight line, but after a while I decided that I wanted to
make it into grid so to have two columns and two rows (2x2). I did
struggle a little with trying to make it align center, but it was
mostly me trying to figure out which part needs to be coded and with
what code (justify content or align content or text align) so it was
not as exhausting to do as the desktop version.
|
| Fig 11. Font Size Trial for Mobile Responsiveness CSS (Week 14 | 26/07/25) |
Figure 11 was just a minor setback in
which I had some difficulties trying to guess how big is to big for
mobile view. In the end I decided to use most of the original font size
with bigger font size for the paragraph texts as well as bigger buttons.
After a final check, I decided to make the h1 and h2
smaller to not take up too much space. The card display that was
supposed to be only 1 per category (so 3 card) was made so that every
item had it's own card that could be open.
(1465 words)
|
| Fig 12. Final Project Folder (Week 14 | 27/07/25) |
"A disclaimer that while the texts in the content of the website
was created using AI (ChatGPT), the HTML and CSS code was purely
done by me with research done on W3School and Youtube Videos."
B. DEVELOPMENT DECISIONS
1. Forms
|
| Fig 13. Registration and Log In Form (Week 14 | 27/07/25) |
In the prototype as seen in figure 13, the contact page had a form for registration and log in however that plan was discarded since I had just realized that because I changed the website from an e-commerce website to simply and information website, this form will have no use at all. Originally the use was to track online order history like the usual e-commerce app but with the option of online shop gone, this form has lost it's meaning and had been discarded in the final website.
2. Menu
|
| Fig 14. Dropdown Menu (Week 14 | 27/07/25) |
As seen in figure 3 and 14, the menu was changed from
what I wanted in the prototype to the current dropdown menu due to
unknown coding method.
3. Contact
I found out in the last minute that they did in fact not have a WhatsApp so I had to quickly find and change the WhatsApp logo into a call me logo instead.
(149 words)
C. DEVELOPMENT SUMMARY
Due to the an assumption that the measurement
unit used was problematic, I changed the header (Navbar) into
fixed size width, around 1400px. After some fixing and
returning the width into 100vw, I managed to create a responsive
desktop navigation menu. I then continued to the mobile version where I tried to use a
hamburger menu. In the end, I decided to just use display block and made it
seem like an open hamburger menu with the half-transparent black
background. In the navigation bar, the "Menu" was also changed from
what I wanted in the prototype to the current dropdown menu due to
unknown coding method. For the background I inserted the image through
HTML but after some feedback and research, I used a background image
in css instead.
Another challenge I faced multiple
times is the image and text responsiveness. As seen in figure 6, I
stuck with height as the numerical unit holder and width as the auto
size. The images and texts size in the mobile version was easier to
do, although due to the nature of the image and text placement in the
HTML, the text and image placement in the mobile version is slightly
weird. In the Menu page, I made the card display into grid with the
desktop version having 5 grids while the mobile version having 2.
The footer is definitely the top one most difficult
challenges I had faced during the entire coding session. It took a
while of doing that part over and over again with a lot of trial and
errors with the same responsiveness problem before I actually arrived
at the current footer CSS shown in figure 10. I made the footer into
display grid with 2 columns x 2 rows for the mobile display. One last
change that I made that differs from the prototype is the register and
login form in the contact page that was discarded due to lost of
purpose after website purpose was changed from online shop into an
information website.
(337 words)
D. SUBMISSION
Reflection
I was doubting myself the entire time I was coding for this website, I kept thinking whether I am suitable for this or not. I felt really good when I overcame a hurdle but I felt stupid when I couldn't and had to take an easy way out. It was a really exhausting process that took days to perfect and even now I still think there's a lot of things that could have been better, maybe one day when I'm better I'll redo this project. I also observed my friend's websites and was started thinking if I was making this too simple. I did plan to make it quite simple since I know I will struggle during the coding process and decided to make it pretty simple (although the code was not) but when I saw others' website I couldn't help but feel that mine looked like I halfheartedly did it despite it being a product of my hard work. What my lecturer said to me about the 5 principles of website design did make me calmer though. Either way, I am really proud about how the final website turned out and really hope everyone likes it too. I am a little scared about my marks though but hopefully all is well.
Comments
Post a Comment