Welcome to Serene meditation. This is a website that introduces meditation to those who are new to meditation and aims to help them get started with their meditation practice.

The users of this website will become familiar with what meditation is, the benefits of meditation, meditation techniques and tips and tricks to start their meditation journey.

Serene Meditation

https://github.com/ShizukaDonaghue/serene-meditation

As a user,

• I would like the website to be visually appealing and gives me a sense of peace and calm.
• I would like to be able to navigate easily through the website.
• I would like to understand what meditation is and its benefits.
• I would like to be able to learn meditation techniques and how to get started.
• I would like to be inspired to start meditation.
• I would like to be able to ask questions or provide feedback.

The initial concept was to create a website that would inspire users to start their meditation practice and help them get started. Therefore, the website would explain what benefits they could expect and what types of techniques were available, so that users could try different meditation techniques to start their journey.

Wireframes were generated using Balsamiq to visualise the structure of the website. The structure of the finished website slightly varies from the wireframes due to development that occurred during the building process, however, the main structure remained the same.

Wireframes for mobiles:

Wireframes for tablets:

Wireframe for desktop:

Serene Meditation consists of two HTML pages. The layout of the website is simple and consistent full-page scroll with a fixed navigation bar at the top. The intention for this simple design is to have a clean and uncluttered website in which the user can feel calm and peaceful.

The main page is the default landing page and the second page is accessible when the user submits a message from the main page to thank them for their message. There are five sections within the main page and they are also accessible from the navigation bar to bring the user to a specific section of the page.

In addition to the navigation bar, the second page includes a "Home" button, so that the user can easily navigate back to the main page after submitting a message. The logo is linked to the top of the main page to deliver the same effect and the user can also choose to navigate to a specific section of the main page from the navigation bar on the second page.

The website is fully responsive to different screen sizes and the layout is the same in all sizes with images spanning across the full width of the page. All images are adjusted to the full width of the screen, and they are displayed in the same size throughout the main page for consistency.

Each of these images includes an inspirational quote to suit the content of the section that they are in. These images and quotes are designed to generate a positive emotional response in the user and aim to inspire them to start their meditation journey, and therefore, the images are an integral part of the website.

The images are carefully chosen to set the calm and peaceful tone for the website. They are beautiful images of sunrise to signify the start of a meditation journey.

Detailed alt attribute is included for each image to describe the scenery. The intention for this is to improve accessibility so that the images will deliver the same effect for all users.

The colour scheme for the website has taken inspiration from the hero image of Mt. Fuji at sunrise in which the morning sun is turning the top of the mountain and the surrounding sky pink. The colours chosen are gentle and calming to suit the purpose of the website and to promote a sense of peace and calm in the user.

The background colour for the website is pale pink F3E4E4 as soft pink colours promote tranquillity and peace. The colour of texts for the main contents is dark grey 01212F to ensure sufficient contrast for accessibility. The navigation bar is in dark blue 092039 with contrasting font in white FFFFFF. Dark pink C98282 is used for the social media icons in the footer, and light blue 68A5BF is used for hover effects within the website.

Colour palette generated using Coolors.co:

There are two fonts used in the website and they are imported from Google Fonts. For the main body of the texts, EI Messiri was chosen as it has a calming flow which suits the image of the website. For the inspirational quotes, Alex Brush was chosen, which is a beautiful handwriting style to suit the images.

Featured on both HTML pages, the fully responsive navigation bar includes the logo which links to the top of the main page (rather than reloading the page for a better user experience) and a link to each section within the main page. This allows the user to easily navigate to their desired section without having to use the "back" button each time.

Navigation bar for screen sizes <905px:

When hovering over the hamburger menu with the cursor, the cursor changes to the hand pointer to indicate that is a button. When the hamburger menu is clicked or tapped, the drop-down menu opens, so that the user can select the section that they would like to navigate to. When hovered over, the colour of the section name changes from white to light blue, which enables the user to see which link they are selecting. The drop-down menu is semi-transparent, so the user can see the screen behind the menu, and once the selection is made, they are able to see that the desired section is now at the top of the screen. Furthermore, when the drop-down menu is open, the hamburger icon changes to "X" so that it is more intuitive for the user to know that is how the drop-down menu is closed.

Navigation bar for screen sizes >=905px:

When hovered over, the colour of the section name changes from white to light blue, which enables the user to see which link they are selecting.

Since the main contents are on a single page, the website includes a "Back to Top" button which appears at the bottom right-hand corner when the user starts scrolling down. This aims to produce a better user experience as it enables the user to quickly go back to the top of the main page without moving their cursor or hand to the top of the screen for the navigation bar. The background colour of the button is semi-transparent to minimise interference with the contents on smaller screen sizes.

