Haven Hub Care Services Limited is an organisation that specialises in providing assisted living for people with special needs and is based in the United Kingdom. The website aims to present key contact information about the organisation and collect information from individuals who are interested in its services and offerings. You can find The link to the deployed site Here

As a first-time visitor, my primary goal is to easily learn and gather about the organization. I want to be able easily get their contact details and find out their location. It is important for me to understand the services they offer and how I can be involved with work.

As a returning visitor, my goal is to obtain updated information about the organisation. I except to find the latest news, updates, and any changes that have occurred since my last visit.

As a frequent visitor, I want to stay informed about any new job openings within the organisation. I am interested in knowing if they acquired new service centers in my area. Additionally, I would like to stay updated on any ongoing charity projects that the organisation is involved in.

See also:

• Nav bar for medium screens
• Navigation bar for smaller screens

The Navigation bar is consistently present across all pages of the entire website. It helps the users of this website to easily move from one page to the other. It also displays a phone number that can be dialled with a single click, if the user is browsing through a device that has a calling application installed on it. The navigation bar also includes a Location link that can automatically list the address to the organisation on google maps, rather than typing the address manually. Finally, the Navigation bar includes the organisation logo written in large fonts, in other to help the user know with ease, that they are on the Haven Hub website and to also give a feel of the organisation's brand.

See also:

• Hero image with text on medium screens
• Hero image with text on small screens

The main image shows a staff administering medication to a client in a residential setting. A bold introductory message immediately lets the user know that this is a organisation that specialises in supported living and housing accommodations.

• About us section large screens
• About us section on medium screen
• About us section on small screen

This section is immediately under the hero image, and it is also a page. It can be viewed by either scrolling down further or by clicking the "About us" link on the navigation bar. This section welcomes the user to the website with a brief introductory message of what the organisation does. This section is divided into four sections and each of the remaining three sections explains the kind of services that is provided by the organisation.

• Get involved section
• Get involved section on medium screen
• Get involved section on small screen

Below the About Us & Services section is the Get Involved section (different from the get-involved page). This section can be visited by further scrolling. It consists of three responsive cards that visually depicts a call to action for the user. It immediately lets the user know that they can be involved in three ways - Volunteering, Donation, and Leasing their property to the organisation.

• Subscribe to newsletter on smaller screens
• Subscribe to newsletter
• Subscribe to newsletters
• Subscribe to newsletter on large screen

This section is found towards the bottom of the page and it helps the user signup up to the organisation's newsletter. It was built with ease and seeks to secure the subscription by just accepting one input field and then collecting the user's email address.

• Footer on small screen
• Footer on large screen
• Footer on medium screen

Like the Navigation bar, the footer maintains the same design and content throughout all the pages of the website. It contains the organisation's social links which when clicked opens the social site on a new window and still keeps Haven hub's website open. This helps the user to still stay active in what they were doing on the organisation's website. The footer also contains the organisation's phone number and physical address/ The address when clicked also opens a google map for ease of direction. Likewise, the phone number when clicked, would attempt to dial the number if the user were using a mobile device or a computer that has Call abilities.

• Get involved page on mobile devices
• Get involved page on full display on large screen
• Get involved volunteer

By clicking the Get Involved link on the menu on the navigation bar, the user can visit this page. The page gives more explanation to the Get-involved section that we witnessed on the home page. It encourages he user to take action by signing up and participating by volunteering, donations and leasing properties to the organisation.

• Sign up page

The Signup page contains a web form that collects the user's data based on the reason why they are contacting the organisation. The user has the options and choose to become a client, donate, volunteer, lease their property and subscribe to the organisation's newsletter. At the moment, the form is not connected to any database but only make use of a 'Get' form action. There are future plans of connecting it using JavaScript, PHP and MYSQL in other to store what is submitted.

• Contact us feedback
• Subscription successful

There are two thank you page with same layout but different messages. The first, is a message that users who Signed up via the contact us page gets to see. It informs the user that their details have been received, and that they would be contacted shortly. The second, refers to users who specifically used the Newsletter subscription form from the Homepage. It lets the user know that they have successfully subscribed to receive newsletter from the organisation.

There is a future plan to allow the user receive a pop-up after submitting through the contact page and then gives the user an option to return to the homepage. This would reduce the number of pages for the website as a whole, and is a faster and more user-friendly method rather than allowing another page load before confirming actions to the users.

The 404 Error is a safety net for broken links. The name of the file 404.html was created according to Github's standard for showing visitors a message in a situation where the intended link becomes unavailable. If a link is unavailable, the host, in this case Github, redirects the user to 404.html by default. This prevents the user from having a total bad experience an ensures that the user still remains on the website.

Various tools have been used in testing the overall performance of the website from beginning to end. I have listed them in no particular other below:

Responsive Design Tester by Media Genesis was used to view the website on different media screens. Click any title below to view the site's appearance on the screen.

• Link to first video before Homepage redesign YouTube Video of live testing

• Current YouTube Video of live testing

• Fixed Email Input on Contact form

• Phone Link Test

• Responsiveness Test across multiple device sizes

  Old Gifs Images of Homepage responsiveness:

  Mobile Screens 375 x 667

  Tablet Screen 768 x 1024

  Laptop Screen 1024 x 800

  Desktop Screen 1920 x 1200

The final project was tested on four different browsers, namely: -Microsoft Internet explorer -Google Chrome -Brave -Mozilla Firefox The output was similar on all these browsers except on Mozila firefox, where the fonts appeared darker and were therefore better viewed in terms of clarity and contrast. In addition, the buttons on the "get-involved" section (not page) of the index page were observed to overlap the text above them. I was able to correct this error by adding more padding on top of the buttons.

