This website was built for a Photography company. The website features information about the company, its photoøs, and favorite locations. The site was created to intuitively fill the needs of information seeking customers with an intriguing, clean design. Providing them with location, contact information, Photo Gallery, and favorite locations.

The goal of this project was to make a mock website for a real photography company. The main goals were to make the important information needed to do business with a photographer easily and readily accessible on all devices.

• Business Goals:

  • Attract potential customers.
  • Create a point of contact between customer and owner.
  • To supply customers with information quickly in an attempt to increase customer base.
  • Increase customer acceptance.

• User Goals:

  • Access to photo gallery to check out photographers work.
  • Access to some of the photographers favorite locations.
  • Easy way to contact the business for any questions.
  • Direct line of communication.
  • Responsive Web site.

As a customer, I want to be able to access some of K&P Photograåhys previous work. End-user goal: To easily view K&P Photographys previous work. End business goal: To increase sales. Acceptance criteria: * product defines any initial functionality requirements they can think of.

As a customer, I want to have easy access to contact information. End-user goal: Access to an online contact information. End business goal: To increase sales as well as provide the best possible experience for each customer.

As a user, I want a direct line of communication so that I can get quotes for photographing my events. End-user goal: Direct line of communication End business goal: Increase sales.

As a user with my only access to the internet being a phone, I want access to K&P Photographys website via mobile, so that I can access their information. End-user goal: Responsive Website End business goal: Increase customer acceptance as well as sales.

I have provided an active link to my Wireframes. Wireframes were used to assist in the creation of my site. They played a key role throughout its development. The Wireframes helped make the responsive design as well as the nav-bar that was used throughout the site on each of the pages.

1. Wireframes:
   1. Index/Home Page https://wireframe.cc/CGX5ra
   2. Gallery Page https://wireframe.cc/TsrS12

• Responsive design: Allows for the viewing of the site on small, medium, and large devices.
• Hover Class: All links on the site have different designs when hovered that add aesthetically to the site.
• Google map API: A google map that shows 3 of the photographers favorite locations.
• Social Links: Links to Social Media platforms have been included at the bottom of the page in the footer.
• Contact Form: a contact form has been included for a direct line of communication.
• A photo gallery has been added on the gallery page.

• A more interactive site as my knowledge increases.

• Bootstrap

  • The project uses Bootstrap to help me create the grid layout, header, Nav-Bar, and contact form. I used Bootstrap 4 (therefore I used Popper and jQuery that comes with it).

• Google Fonts

  • The project uses Google Fonts I used 'Dosis' from Google Fonts, by only using one font it helped my site to appear more uniformed throughout.

• code Institute

  • The project referenced what I have learned in Mini projects from Code Institute, I referenced three techniques. One was from the Whiskey Landing Page, as well as the picture rounding technique from the reviews. However I did make the code my own customizing the display positionings, colors, pictures, bootstrap, etc. The second technique that I referenced was from the Love Running Project. I used the location and times section with the Opaque overlay of the picture. However this code was made my own by customizing nearly aspect of it for it to work in my Bootstrap system.

• [CodePen]//codepen.io/scanfcode/pen/MEZPNd)

  • The project uses Code Pen I used a footer template from this site that is used at the bottom of every page on the site. I made the code my own through customization. I made it so that it is responsive in Bootstrap, changed the background color, font color, content, CSS hover, and layout.

• Font Awesome

  • The project uses Font Awesome. All of the social media icons in the footer are from Font Awesome).

• Bootstrap

  • The project uses Bootstrap to create the form on the contact page. "How to Create Forms Using Bootstrap" Video found on youtube.).

• [W3 Schools]//https://www.w3schools.com/)

  • The project uses W3 Schools I used link hover effects and .card transparent overlays on the events page from this source.

• [CodePen]//codepen.io/scanfcode/pen/MEZPNd)

  • The project uses Code Pen I used for PopUp Contact Form. I made the code my own through customization. I made it so that it is responsive in Bootstrap, changed the background color, font color, content, CSS hover, and layout

• [CodePen]//particleJS.com)

  • The project uses particleJS I used the particle JS library to make the "snow" effect on the index page.

1. Contact Form:

   1. Go to the "Contact" page
   2. Try to submit the empty form and verify that an error message about the required fields appears
   3. Try to submit the form with an invalid email address and verify that a relevant error message appears
   4. Try to submit the form with all inputs valid and verify that a success message appears.
   5. Conclusion: By following these steps I was able to verify the 'Contact' page works successfully.

2. Photo Gallery:

   1. Go to the 'Gallery' page
   2. Scroll halfway down the page until you reach 'Photo Gallery' section
   3. Hover the Photo Gallery Button-
   4. Select one of the 3 different photo gallery types
   5. Conclusion: By following these steps I was able to verify all photo's in the gallerys were working

3. Responsiveness:

   1. Navigate to 'Home' Page
   2. Open Chrome Dev tools by pressing the F12 key or by right-clicking the mouse on the page and selecting 'Inspect'
   3. Click the 'Responsive' drop-down option, located directly below the bookmark bar in Chrome
   4. Select a device
   5. After selecting a device the page will mimic the screen size of the device chosen
   6. All of the elements will align to fit the current screen size chosen
   7. Conclusion: By following these steps I was able to verify the Menu is available and displaying properly

4. Links:

   1. Navigate to 'Home' page
   2. Click each link in the NavBar which takes the user to its respective page
   3. Scroll down the page to the next set of links and repeat step 1
   4. Scroll down to the footer and repeat step 1.

5. Code Validation Tools used:

   1. https://validator.w3.org/
   2. https://jigsaw.w3.org/css-validator/
   3. https://esprima.org/demo/validate used to test/validate Javascript.
   4. Code passed all of the validation criteria

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. From the menu items near the top of the page, select Settings.
2. Scroll down to the GitHub Pages section.
3. Under Source click the drop-down menu labeled None and select Master Branch.
4. On selecting Master Branch, the page is automatically refreshed, the website is now deployed.
5. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

To clone this project from GitHub:

Under the repository name, click "Clone or download". In the Clone with HTTPs section, copy the clone URL for the repository. In your local IDE open Git Bash. Change the current working directory to the location where you want the cloned directory to be made. Type git clone, and then paste the URL you copied in Step 3. git clone https://github.com/SkylerTrent/up-in-smoke-bbq Press Enter. Your local clone will be created. Further reading and troubleshooting on cloning a repository from GitHub here.

1. Photos:
2. Google Images
3. Eventbrite.com