Interactive Design- Final Project

17.06.2025 - 27.07.2025 / Week 9-Week 14

Chika  Clarissa Widjaja / 0378636

Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University

Final Project

                           

---

TABLE OF CONTENTS

• INSTRUCTIONS
• TASK
• REFLECTION

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/16IkoMiIbbtlHzVGN1GHzH0TBH-p65FHB/preview" width="640" height="480" allow="autoplay"></iframe>

---

TASK

Chosen Website to Re-Design:  https://www.mejakursipendidikan.com/

1. Navigation and Footer 

First, I started off with the navigation and footer. This way, I can just copy paste it to all of the pages. Below there are some explanations on things that were not taught in class and why I used it. For some, I used Chatgpt to help me and from there I adjust and learn more. I also removed the lines in the navigation like in the prototype because It was messing with my media responsiveness. No matter what I do to try to fix it, It doesn't work, and removing the lines fixes it immidetly.

NOTE: 

I know there are some duplicate styles in my CSS, especially in the media queries for responsiveness. Honestly, I spent such a long time trying to get everything to work properly that by the time it finally looked right, I was too tired to clean up the old code. As long as it works, right? hehe. Also, when I wanted to tweak certain parts, instead of hunting down the original line, I just added new rules at the bottom of the CSS. Not the cleanest way, I know, but it got the job done and saved me from more headaches. 

HTML Structure

Header Container

<header class="header"> 

This tag wraps the whole top section of the page. I used <header> because it’s semantic HTML (helps with SEO and accessibility), and the class "header" connects to my CSS so I can style it easily.

Left Navigation

<nav class="navbar left-nav"> 

I split the nav into left and right sections instead of putting everything in one nav tag. It makes the layout easier to manage, especially when centering the logo, and helps later on when making it responsive. The "left-nav" class isn’t really needed, but I left it there just in case I want to style it differently later.

Logo Section

Fig 2.1 Logo Section, Week 10

The logo is in its own div so it’s easier to position later with CSS. It also lets me add hover effects just to the logo. The & is used instead of a regular & to avoid HTML errors — it’s just the proper way to write special characters in HTML.

CSS Styling

Flexbox Alignment

Fig 2.2 Flexbox Alignment, Week 10

Using space-between pushes the left and right nav items to the edges of the header. align-items: center keeps everything lined up vertically — without it, the logo would look a bit off.

Stylish Divider Lines

Fig 2.3 Divider Lines, Week 10

This is how I added lines between nav items in the navigation (except the last one). ::after makes a fake element after each link. right: -8px shifts it slightly so it sits nicely between items, and I made it 70px tall so it looks intentional and not too tight. Chatgpt helped me with this one as I struggle a lot at first. 

Centering the Logo

Fig 2.4 Centering The Logo, Week 10

This is a  method i use for centering. First, left: 50% moves it to the middle, then transform: translateX(-50%) pulls it back half its own width to keep it perfectly centered. It works better than margin tricks, especially in responsive layouts. 

Footer Section

HTML Structure

Social Media Icons

Fig 2.5 Social Media Icons, Week 10

I took the icon images from the internet and turn them into png transparent. Each icon has alt text, which helps screen readers know what it is. Even though the links aren’t working yet, I wrapthem in <a> tags to prepare the layout for future updates.

CSS Techniques

Gradient Background