Google page speed insights was used to test the speed of the website and various issues were highlighted which was followed by subsequent adjustments. A notable issue raised was that of the body font being high in contrast. The font (Diphlliea) was then changed to Roboto. High contrast fonts are difficult to read by some users and also on some devices.

• Index Page Mobile (Current)

• Index Page Desktop (Current)

See also:

• Index Page Mobile(Old)

• Index Page Desktop (Old)

• Get Involved Page Mobile

• Get Involved Page Desktop

• Contact Us Page Mobile

• Contact Us Page Desktop

• Thank You Page Mobile

• Thank You Page Desktop

• Newsletter Thank You Page Mobile

• Newsletter Thank You Page Desktop

• 404 Error Mobile

• 404 Error Desktop

1. The W3 validator (validator.w3.org) highlighted errors on the website's links. Arial-label instead of aria-label had been used, and 15 errors were found and corrected.
2. An element had been left exposed on the about section and this was detected and corrected afterwards. Click the links below to visit the HTML validation page.

• Index page (Current)

See also:

• Index page (Old)

• Get Involved Page

• Contact Us Page

• 404 Error Page

• Thank You Page

• Newsletter Page

1. The W3 validator highlighted 5 errors regarding the use of a wrongly written code for background-color, align-items and position. These codes were then rewritten correctly.
2. The validator highlighted 5 warnings regarding using same background color and border colors for the buttons on the pages.
3. The validator highlighted the usage of a wrong value in some codes and this was corrected afterwards. Click the link below to visit the CSS validation page.

• Current CSS Test

See also:

• Current CSS Test - 4 Warnings

• First CSS Test showing Error (Old)

• Second CSS Test after error was fixed(Old)

Deque's University Color Contrast Analyzer was used to determine what colors go together This ensures that users of all kind can clearly view texts and image/button borders. Some users might be color blind or are people with low vision experience. This tool ensures that the best colours are used in other to guarantee their convenience. A brief understanding of this would be an instance where a white text is put on a yellow background. Both colors are too bright and would be difficult to read for most users.

Blasmiq was used to draw mock-ups for the first set of website design to guide in the development of this project.

• Blasmiq homepage design 1
• Blasmiq homepage design 2

I encountered issues with the footer the signup and thank you pages. The footers were floating because the page didn't have enough content and then scrolling was an issue in mobile screens - This tutorial by Sir Chogyal helped me through it.

• HTML was used as the main language for the website.
• CSS was used to add styles and layout to the website.
• Blasmiq was used to create wireframes to pre-deign and guide the site's layout and designs
• VScode was used to write and edit the codes and host the site my local computer
• Git was used for the version control of the website
• GitHub was used to host the deployed website
• Tiny Png was used to compress the images on the site
• Image resizer was used to resize images on the site

The site was deployed using Github and was pushed through via Vscode. The repository was created on Github and then cloned on Vscode. After creating the site on Vscode, it was pushed onto Github. The site was then deployed via Github pages by:

- Selecting the settings tab inside the repo on Github
- Selecting Deploy from a branch under 'Build and deployment'
- Selecting Main under branch
- Click save

After these steps, the site would have been deployed and becomes live at https://dcsndevs.github.io/haven-hub

To clone this project, you can do so using VsCode or any code editor that has an integrated development Environment (IDE), using this command:

 git clone https://github.com/dcsndevs/haven-hub.git

• While creating the elements on the index page, I struggled with aligning the texts and contents to an absolute center. I was then introduced to the Flex box tutorial by Kelvin Powell on YouTube. Another Youtube Tutorial from Patreon also proved useful.
• In preparation for this website, I used Balsamiq to create wireframes to guide me through the project. Even though the final website didn't look exactly like the wireframe, it provide a guide on the journey and was important to helping me achieve the final design.

The fonts used were imported from Google Fonts and the Icons were from Font Awesome Regular 400 Font Abel and Roboto were mainly used. Garamond was also applied on the home page for mobile devices because the initial font was found to cause layout displacement issues as suggested when the page was tested on Page Speed

Black (#000000), Green (#009B4D), Dark Green (#006400), Ivory (#FAF5E9), and Tangerine Yellow (#FFCC00) were the main colors used for this site. Hostinger's color scheme tutorial inspired the use of Dark Green, Ivory, and Yellow. The color Pallete according to it, suggests they are "easy on the eyes, making the website seem relaxing and organic"

The animation used for the intro message is "text-focus-in" animation gotten from Animista

All the images used in the creation of this website were sourced on Pexels, Unsplash and W3 websites. Below is a list of the images used and their links:

1. Photo by Kampus Production
2. Photo from W3 Web Themes
3. Photo by Doan Anh
4. Photo by Andrea Piacquadio
5. Photo by Pixabay
6. Photo by Mikhail Nilov
7. Photo by Liza Summer
8. Photo by Lisa Fotios

• Image Resizer and TinyPng were used to respectively resize and compress all the images on this site.
• Ezgif.com was used to covert videos to the animated gif images that was used to show live tests.
• Screenshot & Screen Recorder was used to record live tests and used to create videos therefore.
• Am I Responsive website was used to simultaneously display how the site looks on different screen sizes.
• Canva software was used to edit and design images.

In the build-up of the website, I drew a lot of inspiration from my mentor Juliia Konn who guided me throughout this work. She explained difficult terminologies and helped break down complex structures. Juliia pushed me and was unstatisfied with average. She wanted an excellent project and encourage me to get this far.

I would like to express my gratitude to my loving wife for her support in the course of this work. She hass been taking up most of my shifts for babysitting our son to allow me give more time to this work.