View the Woofing Walks live website here

Woofing Walks is a dog walking service based in the Rhondda Valleys. The aim of the website is to promote Woofing Walks' services and attract new customers to the business. Woofing Walks is aimed at dog owners looking for trusted dog walkers in their local area. The website provides information of what new customers can expect from their services. It also includes walk times, prices and contact information. The website promotes other services on offer or upcoming.

• I need to quickly identify what Woofing Walks is.
• I need to easily navigate the Woofing Walks website so I can find information on Woofing Walks' services.
• I need to find pricing information of Woofing Walks' services.

• I need to easily find contact information so I can book a walk or ask more questions.
• I need to easily access Woofing Walks' social media so I can follow.

• I need to find information on different services Woofing Walks offer.

Google Fonts was used for all fonts on the website

• Kalam is used for the nav brand only, it's a handwriting font with a personal feel.
• Wellfleet is used as a stand out for all headings and buttons on the website. Wellfleet is a slab-serif font.
• Heebo is used for larger bodies of text to ensure ease of reading for the user. It's a sans-serif font.

The Homepage design stayed the same, with the addition of a page title that displays underneath the hero image on mobile devices and as an overlay on larger screens. The title tells the user instantly what the website is and where the services are offered.

The "Why choose us?" section was changed to "Our Mission". I didn't want two lists at the bottom of the about page. The "How it works" sections made more sense as it explains the next steps clearly to potential new customers.

The contact details were moved to the top of the page to ensure that they're found easily. The option to sign up for a newsletter didn't quite coincide with the need to attract new business. Having a simple online form to capture basic details of the customer and their dog is a much more effective way to onboard new customers.

1. In the future, I plan to add a gallery page.
2. In the future, I intend to introduce a FAQ section.

HTML5,

CSS3,

Balsamiq, used to create the wireframes at the beginning of the design process.

Git, used for version control. I used the terminal and git commit/push commands and the source control panel.

GitHub, used as storage for the Woofing Walks repository.

Bootstrap 5.3, used for responsive layout, some bootstrap styles were customised in the css stylesheet for the project.

Font Awesome, used to import icons to the home page and about page for UX purposes.

Google Fonts, used to import all fonts used on the website.

Fonticon, used to create favicon.

Version 111.0.5563.146 (Official Build) (64-bit)

Website displayed as expected and all links, features functioning correctly.

111.0.1 (64-bit)

Website displayed as expected and all links, features functioning correctly.

Version 111.0.1661.62 (Official build) (64-bit)

Website displayed as expected and all links, features functioning correctly.

• Website displayed as expected.
• The Instagram link remains unavailable for three seconds when you reach the bottom of the page due to a browser up arrow covering it. The link works perfectly when the up arrow button times out.
• The browser displays the website differently if the phone is set to dark mode.

1. Footer cuts off bottom content on mobile devices in chrome browser. Content cut off fixed by switching from fixed-bottom to sticky-bottom.

2. W3C validator showed error with nav buttons including a tags. I fixed this by removing the button tag, adding a button class and styling the button using CSS. Fixing this error affected my "more info" button in my hero image section. This was easily fixed by adding the button class previously used.

3. Whitespace showing to the right of index page. I used Chrome dev tools and found that the bootstrap row class was adding unwanted gutter. I removed this by using g-0 class alongside the row class.

4. Contact Form page has whitespace to the right. Using dev tools, I could see that one of my row divs was causing the issue, but wasn't sure which one. I added background-color: red to one div and background-color: blue to another to identify. I then added margin:auto to the problem div in CSS.

5. Nav buttons are showing too large on medium screens (768px) on the Index Page and Contact Page. Bug fixed by removing larger font size in the 768px media query.

6. Image in the Our Story section distorted. Changed the original image to square, using windows. Coverted the image to Webp and replaced existing image to fix the bug.

7. Overlay is floating upwards when changing screen sizes for larger screens. Issue was fixed by adding bottom:0 to cta-container, it now sits flush to the bottom of the hero image.

8. Fixing the overlay bug caused the container to be in a fixed position on mobile and tablet devices. Dev tools was used to find the declaration causing the issue, position:fixed. By removing this the bug is fixed and the container sits directly beneath the hero image as intended.

9. Contact form showed 405 error page when submitted. Bug fixed by removing method="POST" attribute from form tag.

There are no known bugs.

• SEO: Score increased to 100 by adding meta description tags to the head and changing link text on the cta button to About Us.
• Accessibility: Score inscreased to 100 by adding aria-label to all a tags.
• Performance: Performance was increased to 72 in incognito mode.

First Time Visitor Goals

1. I need to quickly identify what Woofing Walks is and where they are based.

• The Home Page displays a "Dog Walking Services" title along with the area the services are offered. This is immediately visible when the home page loads and requires no scrolling to see.

2. I need to easily navigate the Woofing Walks website so I can find information on Woofing Walks' services.

• The navigation bar has clearly defined buttons for each page. The about page is accessible from the nav bar and the call to action "About Us" button in the hero image overlay.

3. I need to find pricing information of Woofing Walks' services.

• The price of Woofing Walks' services is included in the services summary section on the home page.

Returning Visitor Goals

4. I need to easily find contact information so I can book a walk or ask more questions.

• The contact button is clearly defined in the navigation bar on all pages. The contact information for Woofing Walks is displayed at the very top of the contact page and is the first thing the user will see.

5. I need to easily access Woofing Walks' social media so I can follow.

• Social links are located in the footer of each page and open in a new tab when clicked.

Frequent Visitor Goals

6. I need to find information on other services Woofing Walks offer.

• The services summary section of the Home Page includes information on doggy day care service. This section also promotes intrigue by showing that dog training school is coming soon.

Woofing Walks' live website was deployed using GitHub Pages.

1. Go to GitHub repository.
2. In the top right of the screen, click the fork button.
3. A form will appear, you can edit the name and description or keep it the same.
4. Click the green Create Fork button.

1. In the GitHub respository click the green Code button, that sits above the repository files.
2. When the dropdown appears choose from HTTP, SSH or GitHub CLI.
3. Click the copy button to the right of the URL to copy to your clipboard.
4. Open Git Bash / terminal, choose where you want to clone the files.
5. Type git clone and the following into the terminal https://github.com/abz2489/woofing-walks.git
6. Press enter to create the clone.

1. Sign in to GitHub or Sign Up for an account.
2. Find the woofing-walks repository.
3. Click settings.
4. Click the Pages link, found on the left hand navigation bar.
5. In the Build and Deployment section select the main branch and root folder.
6. Click Save, the live website is now deployed.

All website content was written by the developer, using the following websites for inspiration.

• Kent Dog Walker
• Muddy Paws Dog Walking

All images for Woofing Walks were sourced from Pexels.

• Hero Image

• Our Story section Image

• Our Mission Section Image

• Thank You Image

The article on CSS Transistions helped me with my nav brand and nav link transition.

This article on CSS Image Overlay helped create the hero image overlay.

The redirect meta tag was taken from this Hubspot article.

W3Schools was used to refresh on both HTML and CSS topics.

My mentor Chris Quinn for his helpful tips, advice and, most importantly, his feedback on this project.

Cohort lead Nathan Parry for his time and support when needed.

Cohort facilitator Iris Smok for providing helpful resources and guidance throughout.