Interactive Design - Final Project

Week 14

Insha Thahirah Rajab - 0360671

Interactive Design - Section 02

Bachelor's Degree  in Creative Media (Honors) - Taylors University

Final Project

CONTENTS

Instructions

Final Project

Navigation

Reflection

INSTRUCTIONS

PROJECT

Final Project - Fully Functional Site

Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website based on

the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.

Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and 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).

Core Features:

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.

Final Testing and 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.

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.

: final submission

https://mellifluous-cannoli-534e74.netlify.app/

: navigation

Functionalities

Dashboard (Landing Page): The dashboard serves as the central hub with:

• Visual Summaries for quick insights into announcements, GPA, and more.
• A Notes Section where users can jot down personal reminders.
• A Mini Interactive Calendar that displays important dates and allows users to quickly check their schedules.
• A To-Do List that lets users add, check off, and delete tasks once completed.
• A Preview of Courses, displayed in a horizontal scrolling format for quick access.

Courses Page: This page displays all courses in a grid layout with vertical scrolling (two courses per row). Users can:

• Filter Courses by typing in the search bar or using dropdown menus based on their completion status.
• View Upcoming Assignments and deadlines for each course.

Grades Page: The Grades page helps users stay updated on their academic performance. Features include:

• Total Grade Display at the top of the page.
• Module Details: Clicking a module name reveals detailed grades for each assignment, including submission status, due dates, marks, and progress.

Calendar Page: The interactive calendar allows users to:

• Add Events to specific days.
• View a list of events under "Reminders" by clicking on a specific day.
• This page functions as a personal planner for students.

Contact Page: The Contact page features:

• A Bootstrap-powered Contact Form where users can submit details and messages to the university. Once submitted, the form refreshes and clears the input fields as part of the form's built-in functionality.
• Contact Information is displayed below the form for quick reference.

Global Features: Across all pages, consistent elements include:

• A Mail Icon that displays unread messages in a pop-up.
• A Search Bar for quick navigation.
• The MyTimes Logo, which redirects users back to the dashboard.

REFLECTION REPORT

Website Overview

My website project, MyTimes, is a site I created to help students manage their academic tasks and schedules efficiently. The website has a landing page (dashboard) and four main pages accessible through the sidebar: Courses, Grades, Calendar, and Contact. Each page is designed to be user-friendly and functional, catering to the needs of students for organization and communication.

Challenges Faced and How They Were Overcome

Learning JavaScript for Functionality:

One of the biggest challenges I faced was learning how to work with scripts. I needed JavaScript to implement features like the interactive to-do list, message pop-up, and dynamic content updates. Initially, I didn’t know how to make these features work, so I dedicated time to learning JavaScript basics through tutorials and experimenting with small scripts. For example, I learned how to create modals (pop-ups) for the unread messages feature by following online tutorials, and eventually, I got it to work smoothly.

Horizontal and Vertical Scrolling for Courses:

Displaying courses in both horizontal and vertical scrolling layouts was tricky. I had to watch several YouTube videos to understand how CSS and JavaScript can be used to make such layouts responsive. One of the key videos that helped me was about implementing scrolling containers, where I learned how to use overflow-x for horizontal scrolling and flexbox for vertical alignment.

Filtering with Dropdowns and Search Bars:

Integrating filtering functionalities was another challenge. I didn’t initially know how to dynamically filter courses based on the dropdown or search input. I used JavaScript to add event listeners and conditionally display matching courses based on the user's input. This required trial and error, especially when ensuring it worked on a large dataset.

Creating the Interactive Event Calendar:

The calendar on the landing page and the interactive event calendar on the Calendar page were challenging to implement. For the landing page calendar, I used a YouTube tutorial (https://youtu.be/C-rODtCYUbo?si=7YQ1lsXUfJzihyHJ) to understand how to create a basic interactive calendar.

For the event calendar, I referred to a dynamic calendar tutorial from GeeksforGeeks (https://www.geeksforgeeks.org/how-to-create-a-dynamic-calendar-in-html-css-javascript/) and integrated their code into my website. Integration wasn’t straightforward—I had to modify the code to fit my website’s design and functionality. This took some debugging and careful adjustments to avoid breaking other parts of the site.

Lack of Knowledge on Complete Website Development:

As this was my first full-scale website project, I struggled with combining different features cohesively. Watching YouTube videos and searching for solutions online became essential. For example, understanding how to make the sidebar functional while ensuring the page layout remained responsive required experimenting with CSS grid and flexbox.

CSS Styling Issues:

Ensuring the website was visually appealing and consistent was another challenge. I spent a lot of time tweaking margins, paddings, and layouts to ensure that all elements aligned properly. Here, ChatGPT was a huge help—I used it to troubleshoot specific CSS issues like centering elements, managing overflow issues, and creating responsive designs. For example, when I struggled with aligning the GPA block on the dashboard, ChatGPT provided clear guidance on how to structure the HTML and CSS effectively.

Troubleshooting Errors:

I frequently encountered issues where certain features wouldn’t work as expected. For instance, my to-do list wasn’t updating properly when tasks were checked off. To fix this, I used online forums, debugging tools, and subtle guidance from ChatGPT to debug my code and identify logical errors.

Building the Contact Form:

The contact form was built using Bootstrap, which made the layout relatively simple to achieve. However, styling it to match the rest of the website required extra effort. I used a mix of Bootstrap utilities and custom CSS to align it with the website’s theme.

Acknowledgments and Reflections

This project taught me a lot about website development, from learning HTML for interactive features to integrating code snippets from reliable resources. Watching YouTube tutorials, exploring forums, and using tools like ChatGPT for guidance were crucial to overcoming challenges.The goal was to make everything organized, user-friendly, and easy for students to access in one place.

It wasn’t easy to create a fully functional and cohesive website from scratch, but with persistence and problem-solving, I managed to achieve my goal. In hindsight, I would plan my approach better and focus on learning foundational concepts before diving into implementation. However, I’m proud of what I accomplished and the skills I’ve gained through this experience.