#Barber Shop

![Barber Shop backgroung image shown on a variety of screen sizes] (assets/images/barbg.jpeg)

Visit the deployed site: Barber Shop

Barbing shops are everywhere all around the world and it popularity in the UK and Ireland. It is estimated that over half population in he world visit barber shop are regular basis hence the importance of a barber shop in proximity to every residence.

CONTENTS

Design

Colour Scheme

As the pages of the site have a background image, I wanted to keep the colour scheme used on the site quite small so as to not overwhelm users. Light brown and green are very typical colours in traditional Barber shop, with the milk & green used for upholstery.

In my css file I have used variables to declare colours, and then used these throughout the css file. I was recently introduced to this method during a code institute study and had some help from slack chat room - it is a useful convention to use as it allows you to alter the colour throughout the website if you decide to update a colour, by changing the colour once in the variable.

I have used #00806b & #000080 as the primary and secondary colours used for the sites text.
I have used #ffffff as the overlay used over the sites background image.
I have used #3a3a3a for the border-shadow of the header
I have used rgba(203, 220, 200, 0.5) to display transparent background colour.

Features

The website is comprised of a home page, gallery page and sign up page. All Pages on the website are responsive and have: A favicon in the browser tab.

The Footer

The footer section includes links to the relevant social media sites for Barber Shop. The links will open to a new tab to allow easy navigation for the user. The footer is valuable to the user as it encourages them to keep connected via social media and the copyright note

• Favicon

The title of the site at the top of every page. This title also acts as a link back to the home page. The Barber Shop Title.

The Home Page

The home page of Barber Shop displays the sites name as a title and then a container which holds some cover text, including alerting the users that they can navigate back to the home page at any time by clicking on the page name. The home page contains the opening time of the barber shop.

The home page also have a feature for background image 5s zoom out.

Gallery page

The game page displays the sites name as a title. This also acts as a link back to the home page. This gallery page contains the photos of Barber Shop such as hair styling and hair cut.

Future Implementations

In future implementations I would like to:

I have been mindful during coding to ensure that the website is as accessible friendly as possible. This has been have achieved by:-

Using semantic HTML.

Using a hover state on all navigation menu buttons on the site to make it clear to the user if they are hovering over a button. Choosing a sans serif font for the site - these fonts are suitable for people with dyslexia. Ensuring that there is a sufficient colour contrast throughout the site. contrast button Contrast button hover contrast text

In a future implementation I think it would be a great accessibility feature to also add a symbol such as a tick or cross on the answer button to enable people who are colour blind to also be able to access the webpage.

Sign Up page

The sign up page contain a form that required to be filled with user's details as requested, there are options for News letter, New Customer and Home service. It is colour friendly and very easily accessible.

Typography

Google Fonts was used to import the chosen fonts for use in the site.
For the Page Title I have used the google font font-family: Arial, Helvetica, sans-serif, sans-serif and lato, san-serif. This
is based on a calligraphy style and I have chosen them as their looks like the type of font you would see on a barber shop name sign

Accessibility

I have been mindful during coding to ensure that the website is as accessible friendly as possible. This has been have achieved by:
Using semantic HTML.
Using a hover state on the nav element on the site to make it clear to the user if they are hovering over a button.
Choosing a sans serif font for the site - these fonts are suitable for people with dyslexia.
Ensuring that there is a sufficient colour contrast throughout the site.

Technologies Used

Languages Used

HTML, CSS
• Github - To save and store the files for the website.
• GitPod - IDE used to create the site.
• Google Fonts - To import the fonts used on the website.
• Google Developer Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
• favicon.io - To create favicon.
• Am I Responsive? - To show the website image on a range of devices.

Manual Testing and Code Validation

• I used HTML Validator w3c to validate all the HTML codes which resulted: "Document checking completed. No errors or warnings to show"
• I used CSS Validator jigsaw to validate the CSS codes to validate the CSS style codes and resulted: "Congratulations! No Error Found"
• I used the google chrome "Lighthouse" Developer Tools to test and analise with score results as follows: Performance: 66%, Accessibility: 98%, Best Practices: 96%, SEO:100%

Deployment & Local Development

Deployment

The site is deployed using GitHub Pages - Barber Shop.

To Deploy the site using GitHub Pages:

1. Login (or signup) to Github.
2. Go to the repository for this project, obasohan2/dreams-practical.
3. Click the settings button.
4. Select pages in the left hand navigation menu.
5. From the source dropdown select main branch and press save.

The site has now been deployed, please note that this process may take a few minutes before the site goes live.

Local Development

How to Fork

To fork the repository

:

1. Log in (or sign up) to Github.
2. Go to the repository for this project, Barber Shop.
3. Click the Fork button in the top right corner.

How to Clone

To clone the repository:

1. Log in (or sign up) to GitHub.
2. Go to the repository for this project, Barber Shop.
3. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
5. Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.

Credits

Code Used

I used various youtube tutorials to find more options as to solution when i am stocked

I researched on W3SCHOOLS to learn more on website responsive and semantics and applied the knowledge

I researched on this MDN to learn more on html and CSS semantics

I knowledged code aquired from Code Institute to for my webpage.

Content

All gallery photos for my site were pulled from google image.

All other content for the site, such as introduction messages and instructions were written by myself.

Acknowledgments

I would like to acknowledge the following people:

Jubril Akolade - My Code Institute Mentor.

Ioan Zaharia - who was giving listening ear and encouragements when i was face with some difficulties.

The Code Institute Slack channel Peer Code Review - Thank you to everyone who took the time to loo through the responsive webpage and look over the code.