View the live project here

The aim of my first project for the Code Institute was to create a platform for my sister's hairdressing business using HTML and CSS.

• Description
• User Stories
• Market Research
• UX and Features
• Future Improvements
• Changes
• Technologies Used
• Testing
• Deployment
• Credits
• Acknowledgements
• Support

The Hair by Jo project was designed to provide my sister with a website where she is able to demonstrate her work and increase the number of enquiries made. By creating a website with a method of easily contacting her, this will hopefully make the process of getting an appointment easier, which will ultimately increase business.

• "I want to easily understand the main purposes of the site and learn more about the business"
• "I want to be able to navigate throughout the site easily and find services and prices on offer"
• "I want to be able to access the website using my mobile device as this is what I would frequently use to access this type of service"
• "I want to be able to see testimonials to see what her customers think of Jo and see that she is trusted"
• "I want to locate social media links to see visual representations of her work"
• "I want to easily be able to contact Jo and find out availability for an appointment"
• "I want to know that the business is working inline with current government guidelines surrounding COVID"

I decided to carry out B2C interviews with customers to find out what makes a good UX and what information and features they would like to see on the website.

All of this information was used when designing the layout, colour scheme, typography, imagery and features that were deployed on the final website and contributed to the above User Stories.

The website was designed mainly for a female demographic of all ages, however with the male customer also in mind. It was designed to be a simple, yet effective website which clearly demonstrated examples of Jo's work and ways to contact her.

The aim of the project was to increase the number of enquiries made with the business by providing a simple and clean UX which was user-friendly. An increased number of enquiries will hopefully lead to more business.

• Increase the number of enquiries made
• Increase the number of followers on social media accounts
• Provide up-to-date information about the services and prices of the business
• Provide evidence that the business is operating safely throughout the COVID crisis
• Demonstrate examples of work to show customers what the finished product looks like
• Create an overall positive UX for customers by providing a simple, yet effective website

• Easy to find contact information to make enquiries

• Easy to find links to social media accounts to follow and also see examples of work

• Easy to access information about services and prices on offer

• Evidence that the business is operating in-line with COVID guidelines

• Easy to find gallery to highlight examples of work carried out

• Mobile-first design as this is likely the most frequent way of finding and researching the business

The scope of the project and features to include were influenced by the market research carried out with customers. It should be a mobile-first website that is responsive on all devices.

• Navigation Bar

  • Large font used to make finding and distinguishing different pages easy
  • Responsive navigation bar that condenses down to an icon on smaller devices
  • Contact form modal which is linked to all pages and useable on all devices to increase enquiries
  • Logo and h1 tag clickable across all pages to link back to the main home page

• Home Page

  • Book an appointment button to act as a clear and immediate call to action to increase enquiries
  • Basic animated hero image to enhance overall UX
  • Small about me section to quickly express Jo's experience and qualifications and a brief overview of services offered
  • Link to services and prices page so customers are easily able to find what information they need

• Services Page

  • Easy to read list of all services and prices on offer
  • Clear explanation and assurance that the business is working through within government COVID guidelines
  • Picture of the salon so customers are able to see the environment they would be potentially visiting
    • This disappears on mobile devices for better UX
    • The services/prices and COVID guidelines were more important to display

• Gallery Page

  • Simple and responsive layout that clearly shows some work that Jo has carried out
  • A number of pictures included clearly demonstrate protective gowns and facemasks being worn due to COVID
  • Mixture of pictures used that highlight different hair styles on offer

• Testimonials Page

  • Clear examples of recent testimonials from customers and where they are from

• Footer

  • Clear indication of where the business is located and ways to contact Jo
  • Links to social media accounts to demonstrate work and increase following

• Site Wide Alert

  • Alert across all pages, located at the top with a phone number so customers are easily able to contact Jo

• Banner

  • Banner across all pages which highlights key things a customer would want to see such as 'COVID Compliant', 'Over 23 Years of Experience' and 'Highly Rated'
    • This condenses down to one when viewed on mobile devices for better UX
    • 'COVID Compliant' was chosen as the one to display as it was important given the current circumstances

The site was designed to have essential pages which are Home, Services, Gallery, Testimonials and a Contact modal which was gathered using B2C research. The same navigation bar and footer was used across all pages for consistency and better IXD.

Short and easy to read paragraphs were used to easily get essential information across to customers. A call to action was included on the home page to make it easy to contact the business as the ultimate goal was to increase the number of enquiries.

A selection of quality images were used to be engaging and provide clear examples of work and the salon where the business is.

A footer with clear ways of contacting the business and links to the social media was used to again ultimately increase the number of enquiries and following on social media.

A modal contact form which is linked to all pages and useable on all devices to increase enquiries.

• Wireframe was created using Balsamiq

