Interactive Design - Final Project
01/07/2025 - 27/07/2025 / Week 11 - Week 14
Aquela Zefanya Soares / 0374377
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
TABLE OF CONTENTS
INSTRUCTION
FINAL PROJECT
Progress
For this project, I started by working on the logo first. I had an image of the logo, so I opened it in Adobe Illustrator and used the Image Trace feature to turn it into a vector. After adjusting the settings to clean it up, I expanded the traced image and then saved it as an SVG file. I chose SVG because it keeps the quality sharp no matter what screen size it's viewed on, and it’s perfect for web use. Once the SVG was ready, I added it to my HTML file as the logo for the website header.
After that, I began coding the structure of the site in Dreamweaver. I wrote all the HTML myself, setting up the layout section by section. I created the header, navigation, hero section, content areas, image sections, and footer. I also organized all my project files into folders: one for images (including the logo SVG), one for CSS, and another for JavaScript. Keeping everything neat from the beginning really helped when I had to go back and fix things later.
For styling, I wrote my own CSS. I didn’t use a pre-made template, I customized everything manually, from the layout, font styles, colors, buttons, to hover effects. I followed several YouTube tutorials to understand how to write better CSS and how to create effects like hover transitions and responsive grids. When I didn’t understand why something wasn’t working, I used AI to help me debug my code or check if I was missing anything. It was super useful when I made small mistakes that were hard to spot, like typos or missing semicolons.
Once the desktop layout looked good in Dreamweaver, I uploaded the whole project to Netlify to see how it looked live. I used Netlify’s manual upload feature, which was really easy. But after viewing the site on my phone and tablet, I realized I forgot to make it responsive. The layout looked fine on a laptop, but on smaller screens, the elements were all over the place. The navigation menu didn’t adjust, images were oversized, and some text was hard to read.
So I went back to my code to fix that. I used the browser’s inspect tool to test different screen sizes and figure out what parts needed changes. To make the site responsive faster, I decided to use Bootstrap, especially for the navigation bar. I linked the Bootstrap CDN in my HTML file and used Bootstrap classes like navbar, navbar-toggler, collapse, and container-fluid to create a navbar that would collapse into a hamburger menu on smaller screens.
At first, the navbar didn’t collapse properly, and the toggler icon didn’t show up. I used AI to help figure out what was missing. It told me I forgot to include Bootstrap’s JavaScript and Popper.js links, and also helped me correct the data-bs-toggle and data-bs-target attributes. After that, the navbar worked just how I wanted it to.
I also used Bootstrap’s grid system to make the rest of the layout responsive. I applied classes like row, col-md-6, col-sm-12, and so on to make the content adjust based on the screen size. I combined Bootstrap with my custom CSS to keep the look consistent with my original design.
For some interactive parts, I added a bit of JavaScript. For example, I used it to create smooth scrolling and toggling content. I followed a few beginner-friendly YouTube tutorials and then modified the code to suit my layout. Sometimes the scripts didn’t work the first time, so I used AI to help me figure out what the issue was, like missing event listeners or incorrect class names.
After all those changes, I reuploaded the site to Netlify. I had to do this several times because I kept making small adjustments to improve the layout and responsiveness. Every time I updated the code, I zipped the folder and uploaded it again through Netlify’s drag-and-drop feature. I tested it after each upload to make sure everything worked properly.
The whole process was basically: create and trace the logo in Illustrator, save it as SVG, write the full HTML in Dreamweaver, style it with CSS, use Bootstrap for responsiveness, add JavaScript for interactions, get help from YouTube and AI when I got stuck, and finally upload everything to Netlify. I kept checking the layout on different screen sizes and made edits until everything looked right on desktop, tablet, and mobile.
Outcome
Website link: https://aquelazsfinalprojectver2.netlify.app/
HTML link: https://drive.google.com/drive/folders/15LOeLIp1-3VNvOMr_QhNVIWH7rggS-Cd?usp=drive_link
REFLECTION
Looking back, this project took way more time and energy than I expected, but I learned so much from it. At first, I thought it would be as simple as just copying an existing website’s look, but once I started building everything myself, from writing the HTML, styling with CSS, and adding JavaScript, I realized how detailed and technical it really is. Every little thing matters, from the placement of elements to how they behave on different screen sizes.
One of the biggest challenges I faced was making the site responsive. I didn’t plan for mobile or tablet views at the beginning, so when I finally tested it on smaller screens, it looked really bad. That forced me to go back and change a lot of things. Even though it was frustrating at first, I’m actually glad I made that mistake, because it taught me how important it is to think about responsiveness from the very beginning. It also gave me the chance to learn how to use Bootstrap, which really helped speed things up and make my layout cleaner.
Another thing I struggled with was debugging. Sometimes the site would break, or something wouldn’t work as expected, and I had no idea why. I would stare at the code for so long and still not see the problem. In those moments, using AI was really helpful. It helped me catch small mistakes and also explain things I didn’t fully understand, like why a certain class wasn’t working or why my JavaScript wasn’t firing properly. I also relied on YouTube tutorials, especially when it came to writing CSS and learning how to structure JavaScript in a simple way.
Comments
Post a Comment