Thank you for visiting my website. You will find all the information about my project in this README.md file. Hope you will enjoy coding.

• Project Goals
• Site Owner Goals
• User Requirements and Expectations
• Design Choices
  • Fonts
  • Colours
  • Images
  • Icons
• Backgrounds
• Wireframes

• Project Goals:

  • Main point of this project is to give more information about our salon, services we provide, advertising our work.

  • I want to make an easy and effective website.

  • Easy access with our team in Xhulja Beauty Salon and more knowledge about treatments providen in our salon.

  • Contact details.

• User Goals:

  1.Interactive website so user can choose the best beauty services.

2.Effective website that serves as a tool to find the information they need.

3.Contact forms.

• User Stories:

• Pamela.D " I prefer to use simple websites, having all the information needed so i can choose the best beauty service that im looking for."

• Asra.M " I like websites like this where i can see in pictures what this salon provides.
  I always have find it easy to contact them from the website. The good thing is that i can use this website from my phone, tablet, pc."

• Site Owner Goals:

  • Creating an effective website.
  • Gather information on what type of beauty services people are looking for.
  • Recieve contact details through use of contact form.

• Requirements:

  • Navigate the website using the navbar which should be clear and hierarchical.

  • Be provided with information of different services of the salon.

  • Contact Form validation to help against spam.

• Expectations:

  • Content is visually satisfying and informative.

  • Navigation takes user to specific parts of the website.

  • Form Validation works correctly.

• Fonts:

  I will use the font Arial as it a very simple style which provides the easiest nature of the overall site design.

  The focus of the content is to provide an informative experience for the customer, so i think this is the right font for my project.

• Icons:

  The icons used are self explanatory , so easy for users to interpret what the icon will actually do. I use the icon ‘bars’ from font-awesome icons. I had to make sure that the icon was perfect size on smaller devices to ensure easy access.

• Colors:

  Purple colour is a delicate color that means sweet, nice, playful, cute, romantic, charming, and tenderness, is associated with flowers, and sweetness. I think is best colour for beauty salon websites.

  • Primary: #5c2751 "Purple" i chose this as primary colour because i think is perfect for influencing cuteness and charm.

  • Secondary: #4c1741 "Dark Purple" Purple combines the stability of the blue color and the energy of the red. Through the ages, purple has always been associated with royalty, nobility and prestige. The color purple can symbolize mystery, magic, power and luxury.

  • Tertiary: #9dacff "Lilac" ilac is a shade of purple that can be achieved by mixing white, red and blue. It has been fortified by knowledge and softened through experience. With regards to intensity, this may appear to be closely related to pink. Lilac color meaning can be related to tranquility, peace, and friendship.

  • Navigation colour: #76e5fc "Light Blue" Light blue is a peaceful, calming color. According to color psychology, blue is associated with trustworthiness and reliability. Blue is also said to promote feelings of tranquility; light blue’s gentle appearance means it is particularly likely to make that impression.

  Colors:

  • $primary-color: #5c2751; rgb(92, 39, 81);
  • $secondary-color: #4c1741; rgb(76, 23, 65);
  • $tertiary-color: #9dacff; rgb(157, 172, 255);
  • $navigation-color: #76e5fc; rgb(118, 229, 252);

• Background:

  The images i used for home page are real pictures made in my work, because i think is good way of showing to clients what we offer.

• Images:

  I used real pictures of my work converted with tinypng

I built Wireframes using Balsamiq Wireframes.
It was very simple design just to get the idea how is going to look the structure of the page in different devices.

HTML

CSS

• Git
• Bootstrap
• Jquery
• Font-Awesome
• TinyPng (image compression)

This was my first project, my testing was extremely thorough, making sure that i checked every line of code ran without issues. Testing was done by me and double checked by my mentor.

• Test Planning: During planning for this project i knew that i needed to make sure that every code is raning well during and after the project is completed. Wireframes were good help at how i will create the layouts, organise each section and follow my testing guide to check that it had been implemented correctly and works as i was expecting.
• Testing steps : First think i wanted to make sure after i finished my website was to check that my website was effective. Implementation : I started by checking my website in the W3C Validation Service. I copy and pasted one by one the code of evey page that i have in my website and checked through W3C Validation Service. I used validate by direct input method. First step : opened Gitpod, clicked index.html and then i copied the code and went to W3C official and clicked over direct input validator. Result : my code passed without mistakes.

Then i cliked the contact.html page and again i copied the code and went through W3C direct input validator. Result : passed without errors.

Clicked on gallery.html copied the code and checked through W3C. Result : as expected my code passed without errors.

Finally i checked my last page which is video.html and it passed as well as expected.

Verdict : My website is raning without errors .

• Testing Stories:

I ran into an issue with how I was using the full links of pictures implemented in my project, but this way was not making the code works as i wanted so i used the relative paths to fix the issue. Another issue was that i was working with two branches, but thanks to the pull request option i made it work in one branch and the site works well.

• Responsiveness -

Plan : I knew that this project needed to be FULLY responsive and mobile friendly. I used Bootstrap which is very helpful and making the HTML works well. Implementation : Making sure that i was using the correct class attributes so my code will ran correctly, this was very easy way thanks to use of Bootstrap. I went through a design tool called "AM I RESPONSIVE" to check how my website respond in different devices. Result : The Responsiveness of the site works as expected, the site can be viewed in any device. Verdict : This test has passed and the site is responsive.

• Design -

Plan :I tryed to keep simple design and using good colours and images. Using colours like purple and light blue provides great contrast . Using sites like w3schools.com allowed me to search for the perfect colours. Implementation : Adding this colours was good choice and they were responsive. Result : The theme of the site matching well with this colours. Verdict : This test has passed and colours are perfect for the purpose of the site.

• Form Validation -

Plan : Making the plan of this project i wanted to include simple form validation on the contact form. Implementation :Implementation of this form was very simple and worked as expected. Result : Contact forms worked in expected behavior.

Xhulja Beauty Salon was developed on GitPod, using GitHub to host the repository.

When deploying xhulja Beauty Salon the following steps were made:

• Opened up GitHub in the browser.
• Signed in using username and password.
• Selected my repositories.
• Navigated to 'https://xhulja14.github.io/beauty-salon/'.
• In the top navigation clicked 'settings'.
• Scrolled down to the GitHub Pages area.
• Selected 'Master Branch' from the 'Source' dropdown menu.
• Clicked to confirm my selection.
• Xhulja Beauty Salon now live on GitHub Pages.

Enjoy coding!