I first looked at the brief I was given to help determine where to start with the development test. As the brief said that Clicky would like to see the page built from scratch, I ruled out any frameworks such as Bootstrap. I tried to get the website looking as much like the Photoshop version (wireframe) provided to me, while also making the web page responsive. Once I did this I also added some animation to the page.
I had some difficulty with the slider, it seemed to be blocking the button in the menu from having a hover over effect. The slider div was covering the menu due to it being positioned absolutely. I discovered the problem, I resolved this by resizing the div dimensions and removing excess margin spacing in the slider h1 tag. The margin spacing in the h1 tag was being caused by the jQuery that was written for the slider every time you pressed the next slide arrow which caused an unusual spacing issue. Ideally this would have been solved if I had used a reset style sheet that would have removed default margin settings. This would mean that everything I create would be the absolute design and would not be effected by default sizes in HTML.
I also made the font size of the slider responsive should the size of the web page be reduced using viewport width sizes (e.g. 10vw).
When creating the four tiles above the blog I also tried to make these responsive for the user while keeping all of the tiles on the same line so they didn't go on top of each other. I initially tried to wrap them however it didn't look right as there seemed to be too much space early on the higher resolutions.
If I had more time to work on this, not only would I complete the whole page but I would also add animation to different parts of it to appeal to the user. This may include the menu options changing as it becomes mobile friendly such as becoming a "hamburger menu". I would also animate the slider to make this more interesting as it slides from right to left.
I enjoyed creating this web page, it was a nice atomic layout so it was great to work with.
Sophie Lloyd Ashton 07954426365 [email protected] www.sjla.co.uk