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).

View My Site!

Taylor Swift Mockup