Link to website
Link to GitHub Repository
As a first time user, I want to easily understand the main purpose of the website and learn more about the business.
- The home section of the website presents the user with a strong and colorful image in the hero section. This image was carefully selected with the idea to represent to the user the feeling of adrenaline that comes with such an experience.
- On the left side in the hero section the text "If You Can Dream It, You Can Drive It! Enjoy a one-on-one experience in the car of your dreams." gives the user a brief description of the purpose of the website.
- The about section below the hero section was designed to give the user more information, quickly after landing on the page.
- The Circuit section provides additional information about the circuit, which also includes an image to help the user visualize the circuit.
- The experiences section clearly presents the available options to the user. Each experience consist of a card with an image of the relevant car, specifications of the car and price.
- The navigation bar takes the user to each relevant section. The nav is also fixed to the top of the screen to provide better user experience. The user can easily navigate to each section at any time. Smooth scroll was added for better visual experience when navigating through the sections of the website.
- The navigation bar is responsive and fixed on mobile devices as well to give the user the opportunity to easily navigate through each section.
- The footer of the website contains the full address, phone and email of the business. As an addition Google Maps location was added to help the user find the exact location quicker.
- Each card in the experiences section clearly states the starting price for each experience. This is displayed on red background to attract the attention of the user.
- The Book Now button on each card takes the user to the contact form, where the user can fill in the required input fields in order to make booking. The buttons on the experience cards and the form, change color and increase size upon hover. The same red background was used to attract the attention of the user.
- The footer contains icons linked to social media pages which upon hover change color. All external links open in new tab for better user experience.
- index.htm
Document checking completed. No errors or warnings to show.
- thank-you.htm
Document checking completed. No errors or warnings to show.
- 404.htm
Document checking completed. No errors or warnings to show.
- All pages
Congratulations! No Error Found.
- One warning found.
This line of code was used to select and change the colour of the calendar picker icon in the date input field. This warning does not affect the performance of the element that it is connected to.
- One warning found.
The Google Lighthouse test was performed in incognito mode to prevent any add-ons interfering with the results.
-
index.html Mobile
-
index.html Desktop
-
thank-you.html Mobile
-
thank-you.html Desktop
-
404.html Mobile
-
404.html Desktop
-
Warning on all pages
This warning appears due to the fact that GitHub hosted pages disable FLoC, which is Google's 3rd party cookie alternative. - Source Stackoverflow and GithubBlog
-
Index Page Features
-
Thank You Page Features
-
404 Page Features
Each page and features were tested on three browsers Google Chrome, Firefox and Microsoft Edge
Each page was tested using Developer Tools in Google Chrome Browser.
- Samsung Galaxy S20 Ultra 412x915
- Index page
- Thank you page
- 404 page
- Index page
-iPad Air 820x1180
- index Page
-Thank you page
- 404 page
- There was a bug in the experiences section. When hover over the cards, border and shadow appeared, however this extended the size of the other cards and made the next section move. I tried adding margin but this did not resolve the issue. I isolated the issue to the border appearing on hover and making the other elements change size. The solution was to add transparent border to all cards so when the user hovers over the card the border changes colour to white without affecting the other elements.
- The footer was made responsive, however during testing was discovered that for tablet size the content was missing margin on the sides. 10px margin was added to left and right to resolve the issue
- Another bug was discovered when changing the colour of the form and more specifically the calendar picker icon in the date input, which did not change colour. Upon research I found a solution on stackoverflow how to target this specific element and change colour. Link is provided in the credits section.
- During early stages of testing, before the site was made fully responsive, empty space appeared on the right side of the page on smaller screens. Using media queries I started working on each section to make it responsive starting from the top. The issue was isolated to an image overflowing and causing the issue. Once all sections were made responsive the issue disappeared.
- A bug was noticed when the header was fixed to the top. When scrolling to each section the header was covering the beginning of the sections. This was resolved by adding scroll-padding-top: 40px;
- The header was covering parts of the footer and this was resolved by adding z-index: 1 to the header to ensure the content always displays on top.
- The images used were first compressed using photoshop, however the performance of the website was still affected during the lighthouse test. The images were then further compressed by converting them to webp format. This brought the performance numbers higher.
- The partner logos in the footer were not centered on smaller screens. They were set to flex wrap with justify-content: space-between which set them to align to left when wrapped. To resolve this justify-content was set to space-around so when wrapped they would display center.