LittleFlowers is a spa located in Galway (Ireland) that offers a multitude of services, treatments and facilities.
The goal of this website is to showcase the spa, allowing customers to see what facilities are available, what treatments are offered and who is performing them. The owner of the spa wants to increase the visibility and online presence of his business in order to increment its revenue.
- Case 1: As a spa customer, I want to see the different treatments offered, their prices, and send enquiries to the spa
- Case 2: As a spa customer, I want to know who is going to do the treatment, what's their professional background and what they are specialised in.
Users need to know what treatments are available, how much do they cost and what is their duration, in order to be able to decide how many treatments to book based on their budget and time. Users also need to know that who is going to perform those treatments is a team of qualified professionals, with experience and tenure.
The website will have a simple structure to meet the users needs:
- Home page with introduction to what can be found on the website (facilities, treatments, team pages), with a small section for reviews from frequent customers
- Treatments page: list of all available treatments with price and duration
- Facilities page: simple preview of the facilities available with a short description
- Team page: this page has two goals:
- show to the customers that the staff members are qualified professionals
- if a returning customer had a treatment in the past and want to book another treatment with the same person, they can easily do so even if they didn't remember the team member's name.
- All pages will have contact details in the footer, so that at any point the customer can contact the spa to check the availability and book an appointment.
The color palette of the website will be dark red - dark pink - pink - white. Fonts will be:
- Philosopher for headings and logo
- Nunito for standard text
- Feature 1 - allows potential customers to see the treatments offered and their prices
- Feature 2 - allows potential customers to know the staff and their professional background
- Feature 3 - allows returning customers to check if the staff member who gave them the treatment previously is still working there, get their name and request the treatment with them again in case they enjoyed it the first time
- Feature 4 - allows potential and returning customers to get in touch to check availability, book or ask questions by calling or sending an email
- Feature 5 - allows potential customers to see all the social pages of the spa
- Feature 6 - allows potential customers to have a preview of the facilities available (sauna, steam room, pool, hot tub)
- Add booking system in the future
- Balsamiq for the wireframes of this readme.md file
- Bootstrap to use the grid system, pre-formatted buttons in home-page, collapsible navbar
- Animate.css for transitions of banner heading of each page
- FontAwesome for icons
- Google Fonts for fonts
- Hover.css for transitions effect in navbar and facilities page
- JavaScript for collapsible navbar
Usability and responsiveness were tested on the followin browsers:
- Google Chrome (Version 89.0.4389.72 (Official Build) (x86_64))
- Firefox (86.0 (64-bit))
- Safari (Version 13.0.5 (15608.5.11))
- Microsoft Edge (Version 89.0.774.57 (Official Build) (64bit))
All sections and divs adapted to the screen size as expected, all links worked fine and the navigation was flawless.
Case 1: As a spa customer, I want to see the different treatments offered, their prices, and send enquiries to the spa
- Treatments are described in a dedicated page, with a clear indication of price and duration.
- It's possible to enquire with the spa from any page using the clickable links in the footer to send an email or make a phone call.
Case 2: As a spa customer, I want to know who is going to do the treatment, what's their professional background and what they are specialised in.
- This is possible from the Team page, which highlights in a clear and structured way each staff member's experience/background, tenure at the spa and speciality or certification.
The Google Chrome Lighthouse feature was used on all 4 pages to measure Performance, Accessibility, Best Practices and SEO. Results can be seen here:
I used the following validators to check my HTML and CSS code:
HTML Validator Outcome: Document checking completed. No errors or warnings to show. (all 4 pages)
CSS Validator Outcome: Congratulations! No Error Found.
-
I initially didn't use the container class when using bootstrap grid (which should have the structure container > row > column). This caused horizontal overflow. After adding the container (or container-fluid) class, the issue was fixed.
-
I wasn't able to configure a collapsible navbar from Bootstrap instructions. I used the scripts at the end of this repository instead.
-
I wanted the navbar to be always at the top of the page, even when scrolling down. This caused the navbar to cover the banner too. To avoid this, I just added a div with class fix-navbar-issue, with the only purpose of "pushing down" the banner so that the navbar didn't cover it.
-
I tried to set a transition in the Facilities page using the visibility value, which didn't work. I found here the reason why and changed the transition to affect the opacity value.
This project was developed using GitPod, pushed to GitHub and deployed using GitHub Pages.
To deploy to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub
- From the list of repositories on the screen, select matteofiorini92/LittleFlowers-Spa
- From the menu items near the top of the page, select Settings
- Scroll down to the GitHub Pages section
- Under Source click the drop-down menu labelled None and select main
- In the folder drop-down, the /root folder is automatically selected
- Click on Save
- The project is now deployed and the URL of the website is available in the GitHub Pages section
To clone this project into Gitpod you will need:
- A Github account
- Use the Chrome browser
Then follow these steps:
- Install the Gitpod Browser Extension for Chrome
- After installation, restart the browser
- Log into Gitpod with your gitpod account
- Navigate to the Project GitHub repository
- Click the green GitPod button in the top right corner of the repository
- This will trigger a new gitpod workspace to be created
To work on the project code within a local IDE such as VSCode, Pycharm etc:
- Follow this link to the GitHub repository
- Click on the Code button
- In the drop-down, copy the URL that you see in the HTTPs tab
- In your local IDE, open the terminal
- Change the current working directory to the location where you want the cloned directory to be made
- Type git clone and paste the URL you copied in Step 3
- Press Enter. Your local clone will be created.
The text for the facilities and treatments descriptions were inspired by the following websites:
The photos used in this site were obtained from
The content of the deployment section of this readme.md was mostly taken from this webinar.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent