Life Hax is a website whose goal is to give people access to various life hacks that are easy to learn and perform. The website benefits people who are looking for new and interesting ways to accomplish tasks that they may not have known about. Users will also be able contribute their own life hacks to the website by uploading.

• The Header

  • Featured on all the pages and is fully responsive.
  • The header has a green background colour.
  • It has a white smiley face logo on the far left section of the header that contrasts well with the green background.
  • It has the website title text in the middle in bold italic white colour that contrasts well with the green background.
  • Logo and website name text link back to the homepage when clicked.
  • Font style used for the website title text is Roboto.
  • The Header clearly shows the user the name of the website by using a larger font size than the other fonts on the webpage.

• The Navigation Bar

  • Featured below the Header on all the pages and is fully responsive.
  • Navigation bar includes links to Homepage, Upload area and Life hacks page.
  • The life hacks page link has a hoverable drop-down menu which links to different sections of the Life hacks page: Food Hacks, Home Hacks, and Office Hacks.
  • The links also change from white to yellow when a mouse is hovered over it.
  • The font used is Roboto Condensed and it contrasts well with the white background.
  • The website navigation has a white background that contrasts with the website's green background to easily separate it from the rest of the website.

• The Welcome Section

  • The welcome section of the homepage gives a short greeting and gives the user an introduction to the website’s features.
  • The image below the welcome message is of a group of happy friends which shows to the user that the website is welcoming.
  • Image is inside a circle for style.
  • The font used for welcome section header Roboto Condensed and the font used for the paragraph is Roboto Slab, which are part of the same font family and go well together.
  • Font colour is white and it contrasts with the green background. And continues the white and green colour scheme for the site.

• The About Section

  • The about section gives information on the things the group that made the site are trying to achieve.
  • The image below the about message is an image of a group working together to give a feeling of camaraderie that will give the user an idea of how things are like among the people who are involved with the website.
  • Image is inside a circle for style.
  • The font used for the about section header is Roboto Condensed and the font used for the paragraph is Roboto Slab, which are part of the same font family and go well together.
  • Font colour is white and it contrasts with the green background. And continues the white and green colour scheme for the site.

• The Contact Section

  • The contact section has a form to collect feedback from its users.
  • The form collects info on: the name, email address, and the feedback message given by the user.
  • The font used for the contact section header and subheaders is Roboto Condensed and the font used for the area the user writes in is Roboto Slab, which are part of the same font family and go well together.
  • The contact form has placeholder text so the user knows what goes inside it.
  • The area that the user writes text into has a white background which contrasts well with the rest of the website's green background.
  • The contact section is good for the user, because it gives them a way to give their own opinion on things that can be done to improve the website.

• The Footer Section

  • Featured at the bottom of all the pages and is fully responsive.
  • The top section of the footer has links to social media sites that are relevant to the Life Hax website. The links will open in a new tab so that users won’t lose the page they were on before.
  • The footer’s bottom section has a copyright notice. And the font used is Roboto Slab.
  • The footer uses a white font colour with a contrasting black background to help separate from the other sections on the site.
  • The footer is beneficial to the user as it provides a reason for them to contact via social media.

• The Upload Area page

  • The upload area has a form for users to upload their own life hacks to the site.
  • The form collects info on: the name, email address, hack category, and the file that contains the hack being uploaded by the user.
  • The font used for the Upload Area page header is Roboto Condensed and the font used for the area the user writes in is Roboto Slab, which are part of the same font family and go well together.
  • The upload area form has placeholder text so the user knows what goes inside it.
  • The area that the user writes text into has a white background which contrasts well with the rest of the website's green background.

• The Life Hacks page

  • The life hacks page will provide the user with a collection of different life hacks.
  • The life hacks are organised into different sections : Food Hacks, Home Hacks, and Office Hacks.
  • The life hacks sections are further broken up into the different individual hacks that are given a title and a paragraph text that explains how it is performed and its benefits.
  • Each life hack also has a supporting video clip from youtube that gives a visual demonstration on how the life hack is performed.
  • The font used for the Life Hacks page header and subheader is Roboto Condensed and the font used for the paragraph is Roboto Slab, which are part of the same font family and go well together.
  • Font colour is white and it contrasts with the green background. And continues the white and green colour scheme for the site.
  • This page is important to the user as it is where they will navigate to find the interesting hacks that they are looking for.

• I tested that the website worked in a variety of browsers: Chrome, Firefox, and Opera.
• I confirmed that this project is responsive, looks good and functions on all standard screen sizes using devtools device toolbar.
• I confirm that the Navigation bar is working correctly with no broken links.
• I confirm that the Header, Navigation, Welcome section, About section, Contact section, Footer section, Upload area page, and Life Hacks page are all readable and understandable.
• I have confirmed that the forms on my Homepage and Upload area pages are working: they require entries in every field, will only accept an email in the email field, and the submit button works. And files can be selected for upload on the Upload page.
• I have confirmed that the video links to youtube are working correctly: it can pause, play, and mute.

• Solved bugs

  • Some of the website links on github pages didn’t work at first because there were spaces and uppercase text in the link text. I fixed it by adding a hyphen and changing everything to lowercase.

• HTML
  • No errors when the Homepage was passed through the official W3C validator.
  • No errors when the Upload page was passed through the official W3C validator.
  • No errors when the Life hacks page was passed through the official W3C validator.
• CSS
  • No errors when the stylesheet was passed through the official Jigsaw validator.
• Accessibility
  • I confirmed that the colours and fonts chosen are easy to read and accessible by running the Homepage, Upload page and Life Hacks page through the lighthouse devtools. The 8 shapes contrast grid was also used to test if the colour scheme that was accessible.

No unfixed bugs

• The website was deployed to GitHub pages. The steps take to deploy the website:

  • In the GitHub repository, go to the settings tab
  • From the source drop-down menu, select master branch
  • Once the master branch has been selected, the page will provide a link to the completed website

  The live link to the website: https://awoyalejohn.github.io/Life-Hax/

• The code used to make the navigation bar with a drop-down menu was taken from a W3schools tutorial.
• The code used to add the circles around the welcome and about section images was taken from the Love running tutorial project.
• The code used to make the contact form was taken from a W3schools tutorial.
• The social media links was taken from the Love running tutorial project and Font Awesome.
• The code used to make the upload page was taken from a W3schools tutorial.
• The code for the life hacks video clips was taken from the following 3 Youtube videos and embed to the website:
  • Ultimate Food Hacks Compilation
  • 27 EASY LIFE HACKS FOR YOUR HOME
  • Office Hacks
• The code for the media queries was taken from a W3schools tutorial.
• Some of the code that was used to keep the footer at the bottom of the page was taken from this forum post on Stack overflow.

• The images below the welcome and about section were taken from Pexels.