Interactive Design / Assignment 3 - Final Project
Due Date : Due 4 Jan 2025, 23:59
Task : For this assignment, we are tasked with turning our website prototype into a fully functional, live website. The goal is to implement all the design and user experience decisions we've made, ensuring the website is polished and professional. We will need to use HTML, CSS, JavaScript, and possibly frameworks like Bootstrap to create a responsive, cross-browser compatible website. Key features include user-friendly navigation, interactive elements, and fast load times. After completing the site, we will conduct thorough testing and deploy it on a live server, providing a public URL along with a report documenting our development process.
Process (Figma Design)
In this final assignment, I have made some design and layout changes compared to the prototype and added a new page. I did not code the "Booklist for School" page. Instead, I coded the "Booklist" page. Here is the Figma design I created as a guideline for myself to code the elements.
Sketch(guideline)
Final outcome view in Figma (the version that I coded out)
- Click Here To View - Home Page
- Click Here To View - Booklist
- Click Here To View - Event
- Click Here To View - Store Location
- Click Here To View - Contact Us
Documentation - Website Development Process
This assignment involved creating a fully functional website using HTML and CSS. It was a journey filled with challenges, problem-solving, and learning opportunities. I initially approached the task with enthusiasm but quickly realized that building a complete website required a significant amount of trial and error, especially in making the website responsive and aesthetically pleasing.
By starting this assignment I began by coding the homepage, intending it to serve as the central hub of the website. However, the complexity of its layout overwhelmed me. After some frustration, I decided to start with a simpler page—the store location page—and build my confidence before returning to the homepage.
Early on, I encountered a technical issue where my CSS and HTML files wouldn’t link correctly. This problem was particularly frustrating because, at first, I couldn’t identify the cause. After repeatedly checking my code and re-linking the files, the issue suddenly resolved itself. Although I wasn’t sure what fixed it, this experience taught me to be meticulous with file structures and references.
- Challenges with Responsiveness
I have create two vision for this assignment but my first version of the website lacked responsiveness, which made it look disorganized on smaller screens. For several days, I attempted to adjust the layout using standard CSS techniques, but nothing seemed to work. This led me to start over and rebuild the website using Bootstrap, a framework designed to simplify responsive design. While Bootstrap made responsiveness easier, it introduced its own learning curve. Understanding its grid system, components, and utility classes took time, but it ultimately improved the design and functionality of the website.
Page-by-Page Overview
- Homepage
The homepage was the most challenging to create. It featured several complex elements, including a top slider for posters, a selection section, and a booklist section.
Initially, I attempted to implement the poster slider using JavaScript. However, after extensive research, I discovered that Bootstrap’s carousel component could achieve the same effect without requiring additional JavaScript. While positioning the slider was also taking time as it keep get off scale or not at the center of the page.
For the selection section, I initially placed three items in a row, but this arrangement didn’t look balanced. I redesigned it to display all items in a single row with hover effects on the images. This redesign introduced a new challenge: the images would resize inconsistently when hovered over. After multiple adjustments, I finally fixed the issue and achieved a clean, uniform look.
The navigation bar on this page also posed issues. It appeared narrower than on other pages, creating a noticeable inconsistency. After thorough troubleshooting, I realized that the max-width settings for the homepage differed from those on the other pages. Correcting this setting resolved the issue.
- Store Location Page
Initially, this page seemed to be the easiest to develop. However, incorporating a Google Maps iframe proved to be more complicated than expected. When I first embedded the map, it didn’t display correctly. After experimenting with different approaches, I realized that the iframe code I copied from Google Maps was incomplete. Once I copied the full code with the necessary <iframe> tags, the map displayed correctly. This process reinforced the importance of double-checking embedded content and using complete code snippets.
- Booklist Page
The booklist page was another source of frustration. In my first version, created without Bootstrap, the layout was chaotic, and the page wasn’t responsive at all. Switching to Bootstrap made a significant difference, as the framework’s grid system helped organize the content.
The most challenging aspect of this page was ensuring that all images fit correctly within their containers. Some images stretched or cropped incorrectly, disrupting the layout. I spent a lot of time adjusting column widths and image sizes to create a consistent appearance. Eventually, I finally achieved a balanced design that worked well across different screen sizes.
- Contact Us Page
On the contact page, I faced difficulties positioning the logo above the form. Initially, the logo and accompanying text were either too far apart or misaligned. After multiple attempts, I managed to position them correctly.
Another issue on this page involved the footer’s subscribe button. The hover effect wasn’t working as intended—it turned gray instead of the desired color. After trying various solutions, I used the !important declaration in my CSS to override conflicting styles. This resolved the issue and ensured the button behaved consistently with the rest of the website.
- Events Page
For the events page, my original design featured a button that slightly overlapped the image above it. However, despite trying several methods, I couldn’t achieve this layout. To simplify the design, I placed the button and accompanying text in a container below the image. While this wasn’t my initial vision, it created a cleaner and more functional layout.
- Final Adjustments and Troubleshooting
Once all the pages were coded, I reviewed each one to ensure consistency in design and functionality. During this process, I noticed inconsistencies in button styles, hover effects, and font sizes across pages. I resolved these issues by standardizing my CSS classes and using Bootstrap’s utility classes for alignment and spacing.
When linking the pages together, I encountered another problem. Although I named the files using a consistent format (e.g., index.html and store.html), the links didn’t work when I uploaded the site to Netlify. After thorough investigation, I discovered that some files had been saved with an extra .html extension (e.g., store.html.html). Correcting these filenames resolved the issue, and the website functioned as expected.
- Conclusion
Creating this website was a challenging yet rewarding experience. Despite the setbacks and frustrations, I learned valuable lessons about web development and improved my ability to adapt to new tools and techniques.
Final Outcome - Netlify Link
CLICK HERE TO VIEW THE FINAL WEBSITE -UBSM
Clickable items on this website:
- Booklist
- Contact Us
- Event (filter by month - dropdown)
- Store Location (with map)
- Home page (headings of Booklist, Event, and Store Location)
- Profile circle
Reflection
This module is the first time I’ve learned and started exploring HTML, and it was quite a struggle since my coding skills are a bit weak. This made the process challenging, but I was eventually able to get the results I wanted. To code this, I kept referring to websites that teach CSS and searched for keywords to achieve the desired effects. I also looked into Bootstrap for additional elements. Since I was using Bootstrap, it became a bit complicated and took some time to understand.
Although coding a website was difficult, once I completed it, I felt a great sense of satisfaction. However, during this assignment, I made several careless mistakes that caused errors or unexpected outcomes, which required time to fix. Additionally, for some pages, the code was too long, and I did not label it properly, causing me to spend a lot of time searching for sections and labeling them for better organization.
Comments
Post a Comment