Giter Club home page Giter Club logo

yogamomsonline-1's Introduction

Yoga4Moms Online

Yoga4Moms Online is a website designed to encourage moms of all ages to participate in online Yoga sessions. The platform aims to help moms maintain their health through Yoga while providing a space to connect with like-minded individuals. Yoga4Moms Online offers information about upcoming Yoga sessions, online events, and more. Visit the live site here: Yoga4Moms Online

Yoga4MomsOnline

Features

Navigation Bar

Navigation Bar

  • The responsive navigation bar appears on all pages, allowing easy access to the Home page, Gallery, Meeting Times and the Join Us page.
  • Seamless navigation enhances the user experience across devices.

Landing Page

Landing Page

  • The landing page features an engaging photograph with text overlay, effectively conveying the purpose and target audience of the website.
  • A captivating animated hero image display introduces users to Yoga4Moms Online.

Reasons to Join 'Yoga4Mom Online' Section

Reasons to Join

  • This section highlights 6 essential benefits of joining the Yoga online community, emphasizing the value of Yoga for overall well-being.
  • Compelling images depict moms of different ages practicing Yoga, inspiring users to consider Yoga as their fitness choice.

Meeting Times Section

Meeting Times

  • Users can easily access information about upcoming meeting times, locations, and session durations.
  • The section is regularly updated to keep users informed.

Gallery

Gallery

  • The gallery showcases a diverse collection of images, providing users with a visual insight into Yoga sessions and events.
  • Users gain a better understanding of the organization's offerings.

Join Us Page

Join Us Page

  • Users can register for Yoga4Moms Online, specify their Yoga experience level and preferences.
  • The page captures essential user details such as user first name, last name and email address for account creation.
  • The page has a feedback area where users can enter their comments about how they think we can improve their experience on the website.

Footer

Footer

  • The footer features links to relevant social media platforms, facilitating easy interaction and connection between users and site owner.
  • Copyright information indicates the site's in date and it is valid.

Features Left to Implement

  • Live chat support for users seeking immediate assistance.

Testing

  • Tested navigation links to ensure accurate routing and smooth user experience.
  • Confirmed that the header, Reasons To Join, Meeting Times and Join Us page texts are all readable and easy to understand.
  • Tested and confirmed website runs correctly across different platforms like Chrome, Firefox and Safari.
  • Conducted extensive responsiveness testing across various devices using the devtools device toolbar and confirmed that it works well across various devices.
  • Tested using LightHouse to determine Assesibility, Performance and SEO.
  • Implemented masonry layout for the gallery and tested for consistency.
  • Verified that linkage of footer elements redirects to the correct social media sites.

Debugging

Validator Testing

  • HTML code was validated using the W3C validator and passed without errors.
  • CSS code was validated using the Jigsaw validator and found to be error-free.

LightHouse Performace Score

LightHouse Performance Score

Solved Bugs

When the project was deployed to GitHub pages, it was discovered that some vital things do not work like the links to social media sites on the footer, the images on readme page not showing, some unclosed tags issues and responsiveness issues. Below is a detailed explanation of how each issue was resolved.

  • Unclosed html tags were closed and the issue have been resolved.
  • Missing css file issues have been resolved by fixing the google font import link in the style page.
  • Broken social media links on gallery and signup pages fixed by fixing the code for each individual pages.
  • Missing README images and descriptions were fixed by pointing the images to the right location/folders.
  • Padding added to Meeting Times Section style and border lines adjusted for easier user readability.
  • Clearer seperation and sectioning between header and body paragraphs implemented.
  • Logo and Menu Nav media query fixed for better visual display on small and medium screen sizes
  • Form page was tested to make sure all input fields accepts the correct format and the submit button works properly.

Unfixed Bugs

No unfixed bugs

Deployment

The website was deployed to GitHub Pages using the following steps:

  1. Navigate to the GitHub repository's Settings tab.
  2. Select the Master/Main Branch as the source for deployment.
  3. Once Master/Main Branch is selected, navigate to Pages tab where you can find the link to the live website.
  4. If you find the live link generated by Github, the deployment process has been succesful.

Visit the live site here: Yoga4Moms Online

Credits

  • Fonts from Google Fonts were used for the Home page typography.
  • Form validation guidance was sourced from the Love Running Final Challenge.
  • Icons in the Reasons section, footer, and Join Us pages were provided by Font Awesome.
  • The website design was inspired by CodeInstitute's Love Running Tutorials.
  • Images on the home and Join Us pages were sourced from PEXELS (www.pexels.com) and iSTOCKPHOTO (www.istockphoto.com).

yogamomsonline-1's People

Contributors

bojaymes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.