Iron Forged HEMA Club

This project is to promote a mock HEMA (Historical European Martial Arts) club. The webpage will serve both potiental members and current members. The overall goal of this website is to promote HEMA interest and provide information about the club.

UX

There would typically be 3 types of users visiting this site.

User A:

• A current member who wants to view club news, potiental new courses offered by the club or to be redirected to social channels.
• User A can achieve these goal through the nav links on all pages of the site.

User B:

• A user wanting to join this club.
• User B can achieve this goal on any page from the "Sign Up" nav link, then filling out and sending in the Sign Up form.

User C:

• A user interested in HEMA and wants to know more about HEMA-clubs.
• User C can achieve this goal from information found on the Home, Courses and FAQ pages.

This project attempts to cater to all three user types in helping the user achieve their goals quickly with a clean navigation bar and a non-linear narrative.

The design of the pages was created with a medieval theme. Images, font and backround colors attempt to reflect this theme.

Features

• Home page - A page with a brief descrition of the club and what HEMA is about.
• News page - A page for the club to post news about the club.
• Courses page - A page to browse through the different courses offered by the club.
• FAQ page - A page with answers to frequently asked questions.
• "Sign Up" form page - A page to send contact information to the club to be contacted about the user's specifed course(s) and sign up for the courses. Currently this form does not send information anywhere.

Features Left to Implement

• More content about the benefits of HEMA, linked to the respective text on the home page.
• Scheduale/Calender for events and courses.
• A page with information and links to HEMA tournaments.
• A gallery with pictures and videos from the club.
• A information page about the current instructors.

Technologies Used

• Github - https://github.com/ - To store a repository of my work.

• GitPod - https://www.gitpod.io/ - The online workspace used to develop/code the project.

• HTML5

• CSS3

• Javascript - Only used by Bootstrap. No Javascript was written by me.

• Bootstrap 4.4 https://getbootstrap.com/ - Used to help structure the grid of the website. Used also for the navigation bar and accordian styled information in courses.html.

• Font Awesome https://fontawesome.com/icons?d=gallery - Used to add icons to the website.

• Google Fonts https://fonts.google.com/ - Used for the fonts on the website.

Testing

This project has been texted extensively for display responsiveness and working nav links. I have tested the site in all display sizes in Chrome Dev Tools, Chrome, Internet Explorer, Firefox and Opera.

The quote text located in the navbar/header is only displayed on larger screens.

All users can achieve their goals for coming to this website.

The sign up page does not send any information as it is beyond the purpose of this project. However, input in the fields of the form are required if one wants to successfully click the sign up button.

All bugs found during testing have been fixed. The common bugs in this project were unintended sizing, position or color of the content.

This project has been peer reviewed/tested from Code Institute's Slack channel.

This project have been reviewed/tested by a senior web developer. A mentor provided by Code Institute during my studies.

This project have been reviewed/tested by friends and family.

Deployment

This project is hosted on GitHub Pages with only one deployed version. https://trevbytes.github.io/HEMA-club/index.html

Credits

Content

• The text for "HEMA - What is it?" was copied from the Wikipedia article of HEMA

Media

• The photos used in this site were obtained from the following free-use picture sites ...
  • Pixabay https://pixabay.com/
  • Pexels https://www.pexels.com/
  • Unsplash https://unsplash.com/

Acknowledgements

• When stuck with coding questions I found help through, previous Code Insitute lessons, w3schools - https://www.w3schools.com/default.asp and Bootstrap documentation https://getbootstrap.com/docs/4.4/getting-started/introduction/.
• I received inspiration for this project from two HEMA club websites.
• Blood and Iron is a HEMA club with a modern website. https://www.bloodandiron.ca/
• SPIFF is an old HEMA website which is an example of the basic needs of a club website. http://www.spiffaktning.se/index.php