For my first milestone project i wanted to make a website that i can use for my headshots business. The reason for this is that i have many nice pictures that i can use for free. The images are from my portfolio and the people in there have all given their written permission that i can use the images for portfolio and social media.

The business is a small one, just me. The people that would be interested in my services are actors, professionals with a LinkedIn profile, writers, journalists and maybe even people active on dating sites. For example, an actor need to showcase him/her when applying for jobs, so they need good headshots.

For the company, it´s about showcasing the images and attract new clients. I want to show them i take good images, that other people like what i do and that i am worthy of their trust.

There are loads of photographers out there. When potential clients come to my site, they need to be able to form an opinion on how good images i take and how my prices compare to the competition. It´s also important that they can see where i am located. Those things in particular need to be very visible to them.

Follow this link to look at my wireframes

Potential clients can look at my work and book a session. They can also contact me via email, phone or reach out on social media.

To make it as accessible as possible i use alt text for the images and i tried to make it clean and high contrast.

Within the headshot business, it´s common to use a one-page site. I wanted the site to look clean and professional, trustworthy. I think that the font Lato, is giving a professional, not to shouty, friendly and professional impression.

I have been using the Google Chrome dev tools to make sure the site looks good on different devices/screens. I designed the page to be optimized at the dev tools breakpoints and i also looked at what intervals it didn´t look so good in and then added a media querie there.

I have tested the functionality myself and i also asked my girlfriend to try it out.

I also used Lighthouse in dev tools. It gave me the information that my performance is at 74, and that i could take a look at the sizing of images. When we try it out on different devices it´s quick enough, so for now i let it be. The image sizing and best practice with images is something i will have a look at more in depth for future projects.

There is still one warning left in Jigsaw when validating the css. "Imported style sheets are not reviewed for direct input or file upload", translated from Swedish. I asked a tutor about it who said that since i only have to validate my own stylesheat i can ignore that warning and submit my project, but that i make a comment about in the README.

The links in the menu is supposed to take the user to different sections on the site. They work as expected when tested.

It´s supposed to go around by itself like a carousel, and it does. We have also tried out the controls to see if they take the user manually from image to image as they should. They do that.

These buttons will take the user to external booking pages, one for each package. They worked as they should when we tested. The external booking i use is called Accuity scheduling.

I put required on all the fields and the consent checkbox. Everything works as it should and if something is missing there will come a little pop up message. I used the same url that you guys used to dump the info in the form. There is a link to "terms of use" that doesn't go anywhere. The reason for this is that i haven't got a terms of use document yet.

There is a navigation menu, a contact menu and links to social media. When tested, they worked fine.

I used flexbox for my cards. I had some concerns that it might be to new to have support on all browsers. I checked on Can i use and it seem to have a pretty good support among the browsers.

I validated the code in Jigsaw for the css, and the W3c markup validation service for the html. When i validated the html code, i got an error that i can't use the a element inside the button element. It worked fine and looked good, but i had to change it. I then used a div element with the a element as child. It worked fine, but i had to do some steps to make it work. The div element is a block level element so had to give it a proper width, because it takes all of the available space if i don't. I also had to center it with margin: 0 auto.

There was some additional white space under the footer when i looked at the site in Safari on iphone. A Google search told me this seems to be a Safari bug. Next time i loaded it looked alright again though. No problems in Chrome.

1. Go to github.com
2. Sign up
3. Github will now create your account
4. Choose a plan
5. Verify your email

To make life easier, install this Gitpod browser extension in your Chrome browser.

1. Go to the repo
2. Click the green button with "Gitpod" written on it
3. A new Gitpod workspace will now be created
4. Copy the source code and paste it in your new workspace

Don´t use the green button more then once, because every time you push it, a new workspace will be created. Go via the Gitpod page.

1. Write: git add, followed by the file you want to add
2. Write: git commit -m "text that describes what changes you made"
3. Write: git push, and it will be delivered to github

1. Go to the Github repo
2. Go to settings
3. Go down to Github pages
4. Choose the master branch and save
5. It can be a little slow to build the page, so don´t worry if it takes 15 min or more
6. Sometimes it can need a little "kick". I learned from a tutor to use this command in Gitpod cli: git commit -m "Restarting GH Pages build" --allow-empty. It makes Github start building the page again

The portfolio carousel is just copy pasted from Bootstrap.

Google maps is where i found the code with the map i use to show the studio location.

I have also used the fonts Lato and Roboto from Google fonts.

I have used icons from Font Awsome. Here are links to where i found the icons: Euro icons, Facebook icons and Instagram icons.

My mentor Excellence Ilesanmi, has done a great job in helping me in a good way. The mentoring sessions has been really helpful!

I would also like to thank the tutors for their patience with me. They are always helpful and all of them seem to have a great sense of humour!

The people hanging out on Slack has also been very helpful.