Cozy Cottage

This is a website, where users can book a Cottage.

The site's purpose is to help users book their next holiday and enjoy their time off, at a nice and warm Cottage.

View Live Site Here

Table of Contents

• UX
• User Stories
• Design
• Wireframes
• Features
• Technologies Used
• Resources
• Bugs and Fixes
• Testing
• Aditional Testing
• Deployment
• Credits
• Acknowledgements

UX

User Stories

• First Time Visitor Goals

  As a first time user I would like to:

  1. Be able to clearly understand the purpose of the site.

  2. Be able to navigate easily through the website.

  3. Find more information about the site.

  4. See what features the site offers.

• Returning Visitor Goals

  As a returning user, I would like to:

  1. See images of cottages on the inside and out.

  2. Find a booking form and contact form.

  3. Be able to choose the start date and end date of my holiday.

  4. See how much would it cost to rent a cottage.

  5. Get the location of the place.

  6. Find social media links.

• Frequent User Goals

  As a frequent user I would like to:

  1. See if, there are any new offers currently on.

  2. See if there are any layout changes and if the site is still easy to navigate after.

• Design

  • Colour Scheme

    • Main colors used are "Black, White, Orange, Blue"

    • Contact page background from CSS Gradient

  • Typography

    • The Robboto and Montserrat and the two fonts I have used, with Sans Serif used as a fallback.

  • Images

    • Used images from Unsplash and Pexels and credited in Credits section.

• Wireframes

  • Mobile:

    1. Home

    2. About

    3. Cottages

    4. Book Now

    5. Contact

  • Tablet:

    1. Home

    2. About

    3. Cottages

    4. Book Now

    5. Contact

  • Desktop:

    1. Home

    2. About

    3. Cottages

    4. Book Now

    5. Contact

Features

The website consists of 5 pages. All accessible from the navigation menu.

Navigation Bar

• Navigation bar is fixed to the top of each page, which gives the user the option to return or move to another page easily. It will adapt to mobile devices by changing into a burger menu.

• Navigation:

  • On the left, there is the site's logo, which can be used to navigate to the Home page at any moment.
  • On the right side there are 5 links to each page. If viewed on a mobile device, those will drop down, when clicked on the burger menu.

Home page

• User is greeted with welcome animation
• Has a background image and also greeting text, and a button to navigate to the Cottages page.

About

• Has an image and about us information.

Cottages

• Has two cards with images of cottages, text, and a button to learn more. When the user clicks learn more button, there will be displayed more information about the cottages and also a carousel with images. Under each carousel, there is a button that will take the user to Book Now page. Also, there are google maps, which helps the user to see where the Cottages are located.

Book Now

• This page has a background image and a form where the user can fill in their details and choose when to visit. Also a book now button.

Contact

• This page has a form and buttons to submit and reset.

Footer

• Each page has Footer with social links.

Features Left to Implement

• Add Attractions section, where users can find all the Attractions provided and choose to take advantage.
• Add Login/Register section.
• Add more Cottages with different options.
• Add different locations.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap v4.5.3:

   • Bootstrap was used to assist with the responsiveness and styling of the website.

2. Google Fonts:

   • Google fonts were used to import the "Lato" font into the style.css file which is used on all pages throughout the project.

3. Font Awesome:

   • Font Awesome was used to add icons to the site.

4. jQuery:

   • jQuery came with Bootstrap

5. Git

   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

6. GitHub:

   • GitHub is used to store the project's code after being pushed from Git.

7. Balsamiq:

   • Balsamiq was used to create the Wireframes during the design process.

8. Gsap Green Sock

   • JavaScript animation library used to help with the animations.

9. Autoprefixer

   • Adds vendor prefixes.

10. Grammarly

    • Used to help with grammar checks.

Resources

• Code Institute Course Content

• Stack Overflow - General resource

• YouTube - General resource

• Am I Responsive - Responsive website mockup image generator

• Dev Ed - Help with JS animation tutorial

Bugs and Fixes

• Bug

1. Issue with height on the element with class "container-about-content", where its child element was overflowing. As result, the background-color applied did not cover the child element.

2. Issue with the width of the cards on Cottages page because of inline styling which came with bootstrap code.

3. Issue with social links on the Home page. On mobile view, icons align on the left and did not look the same as on larger screens.

4. Issue with an image on the cards of the Cottages page. The image is stretched when viewed on iPhone 5SE.

• Fix

1. Add the code:

    html{
        height: 100%;
   } 
   
   body {
       min-height: 100vh;
   }
   
   .container-about-content {
       min-height: 50vh;
   }
   

2. Remove the inline styling and add a custom one.

3. Fixed issue by positioning the icons at the bottom center of the page instead of left. To achieve this added properties to the parent element and amended the properties of the child element.

4. Fix issue by removing "margin: 0 auto;" from class card-row and add "margin-left and margin-right -10px" to the same class and to the cottages-heading-container, also reduce the padding of cottages-container from 15px to 10px. Also add media qiery for xs devices and change the "height" of the class card-cottages form 650px to 600px. Please note that the orientation of the images on the cards is Portrait, not Landscape!

Testing

W3C Validator Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

