For my second milestone project I have chosen to create a website for a wedding Photographer. The website has a navigation bar at the top of each page allowing the user to navigate their way through the page. There are three main pages which are linked in the navigation bar; Jude Browne Wedding Stories (home page), Blog and Contact page. The blog and contact page have buttons and links directing users to new pages.

• Live Link

I want to create a website that allows visiting users to easily navigate their way through the website. To do this I will create a sticky nav bar which will allow useres to easily navigate their way through the website even if they're at the bottom of a page. I want to include google maps so the visiting user can easily see where the photographer has taken pictures previously and have a contact form for visiting users to send enquiries straight to the photographer.

I want the page to look simplistic and don't want to look too busy so it's a relaxing experience for the visiting user. When couples are choosing their wedding photographer they want to choose someone that isn't going to make their special day feel hectic and therefore having a simplistic, professional website is key to give the impression that the photographer is a relaxed person and won't bring any additional stress to their special day.

• As a visiting user, I want to see social media links on a website so I can view images and posts that the photographer uploads on them.
• As a visiting user, I want to see reviews when I’m on a photography website without having to search for them myself.
• As a visiting user, I want to send off queries to the photographer to answer my questions whilst using the website.
• As a visiting user, I want to see where each picture was taken as google maps so I can choose the best spots.
• As a visiting user, I want to see a variety of images that the photographer has taken.

• Navbar that follows the page when user is scrolling
• Hero Image with button linking to the contact page underneath
• Clear Titles
• Information about the photographer
• Footer with links to social media accounts
• Legal info at the bottom of the page stating that the photos belong to photographer

• Navbar that follows the page when user is scrolling
• Clear titles
• Thumbails linking to blog success pages with more information and images on them
• Google Maps with clusters on them to show places that the photographer has taken photos
• Footer with links to social media accounts
• Legal info at the bottom of the page stating that the photos belong to photographer

• Navbar that follows the page when user is scrolling
• Clear titles with couples names and wedding venue
• Information about their day
• Images/ Gallery to show photographers work
• Footer with links to social media accounts
• Legal info at the bottom of the page stating that the photos belong to photographer

• Navbar that follows the page when user is scrolling
• Clear titles
• A form to send enquiries tto photographer
• An image to make the page interesting
• Button linking to the form success page
• Kind words from previous clients to give visiting users an idea of what the photographer is like to work with
• Footer with links to social media accounts
• Legal info at the bottom of the page stating that the photos belong to photographer

• Navbar that follows the page when user is scrolling
• Text saying thank you for the enquiry so visiting users know that the enquiry was sent
• Images to display photographers work
• Footer with links to social media accounts
• Legal info at the bottom of the page stating that the photos belong to photographer

• Add more thumbails to the blog page to show visiting users more weddings that the photographer has covered.
• Add to the Google Maps clusters to show more venues that the photographer has taken photos.

• I used the color-hex to find colours that would suit the page throughout the project as well.
• I used google fonts for the text and titles throughout the project.

I have designed wireframes to help me plan my project and follow an idea of what I want the finished project to look like and function. The website won't look exactly like the wireframes as new design ideas are presented when developing the pages.

For my second milestone project I used a number of technologies to assist in developing my website which I have listed below.

• I used Bootstrap throughout the project to create, the navbar, hero image and enquiry form
• I used Google Maps to create a map on the blog page to show visiting users where the photographer has previously taken pictures
• I used EmailJS to connect the contact form to an email address
• I used the google search engine to help me solve problems with my code, find inspiration for the design on the website through looking at other wedding photography sites and to find out how to code certain aspects as well.

External Dependencies

• I used google fonts throughout the project for the font family.
• I used invision for the wireframes.
• I used Google Maps Documentation for the google maps on the blog.
• I used EmailJS for the contact form.

Testing

