This website intends to show off different fashion styles and provide inspiration. It is intended for all age groups and the aim is to invite people to sign up for a creative photoshoot displaying outfits in different settings. The website is also advertising a small portfolio of work and supposed to meet the photographic expectations of customers of all ages looking to have a creative photoshoot. The link to the page can be found here: https://zoe34.github.io/my-photography/

To view the work of a photographer and gain ideas and inspiration for potential photo shoots. To view the gallery and potentially contact the photography business.

To provide inspiration for the viewer and display a gallery of photos showing different styles and designs in diverse locations. Also promotes a photography business and allows for the viewer to get in touch and book an appointment.

Provides a menu of options including the main page, the gallery and a signup sheet. Its purpose is to make the navigation around the website easier. The menu elements are highlighted red when hovered over, giving the user confirmation of where the link leads to for clarity.

Main image on the top of the page displaying a part of the offered photography. This gives the user an insight into what the work looks like. The section is supposed to be colourful and eyecatching to draw interest.

A brief description of what the business offers and the aim is to encourage potential customers to sign up. Explaining what the main theme is, which is fashion photography and advertising flexibility by offering to take photo shoots in different locations.

A clear table informing the user during what hours the business functions during certain days of the week. It is meant to be easy to read, clear and concise.

Includes links to social media pages which would open in a new tab. The footer is meant to be simple and bold to make access easy and fast.

Shows the most recent work of the business and advertises working with different styles. The images display people of all ages wearing different outfits, making the business look diverse and open to ideas. This is useful to the user as they can see what the studio offers and how the photo shoot can be tailored to them and their needs.

A get in touch page which offers a short signup form including the name and email of any user who would be interested in contacting. The background image is bold and features a camera, which supports the theme of the business.

Another option in the signup section which includes a radiobutton. This would allow the user to decide which day/days of the week they are interested in.

• No errors were found when passing the code through the Jigsaw Validator.
• No errors were found on any page when testing the code using W3C Validator.
• W3C was used and the link https://zoe34.github.io/my-photography/ was pasted into the Address bar. No errors or warnings showed.
• The screen responsiveness for different screen sizes was tested using Chrome developer tools.

• The errors that I have come across are an empty heading in the section element in the index.html
• An empty heading in the logo class in in the header section. - All errors have been successfully fixed.
• Another bug was horizontal scrolling when using the main page and the gallery page on mobile screen mode. This has been resolved using "overflow: hidden;".

• As a new user I accessed the main page by pressing "Menu". The menu button lights up pink when hovered over and becomes underlined when clicked to confirm which page I am currently on.

• When I click on the "Capture" sign at the top of the page I am taken to the main page and the "Home" menu option becomes underlined pink.

• When I scroll down I see the main page image, a descripton of what the business offers and a time schedule, (image below shows the whole website on a mobile screen.)

• The "Gallery" option in the menu lights up pink when hovered over and when clicked it is underlined in pink.
• When scrolling through the gallery page I see a display of photography.

• The "Contact" button of the menu bar underlines pink when clicked and lights up pink when hovered over.
• As a new user I can enter my name in the "First Name:" input box, my last name into the "Last Name:" input box and my email address into the "Email Address:" input box.
• If the details are not fully filled in and I press "Submit" a sign appears: "Please fill in this field".

• When hovering over the input boxes they change colour to grey and when hovering over the "Submit" button it highlights green.

• After pressing the submit button I am taken to a confirmation page with a short message.

• When looking at the "Menu", "Gallery" and "Contact" pages I see a footer at the bottom of each page with the social media of the business on a black banner.

• When clicking on the social media icons at the bottom of the page I am taken to the social media site represented by the icon.

"As a visiting user, I would like to view the work of the photographer and gain inspiration"

"I would like to contact the photographer by signing up"

"I receive a confirmation that the signup has been successful"

"I would like to know what the business offers"

"I would like to know the opening times of the business"

"I can easily access the photographer's social media platform"

Black and beige shades dominate over the page. The signup page is based on black and white colours which stand out.

The project was created using the Google browser.

1. To open through Gitpod:
2. Click "Dashboard"
3. Then "Actions" and "Open"
4. "More actions" in the drop down menu and "Browser" option to open the code for the page in gitpod.
5. To view the preview in the browser type "python3 -m http.server" in the gitpod terminal.

1. To open through Github enter https://github.com/Zoe34/my-photography.git into the browser.
2. Click on the green Gitpod button.
3. "More actions" in the drop down menu and "Browser" option to open the code for the page in gitpod.
4. To view the preview in the browser type "python3 -m http.server" in the gitpod terminal.

Balsamiq Wireframes was used to create the wireframes for this project.

The website is suited to large screens from a width of 1200px, medium screens from 735px, medium to small screens from 620px and very small devices from 576px. The content is adjusted using different queries to maintain proportions with varying screen size and keep the content easy to read.

• Deployed to GitHub pages.
• Redirected to Gitpod pages.
• From the repository of the project navigate into settings and change the branch to Main Branch.
• The changes were saved and the link can be opened here: https://zoe34.github.io/my-photography/
• The website was made public by opening the repositories on github and opening settings
• At the bottom of the page under "Danger zone" the "Change visibility" option allows to change the page to public.

The camera icon was taken from font awesome. W3Schools was frequantly used to check code. Images were provided by Pixabay.com for the gallery and Pexels.com for the main page.