Athlone BJJ School

The web application of one-page website about local Brazilian jiu-jitsu school. The page has 5 sections that inform a user about the school and its times that they are opened, and location. Foe user that don't know about BJJ benefits of the sort there is some informational sections. And this school offers the first lesson free booking options at the landing page.

Athlone BJJ School

UX

The user is greeted with a full-screen landing page that has the menu bar at the top and a school logo with some quote about the BJJ. This is where users can click on the book button to sing up for the free first lesson. The Modal is used to pup up the booking form. The buttons have animation so they good UX when the user hovers or clicks on them. The page is constructed in the way that user can scroll thru all page section by section or can click on menu links to jump to the selected section of the page. This website is for users that are new to the sport of Jui-jits and for those who are familiar with it. If users are not familiar with the sport and why the BJJ is good for them, they can use a menu bar to navigate to different sections of the page or scroll down to find out more. They can then book the first lesson to try out the BJJ. For the users that are already training, but looking for a new school to join there are directions and map of school or contact form to get in touch.

• As a user that wants to see class timetable can click on about link and find out more about school and its location.
• As a user that wants to try a BJJ, he can click and fill in the free first lesson form.
• As a user that wants to know more about the BJJ, he can click about BJJ link and read or watch a video about the sport.
• As a user that wants to get in touch with the school, he can do so by clicking a contact link and fill in the form.

Page diagram on whiteboard

Features

• The landing page has a sticky menu bar at the top and Modal pop up form. The background image will cover all device screen height.
• Next 3 sections of the page have 3 column design with text or iFrame boxes.
• Contact us section have a column with form and its attributes and validation rules.

Existing Features

• Book button feature on landing page allows a user to book a free first lesson, by fill in a Modal pop up form.
• Contact form at bottom of the page allows the user to contact with the school, by filling in the contact form and clicking send.

Features Left to Implement

• Show full text without "reading more" button when columns are stacked on top of each other.

Technologies Used

1. Languages

   • HTML,
   • CSS,
   • JavaScript

2. Bootstrap

   • The bootstrap was used to shape the page, rows and columns, as well to add elements to page link nav bar and buttons, and some icons.

3. Cloud9 IDE

   • Was used to develop the project.

4. GitHub

   • Used to host the website and upload repository

5. CSS matic

   • The shadow around all page was generated by using this CSS tool.

Testing

• Browser
  • The page was tested using Chrome and Firefox browsers. The goal of this test was to make sure the fonts are loading on both of the browsers and the animations are the same as well.
  • The version of the chrome is - 70.0.3538.77 official Build
  • The version of Firefox is - 63.0.1 Firefox Quantum
  • The HTML and CSS code was validated by W3C
  • The website was tested for responsive on different screen sizes. By resizing the browser window to a specific breakpoint the expected result was tested, columns stock top on each other at 767px width screen size.
• User Stories

1. Lessons timetable:

   1. Go to the "About " section of the page.
   2. Fined timetable in the middle column.

2. Book free lesson:

   1. Click Book button on the landing page.
   2. Fill in the mane and email fields.
   3. Click Book button.

3. Find out more about BJJ:

   1. Go to the "About BJJ" section of the page.
   2. Fined 3 column section page with video text and images showing how the sport looks like.

4. Contact form:

   1. Go to the "Contact" section of the page.
   2. Try to submit the empty form and verify that an error message about the required fields appears
   3. Try to submit the form with an invalid email address and verify that a relevant error message appears
   4. Try to submit the form with all inputs valid.

Deployment

Creating a repository on a local git in Cloud9 and one external in the GitHub.

1. Using the terminal in cloud9 with command 'git init' to create a local repository.
2. Created a new repository on the GitHub website and push local repository to the GitHub with the command 'git push'.
3. In GitHub, I created a GitHub Pages to host my project page from a GitHub repository.

Content

• Text for History of BJJ was copied from the Shen Wu History of Brazilian Jiu Jitsu.
• Some parts of Why BJJ was copied from the Examined Existence article The 8 Benefits of Doing Jiu-Jitsu and Judo

Media

• The foto of the professor is from my personal collection.
• The other photos that are used in the site were obtained from google picture search with the licence for reuse with modifications.