The landing page includes a photograph of Mt. Fuji at sunrise with an inspirational quote, aiming to inspire the user to start their meditation practice. The image includes detailed alt attribute to describe the scenery, which aims to deliver the same effect to all users.

This section provides an overview of meditation, explaining what meditation is.

This section summarises the main benefits the user could expect from meditation practice.

This section contains the details of five techniques available, including how to practise them. In addition, there are three images of sunrise and inspirational quotes to inspire the user, which aim to generate a positive emotional response in the user and to help them get started. These images also include detailed alt attribute to describe the scenery and intend to deliver the same effect for all users.

This section contains helpful tips and tricks to help the user start their meditation journey.

This section contains a form that allows the user to send a message to ask questions or provide feedback. When hovered over, the text input area displays the border in dark pink, which enables the user to see which field they are selecting.

When hovering over the "Submit" button with the cursor, the cursor changes to the hand pointer and the colour of "Submit" also changes from white to light blue, so that is more intuitive for the user to know that is a button.

The footer section includes links to the social media sites as well as my own GitHub and Linkedin accounts. The links open in a new tab to allow easy navigation for the user. The footer is available on both HTML pages.

When the user sends a message from the main page, the second HTML page opens to thank them for their message. The navigation bar is consistent with the main page and this page includes a "Home" button so that the user can easily navigate back to the main page.

When hovering over the "Home" button with the cursor, the cursor changes to the hand pointer and the colour of "Home" changes from white to light blue, so that is more intuitive for the user to know that is a button, and also to be consistent with the "Submit" button on the main page.

• The drop-down menu from the hamburger menu currently stays open after the user selects one of the sections and navigates to the desired section. The drop-down menu is only closed by clicking or tapping on the "X" at the top. If the drop-down menu disappears once the user selects one of the sections or taps outside of the drop-down menu, it would help to improve the user experience. This is something that can be implemented once I learn JavaScript.

• The navigation bar currently does not have a drop-down menu for the "Techniques" section, which would enable the user to navigate to a specific technique from the "Techniques" section of the navigation bar. This would be a nice addition to the website that can be implemented once I gain more experience in coding to do so.

• The website was created with HTML.
• CSS was used to add styling to the website.
• Gitpod was used to create, edit and preview the codes.
• Git was used for version control and tracked changes in the codes.
• GitHub was used to store the codes and deploy the website.
• Chrome Dev Tools were used extensively while adjusting the objects in the website for different screen sizes.
• The website was fully validated using W3C HTML Validator and W3C CSS Validator.
• Balsamiq was used to generate wireframes.
• Am I responsive? was used to generate the mockup image showing the website on various screen sizes.
• The fonts used in the website are imported from Google Fonts.
• The website uses icons from Font Awesome.
• The website uses cdnjs.com for Font Awesome icons so that the website loads quickly.
• The colour scheme ideas and actual colour palette were generated with Coolors.co.
• Images within the website were compressed with Compressor.io so that the website loads quickly.
• Grammarly was used to fix grammatical errors across the website.

The website was fully validated to ensure there were no syntax errors. The official W3C HTML Validator and W3C CSS Validator were used for the validation and no errors were found.

Validation result for index.html:

Validation result for thank-you.html:

Validation result for style.css:

The website was tested with Lighthouse in the Dev Tools for performance, accessibility, best practices, and SEO.

Results for index.html for desktop:

Results for index.html for mobile:

Results for thank-you.html for desktop:

Results for thank-you.html for mobile:

Appearance, functionality and responsiveness of the website were tested with the following browsers:

• Google Chrome
• Safari
• Microsoft Edge
• Mozilla Firefox
• Opera

As part of this testing, the following were tested and no issues were found:

• All internal links function as expected
• All external links function as expected and they open in new tabs
• All features function as expected
• Scroll-padding property correctly applied for the fixed navigation bar
• The form inputs validated - empty fields are not allowed and only correct email address format is accepted
• Responsiveness to different screen sizes - images, quotes, font sizes, margins, and overall spacing

The website was also manually tested on iPhone 12, iPhone XR, iPad 8, HP Elitebook 840, and Dell XPS for the above. No issues were found.

Responsiveness design tests were executed using Chrome Dev Tools and no issues were found. This included the following devices:

• iPhone 4, SE, XR, 12 Pro, 5/SE, 6/7/8, 6/7/8 Plus and X
• iPad Air and iPad Mini
• Samsung Galaxy S8+, S20 Ultra, A51/71
• Microsoft Surface Pro 7 and Duo
• Nest Hub and Hub Max

All user stories were tested and addressed as follows:

