Aesthetic Studio Aalen

Aesthetic Studio Aalen is a website of beauty master Angelina, where she presents herself and her beauty studio to future clients. This website aims to showcase the range of services provided by the studio to its clients. It also features a contact form for inquiries, links to the studio's social media profiles, and the studio's address along with a location map.

Features

Existing Features

• Navigation Bar
  • Featured on all three pages, the fully responsive navigation bar includes links to the Logo, About Me, Services, and Contact pages. It is identical on each page to ensure easy navigation.
  • This section enables users to navigate easily from page to page across all devices without needing to use the 'back' button.

• The Landing Page Image
  • The landing page includes a photograph with a text overlay, allowing users to see the studio's current offer.
  • This section introduces users to the results of high-quality beauty procedure and presents the current offer to capture their attention.

• About Me Section
  • This section introduces the main master, Angelina, and displays her photograph.
  • It also includes introductory text for all users, showcasing the master's experience and dedication, aiming to build trust with the user.

• The Footer
  • The footer section includes links to Studio's relevant social media sites. These links will open in a new tab to facilitate easy navigation for the user.
  • This section also contents copyright info.

• Services
  • This section contains information about all types of procedures and treatments provided by the Studio.

• Contact *
  • This page contains information about the studio's working hours and address. Additionally, it features a contact form where users can submit their full name, email address, and write a message to the studio. Furthermore, it includes an embedded Google Map displaying the studio's location.

Features left to implement

• Additionally, this website requires a gallery featuring before-and-after photos of procedures, new offers and an Impressum page.
• I would also like to add a page with client's reviews/

Testing

Note

Testing for this project was primarily conducted manually by myself and a few friends to assess website usability, responsiveness, and ensure it is intuitive for completely new users.

• All links on Navigation Bar lead to their correct pages
• All links to social media websites in footer lead to their correct pages
• Contact form submits when all criteria is filled correctly
• When any field is empty or email address doesn't contain @ there is a warning about mistake
• All pages display correctly and responsive on mobile phones, tablets, laptops and big screen devices

Google Lighthouse testing

index.html

services.html

contact.html

Validator testing

• HTML
  • No errors were returned when passing all pages through the official W3C Validator
• CSS
  • No errors were found when passing through the official W3C CSS Validation service

Bugs

• FIXED Issues with centering content in mobile version of contact page
• FIXED Original banner_photo and about_me images are too big size and loaded slow
• FIXED iframe element do not have a title

Deployment

The site was deployed to GitHub pages. The steps to deploy are as follows:

1. In the GitHub repository, navigate to the Settings tab.
2. From the source section drop-down menu, select the Master Branch.
3. Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here https://olala2024.github.io/Project-1/index.html

Credits

• The icons in the footer were taken from Font Awesome
• Fonts were taken from Google Fonts
• For editing images I used Adobe Photoshop
• The code to make hero image and overlay text was taken from Love Running
• To create contact form I used W3Schools