Meditation

Nowadays we live in a very fast paced and stressful world due to work or other social issues. Therefore the aim of this Meditation website is intended to those who want to lead a calmer and peaceful life, and eventually a healthier life. Since, mediation is one of the ways to achieve peace and health in your life, this website provides useful information to those who need information on how to meditate, and it also provides a choice among four different types of mediation.

Existing features

Nagvigation Bar

• This is featured on all of the three pages of the website. The responsive navigation bar allows the user to move between the different pages easily without having to use the back button.
• It contains links to the Logo of the page, the Home page, Type’s of meditation page and the Contact page. Furthermore, when the Logo is clicked it takes the user to the home page.

The landing page image

• The hero image contains a beautiful picture of burning candle with natural stones and a flower as well as green bamboo sticks, all this can have a calming effect when the user visits the site.
• It contains a meaningful quote to inspire the user of the website.

The home page

The home page contains two sections: What is meditation and Benefits of meditation

• The meditation section introduces the user to meditation and explains what meditation is about.

• The benefits of meditation section highlights to the user the benefits of regular mediation, and it also encourages the user to explore the different parts of the website.

Types of meditation page

• The contents of this page familiarize the user to the different types of meditation and explain how the user can practice each meditation.

The contact page

• This page allows the user to give comments, questions or any kind of feedback about the website by submitting their full name and email address.
• The page includes a checkbox where the user is allowed to consent to the collection of personal information for the sole purpose of further communications.
• It contains a submit button where the user can click after filling out the contact details and comments.

The footer section

• This section contains clickable links to Facebook, Instagram and Twitter sites which allows the user to join meditation groups as well as find furthermore information about meditation.
• The user gets a feeling of togetherness by joining meditation groups on different social media sites and boost the user’s experience of practicing meditation.

Testing

• This page works on different browsers: Chrome, Microsoft Edge, Firefox.
• On smaller screen sizes the logo is located at the top of the navigation bar.
• I checked that the page is responsive, works and looks good on the standard screen sizes (ipad, MotoG4, iphone6/7/8, iphone5/SE and Galaxy S5) using the devtools device toolbar.
• I have checked that the above mentioned features work as expected, the form requires entry on each field, the email field accepts only email address and the checkbox requires that the user checks it before submission, and the submit button allows the user to submit feedback.

Validator Testing

• HTML
  • Errors were detected when passing through the official W3C validator and they are corrected. There was a warning but it was not relevant to the indicated section of the code.

Home page-validation

Meditation types page-validation

Contact page-validation

• CSS
  • Errors were detected when passing through the official (Jigsaw) validator and they are corrected.

CSS validation

Accessibility

Home page accessibility

Meditation types page accessibility

Contact page accessibility

Unfixed bugs

No bugs were detected

Deployment

• The site was deployed to GitHub pages as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master or Main Branch
  • Once the master or main 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://joh201.github.io/john-meditation/

Credits

Content

• Instructions on how to implement form validation on the contact page was adapted from the course work
• The text for the home page and meditation types were taken from the following websites:

  1. https://gethealthyu.com/different-types-of-meditation/

  2. https://www.moveyourspirityoga.com/5-types-of-meditation/

  3. https://choosemuse.com/blog/6-types-of-meditation/

• The social media logos were taken from wikipedia.