LifeHacks

Code Institute: Project 1 using HTML and CSS

Visit the website here

The brief was to create a static front-end website using both HTML and CSS and with a minimum of 3 pages or page areas that presents useful information to the user.

Image produced at Am I Responsive

My website (LifeHacks) has been created to help people learn all sorts of different tips and tricks that can save them time and money in their everyday life. I also have a section on the site of users to submit their own tips so that the website will become a living, up to date, library of knowledge for my users.

The website is split into 3 sections:

1. Home
2. LifeHacks
3. Submit Your Hacks

The business goals of the website are:

1. To inform users of lifehacks that they dont know and improve their lives.
2. Build a base of repeat visitors who find repeat value in the website.
3. Once visitor traffic is sufficient, sell advertising space.
4. Once visitor traffic is sufficient, partner with businesses who would help our users with 'sponsored' LifeHacks.

The user goals of the website:

1. As a first time visitor I want to find out exactly what a Life Hack is.
2. As a first time visitor I want to find out some new tips and tricks that can save me time and money.
3. I want to share my Life Hacks with a community who will appreciate it via the website.
4. As a repeat visitor I want to find the newest solutions to problems I might be having.

UX

Strategy

With the core principles of UX in mind I had to think about who my target audience for my website is and what layout and features they would find most appealing.

I concluded that my target audience are:

1. Looking to solve minor annoyances they have.
2. Looking for ways to save money.
3. Looking for ways to save time.
4. Interested in trying new things.
5. Age 16+

What my users would be searching for:

1. Clear and concise information.
2. A wide range of subjects to be available.
3. Easy navigation to the subject you want to see.
4. A place to enter their own submissions.

My website aims to fit all of these. The navigation of the site should be clear and simple with a fixed header that can take you to anywhere on the website. The information will be broken down into simple categories and in time, with more content could be even more precise.

Given that I have such a large age range as my target audience, I chose to keep the colour scheme quite simple so that it should appeal to all.

Based off all of this my user stories are:

1. As a new visitor, I want to browse all the information available to see.

2. As a new user, I am looking for a specific life hack to improve a specific problem.

3. As a new user, I want to know what life hacks are.

4. As a repeat visitor, I want to see what content is new.

5. As a repeat visitor, I want to submit a hack I have.

Scope

With my business goals and desired users defined I decided what I wanted to include in my project now, and what would have to wait till a later release. The features I wanted to make now were:

1. Clear Header with my logo and navigation bar linking to various sections of the website.
2. Immediate information for the user on what a life hack is.
3. A 'Hacks' section with information seperated by theme.
4. A submission form so users can submit forms that can later be added to the website.
5. A footer with links to social media pages.

Structure

Initially I made a website with 3 seperate pages that link between them and this is still what I envision the website becoming. Unfortunately as I was building the website it was clear that over 3 pages, the content would look very thin so instead I have created a single page website with a clear flow. Users are initially met with the website explaining Life Hacks, then showing them the hacks, then with a form asking for their hacks to help grow the page. The navigation bar allows for quick navigation if returning users want to skip ahead.

Skeleton

As mentioned under 'Structure', I initially envisioned the website as 3 seperate pages think it will become so in the future once we have had some submissions and a larger number of hacks to fill out the pages.

As a consequence, my wireframes show the website on 3 pages rather than 1. I dont think this drastically changes much of the website as by placing the pages vertically I have preserved the user flow.

Wireframes

To keep the website scalable, I wanted to have collapsible boxes for the information so the user is not overwhelmed. I also wanted to keep the initial landing page simple and easily digestible for the same reason.

I also wanted to put in a collapsible navigation menu for smaller screens so the website is easily accessible for users on the go, making it easy for users to pop in and out of the site often.

Surface

Given the broad target audience, I chose blue as my primary colour and white and pink as secondary colours. I did want the site to be confident so selected a strong shade of blue rgb(245, 245, 245) and light background images to give the site an appealing contrast. All of the buttons.

I chose my main font as Montserrat from Google Fonts. It is a strong font originally developed from old posters and signs and so would fit the purpose well of easily digestible short chunks of information.

Features

The website is fully responsible and consists of a header, a footer and 3 main sections:The landing page and description, the Life Hacks and the submission form for users.

Header/Navbar

The header at the top of the page has links to all other sections of the website and the LifeHacks logo that I created for the website. It is fixed to the top of the page allowing for quick navigation from any part of the page. For smaller screens the navigation in the header collapses into a collapsible menu with just the word 'Menu' and a list icon.

Landing Page

The landing page is the first page of the website and gives the user a simple introduction to LifeHacks and lets them know about the large potential scope for them. It also has a large hero image that fits the colour scheme for the website and also has a parrallax effect when scrolling making the site look more professional.

Hacks

The Hacks section has a title and a sentance of text encouraging the user to select a catagory of life hack for the user to explore. The vertical list also changes colour when hovering over a catagory and the text inside is a softer version of my main blue colour providing a nice contrast for the user. I have also added matching icons from FontAwesome to each of the categories to make the page more appealing.

Submit Your Hacks

The submission section has a form on background hero image with a grading pink colour. Again I used a parrallax effect on the background and it contrast nicely from the white of the above sections. The form asks for the users information so we can keep in touch with them and give credit for the hack that they are submitting. The form requires 3 text elements, 1 email element and a radio button selection to describe the type of hack you are submitting. I used the same colour scheme here but with white text on the blue background as it matches the white thought bubble in the image and makes the form more appealing, hopefully leading to more submissions.

Technologies used

• HTML - Used to build the basic structure and content of the site.

• CSS - Used to style the various HTML elements.

• JavaScript - Used for the collapsible sections in both the smaller Nav bar and the Hacks section.

