Fine Cuts

A beauty salon website belonging to Fine Cuts AB. A business that mainly focus on Hair, Nails and Lash treatments. But that also gives you access to a tanning salon, and other tanning options. Link to Page

Description

Here you can find information about the salon, as where to find it, and how to initiate contact by email (direktctly from the page), and you can see what services they provide for costomers.

Dependencies

No need to install anything. Just visit the site on your mobile, tablet or computer.

Author

Soroush Gholamreza Linkedin

Responsiveness

You want to try it out for yourself? -> Responsivness check

Credits

Content

• The social media fonts was taken from CI Love running Projoct.
• The website color theme was formed after the wishes by Kristine Andersson.
• The Structure of responsivness was taken from W3 Schools
  
  

Media

• The GIF and JPG images in the website was designed by Soroush, in the Canva.
  
  

Proving knowledge

• Antonio Rodriguez - For providing me with the knowledge of how to make the website responsive with RWD - Grid view.
  
  

License

This project is license free.

User experience (UX):

User Stories

🔲 As a user, I want to be able to understand the business brand at a first look.
🔲 As a user, I want to be able to access information about the various beauty treatments available.
🔲 As a user, I want to be able to find contact information such as, Phone or Email.
🔲 As a user, I want to be able to find the business location.
🔲 As a user, I want to be able to find links for the salons social networks, such as Instagram, Facebook and TikTok.

Changes that could be made to make website more user friendly could be:

• Keeping either pictures clickable or use button in strategic places.
• Gallery, a cohesive photogallery can be visually pleasing.
• Possibility to book your appointment online.
• More information on specific products in use.
• Use visible social media bar so that the customer can se content of said social media platform right away and won’t have to click to a second page.
• Blog, if the client has the time to present what is going on right now, and get to know the client and the salon and how they work.
• A button for online booking makes it accessable for clients if the salon is busy.
• Online shop for aftercare products to be shipped or picked up at the salon, can help with the productsales, but also something that is somewhat time consuming for a small salons.

-But for this salon it would not have been a good fit right now. And some of those tasks would have been over my skill level at this moment.

Design

In this section, we will discuss the design considerations for our project.

Color Scheme

The following color scheme was used for the project:

Fonts

For this project, three fonts was selected:

Noto Serif Toto
Quicksand
Unbounded

This fonts was chosen because they are highly legible and look great on both desktop and mobile devices.

Layout

The layout was designed with the following considerations in mind:

Simplicity

The design is clean and uncluttered, with beige and natural tones, to keep it subdued.

Accessibility

We made sure that our design is easy to read and navigate for all users, and on all devices.

Consistency

Consistent visual style was used throughout the whole project, using the same fonts, colors, and layout elements across all pages.

All pages was optimized for different screen sizes, ensuring that our content looks great on everything from large desktop displays to small mobile devices.

Overall, the design choices were made with the goal of creating a professional and user-friendly experience all users.

Errors in the readme file

My misstake in this project has been that I have not worked parallell with the readmefile because I thought the process would be more simple than it was.

So therefor a few errors I have not taken note on what it was and how I fixed it, but as for the later errors that has occured I have more recollection of the error and what I did to fix it.

And I will present them below.

So for the next project I have to take more careful account of the steps I am taking during the project so it is more understandable.

Errors and warnings

The errors and warnings that was validated that I could remember was as follows:

Warnings:

• Forgetting to add lang attribute to every html file. (Resolved through adding ’lang=en’ to all html files)
• "Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed." (Resolved through removing sections warnings pointed too.)
  
  

Errors:

• Stray end tag [div] (Found and deleted, error resolved)

• Stray end tag [fieldset] (Found and deleted, error resolved)

• Start tag [body] seen but an element of same type was already open. (Found and deleted end tag, error resolved)

• Stray end tag [div] (Found and deleted, error resolved)

• Unclosed element [footer] (Found and closed, error resolved)

Testing

Validating

Following websites were used to check my code for syntax errors:
HTML - https://validator.w3.org/
CSS - https://jigsaw.w3.org/css-validator/

Testing User Stories

🔲 As a user, I want to be able to understand the business brand at a first look.
☑️ The homepage is responsive to all devices. This is the main introduction to the website, and makes a good first impression for the brand. The pictures and welcome text on the homepage, makes it clear to the sight, what kind of business they provide.

🔲 As a user, I want to be able to access information about the various beauty treatments available.
☑️ The 'Services' have its own page, where you can see, what kind of treatments they provide, and where you can the estimated price ranges.

🔲 As a user, I want to be able to find contact information such as, Phone or Email.
☑️ The 'Contact' page, gives the user the option of writing an Email directly from the contact page. The phone number is also provided.

🔲 As a user, I want to be able to find the business location.
☑️ The 'Home' and 'Contact' pages respectively provides a map on the bottom of the page.

🔲 As a user, I want to be able to find links for the salons social networks, such as Instagram, Facebook and TikTok.
☑️ All of the pages on the website provide social media icons on the bottom of the pages, in form of clickable links that opens the link in a new tab.

Further Testing

Personal Testing

Through devices that I have at home available to me:

Phone:

• iPhone 13 PRO MAX
• iPhone 13 mini
• iPhone SE

Tablet:

• Samsung S6 LITE

Computer:

• MAC mini
• Samsung-FCA92QGF
  
  

Accessibility

• Accessibility - Lighthouse result below:
  
  
  

Deployment

Deployment through GitHub Pages

1. Log into GitHub.
2. Locate the @repository.
3. Locate the settings option along the options bar.
4. Locate Pages options on the left side of the page.
5. In 'Source' dropdown, select 'Main' from the branch options.
6. Click the save button.
7. The site is now published though it may not be accesible straight away.
8. The site URL will be visable on the green bar under the section header. This will remain there permanently and you can refer back to it at any time.
   
   

Cloning project

1. Log into GitHub.
2. Locate the @repository.
3. Click the 'Code' dropdown above the file list.
4. Copy the URL for the repository.
5. Open Git Bash on your device.
6. Change the current working directory to the location where you want the cloned directory.
7. Type git clone in the CLI and then paste the URL you copied earlier. This is what it should look like:
8. $ git clone https://github.com/SoroushGReza/Fine-Cuts.git
9. Press Enter to create your local clone.