This is the main Beauty Salon website. It is designed to be responsibe on a range of devices, making it easy to navigate for the reader and visitors.
Looked into Balsamiq to have an idea and carried on with word file coverted in pjg imageimageimage
- The website is made to read and understand the business fast and the site shows the business services with images and words so the visitors can understand the business at the first glance.
- The User will be able to easily navigate throughout the site to find content through the top bar menu and the visitor can decide which page is more useful for them and if the get lost with some info they can go back to the Home page.
- Visitors want also verify the business through the social media to see how many followers and comments the business got to determine the trust and the age of the business, the three more famous social-media are added with a link that take the user inside the choseen social-media they want most to see.
- Returning Visitor wants to find more information about products and services the business provides.
- Returning Visitor wants make sure that the comapany is easy to reach with a landline or mobile phone number with its phisical location where it has been added.
- Returning Visitor wants to find social media links and I have created 3 pmain sources of social-media link that take to the visitor inside the social-media page in a different window.
- Frequent User wants to check new products arrival or products that in that moments they need, by subscribe sign-up the user got access to a news products or get informed on the new arrival date, plus it can be chached in the social-media link.
- User wants to check some new extra information through post and social media to see if the business is healfy, creating the social-media links give at the business more transparency and in the same time more trust at the user.
- User wants to sign up to book an appointment for treatments or consutation or simply to gather more info before go haed with the choise they want, on the contact us page the visitor will be able to sign-up with an easy steps form that will help the visitor to don't get boder if it is too complicated to fill in.
The predominate colour is pink with some grey and white gradiants to make some effect and make the site more attractive, with some light pink colour around the pages to be more tune with a beauty salon business.
The font used on the website are Arial and Sans Serif as their are the most common font used today the font is cleaned is shows good read letters for all reader, even when the web site is used with different devices.
The first image is posted just straight under the header to catch the visitors attention and transmit the business message. image
The website has an actractive approach for the user, easy to understand and very intuitive with images and iconas to driver the visitor attention and clearly help to understand the business without that the user gets lost, the first page contain the menu bar at the top with the logo on the left side and menu link interactive on the right side it helps to move from one page to another and return to the home page easily with one click. First page also is comprensive of time-table for opening hour and mobil-phone number to give more trust at the visitor, cliking the number can get the user on Contact Us page to be reach out from the business. At the bottom footer the user can find the social-media hyperlink that help them to visitor the socials in a different window and gathering more information about the business. The Gallery page which is the second page, is created with differents images related to the business like as products and treatments, it gives a broad idea to the visitor if the business can help them on their needs. The Contact Us page is the third page, in which has been created to drive the visitor to subscribe, signing up the form the user can be upadted all the times through email for new products or good treatments offer, plus they can book a treatment by completing the form or juts have more information from the business. The website has also the features to be responsive on all device sizes and contain interactive elements like hyperlinks, social-media, form sign-up, and menu bar.
Laptop
- HTML5
- CSS3
-
[Bootstrap 4.4.1:]
- Bootstrap has been visited to assist me with the idea to create a responsiveness webssite and navigation bar it help me a bit but I used at the end w3 school site.
-
[Hover.css:] view (https://github.com/)
- Hover.css was used on the top bar on the Logo and on the right navigations words to move from one page and another and return on it also has been added the hover for the social media links on the website footer.
-
- Font Awesome was used on the first and last page of the site to decorate some parts with icons for aesthetic and UX purposes.
-
- Git was used for version control by utilizing the Gitpod terminal and workspace to save the project and to commit to Git and Push to GitHub in the repositore the project.
-
- GitHub has been used to store the projects code after being pushed from Gitpod and workspace. Plus to cloen and deploy my project.
-
[Pexels:] (https://www.pexels.com/)
- Pexels was used to add clean images to the website expecialy on the home page and gallery to resize the image I used the laptop correction photo.
-
- jQuery find some information in bootstrap and in code istitue(https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+CSE101+2020_Q2/courseware/be0e510a3aca4bccb6e0bba4cf7cf06b/b47eaee24847486eb4424dfa29890cc0/) on use to have a responsive website for different devices. I have also used different source like youtube and W3school sites to improve the responsiveness of the website.
I have tested the website on W3C Markup Validator and W3C CSS Validator Services were used to validate every page of html and css of the project to ensure there were no syntax errors. A lot of range of testing was done to ensure that all pages were linking correctly. The website has been deployed also trough GitHub for futher testiung.
- The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX.
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
The website has be deployed on git hub pages by complete the following steps:
- Go to the main repository
- Click setting
- Click the page tab on the left list
- Under branch select main
- Click save
The website is now live and can be found
The website has been cloned in the GitHub platform from P1-Beauty to Fab-Beauty, following this steps:
- Git-Hub home-page
- Go Repositories main page
- At the top left side click on <>Code
- Click Local
- Copy repository
- Open Git-Bash
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL you copied (https://github.com/Infouktour3/Fab-Beauty.git). git clone https://github.com/YOUR-USERNAME/YOUR-
- press enter
Cloning into
Fab-Beauty... remote: Enumerating objects: 524, done. remote: Counting objects: 100% (524/524), done. remote: Compressing objects: 100% (564/564), done. remove: Total 524 (delta 263), reused 497 (delta 236), pack-reused 0 Receiving objects: 100% (524/524), 22.37 MiB | 14.39 MiB/s, done. Resolving deltas: 100% (263/263), done.
- html and css were written through github (https://infouktour3-fabbeauty-vehklp0rvxa.ws-eu97.gitpod.io/) workspace/repositories
- All content was written by myself.
- All Images were founded in Pexels.com (https://www.pexels.com/) and ammend accordely by myself.
- Used font awesome to add icons to the social-media links and on the about us section and time-table section to make more ahestetic the design (https://fontawesome.com/icons). imageimage image image imageimage imageimageimageimageimageimageimage imageimage image
- To the tutor support at Code Institute, Mentor and Slack mates.