Taylor Swift: JQuery Integration
The goal of the project was to create a 3-page responsive website that integrated at least 5 JavaScript or jQuery plugins for MDIA2294 Web Scripting at BCIT. The main purpose of my website was to exhibit and showcase information regarding Taylor Swift’s Eras Tour and albums and provide interactive elements regarding her musical content.
Project Details
Front End Developer
My main tasks included the creation of wireframes and coding of the entire website.
HTML, CSS, JavaScript, JQuery Adobe Illustrator
September 2023 - December 2023
Design Process
Initial Brainstorm
First, we were tasked with coming up with a topic we feel passionately about in order to create a 3 page website surrounding this topic. I initially narrowed down my topics towards snowboarding,hockey, activewear, and Taylor Swift. I decided on creating my website around Taylor Swift because of the popularity of her current Eras Tour, as well as the release of the re-recordings from her past albums.
Topic Finalization
After deciding on a topic, I then began thinking about what content and which possible plugins I would want to include in the website. I decided on the inclusion of an image carousel, interactive map, draggable image, and background video banner plugin. After this I began the coding portion of the process.
Initial Coding
I began to code the website, beginning with low-fidelity wireframes to help me map out the structure of the website focusing initially on a mobile layout – I also used past exercises in the class as a reference for the layout of the website. I then wrote out the HTML portion of the home page and began to use placeholders as I wrote out the CSS to stylize the website. I then wrote the HTML for the album ranking page as well as the HTML for the map page.
Image and Content Gathering
After I had the initial structure of the website coded out with placeholders for where I wanted certain pieces of content to go, I then began to gather the links for images, videos, and content regarding Taylor Swift I wanted to include which I then inserted into my website.
Further Coding
I then began to integrate the plugins into my code, and fixed the CSS so that the website would be responsive across phones, tablets, and desktop screens. I then went through my code and website to check that everything was working properly across all the pages.
Plugin Additions
After revisiting the project, I made some stylistic changes (changed the colours of certain fonts and backgrounds to allow for the user to read the content easier), as well as added a few interactive elements/plugins (added menu switching image plugin, animated typewriter text typing plugin).