• Colour Scheme

  • The main colour used throughout the website is a dark blue (#1D3557) which provide a slick and professional look
  • This was combined with white (#fff), black (#000) and yellow (#ffd700) to make all text stand out

• Typography

  • Laila was used as the main font throughout the website as it is rounded and easy to read across all devices. Serif was used as a backup font should the primary one not load

• Imagery

  • The home page used a black and white image which was animated to provide and engage users
  • An image of the salon was used on the services pages to show customers the environment in which they may be visiting
  • A collection of different images were used on the gallery page to demonstrate some of the work that was recently carried out and also demonstrate that safety measures in place due to COVID
  • Two images on the home page under the hero image demonstrate Jo's work she has done for various hairdressing competitions

• Icons

  • Icons across the website were sourced from Font Awesome, which provided visual indications of what the section was about

• Form submission to be functional - as this was a static site that only needed HTML and CSS elements for the project, there was no need to implement this straight away
• Implement a booking system, whereby a customer is able to directly book in and see the diary rather than having to make an enquiry first
• Improve the level of detail in terms of the types of products used
• Create additional pages that highlight different aspects of work specifically (Hair extensions/Bridal) and other products that are able to be sold to customers
• Create a live feed for Instagram and Facebook that automatically update photos that are on display on the website
• Create a mailing list for customers that can include offers and discounts on treatments, but also provide an easy way of communicating with all customers. With the continuous changes surrounding COVID, an easy way of communicating changes to customers would be useful.

A number of changes were made after the initial wireframe was created, these include:

• Animated hero image was include with some overlay text rather than three static circular images. This was changed as it felt more engaging and would lead to an increased number of enquiries
• Carousel was meant to be included on the Gallery page, but there was some difficulty with the actual coding of it and I experienced a number of issues around this, so I decided to change to a simple thumbnail gallery format which clearly demonstrates a number of different types of styles and safety guidelines in one go
• Colour scheme was changed to a navy blue as this felt more slick and professional
• Added additional images to home page to make it more appealing and show off some additional competition work that Jo carried out

• HTML5
• CSS3

• Bootstrap 4.5.3
• Hover.css
• Google Fonts
• Font Awesome
• jQuery
• Git
• GitHub
• Balsamiq
• Tailor Brands
• Microsoft Paint
• Coolors
• Typora
• Techsini
• Chrome DevTools
• TinyPNG
• Autoprefixer CSS
• Favicon.cc

• "I want to easily understand the main purposes of the site and learn more about the business"

  • Title page which clearly outlines what the website is for and an about me on the main page which explains Jo's background and qualifications

• "I want to be able to navigate throughout the site easily and find services and prices on offer"

  • Clear navigation at the top of the page, which condenses down to an easy to find menu icon on smaller devices
  • Link to services and prices found on the home page

• "I want to be able to access the website using my mobile device as this is what I would frequently use to access this type of service"

  • Website passed Google's Mobile-Friendly Test was used and the results were that the 'Page is mobile friendly - this page is easy to use on a mobile device'.
  • Website was tested across various different mobile devices and browsers

• "I want to be able to see testimonials to see what her customers think of Jo and see that she is trusted"

  • Dedicated testimonial page displayed on the website with contributions from multiple sources

• "I want to locate social media links to see visual representations of her work"

  • Links to all social media accounts are in the footer on all pages

• "I want to easily be able to contact Jo and find out availability for an appointment"

  • Call to action button on main home page along with a dedicated modal form to be able to send an enquiry
  • Address and contact details are within the footer across all pages - the email link is a hyperlink which opens a new email and the phone number is picked up as a link across many mobile devices
  • Site wide alert across all pages at the top which clearly displays Jo's phone number

• "I want to know that the business is working inline with current government guidelines surrounding COVID"

  • Dedicated section which is linked to the Government website which outlines the current guidelines in place
  • Pictures in the Gallery clearly display that disposable gowns and masks are being used

• Tested all external links opened in a new tab and went to the correct page
• Tested all internal links within the pages
• Tested the logo and main h1 header linked back to the home page on all pages
• Tested all buttons work
• Tested modal form to see if it would send without any information input
• CSS was put through a CSS Autoprefixer and the changes were added to the website

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

W3C Markup Validator

• Home - PASS
• Services - PASS
• Gallery - PASS
• Testimonials - PASS

W3C CSS Validator

• PASS

The website was initially tested on different types of devices using Chrome DevTools to see if there were any immediate issues. The website works well on all mobile devices from 320px and upwards.

Google's Mobile-Friendly Test was used and the results were that the 'Page is mobile friendly - this page is easy to use on a mobile device'.

The website was then sent via email to a number of family and friends of all ages to test on different devices to see how responsive it was.

The following devices were used:

• iPhone X - Chrome Browser
• iPad Air - Safari Browser
• iPad Mini - Safari Browser
• Samsung Galaxy S9 - Samsung Internet Browser
• iMac - OS X Yosemite - Safari Browser
• iPhone 7 - Safari Browser
• iPhone 11 Pro Max - Safari Browser
• Sony Vaio Laptop - Windows 8 - Chrome Browser

• iPad Mini / iPad Air - Safari Browser

  • Menu icon not aligned to right, but moves to the right when clicked

  • Some footer text overlapped

  • Modal buttons needed enlarging

  • Need to add background colour to modal close button as it was hard to find

  • Email icon in footer was appearing on own line

• iPhone 7 - Safari Browser

  • Vertical scrolling appeared within footer, gallery and testimonials

  • Modal buttons needed enlarging

  • Need to add background colour to modal close button as it was hard to find

• iPhone X - Chrome Browser

  • Modal buttons needed enlarging

  • Need to add background colour to modal close button as it was hard to find

  • Vertical scrolling appeared on testimonials page

• iPhone 11 Pro Max - Safari Browser

  • Vertical scrolling appeared in the home page paragraph text, testimonials and footer

  • Modal buttons needed enlarging

  • Need to add background colour to modal close button as it was hard to find

• Samsung Galaxy S9 - Samsung Internet Browser

  • Modal buttons needed enlarging

  • Need to add background colour to modal close button as it was hard to find

• iMac - OS X Yosemite - Safari Browser

  • No immediate issues

• Sony Vaio Laptop - Windows 8 - Chrome Browser

  • No immediate issues

• W3C Markup Validator

  • "The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment" - Solution found here
  • "Attribute type not allowed on element textarea at this point" - Solution found here
  • "Bad value for attribute href on element a: Illegal character in query: space is not allowed" - Solution found here
  • "The aria-labelledby attribute must point to an element in the same document" - Solution found here
  • "Start tag h5 seen in table" - Solution found here
  • "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections." - Solution found here

• "Attribute alt not allowed on element div at this point"

• W3C CSS Validator

  • No errors found

• Cover text box not centered on iPhone 5/SE, however it is all still functional

The project was deployed to GitHub Pages using the following steps:

1. A local project was created in GitHub with a new repository called 'CI-MS1-Hair-by-Jo'
2. The project had regular push and detailed commits which were pushed to the GitHub website before deployment
3. The project was deployed by logging in to GitHub and locating the GitHub Repository
4. At the top of the Repository (not top of page), locate the "Settings" Button on the menu and click
5. Scroll down the Settings page until the "GitHub Pages" Section was found
6. Under "Source", click the dropdown called "None" and select "Master Branch"
7. The page will automatically refresh
8. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section
9. The code can be run locally through clone or download, you can do this by opening the repository, clicking on the code button and then selecting either 'clone' or 'download'
10. The Clone option provides a url, which you can use on your desktop IDE - Additional guidance can be found here
11. The Download option provides a link to download a ZIP file which can be unzipped on your local machine

• Hero image sourced from Unsplash

• Other images sourced from Jo with permission who owns the photos and are published on her Facebook and Instagram

• 404 page image was created by Gan Khoon Lay from the Noun Project

• Favicon was generated from Favicon.cc

• TinyPNG was used to reduce the overall total image size

• Code Institute

  • Code for hero image and animation from the "Love Running" lessons and adapted to own project
  • Code for site wide alert and main button from "Whiskey Drop" lessons and adapted to own project
  • Influence from "CV Resume" lessons and adapted to own project

• Codeply

  • Code for Navbar used and adapted to own project - Here
  • Guidance on vertical centering images - Here

• MdBoostrap

  • Code for modal form used and adapted to own project - Here

• Bootstrap

  • Code for table used and adapted to own project - Here
  • Guidance on text alignment code - Here

• Stack Overflow

  • Guidance on horizontally centering button - Here

• Start Bootstrap

  • Code for gallery used and adapted to own project - Here

• CSS-Tricks

  • Guidance on fixing overflow issues - Here

• Slack

  • Guidance on creating a custom 404 error page from Karina Finegan and Anthony O'Brien - Here
  • Guidance on Fav Icon - Here

• W3.org

  • Guidance on how to add a Fav Icon - Here

All text content was written by the developer

I would like to thank the following:

• My mentor, Spencer Barriball, for his guidance, wisdom and encouragement throughout the project
• CI Staff and Slack Community for their assistance with minor coding issues
• Jim Morel, for hosting calls with students about the MS1 project and for discussing my initial wireframe with me

For any issues or information, please email me on [email protected]

Thanks for taking the time to view my README. I hope you enjoyed your visit to my page.