This is my portfolio website for the Interactive Development course. My goal for the design of my website was to make it user-friendly and informative for an Everton fan. Everton is one of my big passions so I had a good idea of what would go into a fans website.
This website is for football fans for essentially Everton fans, I wanted it to be informative and insightful with interaction welcomed from fans through fan articles. I started by creating a front page welcoming people to the Everton site with a crest in the corner and a picture of a current player. To create the different pages, I needed to think what Everton fans would want to see the most. Fixtures and results are very important for fans to see who we are playing coming up and also look back at previous results. Bootstrap was used to show the different months, users can then click into each month to open it up and show the fixtures for this specific month with highlights on the right for the user to see at a glance.The Ticket info page shows forthcoming games where users can see how much tickets are and when they go on sale. I decided to separate these games and games where tickets are not on sale yet in 2 different boxes as they are different and also it specifically highlights which games the user can buy tickets for at the moment.
There is a fans page which has a link to fan articles sent in to Toffee Talk and details of how to send any new articles to the website. The headings are interactive with JavaScript used when the headings are hovered over it gives the user more information about the subject matter of the article. I know that fans like to read fan articles but also they like to write them, so I have welcomed contributions to give the website an interactive feel and make the user feel a part of the website rather than it just being a informative website.
The final page has a Contact form for users to communicate with the website. I decided to create an input form with input boxes and check boxes for the user to complete with their enquiry details. It is made as simple as possible to encourage users to complete the form rather than have several boxes and make it look difficult and unwieldy. There is a submit button for the user to submit the form and a message is displayed to let the user know that a response will be made in due course.
I have created wireframes with my designs for each page https://github.com/leemolton/toffeetalk/tree/master/wireframes
Some of the features in this website include a comprehensive list of Everton's fixtures and results from last season. Additional features to be implemented in the future are this season's forthcoming fixtures. HTML, CSS and JavaScript: Front end languages that give the application structure, style and interactivity. Manual testing for the application was undertaken and it passed. I put a plan together to test everything from the menu bar to the different links on each page. My first main test was to test the buttons on the menu bar to access pages. The pages opened and on the correct page, the links were correctly written to the different template files. The hyperlinks were next to be tested, firstly on the fixtures page. Each month was clicked on and at first, they would not open out. I amended my coding to ensure that each month opened and that the fixtures were lined up correctly. The fan articles page was next to test and did the links to the articles work? The articles opened up fine, I then had to test the text on the title when hovered over. At first, the sub-text was not appearing when the title was hovered over. After the code was correctly amended, it worked but the 3 boxes were too close to each other and the text was not appearing nicely. The two boxes were moved next to each other and the 3rd box was moved to its own line with a few spaces in between, this give the page a better look to it and made the sub-text easier to read.The form on the Contact Us page has been created so that each box has a specific format, in the age box a number is required and the date field is created with the date format. The telephone number must have 11 digits and start with 07. Finally, the postcode must be of the postcode format. This was tested and if the form is submitted incorrectly with any of the fields entered in a wrong format, then the form will not submit and an error message will be displayed for the user.
This website is hosted by Github Pages which is a static site hosting service which supports client-side code and clearly shows all the changes that have been completed through the production process. It does not support server-side functionality. This project was created by Lee Molton and was completed as part of Code Institute’s Mentored Online Full Stack Web Development course in 2018.