Brazilian Jiu-Jitsu Club for Kids

Welcome to the BJJ Club for Kids! Our website is designed to introduce martial arts and self-defense training specifically tailored for children. At BJJ Club, we focus on teaching honor, good values, and practical skills to help your child stay safe and confident in any situation.

View BJJ Club for kids live project here>

USER EXPERIENCE (UX)

• Navigation
  • Featured at the top right hand side of the page, the navigation shows 3 menus.
  • Home menu which is the main page.
  • Check out the gallery menu to catch epic snapshots of our little ninjas in action, mastering martial arts."
  • Sign up menu that brings you to the Sign up page to be part of the BJJ Club for kids.

The Header / The welcome message

• The header shows Welcome to the BJJ Club for KIDS with 2 font awesome icon jumping of excitment !
• Below the Welcome to Brazilian Jiu-Jitsu there are 3 pictures of kids practing the martial arts and having fun !

About Brazilian Jiu-Jitsu (BJJ)

• About us explain to the readers about the BJJ and the benefits this could bring to the kids
• This section shows the importance of the self defense martial arts for the little ones

The Signup Form

• The sign up section has a form to collect details from parents so they can sign up to the Coding Club
• The form collects child's name , parent's name , full name and email address.
• The sign up form is a valuable to the user as it fives them the ability to sign up to join the BJJ Club for kids

The Location section

• In the sign up page you can find a link to the google maps showing where the BJJ Club for kids is located

Tecnologies used

HTML5

CSS3

Frameworks, Libraries & Programs Used

Git pod

• To write the codes

Git

• For version control

Github

• Deployment of the website and storing the files online.

Am I responsive

• Mockup picture for the README file.

Features Left to Implement

Update the Gallery with Additional Images: Add more images to the gallery to provide a richer visual experience and showcase more aspects of our Brazilian Jiu-Jitsu classes for kids.

Improve best practices on the sign-up page.

Testing

Manual testing

• I have tested and this page works in different browser: Chrome , Safari , Edge
• I confirm that this project is responsive, looks good and function on all standard screen sizes , using the devtools device toolbar.

Bugs

• When I deployed my project to the Git hub pages , I have found that my website was only working with the html codes, my css wasn't connecting to the correct file
• I found that when I deployed the project I had used absolute file paths in my code.

• Removing the starting / fixed the problem.

Validation Results

The W3C Markup Validator

W3C CSS Validator

Lighthouse Report

Home

Gallery

Sign up

Deployment and local development

GitHub Pages

GitHub Pages used to deploy live version of the website.

Log in to GitHub and locate https://github.com/jarlon13/bjjkids

At the top of the Repository(not the main navigation) locate "Settings" button on the menu.

Scroll down the Settings page until you locate "GitHub Pages".

Under "Source", click the dropdown menu "None" and select "Main" and click "Save".

The page will automatically refresh.

Scroll back to locate the now-published site https://jarlon13.github.io/bjjkids/ in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the repository, we make a copy of the original repository on our GitHub account to view and change without affecting the original repository by using these steps:

Log in to GitHub and locate [ GitHub Repository bjjkids ] https://github.com/jarlon13/bjjkids

At the top of the Repository(under the main navigation) locate "Fork" button.

Now you should have a copy of the original repository in your GitHub account.

Credits

Understanding the concept of flexbox CSS-TRICKS

To find and try different tags W3SCHOOLS

Gracie barra BJJ Gym google maps locations Graciebarra

Source for high-quality visuals and images. Unsplash

The README template provided by Code Institute (template) ci-readme-template

Acknowledgements

I would like to express my gratitude to my mentor, Mitko Bachvarov, for his invaluable feedback during the tutor session, as well as for the helpful links and suggestions on how to improve my webpage.