W3C Markup Validator

• No errors found View results here

W3C CSS Validator

• One error found - Property backdrop-filter doesn't exist : blur(14px);. I used this property to add a blurred effect on the cards behind the text. Used in Cottages page. Could not find a way around it.
• Warnings are either from vendor prefixes or bootstrap.

JSHint

• Testing home.js:

  • Result - One warning for const

• Testing cottages.js:

  • Result - Eight warnings for let

• Testing book-now.js:

  • Result - Seven warnings for let

• Testing contact.js:

  • Result - Ten warnings for using const and let

  • Please note that the code for text animation has few global variables. Code was taken from an external resource and done exactly as shown on the tutorial, in order to keep functionality and only names of the variables are changed to fit project needs.

Testing User Stories

First Time Visitor Goals

• Be able to clearly understand the purpose of the site.

  • When first entering the website users are greeted with a welcome animation, followed by an image of cottages in a snowy environment. Also, a button that can take the users to the Cottages page. The main points are made immediately on the Home page as to the site's purpose.

• Be able to navigate easily through the website

  • User can navigate to any page of the site at any moment due to a fixed navigation bar.

• Find more information about the site

  • Users can find more information when navigating to the About page.

Testing Navigation

Testing Buttons

Testing Social Links

Testing site's responsiveness

Testing Forms

• Please note that when tested Choose start date and Choose end date input fields, found that you are able to submit even when choosing a start date to be later than the end date. This will be corrected in future updates. Maybe it would have been better instead of having to choose the start date and end date, just to choose a start date. As there is an input field for how many nights the user will stay.

Additional Testing

• Laptop & Desktop

  • Chrome

    • All tested and working fine

  • Edge

    • All tested and working fine

  • Opera

    • All tested and working fine

  • Firefox

    • When tested on Firefox found the following error:

      • On Cottages page the property backdrop-filter: blur(14px); doesn't work. Due to this, the background of the card body is not blurred. It does not affect readability and still looks good.

  • Internet Explorer

    • When tested on this browser found the following errors:

      • Home page:

        • Text is pushed to the left. Also, the transition effect on the social links does not work properly.

      • About page:

        • The layout is broken. Text is squeezed in the middle of the screen. Also, the background color is gone and social links are pushed to the left.

      • Cottages page:

        • Cards are pushed to the left. The card body is squeezed to the right of the card. Social links are pushed to the left.

      • Book Now page:

        • Form and input background does not exist. Social links are pushed to the left.

      • Contact page:

        • Form and heading slightly pushed up and social links to the left. Also, submit button has no background.

  • Tested on Chrome using different devices via google chrome device emulators and all works fine.

  • Also tested on the following physical mobile devices:

    1. Samsung Galaxy S9 plus and works fine

    2. Samsung Galaxy s8 and works fine

    3. Huawei P30 and works fine

Deployment

GitHub Pages

• Following steps were used:

  1. First login to GitHub
  2. Locate the Repository and click on settings.
  3. Scroll down the settings page till you see GitHub Pages.
  4. Then under source choose master branch by clicking the button.
  5. Click Save and wait for the page to refresh.
  6. Scroll down again to GitHub pages.
  7. Find the URL for the site under GitHub pages.

Fork It

1. Login to GitHub
2. Locate the Repository.
3. In the top right corner click Fork button.

Clone It

1. Login to GitHub
2. Fork the Repository.
3. Then click Code under the Settings button.
4. Choose HTTPS, SSH, or GitHub CLI, then click the copy button to the right.
5. Open Git Bash
6. Change the directory to the location where you want the cloned directory to be made.
7. Type git clone and paste the URL you copied before.
8. To create the clone press Enter

Credits

Code

• Bootstrap: Bootstrap Library used throughout the project mainly to make the site responsive using the Bootstrap Grid System.

• Home page animation Dev Ed

• Email Validation

• Text animation Dev Ed

• Code Institute tutorial on emailjs

• Map

Imges

• Home

  • Photo by eberhard grossgasteiger

• About

  • Remi Antunes

• Cottages

  • Bryan Walker

  • Brad Pearson

  • Photo by Vecislavas Popa from Pexels

  • Photo by Home Decor Interiors from Pexels

  • Photo by R ARCHITECTURE on Unsplash

  • Photo by Terry Magallanes from Pexels

  • Photo by House Method on Unsplash

  • Photo by Sidekix Media on Unsplash

  • Photo by Adam Winger on Unsplash

  • Photo by Sidekix Media on Unsplash

  • Photo by Sidekix Media on Unsplash

  • Photo by Ronnie George on Unsplash

• Book Now

  • Photo by Robson Hatsukami Morgan on Unsplash

Acknowledgements

• My mentor, Adegbenga Adeye, for his guidance and feedback.
• The team at Code Institute, for teaching me the necessary skills to create this site.
• w3schools for all the useful information found on the site.
• Dev Ed - for all the helpful tutorials on JavaScript.
• Stackoverflow - for general needs

Note for the assessors

• Please note that while trying to commit as often as possible, not sure if all my commits will reflect the changes made. This is due to Gitpod having some issues during the development process of my site. Thank you!

Back to Table of Contents