code-institute-submissions / yogalife Goto Github PK

Purpose

I have created this website with the intention of sending a message to our viewers about Yoga and the benefits of Yoga. In my opinion this is much more then Yoga, this is all about the internal life within you and I tried my best to give a clear idea of the importance of having that time of the day just for you. Breathing, stretching, and giving your body that internal peace for a better you. Let’s be honest, our daily lifes are busy and stressful even when we don’t think it is. I also have involved few techniques that can be done at home. The main purpose was also to make it simple and straight forward including:

• Benefits of Yoga
• When and where are the classes
• The times
• And join us button

Home Page: I have really spent time in making sure that the home page is simple and straight to the point by making sure I have the right image in place with a nice welcome header! I also made sure that the “YogaLife” header on the top left side of the page is clickable and it brings the viewer back to the home page no matter what. I have also made sure that when scrolling down the viewer can see the benefits of Yoga answering some of the most common questions asked about Yoga. Right below the benefits I have also introduced our viewer few techniques they can easily perform at home and followed by that we have the schedule and “JOIN US” button that brings the viewers straight to my email address. There are also social media icons that are clickable. I have also made sure to use that specific color all throughout the home page as it gives the first impression of yoga and of something positive, I could not use a dark color on such topic as yoga, yoga brings peace and it requires a positive peaceful color.

Gallery: I did not want to complicate the gallery page as I believe the home page is the most important which provides all the necessary information. Gallery was more for the viewers to see some of the postures made and also the location of the classes which is in the park. I also believe this yoga classes brings people closer; this are group classes which are great for people to get to know each other and have great time and that’s what we see in those photos.

Sign up: This sign-up page is a very important part of the website as the viewer can easily sign up and join us. Also, a reply will be sent back to the viewer with the rest of the information, payments and time as a confirmation. The structure and purpose of this page is to be simple and effective. I have also made a JOINUS button for a simple way for anyone to get in touch via email and on the other side I have made a signup page for anyone interested in scheduling the day they might consider coming for the yoga class.

User Goal

• Simple to use.
• Explains business purpose.
• Allows viewers to see the main benefits.

Business Goal

• Giving interest.
• Engage the viewer.
• Have the viewer coming back.

First Time Visitor Goals

• As a First Time user, I want them to easily understand the main benefits of Yoga.
• As a First Time user, I want them to be able to easily navigate throughout the site to find content.
• As a First Time user, I want them to view the website and content clearly on my mobile device or any other devices.

Frequent Visitor Goals

• As a Frequent user, I would check to see if there are any time schedules changes that have been made.

Structure

I have made this site simple and straight to the point with simple explanation and times for the Yoga classes. The navigation menu is easy to use. All viewers will be able to navigate easily though the website and find the information. The main purpose of the structure on this site was to make it simple and effective for the viewers to see the benefits of yoga and the times to join us.

HTML and CSS was used to make the Website. The layouts and images are the correct sizing to stand out and make it simple for the viewers.

All pages are responsive and the layouts will change depending on screen size. I also made sure that the website can be viewed clearly on mobile devices.

Design

Color

The three main colors used are light pink, white and light blue on the website as I believe this are positive colors which match up great with yoga. I also believe it’s very catchy on the eyes and it gives an easy positive view of the website. This website is for yoga lovers and i chose positive opening colors choices like light pink, white, and light blue which are associated with health, wellness and relaxation.

Look & feel

The main body font for the home page is “Laila” as I believe its associated with yoga and it transmits trough the website a nice design that standouts and it wont be boring for the viewer while reading.

The primary colors:

Heading

The header has a font-family of tiro bangla as I believe it’s a strong bolded dark color that stands out. I have also made sure the header is clickable and it will bring you back to the home page no matter what. I have used the font-size 35px as it stands out on all pages.

Technologies

• HTML

• This website uses HTML as the main language used to describe the content and structure of the Website.

• CSS

• This website uses custom written CSS to style the Website.

