SIXTH SENSE

The main purpose of this website is to provide reports and insights to small and medium size business owners. These reports presented in intractive dashboards that are easliy understand and tailored to each individual. With the help these data, quick and informed decisons can me made allowing the owners more time in growing thier business.

Features

Existing Features

• Navigation Bar

  • Navigation Bar featured on all four pages. This allows visitors to navigate effortlessly through the different pages.
  • Sticky navigation bar on all pages as you scroll.

• Home Page

  • On first visit, the visitor can clearly understand the ethos of this website based on the hero section which is clearly above the fold and the service section.

• Service Section

  • This section will show user what we offer and the ethos of Sixth Sense.
  • This section will be updated as these times change to keep the user up to date.

  

• About Us Section

  • It explains everything about who and what Sixth Sense are.
  • Small business will benefit from the affortable services provided by Sixth Sense as it falls within their budjet.

  

• The Footer

  • The footer section includes links to the relevant social media sites for Sixth Sense. The links open up into new tabs improving the user experience.

• Gallery Page

  • The gallery will provide the user with images showing different ways in which data will be displayed in their dashboard.
  • Hover and scale effect was added.
  • This gallery will be updated with new tools as new tecknology is added.

• Contact Us Page

  • This page will serve as request for demo and to ask any questions they may have. This could be related to quotes, demo etc.

  

Features Left to Implement

• Add a dedicated Product and Services Page to outline in depth the different services we provide. This will help attract more customers and for search engine ranking.
• Introduce an FAQ section to reduce the number of questions from customers.

Testing

• The header and navigation bar are responsive on all screens. We removed the hero image for all screens width lower than 766px.

-The gallery page is responsive on all screen sizes as well.

• The contact us page is responsive on all screen sizes and there were no issues when trying to make it responsive.

-This website was responsive on the following devices: Samsung S8+, Samsung Galaxy S20 Ultra, Iphone 12 Pro, Ipad Air mini, Surface Pro 7.

Solved bugs

• When I ran my code through the HTML W3C validator, I was given an error message on no closing tag on a div. This was fixed by adding the matching open tag.
• Another error i received when using the W3C CSS validator the fontawesome script. I was previously using a version with cdn url. The error was solved by creating a unique link from the fontawesome website and adding this script in the footer of all pages.

Validator Testing

• HTML

  • No errors were returned when passing through the official [W3C validator] - https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fgfomengia.github.io%2Fdata-visualisation-pp1%2F

  

  • No errors were found when passing through the official [(Jigsaw) validator]

  

Lighthouse Testing

• Lighthouse was used to test the accessability of the website and to make sure the fonts and colors used are easily readable:

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:

1. From the github repository click on "settings" from the navigation bar.
2. Click on "pages" from navigation section on the left.
3. In the "source" section choose which branch you want to use from the dropdown menu, it will usually be the "main".
4. Select which folder you want to use, in most cases its the "/root".
5. Hit the "save" button, then wait for your site to be published.(This can take some time.)
6. When your site is ready and published the link will be above the "source" section

The live link can be found here

Credits

Content

• Flexbox was used for certain parts of the css to style the nav bar, hero sesction and the services section though at this stage of the course we have not yet been intoriduced to this type of CSS. W3schools

Media

• The images for the responsive gallery were all taken from Freepik, Unsplash and Shutterstock.
• The social media icons were taken from Font Awesome
• The fonts used for the web page were got on Google Fonts

Acknowledgements

• A big thanks to my mentor Anthony Ugwu who helped guiding me through my first project.