(- This is the continuation of a pervious project - )
(- After completing the below, I looked at the original PSD file and adjusted the site dimensions by carefully checking the px count of both height and width of divs and spacing, and converted them into percentages for width and ems for height. -)
(- I followed by adding a modal feature on large images without bulbs, taking into consideration scalability, knowing that more would be added in the future. I also added more functionality to the carousel, including a working navigation. -)
Created using
Atom text editor, Chrome Dev Tools
How to launch
To view, open the index.html file directly in a browser.
Approach taken
I chose to separate all the files involved into separate folders. This is to ensure things kept organized and simple for someone to take over. Also with the CSS, since it tends to get very lengthy, I divided each section styling into its own CSS file that was later imported into the master.
My approach began by getting down a basic functional layout. I first started to replicate the design issued in the large format. This involved translating a rough feel of the original design without spending too much time on getting everything totally precise. For time sake I only chose to do the first half of the website.
My second stage was to make what I had responsive with media queries with CSS. At this point I realized however that I did not have enough time to implement this. I wanted to showcase some of my ability with JavaScript and jQuery so I chose to use the remainder of my time to work on the carousel.