Winnall Rock School Website
Using HTML, CSS, and JavaScript, I developed a new website for Winnall Rock School.
Using HTML, CSS, and JavaScript, I developed a new website for Winnall Rock School.
In my second year of university, I took on the task of creating a new website for Winnall Rock School. The brief specified a number of preferences such as a carousel, marquee, donate button, and general image placement requests. I had frequent meetings with the client to make sure we were keeping on track with the clients specifications, to ensure client satisfaction at the end of the project.
Upon analysis of the brief and listening to the additional requests from the client, I decided the simple nature of the site would enable it to be constructed using HTML and CSS, as well as some elements of JavaScript.
The designer and I began our planning by creating simple wireframes to generate an idea for the layout, based off of the client specifications. The use of wireframes enabled me as a developer to map out what was required from a development perspective, such as columns and the location of images. It was made clear the school wanted to retain its branding through the continuation of their colour scheme (shown below).
The client requested for a variety of different webpages and sections, therefore dropdowns were an essentiality.
Each dropdown contains a number of sections located on the allocated pages, which also possess smooth scroll capability.
As specified in the brief, a carousel was requested. The carousel uses simple HTML and CSS properties such as the use of 'data-target' for slide identifiers and appropriate formatting through class variables.
The above animated images detail an early prototype of the website. The client was satisfied with the formatting, layout, and information conveyed on the site.
CSS formatting enabled the HTML code to come to life. The CSS formats are customised to best suit the client's needs and comply with the specifications on the brief.
The Winnall Rock School facebook page was requested to be available to view on the baout page. Their facebook posts were embedded via meta's page plug-in option.
https://developers.facebook.com/docs/plugins/page-plugin/
Following the university hand-in, I continued to pursue this project, often having a meeting with the client every week. My development process followed an agile nature, due to the additional features the client requested. I needed to ensure I could adapt to changes the client wanted. Conclusively, the code was pushed through wordpress to enable the client to access more user friendly editing tools, in which adjusting the website content is made easy for the client.