View the live website here

The Sleepover Experience is a site for my business that will help to promote what we do. The site will be targeted toward potential customers who are looking to hire sleepover tents for children in the Neath Port Talbot area. The Sleepover Experience will be useful for potential customers to see what themes we have available, the prices and to make a booking.

View Gallery Page

View Contact Us Page

• User Stories

  • Visitor Goals
    1. I want to learn a bit about the business.
    2. I want to be able to see what themes are currently available.
    3. I want to find out what themes are coming next.
    4. I want to be able to find out what is included with the hire.
    5. I want to be able to see what the different prices are.
    6. I want to be able to see photos of setups in real life.
    7. I want to be able to enquire about availability.
    8. I want to find links to social media pages

• Design

  • Colour Scheme

    • The main colours used are blue, orange and pink. These colours were chosen as they tie-in with the pre-existing logo and therefore helps to reinforce the brand.

  • Typography

    • The Roboto Slap font matches with the pre-exisiting logo and therefore helps reinforce the brand. Sans-serif is used as a backup font in case for some reason the font doesn't get imported into the website properly.

  • Imagery

    • The landing page image is an amended version of the business logo. It is bright and colourful and will catch the user's attention. It also helps to reinforce the brand.

Home page wireframe

Gallery page wireframe

Contact Us page wireframe

• Responsive on all device sizes
• Navigation Bar
  • Featured on all three pages, the fully responsive navigation bar includes links to the Home page (About Us, Themes & pricing), Gallery and Contact Us pages and is identical in each page to allow for easy navigation.
  • This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the 'back' button.
  • Each page includes a background colour that matches the navbar icon colour for that page to allow the user to see exactly which page they are currently on

Navigation Bar

• HTML5
• CSS3

• Bootstrap 5.2.3
  • Bootstrap was used to assist with the layout and responsiveness of the website.
• Google Fonts
  • Google fonts were used to import the 'Robota Slab' font into the style.css file which is used on all pages of the website.
• Font Awesome
  • Font Awesome was used to add icons to all pages of the website.
• JQuery
  • JQuery came with Bootstrap to make the navbar responsive.
• Git
  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
• Github
  • GitHub is used to store the project's code after being pushed from Git.
• Balsamiq
  • Balsamiq was used to create the wireframes during the design process.
• Free Convert
  • Free Convert was used to optimise the images for the website by converting them into WEBP.
• Canva
  • Canva was used to create the landing page image for the website and is where the original logo was designed.

The W3C Markup Validator and W3C Validator were used to validate every page of the project to ensure there were no sytax errors.

W3C Markup Validator Results

W3C CSS Validator Results

1. I want to understand the main purpose of the site and learn a bit about the business.

   • Upon entering the website users are greeted with a clean and easily readable navigation bar, which shows the pages available and also has a sub-menu to easily find the section of the home page you require. Below this is an image depicting the brand and a tagline of what the business does and where it operates.

   • The user has two options on the home page, click on the section link in the navigation bar or scroll down to the section.

   • The first section the user will come to by scrolling is the 'About Us'. The first sub-menu link is also 'About Us'.

2. I want to be able to see what themes are currently available.

   • The home page has three sections, the second of which is 'Current Themes'. To reach the Current Themes section the user can either scroll or use the sub-menu link under 'Home on the navigation bar for faster access.

   • The 'Current Themes' section has a link to take the user to the 'Gallery' page so they can see photos of the themes.

3. I want to find out what themes are coming next.

   • The sub-menu of the Home link on the navigation bar shows that the 'Coming Soon' section is within the 'Current Themes' section. Clicking on 'Current Themes' will take you directly to that section. Alternatively the user can scroll down the page.

4. I want to be able to see what the different prices are.

   • The home page has three sections, the third of which is 'Pricing'. To reach the Pricing section the user can either scroll or use the sub-menu link under 'Home on the navigation bar for faster access.

   • The price packages are coloured to quickly show the price level.

5. I want to be able to find out what is included with the hire.

   • The sub-menu of the Home link on the navigation bar shows that the 'What's Included' section is within the 'Pricing' section. Clicking on 'Pricing' will take you directly to that section. Alternatively the user can scroll down the page.

   • As this is the last section on the page, a link is provided to return to the top of the page so that the user does not need to scroll.

6. I want to be able to see photos of setups in real life.

   • Upon entering the website users are greeted with a clean and easily readable navigation bar, which shows the pages available, including 'Gallery'.

   • Users can see the list of themes within the 'Current Themes' section of the home page. Underneath the list of themes is a link which will take you directly to the Gallery.

   • Once the user has scrolled to the bottom of the page they will see a 'return to top' link so that they do not need to scroll back up.

7. I want to be able to enquire about availability.

   • Upon entering the website users are greeted with a clean and easily readable navigation bar, which shows the pages available, including 'Contact Us'.

   • Users can fill in a pre-designed form where the essential information is a requirement before submitting.

   • Guidance is provided for users so that they know what information to include in the form.

   • Links are provided in the footer for WhatsApp and Email. the links have the contact details filled in for the user.

8. I want to find links to social media pages.

   • Social media links are provided clearly in the footer of each page.

• The website was tested on Google Chrome, Microsoft Edge, Brave and Firefox browsers.
  • Home Page Lighthouse Results
  • Gallery Page Lighthouse Results
  • Contact Us Page Lighthouse Results
• The website was viewed on a Desktop and Samsung S20 mobile phone. It was also viewed on a variety of devices by using the Chrome developer tools.
• Testing was done to ensure that all pages were linking correctly.
• Family members were asked to review the website to point out any bugs and/or user experience issues.

• There are no known bugs

The project was deployed to GitHub pages using the following steps:

1. Log in to GitHub and locate the GitHUb repository.
2. At the top of the repository, locate the 'Settings' button on the menu.
3. Locate the 'Pages' tab on the left hand side menu.
4. Under 'Branch', click the dropdown called 'None' and select 'Main'.
5. Click 'Save'.
6. Refresh the page if it doesn't do it automatically and at the top of the page you will see 'Your site is live at https://...'.

By forking the GitHub repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:

1. Log in to GitHub and locate the GitHub repository.
2. At the top of the repository, locate the 'Fork' button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log into GitHub and locate the GitHub repository.
2. Under the repository name, click 'Clone or download'.
3. To clone the repository using HTTPS, under 'Clone with HTTPS' copy the link.
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type 'Git Clone' and the paste the URL you copied in step 3.
7. Press 'Enter', your local clone will be created.

• Bootstrap 5: Bootstrap library used throughout the project, mainly to make the site responsiveby using the Bootstrap grid system.

• All content was written by the developer.

• All media was created by the developer.

• My Mentor for continuous helpful feedback.
• W3 Schools for their helpful tutorials