sView the live project here.

The image is from Am I responsive?

How To — A page about LifeHacks

This project is a single-page website showing the main lifehack categories and lifehacks inside. The page features four different lifehack categories: Computer hacks, cleaning hacks, household hacks and food hacks. I’ve considered these lifehack categories as they are the main subject in our daily lives.

UX Design

The goal of this website is to provide the user with ways to improve the simple tasks carried out daily. The information is presented in a simple manner whereby the user can find the category for the hack he wishes to find, he can click on it and then be brought to the information. If the user wants to explore a new area, the UI is designed to allow him to click on a button and be immediately brought to the navigation menu.

I designed this page with UX in mind. The buttons for each category is designed with large text and with a large target area. The user can easily click or tap and they are brought to the relevant location on the page.

Information is presented in chunks as this allows the user to see the information clearly. The colours are chosen purposefully for UX. Having a high contrast in the title (white against brown) draws the users' focus. The text is semi-bold as this makes it easier to read.

Deployment

Project was deployed to Github pages. This is done by adding a new environment inside of GitHub.

The ideal client for this business is:

• English speaking
• Someone who is in the age group of 20-30
• Someone who is looking for ways to improve their productivity and speed at which tasks are carried out.

Scope

I included the following features on the website:

#Header containing main logo and the nav bar including Computer Hacks, Cleaning Hacks, Household Hacks and Food Hacks. Signup form is added at the bottom to allow the user to receive lifehacks via email.

Skeleton

This website is a single-page website and users can access the required information without having to wait for the page to reload.

Wireframe Mockup

https://github.com/soconne339/soconne338-project1/blob/main/Project_wireframe.pdf

Validation

This website has passed the following validations:

W3C Validation — https://validator.w3.org/

Jigsaw CSS Validation — https://jigsaw.w3.org/css-validator/

Issues/Bugs

An issue with the anchor tag at the bottom of each section working correctly to bring the user back to the navigation page.

• This issue was resolved by changing the href to # to bring the user back to the top of the page.

An issue with getting index.html to link with the external stylesheet style.css.

• This issue was resolved quite easily after deleting the existing style.css and reuploading

An issue with centering the container element with the body.

• Was unable to centre the content. I tried many times to update the code without any luck.

An issue with trying to remove horizontal scolling on responsive view

• I tried to solve the problem by adding a media query setting width to 100%. Issue finally respolved by adding margin:0 auto; to body tag in css.

Credits

The majority of the lifehacks for this project are found in the book “Lifehacks” by Keith Bradford.

Other hacks came from YouTube Channel Household Hacker — (https://www.youtube.com/channel/UCI4I6ldZ0jWe7vXpUVeVcpg)

Youtube video — “How to Cool a Drink in 2 Minutes”, Dave Hax, ​​https://www.youtube.com/embed/H6ncuv3gewI

My wife Carmel provided me with some of her cleaning hacks.

Thanks to my Mentor for guiding me in carrying out this project.

User Stories

1. As a new user I was able to find the information I needed - Male Age 30
2. As a new user I found the logo overpowering and the colour scheme wasn't to my taste - Female age 38.
3. As a new user, I was able to find exactly the information I require. I would have preferred the signup form to be more visible. - Male age 72

Technologies Used

• Adobe Dreamweaver
• Adobe Photoshop
• Github
• 13inch Apple Macbook Pro