View the live project here.

This is the only showcase website for a local building firm called MPD Builders. It's designed to be easily accessible and responsive on all devices.

• User stories

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to know who and what this website is offering without overloading on information.
    2. As a First Time Visitor, I want to be able to find the content I'm looking for through easy navigation.
    3. As a First Time Visitor, I want to be able to easily contact this business if I have an queries or if I want to see their social media.
    4. As a First Time Visitor, I want to see what this business is offering with an explanation of what they have actually done.

• Design

  • Colour Scheme

    • The backgrounds are all building themed to keep with the business. All hover.css features are the colour of slategray and a brick red.

  • Typography

    • The Roboto font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Roboto is a popular font at the moment and is clean and easily read.

  • Imagery

    • Imagery is key with this website as it is more of a showcase. All images used are related to building as that is what the business is. The gallery page is also shaped in a paving slab design to keep with the building aesthetic.

    • Wireframes

  • Home Page Wireframe -

  • Gallery Page Wireframe -

  • Contact Us Page Wireframe -

• Responsive on all device sizes

• Interactive elements

• HTML5
• CSS3

1. Bootstrap 4.5.0:
   • Bootstrap was used to help style and make the website responsive.
2. Hover.css:
   • Hover.css was used on the navbar list items for the underline animation and the sweep right animation in the gallery on the images.
3. Google Fonts:
   • Google fonts were used to import the 'Roboto and Exo' font into the style.css file which is used on all pages throughout the project.
4. Font Awesome:
   • Font Awesome was used on every page for the footer social media icons.
5. jQuery:
   • jQuery came with Bootstrap to make the navbar responsive and adds the toggle for mobile devices.
6. Git
   • Git was used to help with using the Gitpod terminal to commit to Git and Push to GitHub.
7. GitHub:
   • GitHub is used to hold the code for the project after it's been pushed from GitPod.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results

• 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 business.

     1. As soon as the website is opened the user can see a visible, clear navigation bar that allows them to go to any page of their choice. The business logo is also within this navbar.
     2. They are greeted with an instant description of who and what the business is and does.
     3. The user can choose to either check out the gallery section then go to the contact page or they can instantly email/contact them through the social media links on the footer which is fixed to the bottom of the page.

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

     1. The user has the navbar at the top of the page on all pages, the pages are clearly named allowing the user to easily know what page their going to. This will avoid the user feeling or getting trapped.
     2. After submitting the form it will refresh the page back to the contact page so the navigation bar will always be there to help people navigate around the website after they have used it.
     3. The social media icons will open up a new tab which will allow the user to keep the original website open allowing them to return to where they were before they clicked on the icon.

  3. As a First Time Visitor, I want to be able to easily get in contact with the business if i have any queries.

     1. There is a form that can be filled out on the contact page if the user wishes to ask any questions.
     2. Also there is a tab at the bottom of the page which also opens up another email option. This is next to the social media icons which can also be used to contact or find out more about the business.

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
• A large amount of testing was done to ensure that all pages were linking correctly.
• Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

• On Microsoft Edge and Internet Explorer Browsers, The background behind the form on the contact page doesn't show.

The project was deployed to GitHub Pages 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 the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by 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) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link: https://github.com/JoeLouisDsantos/Milestone-Project-MPD-Builders.git
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.

$ git clone https://github.com/JoeLouisDsantos/Milestone-Project-MPD-Builders

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/JoeLouisDsantos/Milestone-Project-MPD-Builders
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

    ## Credits

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• All content was written by the developer.

• All Images were created by the developer.

• My Mentor for continuous helpful feedback.

• Tutor support at Code Institute for their support.