Font Awesome

• Font awesome Icons are used for the social media links contained in the Footer section of the website.

Google Fonts

• Google fonts are used throughout the project to import different fonts on the website to make it standout and simple to see when reading.

GitHub

• GithHub is the hosting site used to store the source code for the Website and Git Pages is used for the deployment of the live site.

Git

• Git is used as version control software to commit and push code to the GitHub repository where the source code is stored.

Google Chrome Developer Tools

• Google chromes built in developer tools are used to inspect page elements and help debug issues with the site layout and test different CSS styles.

Techsini

• tecnisih.com Multi Device Website Mockup Generator was used to create the Mock up image in this README

placehold.it

• placehold.it was used to display the colours shown in the Color Scheme section.

Testing

Testing was very important as we should see if the viewer will be able to comfortably see the website on other devices such as iPads and mobile phones.

I used testing methods by pressing inspect and using dimensions responsive, I have also tried it as iPhone devices etc.

For small screens sizes 800px and down.

Desktop size:

Smaller device such as phones:

Testing feature: Contact form

Making sure everything is clickable, “name, last name, email and message lets the viewer write down in the space without any issue. “Also, making sure “Submit button” is clickable and works”

How did I check and the result:

I completed the form my self and clicked submit and all worked fine. Making sure it runs fine without any issues.

Testing feature: Gallery

Making sure the images are attached to each other as I did not want any space between. There are six images in total with column count 4 and width 100%. Four images showing classes of yoga in the park and two images showing the benefits of yoga.

How did I check and the result:

Mainly used inspection as responsive mode and made sure images stay in its size for each device starting from a desktop. Result passed.

Testing feature: Home page

Making sure the entire layout is in the centre of the page which keeps the website organised and easy to view. Making sure that the “Join us” button is clickable and it brings the viewer straight to my email. And also, that the social media icons are clickable and it brings the viewer to the social media page.

How did I check and the result:

Clicked several times on “Join us” button to make sure it functions properly and it brings me straight to the email. Also, clicked on each social media icon to make sure it brings me to the social media page which it did. Result passed for the home page.

How to Run this Project in your Browser

1. Install the Google Chrome or Firefox browser.
2. Install the applicable GitPod Browser Extensions for your chosen browser.
3. Create a GitHub account.
4. Log in to Gitpod using your GitHub account.
5. Click on YogaLife GitHub Repository.
6. Open the repository in Gitpod:

• Click the green "Gitpod" icon at the top of the Repository

8. A new workspace will open with the current state of the master branch. Any changes made to the master branch after this point will not be automatically updated in your Gitpod Workspace.

Cloning the Repository

1. Click on YogaLife GitHub Repository.
2. Click the "Code" dropdown box above the repository's file explorer.
3. Under the "Clone" heading, click the "HTTPS" sub-heading.
4. Click the clipboard icon, or manually copy the text presented:
5. https://gitpod.io/#https://github.com/NicoMesina/YogaLife
6. Open your preferred IDE (VSCode, Atom, PyCharm, etc).
7. Ensure your IDE has support for Git, or has the relevant Git extension.
8. Open the terminal, and create a directory where you would like the Repository to be stored.
9. Type git clone and paste the previously copied text (https://gitpod.io/#https://github.com/NicoMesina/YogaLife) and press enter.
10. The Repository will then be cloned to your selected directory.

Manually Downloading the Repository

1. Click on YogaLife GitHub Repository.
2. Click the "Code" dropdown box above the repository's file explorer.
3. Click the "Download ZIP" option; this will download a copy of the selected branch's repository as a zip file.
4. Locate the ZIP file downloaded to your computer, and extract the ZIP to a designated folder which you would like the repository to be stored.

Credits

Content

• All ideas including fonts, layouts, structure, design, and every detail were designed by me.

Media

• All Photographs were sourced from google with copy rights permission.

Link to the website:

• https://nicomesina.github.io/YogaLife/