INTERACTIVE DESIGN - FINAL PROJECT

23/05/25 - 27/07/25 ( Week 9 - Week 14 )
Interactive Design / Bachelors of Design in Creative Media / Taylor's University

Samantha Jizan Amrullah / 0375606

Final Project

Instructions

SUBMISSION

FINAL PROJECT WEBSITE

G-DRIVE FOLDER

REPORT

During the development of this website, my main aim and focus was to showcase custom printing services, including personalized packaging, puzzles, keychains, and display racks. Following the original website as the base content to give myself a guideline on what to display on the website, I try to include relevant information that are also available on the original website that I try to improve.

The development process involved building multiple interconnected HTML pages using Adobe Dreamweaver, focusing on clean layout, responsive design, consistent branding, and gallery integration.

When I started, I named the base source file as tukangprintbeta.html. I thought I could name it anything, but this proved to turn into an issue later on at the end of the project when uploading it into Netlify.

Originally, I wanted to make the website to be a long-scrolling site with jumplinks implemented at each parts for easier access. This is originally due to the confusing nature of the original website that I wanted to fix, thus attempting a simpler and cleaner design. However, as there are supposed to be at least 5 pages for grading purposes, I decided to keep some of the jumplinks as intended but also added other pages that help users navigate better through the other works.

The project began with a base file called tukangprintbeta.html, which served as the home page. It included core sections like a navigation menu, hero section, service highlights, and a footer. From this main HTML file, several subpages were created. Each subpage featured a showcase gallery of work samples related to the corresponding product.

Instead of embedding all work examples in one long HTML file, the project required separate pages for each category. Dreamweaver was used to create new HTML files with a consistent template copied from the original tukangprintbeta.html page. Each file preserved the site’s theme by linking the same CSS file.

To create a responsive gallery that can be easily viewed, I created several pages dedicated to different types of products that represents the past works of the company. These galleries were structured using CSS Grid as such:

.gallery-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 24px;

}

This enabled a flexible, responsive layout that adapted to different screen sizes while maintaining a 3-column layout on desktop. However, I encountered an issue during development. The grid layout was not displaying as intended because the image gallery appeared as a single column instead of the expected three-column format. This issue was caused by nested and conflicting HTML tags, along with redundant <section> and <div> containers that disrupted the CSS grid structure. To resolve this, the HTML was cleaned up by removing unnecessary wrappers, and the CSS grid rules were streamlined and reapplied correctly. Ensuring that only a single .gallery-grid container existed and was not affected by other layout styles successfully restored the intended multi-column layout.

Another issue faced during development was the inconsistent positioning of buttons, particularly the "Home" button, which did not align properly across different pages despite using the same HTML structure. This inconsistency was caused by differences in container wrapping, spacing, and element order within each page's layout. In some cases, the heading and button were placed within different flex containers or styled with conflicting margins. To fix this, the layout was standardized by wrapping both the title and button inside a single flex container with consistent alignment and spacing rules applied through inline styles. This ensured that all buttons were uniformly positioned relative to their corresponding titles, maintaining visual consistency across pages.

When it was time to upload the finished project into Netlify, I encountered a problem that ties back into my first mistake at the start, as previously mentioned. I initially named my base HTML page as "tukangprintbeta.html", not knowing that for it to be able to work, I needed the base source code file name to be "index.html". Looking back, it was such a simple oversight on my end, but it ended up costing me quite a moment of stress. During the development process on Dreamweaver, I keep going back and forth to see the live preview anytime I make any changes, and the preview has always worked despite encountering problems along the way. But when I dropped the file into Netlify, it showed a "404 error page". I panicked and tried other sites to upload my HTML on Tiiny.host. On Tiiny.host, my HTML was successfully uploaded without any other issues. However, for it to be active, I needed to have a subscription, which made me hesitant. Before panicking even more, I tried to calm down and finally researched my issue. Then I found that all of this was because my file name was not "index.html". Then I had to simply change it to that, but also change the other HTML pages that have a link to the home page to link it to "index.html" instead.

RESULT COMPARISON