background: linear-gradient(90deg, #000, #333);

This adds a gradient instead of just plain black like in my prototype, and makes it look a bit deeper. The 90deg part makes it fade from left to right. Using hex colors like #333 just gives better control over the exact shade.

Icon Sizing 

.social-icons img {
width: 15px;
height: 15px;
}

Giving the icons a fixed size helps avoid any weird layout shifts and keeps them looking consistent — which is helpful since they’re from different sources. I also added a smooth hover effect with transition: all 0.3s ease, but it’s not shown here.

2. Homepage

When starting the homepage, I start inside the body where I had previously made my footer and navigation. There were a lot of difficulties when making the homepage, like errors when inputing the code, etc so naturally it took the longest as it had the most content too, but I'll try to condense it and explain the best I can. 

HTML

Section Structure

<section class="hero">

 I used section tags to separate the page into different parts like the hero, the intro, and the services. It just makes the whole layout easier to understand and manage when I’m styling in CSS. Also looks cleaner than stacking random divs everywhere.

<div class="hero-content">

 This is where I put all the text and the button for the hero section. I wrapped them in this div so I can center everything properly with flexbox later in CSS, and also to control spacing easier.

Button as a Link

<a href="contact.html" class="cta-button">CONTACT US</a>

This looks like a button, but it’s actually a link. I used <a> so that it can take the user to another page. I’ll style it in CSS to make it look like a proper button.

Full-Width Section

<section class="full-width-section"> 

I made this section go full width across the page to break up the layout and highlight the chair description. This way, it feels like its own section and doesn’t get lost in the layout.

Side-by-Side Layout

<div class="main"> <div class="aside-left"> <div class="aside-right"> 

This part was to create a two-column layout. One side has an image, and the other side has the content. Splitting it this way makes it easier to manage in CSS and to make it responsive later.

Service Card Layout

<div class="chaircontainer"> and <div class="col"> These hold the three product/service cards. Each card is in its own col div so I can style them evenly and make sure they line up in a row in the css. Helps when using flexbox for layout.

Redbox Wrapper

<div class="redbox"> I wrapped the product title, paragraph, and Browse button inside a redbox div just like my prototype. It keeps the text grouped and makes it easier to style separately from the image.

Inline Styles on Button

<a href="chairs.html" class="custom-btn" style="...">Browse</a>

I used inline styles for now just to quickly style the buttons, like setting the background color, padding, etc. It’s probably better to move it to the CSS file, but this was faster for testing and making sure it looks right.

CSS

After adding all the information from my prototype, I began styling it to make sure everything looked similar or identical to the original design. However, the font I initially wanted to use had some issues because it wasn’t free, so I struggled quite a bit, and the fonts aren’t 100% the same as in my prototype.

Full Bleed Sections
I used width: 100vw and margin-left: -50vw on sections like .hero and .full-width-section to make them go all the way across the screen. It breaks out of the normal container and gives that full-width look, which feels cleaner and more modern than just keeping everything boxed in.

Hero Section Background
For the hero, I set the background using background: #000 url('images/CHAIR.jpg') center/cover no-repeat. The black acts as a fallback if the image doesn’t load, and cover makes sure the image always fills the whole space without repeating or getting cut off

Centering the Hero Text

Inside .hero-content, I used position: absolute with flexbox (justify-content and align-items center) to get the text and button right in the middle of the screen. It’s just the easiest way to make sure everything is perfectly centered no matter the screen size.

Full-Width Section Trick

For .full-width-section, I used left: 50% with margin-left: -50vw. It looks weird at first, but it’s actually a trick to make that section break out of the container and stretch edge to edge. I used this for the section with the beige background so it stands out more. For this, ChatGPT helped me.

Navbar Divider Lines
I added vertical lines between the first few nav links using ::after. It’s just a small detail but it makes the nav feel more structured. I had to use position: absolute to get them in the right spot, which took a bit of adjusting.

Button Hover Effect
I added a hover effect on .cta-button so the red turns darker when you hover over it. Of course I also use the same color from my prototype. 

Three Equal Columns
For the product section, I used flex on .chaircontainer and gave each .col a width of calc(33.333% - 2rem). That way, all three cards fit evenly across the page and stay spaced out nicely.

Text Shadow in Hero
I added a bit of text-shadow to the hero text so it’s easier to read on top of the image. Some parts of the background are bright, so the shadow helps the text not disappear.

3. Contact Page

Next I start working on the contact page as I think this is the easiest page to do out of all. I also decide to do the pages that I made in Figma first, just so I can imagine it better. Also, I changed the placing of the Visit us section to be closer to the contact us for media responsiveness. 

HTML

Overall Layout

<div class="contact-container">  

This is the main wrapper for the whole contact section. I put both the form and the info side-by-side inside this div. It just keeps everything grouped together so it’s easier to style and lay out using flexbox or grid in CSS.

Contact Form Section

<div class="contact-form">  

This is where all the input fields go. I separated it from the contact-info section so I could control the layout better, like keeping the form on the left and the info on the right (or stacking them on mobile).

Form Fields

<div class="form-field">  

Each field like name, subject, message is wrapped in its own form field div. I did this to make the spacing consistent between them and to make styling easier. Without this, it’s harder to control the gaps and alignment between labels and inputs.

Labels and Inputs

 <label for="name"> and <input type="text" id="name">

I added proper labels and matched them with the input's ID. This is actually important for accessibility — like if someone is using a screen reader, it helps the software know what each input is for. Also, when you click the label, it focuses the input.

Textarea for Message

<textarea id="message" name="message"></textarea>  

I used a textarea instead of an input here for  the message section because the message section is supposed to be longer.  Based on ChatGPT, Textareas let the user type in multiple lines, which makes sense for this section. 

Contact Info Section

<div class="contact-info">  

This part lists the phone numbers, email, and address. I separated it into its own div so I could lay it next to the form and style it differently — like changing the font size or alignment without messing up the form.

Contact Info Headings and Text

<h2> and <p>  

I used h2 for each section (Call us, Visit us, Email us) to break up the content. Then I put the actual details in <p> tags so it’s easy to read. 

Submit Button <button type="button" class="redbox">Submit</button>

I added a custom class here called redbox just to test out how I want the button to look later in CSS. Also used type="button" instead of submit since it’s not connected to a real backend, so the page doesn’t refresh.

Embedded Google Map

  

Fig 2.6 Embedded google map, Week 11

Finally I embedded a google map of the actual factory here to show the exact location. How I do it is I went to google maps, type in my location, share the link, and press embed. Then I pasted it into my code. I set the width to 100% and height to 400 so it fills the space nicely and isn’t too small.

CSS

Reset & Base Styling

Fig 2.7 Reset and Base Styling, Week 11

I started with removing the default margin and padding using margin: 0 and padding: 0, just to make sure the layout starts fresh. overflow-x: hidden is there to stop any weird horizontal scroll issues that sometimes happen when elements go outside the screen width.

Hero Section Layout

Fig 2.8 Hero Section Layout, Week 11

This is for the big banner section. ChatGPT helped me set up the background: #000  center/cover so the background image stretches fully, centered, and fills the whole area nicely, as I when I tried so many times it did not work. I also used the full-width trick with width: 100vw and `margin-left: -50vw to make sure it breaks out of the normal container.

Cards and Columns

.row, .col, .chaircontainer 

I used `display: flex` for the chair section to line up all three product cards in a row. Each product card (like the school chairs, office chairs, and university chairs) is inside a div with the class "col". In the CSS, I set the width to calc(33.333% - 2rem), which basically means I wanted each card to take up one-third of the row. But if I just wrote 33.333%, they would be too close together or maybe even overflow. So the - 2rem part minus some space to leave a nice gap between the cards, which the layout look more balanced and neat.

Contact Form Layout

.contact-container 

I made the contact page into a grid with two columns, one for the form and one for the info. grid-template-columns: 1fr 1fr makes both sides equal. I also used gap to space them out and `max-width` to keep the layout centered and not too wide on big screens.

Map Section

.map-container

This spans the full width of the contact section. I used grid-column: 1 / -1 to make the map stretch across both columns of the grid, which looks more balanced than squeezing it into one side.

4. About Us

HTML

About Us Section

Fig 2.8 About Us Section, Week 12

I grouped the paragraph and image inside .col1 to keep them together as a section. This makes it easier to style them as side-by-side columns using flex. The paragraph is inside .about so I can set a max width on it, and the image has the class .chair1 so I can control its size and layout separately. 

Vision and Mission

Fig 2.9 Vision Mission Section, Week 12

This section has two main parts: the chair image and the two blocks of text (Vision and Mission). I placed both text blocks inside .numbered-section divs and added a span with the class .section-number to add a visible number (like 1 and 2 ). I put the image first in the HTML and gave it the class .chair2 so it can float beside the text and not push everything down.

Why Choose Us Cards

Fig 2.10 Why Choose Us Cards, Week 12

Each of the three benefits is inside its own div with the class .benefit-column. This lets me style them like cards in CSS. I added a .contact-prompt at the bottom of each one to act like a button, which links users to contact info or just draws attention. 

CSS

About Section Two Column Layout

Fig 2.11 About Section, Week 12

I used display: flex on .col1 to make the About Us text and image appear side by side. The image has its own class .chair1 so I can control the size and make it fit nicely next to the text. I also used margin-left and margin-right on .col1 to adjust its position inside the container, even though it’s a bit hacky. But it helped me fix the alignment issues when the content was shifting too much on wide screens.

Vision and Mission 

Fig 2.12 Chair, Week 12

The chair2 image is floated left and I used shape-outside: margin-box to let the text wrap around it naturally. It makes the section feel more dynamic instead of just stacking everything vertically. I had to use negative margin-left values (like -300px or -450px) on .chair2 to push the image into the space I wanted, which wasn’t easy because it can break on smaller screens. The .numbered-section class is for the text parts like Vision and Mission, and I limited their width so they don’t stretch too far and stay readable.

Why Choose Us Cards

Fig 2.13 Why choose us CSS, Week 12

I used display: flex on .benefits-grid to place the three benefit columns in a row. Each benefit (like Durability or Warranty) is inside a div with the class .benefit-column. I also used box-shadow on these to make them look like proper cards. The .blue-square is a decorative box that floats above each card. I positioned it using position: absolute and centered it with left: 50% and transform: translateX(-50%). It only works properly because I set the parent (.benefit-column) to position: relative.

Responsive Fixes

@media (max-width: 992px), .col1, .chair1, .vision-mission-container

I added media queries with the help of ChatGPT because all of the media responsive took the longest and the hardest because I didn't know how, and it kept not working.  Under 992px, I change .col1 from row to column so the image stacks under the text. I also reset the margins that were pushing content offscreen. The .chair1 and .chair2 images get smaller and centered so they don’t overflow. I used flex-direction: column and max-width to control the layout breakpoints.

5. Clients Page

The clients page was the most simple page in my website as there isn't that much content, I just had to properly align them together.

HTML:

Clients Intro Section

Fig 2.14 Clients Introduction section, Week 13

This section gave an introduction about the clients. I wrapped the heading and paragraph inside a div with the class .clients-section so I can control the spacing and alignment all together. I gave the heading a class (.clients-title) , and the paragraph (.clients-description) helps with styling the text smaller and neater under the title. It's just for layout and readability.

Client Lists Section

Fig 2.15 Clients Lists, Week 13

I made two columns for the client categories using .client-column. Each one has a title and a list of schools or universities. I used two ul elements inside each column: the first one shows by default, and the second one is hidden using the .hidden class. The "See More.." button with the .see-more class is linked to a small JavaScript function. When the button is clicked, it toggles the hidden list and also changes the text to "See Less".

CSS:

Full Width Section

Fig 2.16 Full Width section, Week 13

I used width: 100vw and a centering trick with left: 50% and margin-left: -50vw so this section stretches across the whole browser window, ignoring the normal container padding. The background color is beige (#FAF7F4) to visually separate it from other sections.

Hero Section

Fig 2.17 Hero section, Week 13

The hero has a big background image of chairs. I used position: relative and the same margin-left: -50vw trick to make it stretch the full width. I also added min-height: 500px to make it tall enough and used background: center/cover so the image scales nicely. The text is centered in the middle using flexbox.

Description Block

Fig 2.18 Description Block, Week 13

This is the content inside the full-width section. I centered it with margin: 0 auto and used max-width: 800px so the text doesn’t stretch too wide. I also set text-align: center to keep the heading and paragraph balanced.

Clients Section & Grid

Fig 2.19 Clients Section and Grid, Week 13

This section introduces a list of client types. I gave it padding and centered the title and paragraph above the grid. It has a white background and consistent font styling. I also used display: flex to line up the client columns in a row. Each column (like “Education”, “Offices”, “Startups”) is in a .client-list box. I spaced them with gap and kept everything aligned neatly using flex-direction: row.

Responsive Layout
@media (max-width: 992px) and below
I also added media queries for this page and all the other pages to adjust padding, text size, and layout spacing on smaller screens. For example, the nav links stack vertically, font sizes shrink slightly, and the logo resizes too so everything still looks clean on tablets and phones.

6. School Chair Page

HTML:

Top Bar with Search and Result

Fig 2.20 Top bar with search and result, Week 13

This section is placed right above the product grid. It has a text that shows how many results are displayed and a search bar on the right. The .search-bar has an input and a button placed side by side using flex so they stay aligned. It doesn’t actually search yet but it makes the page look more real. I also added the search emoji from google.

Chair Grid Section

Fig 2.21 Chair Grid Section Week 13

This is where all the chair products are listed. Each chair is inside a div with the class "item", which lets me repeat the same layout for each product. They all have an image, a title, and a description. The .grid class helps lay them out evenly in rows and columns. I used CSS grid to space them out and keep it responsive across screen sizes.

Pagination Section

Fig 2.22 Pagination Section Week 13

The pagination buttons are placed at the bottom of the product section. I included numbers and an arrow just for the look. They don’t function, but they make the page feel more complete. Each button has a class so I can style them consistently, like with spacing and hover effects in CSS.

CSS:

Description Block

Fig 2.23 Description Block Week 13

This is the content inside the full-width section. I centered it with margin: 0 auto and limited how wide it gets using max-width: 800px. This keeps the text from stretching too wide, which makes it easier to read. I also used text-align: center to make the heading and paragraph look more balanced. I adjusted the others like h2 and p to my liking.

Hero Section

Fig 2.24 Hero Section Week 13

The hero has a full-width background image of chairs and is positioned using the same centering trick with vw and negative margins. I added min-height: 500px to make it big and bold, and used background: center/cover to keep the image filling the space nicely. It also has text centered both vertically and horizontally.

Hero Overlay

Fig 2.25 Hero Overlay, Week 13

This adds a dark overlay on top of the image using rgba(0,0,0,0.6). It helps make the white text easier to read by dimming the background without editing the actual image.

Top Bar with Results and Search

Fig 2.26 Top Bar with Results and Search CSS, Week 13

I used display: flex to line up the result text and the search input/button next to each other. justify-content: space-between makes one stick to the left and the other to the right. It looks clean and functional, even though the search doesn’t work yet.

Product Cards

Fig 2.27 Product Cards, Week 13

Each chair is wrapped in a div with the class "item". I styled them with background: white, some padding, and text-align: center. Inside, I made the image smaller (width: 70%) and centered it using margin: 0 auto.

Pagination

Fig 2.28 Pagination CSS, Week 13

These are the page numbers at the bottom. They’re styled with background: #A82231, white text, and padding so they look like buttons. display: flex and gap: 5px keep them spaced evenly.

Responsive Fixes
@media (max-width: 1200px), (992px), (768px), (576px)
I used multiple media queries to make sure the layout works on different screen sizes. For example:

• On tablets, the grid goes from 3 to 2 columns
• On phones, it becomes 1 column
• Font sizes shrink slightly for smaller screens
• The .col width also adjusts so nothing overflows

WEIRD PROBLEMS I FACED BUT CAN'T FIX

Navigation Clashes/Inconsistent 

I’m aware that my navigation appears differently on some devices — sometimes the elements clash on top of each other, and on different pages there’s inconsistency. For example, the font in the homepage navigation is bold, while in the school chair section it appears regular. I’ve tried to fix both of these issues multiple times over several days using ChatGPT and Deepseek, and even on the day of submission I gave it one last try, but nothing seemed to work. I tried changing the alignment, the positioning, even messed around with media queries thinking maybe it was a screen size thing... still didn’t work. Turns out, the issue is probably that something in my CSS — maybe a style that centers the logo — is being applied across all screen sizes, even on wider screens like the Surface Pro. And in the version that works, that centering style is probably only showing up on smaller screens, like mobile. So even though the HTML and most of the CSS look the same, how it behaves on different screen sizes is completely different.

School Chairs section goes out of bounds a bit 

On the school chairs page, the section where the chairs are displayed goes slightly off the screen when viewed on phones or tablets. Just like the problem I had with the navigation, I tried so many times to figure out what was wrong and how to fix it, but nothing worked. I adjusted my media queries over and over, still no change. I even tried tweaking different parts of my code, but every time I did, it either broke the layout or shifted everything out of place. It felt like whatever I did was wrong — like a total lose-lose situation where one fix just creates another problem. Honestly, it was super frustrating because I kept going in circles and felt like I was making it worse instead of better.

Submission:

A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).

Live URL: https://pujaankampussekolah.netlify.app

Final Project File Google Drive: https://drive.google.com/file/d/1xBtV-GN9bOX-ijVa1t9lDGrBZveRjR5y/view?usp=sharing

---

REFLECTION

I'm going to be completely honest—this was my first time coding, and I had such a hard time. I'm not really a numbers or words kind of person, and I had never been interested in coding before, so this module felt really challenging and tiring. That’s one of the reasons I used ChatGPT for some parts—especially the ones I tried over and over but couldn’t get to work. For the rest, I relied on what I learned in class and help from Mr. Shamsul. There were definitely a lot of struggles in this module, but there were also some good moments. Never in my life did I think I’d be learning how to code. Like I said, I’ve never even touched code before or had any interest in it, so learning something totally new was actually kind of fun. Now I can even brag that I know how to code—hehehe. Of course, this is just the beginning, and there’s still a long way to go because coding gets way more difficult. In conclusion, even though it was super frustrating at times, I'm proud that I pushed through and managed to make something in the end. I might not become a coder, but at least now I understand the basics and how websites are built. It’s a skill I never thought I’d have, and even if it’s just for beginners, it still feels like an achievement.