• Font Awesome - Used to provide in the Hacks section and also in the Footer.

• Chrome Dev Tools - Used to check my work periodically, debug my code when needed and also test the responsiveness of my website.

• GitHub - Used to store my code after pushing from Gitpod.

• GitPod - Used as a development environment.

• Git - Used for version control of my code.

• Sketch - Used to create the wireframes for the project.

• Google Fonts - Used to style my website fonts.

• W3C Markup Validation Service - Used to validate all of my HTML code.

• W3C CSS Validation Service - Used to validate all of my CSS code.

• Color Contrast Accessibility Validator - Used to check my website colours had enough contrast for accessibility purposes.

• Optimizilla Image Compressor - Used to compress the images.

• Dirty Markup Formatter - Used to standardise and format my HTML and CSS code.

UX Stories Testing

Below are website images for reference with the UX Stories Testing.

1. As a new visitor, I want to browse all the information available to see.

   • The user can navigate to the 'Hacks' section of the page.
   • The user can see all of the available categories of Life Hack on the website.
   • The user can clearly see all of the hacks inside each individual category.

2. As a new user, I am looking for a specific life hack to improve a specific problem.

   • The user can navigate to the 'Hacks' section of the page.
   • The user can find the specific category of Life Hack they are looking for.
   • The user can clearly see all of the hacks inside each individual category and if any are useful.

3. As a new user, I want to know what life hacks are.

   • The user can navigate to website.
   • On the first page is a description of what a Life Hack is and the scope of them.

4. As a repeat visitor, I want to see what content is new.

   • The user can navigate to the 'Hacks' section of the page.
   • The user can open all relvant categories to check the information inside.
   • In the future I would like to add the ability to order the hacks by age, popularity and other criteria.

5. As a repeat visitor, I want to submit a hack I have.

   • The user can navigate to the 'Submit Hack' section of the page.
   • The user can fill out the form to enter all of their information.
   • The form will prompt the user if any fields are left blank or are formatted incorrectly.

Testing and Code Validation

Testing was a continuous process throughout building the website so it is hard to document every action I took. With I every couple of lines of new code, I would refresh and check the website and correct my frequent mistakes, constantly using Chrom Dev Tools.

With the completed version of the website, I used three forms of validations to check my code

I used the W3C Markup Validation Service and W3C CSS Validation Service to check my code. I used these periodically to check my code and there are no errors present in the final version.

I have manually checked that the website is working on different browsers - Chrome - Microsoft Edge - Internet Explorer - Safari

For further testing, I also asked 5 friends and family members to have a look through the site and see if they could find any issues and none of them reported any.

Bugs

I managed to avoid most large bugs by continually testing and reviewing the website in the browser but I did have two specific bugs that took a took a signifigant time to correct. One of them I was able to solve and the other I created a work around for.

1. I had an issue with extra white space on my initial landing page. This was due to me incorrectly assigning .hero-text-left with a padding-top value of 200px rather than a margin as it should have been. After correcting the bug, the landing page was fixed.

2. When I introduced the collapsible button for my Nav bar, the options were listed in reverse order, with 'Home' at the bottom and 'Submit Hacks' at the top. I had ordered them this way initially so they looked correct on expanded Nav bar. Unfortunately I couldnt find a way to reverse the order of the buttons when the Nav bar changes to a collapsible button. My work around with this was to reverse the order of the expanded Nav bar which now places 'Home' furthest right and 'Submit Hacks' furthest left. Ideally I would like to change this in a later version.

Accesibility

To check the accesibility of my website I used 'Lighthouse' on Chrome Dev tools and also Color Contrast Accesibility Validator was used to check the colour contrast on the project. At first the website scored well with Lighthouse for both mobile and desktop but had a contrast issue and failed for colour accesibility.

The initial shade of blue (rgb(245, 245, 245)) did not pass through the colour accessibility validator with the black text so i changed it to a lighter shade - rgb(100, 118, 253). This shade passed through the validator as it now has a suitable contrast with black text.

Deployment

The website is hosted in GitHub pages and deployed directly from the master branch. Any new commits made will be automatically deployed to the website.

Gitpod was used to develop the project with my code then commited to Git and then pushed through to Github. In Github I deployed by changing the 'Source' from 'None' to 'Main'. This option can be found at: "https://github.com/NRCarver/HTML-CSS-Project1" > Settings > Pages > Source.

After changing the setting you must wait a few minutes and then the deployed website can be accessed.

Credits

Content

All content for the website was written by myself (Nicholas Carver) and some of the Life Hacks used here were found on 'lifehacks.org' in their article "200 Incredible Life Hacks That Make Life So Much Easier" (https://www.lifehack.org/articles/lifestyle/100-life-hacks-that-make-life-easier.html)

Code

I used and slightly adapted JavaScript code to create my collapsible Navigation bar button and my collapsible 'Hacks' buttons. The original code can be found here:

• https://www.w3schools.com/howto/howto_js_collapsible.asp

• https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

My Footer code was adapted from the Code taught by Anna Greaves in the 'Love Running' Project at Code Institute.

Media

My Logo was created using Free Logo Design (https://www.freelogodesign.org/)

All Icons used are from FontAwesome (https://fontawesome.com/)

All images used were found on Pexels.com - https://www.pexels.com/photo/clear-light-bulb-placed-on-chalkboard-355952/ - https://www.pexels.com/photo/white-bubble-illustration-1111372/

hero image and submit image - https://www.pexels.com/photo/clear-light-bulb-placed-on-chalkboard-355952/ - https://www.pexels.com/photo/white-bubble-illustration-1111372/

I would also like to thank Guido Cecilio for all his help and guidance throughout this project.