WEB 238
This course focused on using jQuery to simplify and enhance web interactivity. I learned how to write efficient selectors, manipulate DOM elements, create smooth animations, and handle events like clicks and mouse movements. I also worked with jQuery’s Ajax capabilities to manage dynamic content and explored how to extend the framework with custom methods.
Continual Semester Project
This project demonstrates all that I learned in the course. I had initially designed this website for another class and thought it would be fun to repurpose here. As the semester went on, we did different labs that built on the same file.
Final Project
The final project for the Urban Debate League of KC website includes several interactive and animated features designed to enhance user experience. One key feature is the Image Gallery Lightbox, which allows users to click on thumbnail images and view a larger version in an overlay lightbox. This feature helps maintain a clean page layout by keeping the images contained within the lightbox, offering users an interactive way to view the images in greater detail without navigating away from the page. The lightbox can easily be closed with a "Close" button, adding to the intuitive nature of the feature. Another important enhancement is the Read More / Read Less Toggle found in the "About Us" section. This feature allows users to click a button to reveal or hide additional content, making it easier to manage lengthy sections of text. By keeping the page concise and offering an option for users to explore further, this toggle feature enhances readability and gives users control over the amount of content they want to engage with. For smooth navigation, the website employs a Smooth Scroll effect. When a user clicks on any of the navigation links (such as "Home" or "About"), the page smoothly scrolls to the relevant section instead of jumping directly. This creates a more seamless and pleasant browsing experience, especially for users navigating long pages. It ensures that the website feels more dynamic and polished, offering a smooth transition between different sections without abrupt jumps. The Back to Top button further enhances usability. After scrolling down the page, the button appears, allowing users to quickly return to the top. This feature is particularly useful for longer pages and improves overall navigation efficiency, ensuring users don’t have to manually scroll back up. With smooth scrolling incorporated, it ensures the transition back to the top is just as fluid and user-friendly. Finally, the Hover Animation on Images adds a playful touch to the website. When users hover over thumbnail images, they slightly enlarge with a smooth scaling effect. This animation serves as a visual cue that the images are interactive and encourages users to engage with the content. The hover effect brings a dynamic, engaging element to the page, making the user experience more enjoyable and visually appealing. These features were selected to meet the assignment's requirements of enhancing user interaction, animation, and functionality. By incorporating these elements, the website becomes more engaging, interactive, and user-friendly, fulfilling both the technical and content-related requirements of the project.