Link to the deployed site

Pat & Joe Tangney Building Contractors Ltd. is a website designed for people to see what the company is about, show people some of our past and current projects and to provide details of how to contact the company if they wish hire them. There is also links to the companys social media.

The target audience for this website is potential clients and people who want to check in on the progress of work on particular jobs.

• Look clean and utilise the companies existing colour scheme
• To make the site easy to navigate through the "nav bar" and easy to read
• Look professional to any potential clients

• First Time Visitor Goals

  1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the company.
  2. As a First Time Visitor, I want to be able to easily navigate through the site to find content.
  3. As a First Time Visitor, I want to be able to find contact details for the company.
  4. As a First Time Visitor, I want to be able to see photos of previous works the company has completed.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to find the best way to get in contact with the company.
  2. As a Returning Visitor, I want to see updates of company projects through the use of the gallery.

• Frequent User Goals

  1. As a Frequent User, I want to check the gallery to see updates on current and past projects.
  2. As a Frequent User, I want to contact the company throught thhe integrated contact for on the Contact Us Page.

• The main colours used were blue, grey and white. These are the primary colours pf the company.

• The primary font used was Dm Sans with a fallback of Noto Sans in case the font isnt being imported into the site correctly. Dm Sans is an attractive font.

• The large hero image is relavent to the company's line of work. It stands out while not taking away from the content on the index.

• Navigation bar there is a hover feature to better display which menu icon you are about to select.
• The company logo in the header is clickable to bring you back to the homepage.
• I used a parralax feature with the hero image to make scrolling more aestetically pleasing. Learned from W3 Schools
• The HomeBond logo in the footer has a link that takes you to the homebond website.
• The contact-us form has got hover features on the text input boxes along with a hover feature on the submit button.
• The google map iframe can be clicked on to take you to a new tab to explore the map in more detail.

• HTML5
• CSS3

1. Bootstrap

   • Bootstrap was used to assist with the responsiveness and styling of the website.

2. Hover.css

   • Hover.css used in the navigation bar on the list elements to show users which page they were selecting. It was also used on the submit button on the form in the contact-us page.

3. Google Fonts

   • Google Fonts was used to import and make use of the "Dm Sans" font into the style.css file which is used throughout the project.

4. Font Awesome

   • Font Awesome was used on all pages of the website to add icons for the social media in the footer.

5. Git

   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to Github.

6. GitHub

   • GitHub is used to store the projects code after being pushed from Git.

7. Photoshop

   • Photoshop was used for resizing logos, images and editing for the website.

8. Balsamiq

   • Balsamiq was used to create all of the wireframes during the design process.

9. Tinypng

   • This website was used to compress images for the website.

• I used W3C Markup Validator to validate my html and after some fixes i got the result "Document checking completed. No errors or warnings to show." on each page of the site.
• I used W3 Jigsaw to validate my CSS and got the result "Congratulations! No Error Found." when checked on each page of the site. I also double checked by pasting the whole css document into the "Validate by input box" and got the same result.
• I used lighthouse in developer tools to test the site. This was the result i got

• I tested the website on Google Chrome, Internet Explore, Firefox, Safari and Edge.
• I tested to make sure the website links and navigation are working correctly.
• The website was tested on iPhone 8, X and 11 pro, iPad, Macbook, and Desktop by me.
• I asked friends to critique the site to ensure it was working from their device and to ensure it was a user friendly experience for them.

1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the company.

   • When first entering the site, new users will find a aestetically pleasing clean interface where they can straight away see the company logo in the header.
   • On show upon entry is the company slogan which details what the company does and what it stands for.
   • The hero image reflects what line of work (construction) that the company does.

2. As a First Time Visitor, I want to be able to easily navigate through the site to find content.

   • The site has an easy to use navigation bar. This displays the three pages of the site and they are named to clearly indicate where they will take you.
   • The header image that is also a company logo is a link which when pressed will take you back to the index.

3. As a First Time Visitor, I want to be able to find contact details for the company.

   • On first entry it is clear to see in the header that there is a contact-us page. So it is very easy to find the contact details for the company.

4. As a First Time Visitor, I want to be able to see photos of previous works the company has completed.

   • On first entry it is clear to see that there is a link to the gallery in the navigation bar in the header. This is where the user will find all photos of previous works completed by the company.

1. As a Returning Visitor, I want to find the best way to get in contact with the company.

   • Showed clearly on the navigation bar, there's a contact-us page. Here you will find all ways of contacting the company. The user can fill out the form on the contact-us page to request a call-back at their specified time. They can also see the phone numbers of the company's directors. ( These have been blurred out for privacy as they're the images used on the vans and sinage of the company). The site user can see an address of the company office. Also in the footer of every page is a link the companies social medias.

2. As a Returning Visitor, I want to see updates of company projects through the use of the gallery.

   • Using the gallery, the returning user can check to see up to date progress made on particular jobs or see the finished work.

1. As a Frequent User, I want to check the gallery to see updates on current and past projects.

   • A frequent site user will use the gallery to get updates on what the company is doing and see their progress on jobs.

2. As a Frequent User, I want to contact the company throught thhe integrated contact for on the Contact Us Page.

   • A Frequent user will use this site as a way they know that they can get in contact with the company.

• About us section getting squashed on smaller devices. Fixed by changing for the divs to line vertically
• Whitespace down the right-hand side of the gallery page. Issue was fixed by changing the margin from 1% all around on the gallery-title to 0% margin on left/right. This allowed the page to maintain 100% width rather than 102% width.

• Whitespace down the right-hand side of the contact-us page. Unresolved to the point of fixing the source of the problem. Issue has been concealed by adding "overflow-x: hidden;" to the body in the style.css page. This was the advice of my tutor.
• I ran my gallery photos through an online compressor to reduce the file size, this did not significantly improve the performance of the gallery page.

The project was deployed to GitHub using the following steps

1. Log in to GitHub and locate the GitHub Repository.
2. At the top of the Repository (not top of page) locate "Settings" on the menu.
3. Scroll down the settings page until you see the "GitHub Pages" section.
4. Under "Source", click the dropdown menu called "None" and select "Master Branch".
5. The page wil automatically refresh.
6. Scroll back down through the page to locate the now published site link in the

1. Log into GitHub and locate the Github Repository.
2. At the top of the Repository (not the top of the page) just above Settings on the menu, locate the "Fork" Button. You should now have a copy of the original repository in your GitHub account.

1. Log into Github, locate the GitHub Repository.
2. Click on "Clone or Download".
3. To clone the repository using HTTPS, under " Clone with HTTPS, copy the link.
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type "Git Clone", and then paste the url you copied in step 3.
7. Press enter, your local clone will be created.

• I would like to add a hamburger menu to the website.
• I would like to add a feature that allows the user to individually select each gallery image and view it in a larger form.

1. Code
   • The full-screen hero image code came from Pexels
   • StackOverflow and W3 Schools used throughout the project to help vith syntax issues.
2. Content
   • All content was written by the developer.
   • Colours were chosen to match this companys existing colour scheme.
   • Some principles learned in the Love Running Project were used on this site.
   • Flex and Float principles were learned from CoderCoder
   • Parallax effect on hero image learned from w3 Schools
3. Media
   • All images used (except for homebond image) belong to the Pat and Joe Tangney Building Contractord Ltd.
   • The homebond image used was taken from here. All construction businesses that work in conjuction with homebond have a right to display the homebond logo.
   • Social media icons used in the footer are from Font Awesome

1. Tutor support at Code Institute for their help and guidance.
2. My mentor for continuous helpful feedback.