INSTRUCTIONS
FINAL PROJECT
For our final Interactive Design assignment, we were to CODE at least 5 pages on our prototype redesign from our last assignment (view here!) This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website. We were to use bootstrap html and css toolkit (or any other toolkit) to help build our final assignment! Additionally, if we hadn't already (which I hadn't...), we were to document the interactive design exercises we did throughout the semester. You can access those exercises here!
We were to be graded on a few things, namely:
Website Development
- Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).
- Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
- Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
- Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
- Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
- Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations
- Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
and finally Final Testing & Deployment
- Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
- Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Netlify Website Overview
Netlify Website Link: https://finalproject-sitizarasophia.netlify.app/
Video Link (GDrive): https://drive.google.com/file/d/13C3-Rpd_pCLgxl0uCTygtwm5-jMZwiZU/view?usp=sharing
Google Drive
GDrive Link: https://drive.google.com/drive/folders/1bPsx4OzUweOe7jhuUEhj7XZK2SYnRYy0?usp=sharing
Figma Prototpye Overview
My Website Pages
For my website pages, I decided to create the following:
- Home Page
- About Page
- Contact Page
- My Books Page
- Book Description/The Bike Guy Page (accessed when clicking 'The Bike Guy' image in the My Books Page)
Development
1. Home Page
Codes & Images
Overall Experience:
To be honest, after the hero section, I struggled A LOT with the remainder of the page—especially when I was trying to tackle the carousel WITH multiple components! I definitely tinkered around and brute forced it with TONS of trial and error when creating just the first two carousels of the page... I tried a few methods and failed, I tried to pa-zazz some of the carousels with more interesting colours but unfortunately couldn't. Therefore, some of my designs aren't 10000% carbon copies of the prototype. But what I've learnt from this is to definitely just take a moment and just REST for a bit before attempting stuff again so you don't feel frustrated and straight up procrastinate for DAYS (I've been there...).
Design-wise, I think the hardest to execute was my 2nd carousel that used bootstrap's javascript mechanics... Firstly with just the comment layout, I just could NOT get it in the places I wanted it to be in. After trying for literal hours (it took me about 6 hours of trial and error, no joke!), I just made the executive decision to use images in order to make the scripting a bit more straightforward which CERTAINLY helped me in focusing on the actual javascript mechanic!
Challenges:
- Navigation bar was WAY too thick
- Carousel wasn't as animated and pretty as designed
- Despite multiple trials and errors, I couldn't get the comments properly aligned thus I couldn't do the Javascript for my 2nd carousel
How I Overcame Them:
- I messed around with the CSS until it looked better
- I decided to settle for a simpler carousel mechanic in order to focus on other aspects of the page
- Ended up using images of the comments in my original prototype so I could focus more on the carousel component and make it work.
2. About Page
Codes & Images
Overall Experience:
After my trials and tribulations from the home page, I definitely found the about page MUCH easier to execute in general—especially since I could copy paste the nav/hero and footer hehe. I think it was pretty smooth flowing other than the final 'Goodreads Co-Founder' section where I couldn't make everything side by side huhu... After reading a few tutorials (along with some tinkering around to fit my own design), I managed to do it (though I did it in the contact page first before later editing the rest HAHAHA)!! I'm quite proud of this page and I think it not only looks good but is VERY similar to my prototype as well!
P.S The issue was mainly because I was using 2 containers for each side instead of wrapping everything in 1 container
Challenges:
- Couldn't align the content side by side
How I Overcame Them:
- Read a few tutorials on how to do it and edited my HTML and CSS to match (of course with some design changes of my own)
3. Contact Page
Codes & Images
Overall Experience:
Ohhhhh boy! I had a lot of trouble with this page (probably just as much as my homepage HAHA) and unfortunately, I'm still not fully satisfied with the result. However, we live and we learn and I'll be damned but this is much better than what I had initially! As said in the about section, my main issue was actually with the arrangement of content next to each other. But again, as mentioned above, I figured it out eventually by reading a few tutorials... Despite that mishap though, I'm still not fully satisfied because of the alignment of some of the sections, with the map being MUCH longer than I anticipated! So, I had to sacrifice something with my current front-end developing level. Either make the forms centered or make the forms aligned with the top. I chose the former and this is the result.
Challenges:
- Couldn't align the content side by side
- Map being much bigger than anticipated so it hangs a bit longer compared to the forms
How I Overcame Them:
- Read a few tutorials on how to do it and edited my HTML and CSS to match (of course with some design changes of my own)
4. My Books Page
Codes & Images
Overall Experience:
Thankfully, this page was pretty straightforward! I didn't really face any challenges when creating this page compared to the rest as it was just using the same carousel mechanics I largely used in my home page!
5. Book Description/The Bike Guy Page
Codes & Images
Overall Experience:
I'll sound like a complete broken record if I say this again, and again... But it was the same issue I had with both the about and the contact page HAHA
Challenges:
- Couldn't align the content side by side
How I Overcame Them:
- Read a few tutorials on how to do it and edited my HTML and CSS to match (of course with some design changes of my own)
Reflection
Looking back on this whole project, it’s honestly been a rollercoaster—a mix of frustration, small wins, trial and error, and surprisingly, lots of personal growth. I started strong with the hero section, but everything after that—especially the carousel components—really tested my patience and persistence. I didn’t get everything to look exactly like the prototype, and that bugged me at first. But I’ve come to realise that sometimes, it’s okay to adapt, especially when you’re still learning and figuring things out.
There were moments I felt stuck, like really stuck. I spent hours tinkering with layout issues, trying different methods that didn’t work, and even trying to add more flair (which I couldn’t pull off this time). But the biggest thing I’ve learnt is to take breaks when I need to. Being frustrated leads to burnout and procrastination, and I’ve definitely been in that spiral before. Stepping back—even briefly—can make a huge difference in how you come back to solve a problem.
I’m also proud of the executive decisions I made—like using static images in the second carousel when the layout just refused to cooperate. It wasn’t what I planned, but it helped me focus on learning and implementing the JavaScript mechanics instead of spiraling into stress over layout perfection.
Some sections, like the About page, felt smoother, probably because I could reuse parts like the navbar and footer (thank you, copy-paste gods). Even when I hit layout issues again—like trying to make the ‘Goodreads Co-Founder’ section side-by-side—I eventually figured out it was all about container structure. It was such a small thing, but solving it made me feel so accomplished.
The Contact page... oh man. Another tough one. Still not 100% happy with the final alignment, especially with how long the map section ended up being. But again, I did what I could with the skills I currently have, and that’s something I’m learning to be okay with. Growth isn’t about perfection—it’s about progress.
By the time I reached the Review page, things finally felt manageable. It was a straightforward task using the carousel knowledge I’d painfully earned earlier, and it felt nice to end on a lighter note.
Overall, this project taught me more than just HTML, CSS, or Bootstrap—it taught me about patience, problem-solving, and letting go of perfection. It reminded me that it’s okay to struggle, and that learning isn’t linear. Every page, every bug, every stuck moment was part of the process. And even though I still have a lot to learn, I can say this confidently: I’ve come a long way—and I’m proud of that.
Comments
Post a Comment