I used HTML, CSS and Javascript validators to test the coding aspect of my project and they passed for both. As for the visual aspect of the project I tested it through opening it on a web page browser and clicking on all the links in the navigation menu and reading through each section. I also inspected the code on the browser and looked at it on the IPad Pro and mobile phone devices to make sure it was working on all screen sizes. I clicked through all the links on the navigation bar to ensure there were no broken links and that external links opened on a new tab. I used the contact form to ensure it was working and also moved the google maps around to make sure it was working as well.

Validation

I used the W3 HTML Validator, W3 CSS Validator and the JSHint Validator to test the code for my milestone 2 project which they have all passed.

Testing Against User Stories

Home

I wanted to keep the home page simplistic. It has a sticky navbar at the top of the page which allows visiting users to easily visit the other pages at any stage. There's a button beside the hero image which directs the visiting user straight to the contact page to send the photographer an enquiry. I have added information about the wedding photographer on the home page as well to allow the visiting user a chance to get to know the photographer. On the bottom of the page there is a footer which says follow our journey and has links to the photographers social media accounts.



Blog

The blog page has a sticky navbar that is always visible to visiting users. There are four thumbails with links to blog success pages which more information on them about each wedding. There's a google map on the blog page with cluster markers displaying where the photographer has taken pictures previously. At the bottom of the page there's a footer which has links to the photographers social media links, Facebook and Instagram. This allows visiting users to check out the photographers other accounts.



Blog Success pages

For the blog success pages I kept it simple with a header stating the couples names and their wedding venue, pictures of their wedding and a piece of text describing their day. The pages also have a sticky navbar and footer page with social media links.



Contact

For the contact page I wanted to create a contact form for visiting users to send their enquiries straight to the photographer. AS you can see in the screenshots that has been done. There is a send button that links to the form success page which allows the user to see that their enquiry was successfully sent. The page has a sticky navbar to allow visiting users to navigate their way through the page at all times. In the footer there are links to the social media accounts as well so they can easily find the photographers social networking sites. The page also has a kind words section which displays reviews from past clients of the photographer.



Contact Success Page

The contact success page has a sticky navbar that is always visible to visiting users to allow them to find their way back to the main page. The is a message displayed on the page which lets the user know that their enquiry has been sent off to the photographer. There are two images on this page as well give the page some interest. At the bottom of the page there is a footer with the photographers social media accounts linked and under the footer there is a paragraph for the legal information, informing viewers that the photos are owned by the photographer.



Fixed Bugs

Below I have listed bugs that I found in my code and resolved

• When testing the page on Ipads the blog page was displaying a big empty space. To fix this i added a google map to the page to fill it out.
• The contact success page had an empty space as well and was resloved by adding in a couple of images which also gave the page some more interest.
• The google map when first tested wasn't showing the image of a map. This was resloved by changing the background color.

Supported Screens and Browsers

As seen in the screenshots below I have tested the website on the Ipad Pro screen and from the screenshots above you can see the webpage on a browser screen



Deployment

I used Gitpod to code the web page and then pushed it to Github. I used clear, descriptive and short commit messages throughout the project to show clearly each step of the project. I used the preview on Gitpod and open browser to see the design during the process of coding. Once finished coding I tested the web page by opening the web page on a browser to make sure all changes were saved and working properly.

Gitpod

Steps I used on Gitpod to deploy my webpage:

• I used clear and concise commits throughout the development of the webpage
• I used git add to save the files
• I used Git push to push the code to Github

Github

Steps I used on Github to deploy my webpage:

• I created a Github repository for the project
• Once the repository was created I used gitpod to develop it
• I went into the settings and at the github page section I changed the Branch from none to main to get the live link for the webpage

Credits

Where I got my content Form

I got all of my content from Jude Browne Wedding Stories. I got permission from the photographer to use her information however it was public anyway. I used her current webpage for the content and her social media accounts for images. Jude had content on her page that I used throughout the development of my milestone project for example, the information on the blog and home page.

Acknowledgements

Below are links to pages I looked at for inspirations.

1. Jude Browne Wedding Stories
2. Save The Date
3. Treasure Box
4. Allister Freeman

Below are links to websites that I got bits of code from.

1. Bootstrap
2. Code Institute
3. Goggle Maps Doc
4. W3Schools