Balancing Bodyweight

Introduction

The website "Balancing Bodyweight" focuses on calisthenics, a form of exercise that utilizes body weight for resistance training. It aims to promote fitness for all levels, from beginners to advanced athletes. Our mission is to provide accessible and adaptable workout options that help users improve their strength, coordination, and body awareness.
Overall, the site encourages users to find their balance and elevate their strength through bodyweight training.

Features

Exisiting Features

• Navigation Bar

• Simple navigation, clear categories, and a responsive design for mobile users.

• This is featured across all three pages with links to the Logo, Home, Gallery and Sign Up page making it fully responsive and easy to navigate on site across pages within window and not push the back button to get to previous page.

• The landing page image

• The introduction image and fiting text to go with the theme of the web application.

• Benefits section

• Minimal Equipment Required: Perform exercises anywhere with little to no equipment.

• Functional Strength Improvement: Engage multiple muscle groups to enhance everyday strength and flexibility.

• Progressive and Adaptable: Modify exercises to suit your fitness level and progressively challenge yourself.

• Levels of Training: Explore structured workouts for various levels (Beginner, Intermediate, Advanced, Elite, Master).

• Levels of Calisthenics

  • Beginner: Basic exercises, and tips.
  • Intermediate: More complex movements.
  • Advanced: High-level skills.
  • Elite: Master challenging movements and advanced techniques.
  • Master: Achieving pick performance and creating own movement combinations .

• The Footer

  • The footer section includes links to the relevant social media sites. The links will open to a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it encourages them to keep connected via social media

• Gallery

  Visual representation of what calisthenics workouts could look like .

• The Sign Up Page

• The sign up page allows user to gain more personalised imformation on selected/ prefered level of difficulty. Thus promoting body movement and a healthier lifestyle.

• Thank You page

• The thank you page is a hidden page that has been included to simulate the response from a server when user fills in sign up form. It was done this way as i dont have access to a server to submit the form to.

• Provides the user with an improved user experience through confirmation that their message has been recieved.

Features Left to Implement

• Add-on to sign up form, making it to capture more user details in for optimal user experience.

HTML Structure

The website is structured using HTML5 semantics with sections dedicated to navigation, main content, and footer.

Key HTML Elements

• Header: Contains the logo and navigation links.
• Main:
  • Hero section with a title and subtitle.
  • Reasons to start calisthenics highlighting various benefits and physical advantages.
  • Different skill levels providing workout examples and goals.
• Footer: Social media links and copyright notice.

Testing

Manual testing

Feature being tested	Expected Outcome	Testing Performed	Actual Outcome	Result (Pass or fail)
Header nav-toggle	Dropdown-menu	Yes	Nav toggle responsive	Pass
Internal links	Move across pages	Yes	After click, desired content shows	Pass
Responsive Footer	Social media links to open in new tab	Yes	Link opens in new tab	Pass
Form validation	Required information needed	Yes	Does not allow sign-up without required data fields filled in	Pass
Internal link on thank you page	Return to homepage	Yes	browser returns to homepage after clicking button	Pass

HTML Validator

• No errors were found when passing through the validator site validator results for index.html

• No errors were found, only 1 warning validator results for gallery.html

• No errors or warnings were found validator results for signup.html

• No errors or warnings were found validator results for thankyou.html

CSS validator

• No errors found validator results for CSS

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master 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://braunie999.github.io/BalancingBodyweight/

Credits

• Website idea created and deployed with help in the following sections respectively.

Content

• The text for the CSS layout was inspired by the love-running template and modified to fit my web application wants.
• Instructions on how to implement form validation on the Sign Up page was taken from Reading material on student portal.
• The icons in the header and footer were taken from Font Awesome

Media

• Images used on home page all outsourced from open source site Pexel.
• Images on gallery page as well as my Sign-up and thank-you pages have images from Pexels site.open source site

Technologies Useds

• HTML5
• CSS (linked externally)
• Font Awesome for icons

Authors

© 2024 Kiara Braun

Contact

For inquiries or feedback, please reach out via GitHub.