During the development process, testing has been conducted as an ongoing process, with further testing conducted towards the end of the process:
This section outlines the testing of the interactive components of the website.
- Plan: I wanted a navigation menu that was fixed to the top of the user's screen. All the links should take the user to their intended destination, be it on the current page, a different part of the website or another site entirely.
- Implementation: I created the navigation menu using CSS Flexbox which provided me with a responsive navigation menu that stretches the entire width of the user's screen, and the navigation items display neatly either in row or in hamburger menu. I styled the navigation in accordance with the colour palette of the website.
- Test: I tested the website on Google Chrome, Mozilla Firefox and Microsoft Edge. On Google Chrome, I used Responsive View to grow and shrink the device width to make sure the navigation menu changes display at the breakpoints.
- Result: The navigation bar displays correctly on all browsers and devices.
- Verdict: PASS
- Plan: I wanted to have a hero image which moved towards the user to grab their attention when they first enter or refresh the page.
- Implementation: I created a header background div within the header itself and set the background to the hero image, then used keyframes to create the zooming animation of that div.
- Test: I tested the website on Google Chrome, Mozilla Firefox and Microsoft Edge and refreshed the page a few times on each. Using Google inspect and Responsive View, I refreshed the page a few times to test the zoom on smaller screens.
- Result: The background zoom works well on all browsers and screen sizes as intended - there was a slight delay on Google Chrome desktop view at first but worked well afterwards.
- Verdict: PASS
- Plan: I wanted to have working links that took the user to external sites (such as social media), to another section of the page or opened another app (such as Outlook).
- Implementation: I left the link hrefs empty at first, then I created a 404 error page, and linked all the relevant pages and sections to each link with their correct targets.
- Test: I tested the website on Google Chrome, Mozilla Firefox and Microsoft Edge by clicking on all of the links one by one to check they took the user to the correct place.
- Result: I noticed an incorrect link in some of the buttons, but that was easily added in after testing and fixed the issue. All other links were working perfectly on all browsers.
- Verdict: PASS
- Plan: I wanted animations on the buttons, social media links and navigation menu links to increase interactivity with the user as they travelled through the website.
- Implementation: I utilised Hover.css: the 'float' effect for buttons and social media icons, and the 'grow' effect for the navigation menu links.
- Test: I tested the website on Google Chrome, Mozilla Firefox and Microsoft Edge, I hovered over all of the hoverable elements to make sure the effect was working.
- Result: All hoverable effects worked across all browsers and devices.
- Verdict: PASS
- Plan: I wanted to include a contact form which the user can fill in if they wish to reach out to the owners directly. They should insert their name, email address & phone number, a reason for contact and a message so the owners can respond to them.
- Implementation: In order to implement this, I have created a form in my index.html with 3 input fields, 1 textarea field and a submit button, with corresponding labels. The form was styled in accordance with the colour palette of the site.
- Test: I tested the website on Google Chrome, Mozilla Firefox and Microsoft Edge, I tried to submit the form without entering the required information in the input fields to test the form validation.
- Result: An alert popped up telling the user to enter text in the field on all browsers and devices, which worked as expected.
- Verdict: PASS
This section covers the major issues I encountered during the development and testing process and the solutions that fixed them.
- Issue: The navigation links were bunched up too close to each other
- Solution: I removed the styling for .nav-item divs and started over by styling the nav-item links only
- Issue: The slogan in the header would overlap the navbar
- Solution: I changed the z-index of the navbar to 2 which fixed the issue
- Issue: The zooming background div would overlap the navbar
- Solution: I gave the navbar a z-index of 1 to place it over the zooming background div
- Issue: The zooming background div was pushing down the About section
- Solution: I changed the positioning of the About section to relative
- Issue: The overlapping of the zooming background div issue persisted
- Solution: I changed the overflow of both header divs to hidden with the help of Stack Overflow
- Issue: The About section would not respond responsively when changing the screen width in Google Dev Tools Responsive Viewer
- Solution: I set the width of the whole About section to 100% which fixed the issue
- Issue: There was white space showing on the side of the website when in mobile & tablet screen size in Responsive Viewer
- Solution: I changed the html overflow-x value to hidden for both mobile and tablet media queries, with the help of Stack Overflow
- Issue: Post-deployment website did not display background images due to incorrect file paths
- Solution: I simply switched the absolute paths to relative paths on all divs that had a background image with a URL
- Issue: Post-deployment navigation menu links did not lead user to the correct page/section
- Solution: Fixed links to take user to correct places
INITIAL TESTING
Initially, Google Lighthouse brought up a variety of issues that were affecting the website's accessibility on both website and mobile screens:
- Desktop & mobile: The contrast between the background colour of the Instructors section and the section h1 was not high enough.
- Solution: I improved the contrast by making the header #FFF3B0. This dramatically improved the accessibility score in the second report.
- Desktop & mobile: The links did not have discernable names, which would make it harder for users of screen readers.
- Solution: To fix this, I added aria labels to all links on the website, with help from Stack Overflow.
- Desktop & mobile: The header of the form sub-section in the contact section was not semantically correct.
- Solution: To improve the last issue with accessibility, I changed the h3 to a h2 to correct the semantics.
FINAL TESTING
After these changes, the website is displaying a 100% score on Accessiblity on mobile devices and desktop devices.
INITIAL TESTING
The inital testing of the performance score differed greatly between desktop and mobile displays:
- Desktop: On desktop screens, the performance was at 95%, which was brought down from 100% by issues that I do not currently have the skill to understand, but in the future I will amend these issues.
- Mobile: On mobile screens, the performance was quite badly affected by issues such as render-blocking resources and inefficient cache policies. These issues are beyond my current skill level, but I will return to improve the mobile performance when I have improved my skills.
INITIAL TESTING
- Desktop: On the SEO rating, it was affected by the meta tag in the index.html not having a description
- Solution: I simply added a description to the meta tag as recommended by Google DevTools
FINAL TESTING
After the changes made, the SEO score was in the green.
This testing was conducted using W3C Markup Validator.
INITIAL REPORT
Initial testing found 12 errors in the HTML and 37 warnings (which are hidden here to focus on the errors)
- Issue: An anchor tag was the descendant of a button
- Solution: Moved anchor to wrap button, and have button be descendant of anchor tag
- Issue: These three issues were all part of the same block of code: there was an unclosed h1 tag which in turn caused the parent div as read as having open elements
- Solution: I simply closed the h1 tag
- Issue: A h3 tag was left unclosed, causing the div to read as having an open element
- Solution: Closed the open h3 tag
- Issue: All of the buttons in the Classes section had anchor tags as a descendant
- Solution: Moved anchor to wrap button, and have button be descendant of anchor tag
- Issue: An anchor tag was the descendant of a button
- Solution: Moved anchor to wrap button, and have button be descendant of anchor tag
SECOND REPORT
Second report still found errors pertaining to the descendant order of the anchor tag and button element
- Solution: To fix this, I removed all buttons from the website (asides from the form button) and left them as styled anchor tags, with the suggestion of Stack Overflow.
FINAL REPORT
After these errors were all fixed, the HTML was all valid.
REPORT WITH NEW NAVIGATION MENU
Report with the new navbar found an error relating to the p and span tags in the navbar
- Issue: The p tag is not allowed to be a child of span
- Solution: Remove p tag entirely
FINAL REPORT WITH NEW NAVIGATION MENU
After the solutions were implemented, all the HTML was valid.
This report was conducted using W3C CSS Validator
INITIAL & FINAL REPORT
- Initial testing found no errors in the CSS
- These warnings are just information on how the imported style sheet will be validated - webkit is a HTML/CSS web browser rendering engine for Safari/Chrome, so these warnings can be ignored.
REPORT WITH NEW NAVIGATION MENU
There were no errors reported with the new navigation menu