• I would like the website to be visually appealing and gives me a sense of peace and calm.
  

  The website is clean and uncluttered. The colours chosen for the website are gentle and calming. The background colour is pale pink as soft pink colours promote tranquillity and peace. The images are also carefully chosen to suit the colour scheme and the purpose of the website.

• I would like to be able to navigate easily through the website.

  The layout of the website is simple and consistent full-page scroll with a fixed navigation bar at the top. The user can easily navigate to a specific section of the website from the navigation bar. When the user starts scrolling, the "Back to Top" button appears at the bottom right-hand corner and the user can quickly go back to the top of the main page.

  When the user submits a message, the second page opens to thank them for their message. The same navigation bar is available on the second page and this page also includes the "Home" button so that the user can easily go back to the main page after submitting a message.

• I would like to understand what meditation is and its benefits.
  

  The website contains a section which describes what meditation is and its main benefits at the start of the page.

• I would like to be able to learn meditation techniques and how to get started.
  

  The website contains a section which details meditation techniques and how to practise them. Additionally, it also contains useful tips and tricks to help the user get started.

• I would like to be inspired to start meditation.
  

  The website contains images of sunrise and inspirational quotes to inspire the user to start their meditation practice. The images of sunrise aim to signify the start of their meditation journey.

• I would like to be able to ask questions or provide feedback.
  

  The website contains a form so that the user can send a message to ask questions or provide feedback.

Scroll-padding-top property is applied to the website so that when the link to each section is selected from the navigation bar, the desired section moves to the top of the screen below the fixed navigation bar (not hidden under the navigation bar), however, in Safari for Apple devices, the padding was applied larger than the rem unit set and the section above was visible. The issue was not seen in Chrome Dev Tools during the building process.

The issue was resolved by changing the scroll-padding-top property from rem to px.

Image showing scroll-padding not applied correctly before the issue was resolved:

Image showing scroll-padding applied correctly after the fix:

The "Submit" button was rendered as "Submit Query" in Firefox.

Image showing the "Submit" button in Firefox:

This has been resolved by adding value="Submit" to the input element.

Image showing the "Submit" button after the fix:

The "Submit" and "Home" buttons should appear the same for consistency, however, in Safari for Apple Devices, the shape of the "Submit" buttons appears differently (it appears that the border-radius is higher). This issue is not seen in the Dev Tools or desktop applications. Despite the efforts made to modify the CSS codes so that the codes would be rendered the same in Safari, this issue was not resolved. This is a minor appearance issue and does not affect the functionality.

Image showing the "Submit" button in Safari:

The website has been deployed to GitHub pages. The live link can be found here - Serene Meditation

Image for the following steps

1. Navigate to the "Settings" tab in the GitHub repository.
2. Select "Pages" from the menu on the left.
3. Under the "Source" section, select "Deploy from a branch" and "Branch: main." Click on "Save."
4. GitHub takes a short while to publish the website. Refresh the page, if not done automatically, and once the website is deployed, the URL will be displayed.

Image for the following steps

To make a copy or "fork" the original repository to view or make changes without affecting the original repository,

1. Log into GitHub and locate the repository.
2. Select the "Fork" option at the top of the screen to create a copy of the repository.
3. This will create a copy of the repository in your GitHub account.

Image for the following steps

1. In the GitHub repository, select the "Code" button.
2. In the "Clone" box, under the "HTTPS" tab, click on the clipboard icon to copy the URL.
3. In Gitpod, change the current working directory to the location you would like the cloned directory to be created.
4. Type "git clone" and then paste the URL copied from GitHub.
5. Press "Enter" and the local clone will be created.

• Contents for the "What is Meditation?" section were sourced from verywellmind.
• Contents for the "Benefits of Meditation" section were sourced from WebMD.
• Contents for the "Meditation Techniques" section were sourced from INSIDER.
• Contents for the "Tips & Tricks" section were sourced from verywellmind.
• Inspirational quotes were sourced from PositivePsychology, Parade, and Keepinspiring.me.
• README.md was inspired by TashaTJ's repository.

• Images used were sourced from pxhere.com and pixabay.com.

• The responsive navigation bar was inspired by YouTube tutorial by Kevin Powell.
• The "Back to Top" button was inspired by FreeCodeCamp.

This website was created as a portfolio 1 project for the Full Stack Software Development course at UCD Professional Academy and Code Institute. I would like to thank my mentor, Harry Dhillon, for the guidance and encouragement given throughout the project. Following his valuable feedback and advice, the website has been refined to be more intuitive and it has improved the overall user experience.

I would also like to thank Simen Daehlin at Code Institute for his patience and time answering all the questions during the class and also in Slack.